D3OG

All examples By author By category About

maggie-lee

Full window Github gist

transition trial

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

body {
	 font-family: Arial, sans-serif;
	 font-size: 12px;
}

#title {
	font-size: 24px;
}

.axis {
	font-size: 10px;
}

.axis path {
	fill: none;
	stroke: none;
}

.axis line {
	stroke: none;

}

.line {
	stroke-width: 1.5px;
	fill: none;
	opacity: 0.3;
}

.texty {
	font-size: 16px;
	text-transform: lowercase;
	/*font-weight: bold;*/
	
}

</style>
<body>
<div id="title">Georgia unemployment rate</div>
<div id="subtitle">By county & region, 2004 through July 2014
<p>Where's Aug & September, you ask? Well, provisional data is not included.</div>
<div id="chart">
  <div id="legendHolder">
  	<p id="menu">
  	Choose a county:<br>
  	<select id="selections"></select>
  	</p>
  	Or choose a region:<br>
  	<p id="group_menu">
  	<select id="group_selections">
  		<option id="a01">1 Northwest Georgia</option>
  		<option id="a02">2 Georgia Mountains</option>
  		<option id="a03">3 - 7 Metro Atlanta</option>
  		<option id="a08">8 West Central</option>
		<option id="a09">9 Northeast Georgia</option>
  		<option id="a11">10 & 11 Bibb & neighbors</option>
  		<option id="a12">12 Richmond-Burke</option>
  		<option id="a13">13 East Central</option>
		<option id="a14">14 Lower Chattahoochee</option>
		<option id="a15">15 Middle Flint</option>
		<option id="a16">16 Central Georgia Altamaha</option>
		<option id="a17">17 Southwest Georgia</option>
		<option id="a18">18 South Georgia</option>
		<option id="a19">19 Southeast Georgia</option>
		<option id="a20">20 Coastal Georgia</option>
		<option id="blank"></option>
  	</select><br>

</div>
</div>

<div id="footer">
<br><br>
Source: <a href="https://www.bls.gov/lau/" target="_blank">Bureau of Labor Statistics Local Area Unemployment Statistics</a><br>
<a href="https://www.dropbox.com/s/wusp4h6tpv3ifum/SeriesReport-20141017121942.xlsx?dl=0" target="_blank">Raw data as accessed Oct. 17</a><br>
Not seasonally adjusted.  <a href="https://www.bls.gov/lau/lauseas.htm" target="_blank">Apparently BLS does not seasonal-adjust down to the county level.</a><br>
These "regions" are modified "Workforce Investment Act" regions. I grouped them that way because it was easy to find a spreadsheet to map county name to WIA region. If I'd have had to group them by hand by some other method, I'd have been very prone to making a mistake. And it would be tedious.

</div>

<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

// ********* NOTES:
// WIAs: https://www.dol.state.ga.us/pdf/wia/wia_administrators.pdf
// *************

// ********* DECLARE VARs
var margin = {top: 40, bottom: 40, left: 50, right: 110},
	width = 1000-margin.left-margin.right,
    height = 500-margin.top-margin.bottom;

var x = d3.time.scale()
	.range([0, width]);

var y = d3.scale.linear()
	.domain([0, 30])
	.range([height, 0]);

var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(function (d) {return d3.time.format('%m/%y')(new Date(d)); }) // formate the javascript date object into just month-year
	.ticks(64)
	.orient("bottom");

var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width+margin.left+margin.right)
    .attr("height", height+margin.top+margin.bottom)
    .append("g")
    .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

var dateFormat = d3.time.format("%x").parse;

var line = d3.svg.line()
	.interpolate("basis")
	.x(function (d) {return x(d.date); })
	.y(function (d) {return y(d.rate) ; });

var flat_line = d3.svg.line()
	.interpolate("basis")
	.x(function (d, i) {return x(d.date); })
	.y(function (d) {return y(5) ; });

var div = d3.select("#chart").append("div")
	.attr("class", "tooltip");

var sel = d3.select("#selections").node();

var menu = d3.select("#menu select")
    .on("change", function (d) {
    	console.log("changed")
    	console.log(sel.options[sel.selectedIndex].value)
    	colorize(sel.options[sel.selectedIndex].value);
});

var group_sel = d3.select("#group_selections").node();

var group_menu = d3.select("#group_menu select")
	.property("value", 0)
	.on("change", function (d) {
		console.log("changed")
		console.log(group_sel.options[group_sel.selectedIndex].id)
		group_colorize(group_sel.options[group_sel.selectedIndex].id);
	})

//var fill = d3.scale.category20();

var fill = d3.scale.ordinal()
	.range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "DarkBlue", "DarkCyan", "DarkGreen", "DarkMagenta", "DarkSlateBlue", "black"]);

// stack csv into "record" form using pandas.
// then load it
d3.csv("stacked.csv", function (error, unemp) {

// wrassle the data into correct formats
	data = unemp.map( function (d) {
		return {
			county : d.county,
			date : dateFormat(d.date), // javascript date object
			rate : +d.rate  }; // number
	});

//set domain -- the extent of the dates
	x.domain(d3.extent(data, function (d) {return d.date; }));
	// nest by county. I want a line for each county.
	data = d3.nest().key(function (d) {return d.county;}).entries(data);

data.forEach(function (d) { // slice apart the county name from the 2-digit leading wia code
		d.wia = d.key.slice(0,2)
		d.key = d.key.slice(2,15)
		;})

menu.selectAll("option")
		.data(data)
		.enter().append("option")
		.text(function (d) {return d.key; });

function compare(a, b){
			if (a['values'][127]['rate'] > b['values'][127]['rate'])
				return -1;
			if (a['values'][127]['rate'] < b['values'][127]['rate'])
				return 1;
			return 0;
		}

data= (data.sort(compare));

svg.append("g")
	 	.attr("class", "x axis")
	 	.attr("transform", "translate(0," + height + ")")
	 	.call(xAxis)
	 	.selectAll("text")  
	 	.style("text-anchor", "end")
	 	.attr("transform", function (d) {return "rotate(-40)"; });

svg.append("g")
	 	.attr("class", "y axis")
	 	.call(yAxis);
	 	
	menu.property("value", 0);
	
function lineAnimate(selection) {  // selection must be paths
	console.log(selection)
	selection.transition().duration(1150).ease("linear")
	.attr("d", function (d) {return line(d.values);})
	.style("opacity", 1)
	.style("stroke", "red")
}

counties.append("path")
		.attr("class", function (d) {return d.key + " " + d.wia + " county" + " line";})
		.attr("id", function (d) {return "a" + d.wia;})
		.attr("d", function (d) {return flat_line(d.values); })
		.attr("stroke", "gray")
		.attr("stroke-width", "1px")
		.style("opacity", 0.0)

counties.selectAll("path.line")
		.call(lineAnimate)
		
	counties.append("text")
		.text(function (d) {return (d.key);})
		.attr("y", height)
		.style("opacity", 0)
		.attr("class", "texty")
		.attr("id", function (d) {return "a" + d.wia;})
	
;})

function colorize(county_name){
		//reset everything to gray & 0
		group_menu.property("value", 0)
		d3.selectAll(".texty").style("opacity", 0)
		d3.selectAll(".line").style("stroke", "gray").style("stroke-width", "1.5px").style("opacity", 0.1)
		// // then just turn one red
		d3.selectAll("." + county_name).transition().duration(500).style("stroke", "red").style("stroke-width", "2px").style("opacity", 1)
		d3.selectAll("." + county_name).select(".texty")
		.style("opacity", 1)
		.style("fill", "red")
		.style("stroke-width", "0.5px")
		.style("font-weight", "normal")
		.attr("x", width+ 10)
		.attr("y", function (d) {
			return (y(d['values'][127]['rate']))
		;})
;}

function group_colorize(wia_num){
		//reset all to gray, null, zero
		menu.property("value", 0)
		d3.selectAll(".line").style("stroke", "gray").style("stroke-width", "1.5px").style("opacity", 0.1)
		d3.selectAll(".texty").style("opacity", 0)
		// then hightlight the bundle
		d3.selectAll("path#" + wia_num) // select every path with the same wia and fill it with such color
			.style("stroke-width", "2.5px")
			.style("opacity", 1)
			.style("stroke", function (d, i) {return fill(i);});

d3.selectAll("text#" + wia_num)
			.style("opacity", 1)
			.style("fill", function (d, i) {return fill(i);})
			.attr("y", function (d, i) {return ((height*0.6)+(12*i)); })
			.attr("x", width+10)

;}

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http:// to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://

https://d3js.org/topojson.v1.min.js