Data Visualization with D3

I haven’t been able to talk much about real estate lately.. perhaps it’s because I have been sooo busy with MSIM (click to see program description in case you are wondering what it is).  I want to show off some of the course assignments I have done lately.

Crime Vs. Economy

My teammate and I made this visualization with D3:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

We used GeoJson for a US map with state boundaries, and the blue-purple shows the median household income in that state. The lighter the purple, the lower the median income. The yellow circle shows the number of violent crime per 100,000 people in that state. The bigger the circle, the more crime incident per 100,000 people. You can change year on the slider bar. Data range is 2007 to 2013.  If you hover your mouse over a state, detail data for crime and income will show up on the bottom right.

This is my very first javascript project and not to mention D3. Never heard of it before this class. A great example of fancy D3 would be New York Time’s Upshot blog. It is so cool that I wish one day I would be this good.

Below is the interactive map I made 🙂

Visualization is here:  http://students.washington.edu/feig/ 

To download all the files (html, css, json, csv) to try it yourself, go to http://bit.ly/17eeV1U

I also shared it on github: https://github.com/rosefei/d3.git 

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s