D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
pietronencia
Full window
Github gist
How many businesses and employees per sector in San Francisco?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Distribution of San Francisco Businesses and Employees per Sector</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } h2 { font-size: 18px; margin: 0; } h3 { font-size: 10px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } circle:hover { fill: orange; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 9px; fill: black; } </style> </head> <body> <h1>How many businesses and employees per sector in San Francisco? </h1> <h3>Establishments of employees and business per Sector. Source: <a href="https://quickfacts.census.gov/qfd/states/06/06075.html">US Census</a>, 2014</h3><br> <p>It sure feels a lot more than that! 1 in 4 workers in San Francisco are employed in a scientific, technical, information or professional services</p> <script type="text/javascript"> //r and height var w = 1200; var h = 400; var barPadding = 7; var padding = [ 25, 15, 25, 40 ]; //Top, right, bottom, left var xScale = d3.scale.linear() .range([ 0, w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("SF_Business&IndustryWK5.csv",function(data) { //Create scale functions data.sort(function(a, b) { return d3.descending(+a.Establishments, +b.Establishments); }); xScale.domain([ 0, d3.max(data, function(d) { return +d.Establishments; }) ]) // .range([0, w]); yScale.domain([d3.max(data, function(d) { return +d.Employees; }), 0]); //Create Axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(8); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(8); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); circles.attr("cx", function(d) { return xScale(d.Establishments)+padding[3]; }) .attr("cy", function(d, i) { return yScale(d.Employees); }) .attr("r", 10) .attr("fill", "blue") .append("title") .text(function(d) { return "The " +d.Sector + " sector has " + Math.round(d.Establishments) + " businesses and employs " + Math.round(d.Employees) + " workers."; }); circles.sort(function(a, b) { return d3.ascending(+a.Employees, +b.Employees); }) .transition() .delay(function(d, i) { return i * 50; }) .duration(2000) .attr("r", 2.5); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js