dropofwill

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

dropofwill

/* IE 6> */

.cf {
	*zoom: 1;
	
	&:before,
	&:after {
		content: "";
		display: table;
	}

dropofwill

@function strip-unit($num) {
	@if unitless( $num ) != true {
		@return $num / ($num * 0 + 1);
	}
	@else {
		@return $num;
	}
}

// Shortcut for scaling elements to an aspect ratio, useful for responsive background images

dropofwill

// Set this to your root element's px size
$base_px_size: 16;


@function strip-unit($num) {
	@if unitless( $num ) != true {
		@return $num / ($num * 0 + 1);
	}
	@else {
		@return $num;