Created
April 30, 2013 23:39
-
-
Save tomstove/5492740 to your computer and use it in GitHub Desktop.
Unemployment vs Median Income
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .dot { | |
| stroke: #000; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| padding: 4px; | |
| border: 2px solid #333; | |
| background-color: #cecece; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| //Define dimension variables | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| //Helper function for formatting population and income | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } | |
| //Define x, y, radius and color scale | |
| var xScale = d3.scale.linear() | |
| .range([0, width]); | |
| var yScale = d3.scale.linear() | |
| .range([height, 0]); | |
| var radiusScale = d3.scale.sqrt().domain([0, 5e7]).range([0, 20]); | |
| var colourScale = d3.scale.category10(); | |
| //Create x and y axes and assign their respective scales | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left"); | |
| //Create the SVG scatterplot | |
| 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 +")"); | |
| //Create and attach tooltip div to the #chart div | |
| var div = d3.select("#chart").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| //Load in data | |
| d3.json("states.json", function(data) { | |
| //Define domain for x and y scales | |
| xScale.domain(d3.extent(data.states, function(d) { return d.income; })).nice(); | |
| yScale.domain(d3.extent(data.states, function(d) { return d.unemprate; })).nice(); | |
| //Attach x and y axes to svg instance | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", -6) | |
| .style("text-anchor", "end") | |
| .text("median household income (dollars)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("unemployment rate (%)"); | |
| //Create a dot for each state and define r, x and y attributes | |
| var dot = svg.selectAll(".dot") | |
| .data(data.states) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "dot") | |
| .attr("r", function(d) { return radiusScale(d.population); }) | |
| .attr("cx", function(d) { return xScale(d.income); }) | |
| .attr("cy", function(d) { return yScale(d.unemprate); }); | |
| //Apply styling to dot, and call mouseover and mouseout | |
| dot .style("fill", function(d) { return colourScale(d.region); }) | |
| .on("mousemove", showTooltip) | |
| .on("mouseout", hideTooltip); | |
| //Function to show the tooltip | |
| function showTooltip(d) { | |
| var coord = d3.mouse(this); | |
| d3 .select(this) | |
| .style("stroke-width", 2); | |
| div .transition() | |
| .duration(100) | |
| .style("opacity", 1); | |
| div .html("<strong>" + d.name + "</strong><br/>" + "Income: $" + numberWithCommas(d.income) + "<br/>Unemployment: " + d.unemprate + "%" + "<br/>Population: " + numberWithCommas(d.population)) | |
| .style("left", coord[0] + 50 + "px") | |
| .style("top", coord[1] - 35 + "px"); | |
| } | |
| //Function to hide the tooltip | |
| function hideTooltip() { | |
| d3 .select(this) | |
| .style("stroke-width", 1); | |
| div .transition() | |
| .duration(100) | |
| .style("opacity", 0); | |
| } | |
| //Create the legend and attach it to svg element | |
| var legend = svg.selectAll(".legend") | |
| .data(colourScale.domain()) | |
| .enter() | |
| .append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(0," + i * 22 + ")"}); | |
| //Create and attach the colour squares | |
| legend.append("circle") | |
| .attr("cx", width - 9) | |
| .attr("cy", 9) | |
| .attr("r", 9) | |
| .style("fill", colourScale) | |
| .style("stroke", "#000"); | |
| //Create and attach the text for the colour squares | |
| legend.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "end") | |
| .text(function(d) { return d; }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { "states": [{"abbrev":"AL","name":"Alabama","unemprate":6.9,"income":41415,"population":4822023,"region":"south"}, | |
| {"abbrev":"AK","name":"Alaska","unemprate":6.7,"income":67825,"population":731449,"region":"west"}, | |
| {"abbrev":"AZ","name":"Arizona","unemprate":8.0,"income":46709,"population":6553255,"region":"west"}, | |
| {"abbrev":"AR","name":"Arkansas","unemprate":7.2,"income":38758,"population":2949131,"region":"south"}, | |
| {"abbrev":"CA","name":"California","unemprate":9.8,"income":57287,"population":38041430,"region":"west"}, | |
| {"abbrev":"CO","name":"Colorado","unemprate":7.3,"income":55387,"population":5187582,"region":"west"}, | |
| {"abbrev":"CT","name":"Connecticut","unemprate":8.1,"income":65753,"population":3590347,"region":"northeast"}, | |
| {"abbrev":"DE","name":"Delaware","unemprate":7.2,"income":58814,"population":917092,"region":"south"}, | |
| {"abbrev":"DC","name":"District of Columbia","unemprate":8.6,"income":63124,"population":632323,"region":"south"}, | |
| {"abbrev":"FL","name":"Florida","unemprate":7.8,"income":44299,"population":19317568,"region":"south"}, | |
| {"abbrev":"GA","name":"Georgia","unemprate":8.7,"income":46007,"population":9919945,"region":"south"}, | |
| {"abbrev":"HI","name":"Hawaii","unemprate":5.2,"income":61821,"population":1392313,"region":"west"}, | |
| {"abbrev":"ID","name":"Idaho","unemprate":6.3,"income":43314,"population":1595728,"region":"west"}, | |
| {"abbrev":"IL","name":"Illinois","unemprate":9.0,"income":53234,"population":12875255,"region":"midwest"}, | |
| {"abbrev":"IN","name":"Indiana","unemprate":8.6,"income":46438,"population":6537334,"region":"midwest"}, | |
| {"abbrev":"IA","name":"Iowa","unemprate":5.0,"income":49427,"population":3074186,"region":"midwest"}, | |
| {"abbrev":"KS","name":"Kansas","unemprate":5.5,"income":48964,"population":2885905,"region":"midwest"}, | |
| {"abbrev":"KY","name":"Kentucky","unemprate":7.9,"income":41141,"population":4380415,"region":"south"}, | |
| {"abbrev":"LA","name":"Louisiana","unemprate":5.9,"income":41734,"population":4601893,"region":"south"}, | |
| {"abbrev":"ME","name":"Maine","unemprate":7.3,"income":46033,"population":1329192,"region":"northeast"}, | |
| {"abbrev":"MD","name":"Maryland","unemprate":6.7,"income":70004,"population":5884563,"region":"south"}, | |
| {"abbrev":"MA","name":"Massachusettes","unemprate":6.7,"income":62859,"population":6646144,"region":"northeast"}, | |
| {"abbrev":"MI","name":"Michigan","unemprate":8.9,"income":45981,"population":9883360,"region":"midwest"}, | |
| {"abbrev":"MN","name":"Minnesota","unemprate":5.6,"income":56954,"population":5379139,"region":"midwest"}, | |
| {"abbrev":"MS","name":"Mississippi","unemprate":9.3,"income":36919,"population":2984926,"region":"south"}, | |
| {"abbrev":"MO","name":"Missouri","unemprate":6.5,"income":45247,"population":6021988,"region":"midwest"}, | |
| {"abbrev":"MT","name":"Montana","unemprate":5.7,"income":44222,"population":1005141,"region":"west"}, | |
| {"abbrev":"NE","name":"Nebraska","unemprate":3.8,"income":50296,"population":1855525,"region":"midwest"}, | |
| {"abbrev":"NV","name":"Nevada","unemprate":9.7,"income":48927,"population":2758931,"region":"west"}, | |
| {"abbrev":"NH","name":"New Hampshire","unemprate":5.8,"income":62647,"population":1320718,"region":"northeast"}, | |
| {"abbrev":"NJ","name":"New Jersey","unemprate":9.5,"income":67458,"population":8864590,"region":"northeast"}, | |
| {"abbrev":"NM","name":"New Mexico","unemprate":6.6,"income":41963,"population":2085538,"region":"west"}, | |
| {"abbrev":"NY","name":"New York","unemprate":8.4,"income":55246,"population":19570261,"region":"northeast"}, | |
| {"abbrev":"NC","name":"North Carolina","unemprate":9.5,"income":43916,"population":9752073,"region":"south"}, | |
| {"abbrev":"ND","name":"North Dakota","unemprate":3.3,"income":51704,"population":699628,"region":"midwest"}, | |
| {"abbrev":"OH","name":"Ohio","unemprate":7.0,"income":45749,"population":11544225,"region":"midwest"}, | |
| {"abbrev":"OK","name":"Oklahoma","unemprate":5.1,"income":43225,"population":3814820,"region":"south"}, | |
| {"abbrev":"OR","name":"Oregon","unemprate":8.4,"income":46816,"population":3899353,"region":"west"}, | |
| {"abbrev":"PA","name":"Pennsylvania","unemprate":8.2,"income":50228,"population":12763536,"region":"northeast"}, | |
| {"abbrev":"RI","name":"Rhode Island","unemprate":9.8,"income":53636,"population":1050292,"region":"northeast"}, | |
| {"abbrev":"SC","name":"South Carolina","unemprate":8.7,"income":42367,"population":4723723,"region":"south"}, | |
| {"abbrev":"SD","name":"South Dakota","unemprate":4.4,"income":48321,"population":833354,"region":"midwest"}, | |
| {"abbrev":"TN","name":"Tennessee","unemprate":7.7,"income":41693,"population":6456243,"region":"south"}, | |
| {"abbrev":"TX","name":"Texas","unemprate":6.3,"income":49392,"population":26059203,"region":"south"}, | |
| {"abbrev":"UT","name":"Utah","unemprate":5.4,"income":55869,"population":2855287,"region":"west"}, | |
| {"abbrev":"VT","name":"Vermont","unemprate":4.7,"income":52776,"population":626011,"region":"northeast"}, | |
| {"abbrev":"VA","name":"Virginia","unemprate":5.6,"income":61882,"population":8185867,"region":"south"}, | |
| {"abbrev":"WA","name":"Washington","unemprate":7.5,"income":56835,"population":6897012,"region":"west"}, | |
| {"abbrev":"WV","name":"West Virginia","unemprate":7.4,"income":38482,"population":1855413,"region":"south"}, | |
| {"abbrev":"WI","name":"Wisconsin","unemprate":7.0,"income":50395,"population":5726398,"region":"midwest"}, | |
| {"abbrev":"WY","name":"Wyoming","unemprate":4.9,"income":56322,"population":576412,"region":"west"}] } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment