xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Chicago Economic Hardship Index and Per Capita Income by Community</title> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-family: Arial; font-size: 24px; margin: 0; } p { font-size: 14px; color: #9C9EA0; margin: 10px 0px 0px 0px; } svg { background-color: white; } /*not working...figure out next goround*/ circle:hover { fill: orange; } /*style for axis*/ .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .y.axis path, .y.axis line { opacity: 0 } .x.axis path, .x.axis line { opacity: 0 } .y.axis text { font-family: Arial; font-size: 11px; } .x.axis text { font-family: Arial; font-size: 11px; } </style> </head> <body> <h1> Chicago Economic Hardship Index and Per Capita Income by Community </h1> <p> This data is based on US Census estimates of socioeconomic indicators between 2008 and 2012. The economic hardship index is standardized on a 0 to 100 scale, with a higher score indicating more hardship. The full dataset can be found at <a href=https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-socioeconomic-indicators-in-C/kn9c-c2s2 target="_blank">the City of Chicago Data Portal</a>. </p> <script src="https://d3js.org/d3.v3.js"></script> <script type="text/javascript"> //height, width and padding variables, allowing for SVG size to change dynamically without //updates elsewhere in code if need be var w = 900 var h = 600 var padding = [ 30, 30, 75, 100 ]; //Top, right, bottom, left //scales SVG to w var. mapped to data below (range = SVG pixels. Domain = data) var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); //determines vertical position of circles, scaled to SVG height, with pixels rounded var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //create x-axis var var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); //places labels under axis //create y-axis var var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickFormat(function(d) { return "$" + d3.format("0,000")(d); }); //create SVG element and append to body var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load in contents of CSV file d3.csv("Selected Socioeconomic Indicators in Chicago from 2008-2012.csv", function(data) { /*//sort data in descending order based on hardshipIndex (need + to treat data as number instead of string) data.sort(function (a, b){ return d3.descending( +a.hardshipIndex, +b.hardshipIndex); });*/ //scales length of bars related to svg width and as a function of the data xScale.domain([ 0, d3.max(data, function(d) { return +d.hardshipIndex; }) ]); //console.log(data.map(function(d) { return d.community; } )); //scales bar position based on the data and returns community for scale label yScale.domain([d3.max(data, function(d) { return +d.perCapitaIncome; }), 0 ]); //create circles variable for bar chart var circles = svg.selectAll("circle") .data(data) .enter() .append("circle") //define circles attributes circles.attr("cx", function(d) { return xScale(d.hardshipIndex)}) //y position based on data order, number of data points .attr("cy", function (d,i) { return yScale(d.perCapitaIncome)}) //circle radius .attr("r", 0.1) .attr("fill", "purple") //quick tooltip for testing .append("title") .text(function(d){ return d.community + "'s Hardship Index is " + d.hardshipIndex + ", with a per capita income of $" + d3.format("0,000")(d.perCapitaIncome); }); circles.sort(function (a,b) { return d3.descending(+a.perCapitaIncome, +b.perCapitaIncome); }) .transition() .delay(function(d,i) { return i * 50; }) .duration(3000) .attr("r", 4); //append x-axis group to svg and place at bottom svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") .call(xAxis); //x-axis label svg.append("text") .attr("class", "x label") .style("text-anchor", "middle") .attr("x", w / 2) .attr("y", h - padding[2] + 50) .text("Economic Hardship Index") //append y-axis group to svg and place at left svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 10) + ",0)") .call(yAxis); //y-axis label svg.append("text") .attr("class", "y label") .style("text-anchor", "middle") .attr("dy", h / 5) .attr("transform", "translate(" + -padding[3] + "," + h/2 + ") rotate(270)") .text("Income per Capita"); //Log 'data' to the console, for verification. console.log(data); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js