What is D3.js?

A javascript framework that gives the user the ability to visualize data programatically with scalable vector graphics. It's available via direct download or via CDN.
D3.js page

CDN

+ Have access to the latest content

+ Don't have the overhead of storing the actual code on your server

+ Easy to include in your code

- Can't access if the server/network is down

- Have to rewrite code when major releases come out

- Doesn't work with all browsers

Direct Download

+ The code is available whenever, wherever

+ Don't have to rewrite code, functions ALWAYS available

+ Don't have to use network traffic to get access to functions

- Storage committment on the part of the web page owner

- Don't have access to the latest code

What data will we be looking at?

The United States Census department collects all types of information about the population of the United States. Numbers of populations, ages, people living or leaving each state, deaths, etc. In order to access the datasets, a developer will have to sign up for an API key, which validates that the user is who they say they are and allows them access into the datasets. We'll be looking specifically at population, births, deaths and net international migration by state.
US Census API

Why worry about visualizing data?

Data is a huge part of the world. There's data recorded about pretty much everything from hourly temperature to the migration of gophers in Boulder Colorado. All this information just exists. It needs to be contextualized and categorized and displayed in a way that allows us to use the data to view and understand trends in data.

The Code

Explanation

D3.js gives us a lot of functions to manipulate SVG elements with shapes and lines. This gives us the ability to model data however we choose. Bar charts, heat maps, line graphs, and pie charts can be created programmatically on most data sets.

A key feature of D3.js is the ability to select elements that don't even exist on the DOM yet. As we work through our data, we'll make use of this feature to set aside elements for data that hasn't yet been processed. When we use the .enter() function, the elements will appear on the DOM where we've told them to. The .data() function allows us to inject data into the elements. Data injected in this way is in the form of a JSON array. The function will add elements for every and can use that particular data point's attributes/values for the length of bars/lines, or the size of circles... all giving us the ability to create charts and visualize data.