This chart uses data from Zillow Real Estate Research that combines data on home valuations and sales to get an accurate view of housing cost overtime. In this particular example I'm visualizing the top 10 most populated metro areas and the United States average.
The data from Zillow had the dates as columns, this made creating the D3 data objects a little bit more awkward than I wanted to deal with, so I wrote a simple ruby script to transpose the data to a more convenient form. I've included the original, transposed, and script for posterities sake.
Default label is on the United States average, hover over the other lines to see what cities they represent.
- d3.csv to parse the data
- d3.time.format to parse dates
- d3.time.scale for the x-axis
- d3.scale.linear for the y-axis
- d3.scale.category10 to generate the colors
- d3.extent, d3.min, and d3.max to compute the relevant domains
- d3.svg.axis to render the axes
- d3.svg.line to render the lines
Some interesting aspects of the data was just how expensive California is, even compared to places like DC and NYC. Also it's interesting to see which cities were most effected by the current spike and the one around 2006.