xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Cambridge Yearly Development by Neighborhood</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; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } path:hover { stroke: orange; stroke-width: 4; } </style> </head> <body> <h1>Cambridge Yearly Development by Neighborhood</h1> <p>Number of residential units built in Cambridge since 1977, by neighborhood. 2015 numbers include all projected future units.</p> <p>Sources: <a href="https://data.cambridgema.gov/Planning/Development-Log-Current-Edition/wjwg-93qh">Current</a> and <a href="https://data.cambridgema.gov/Planning/Development-Log-Historical-Projects/a5ud-8kjv">historical</a> data from <a href="https://data.cambridgema.gov">Cambridge Open Data Portal</a>. <script type="text/javascript"> //Dimensions and padding var w = 800; var h = 600; var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left //Set up scales var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //Configure axis generators var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15) .tickFormat(d3.format()); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //Configure line generator var line = d3.svg.line() .x(function(d) { return xScale(d.Year); }) .y(function(d) { return yScale(d.Units); }); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var years = ["1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", '2011', '2012', '2013', '2014', '2015']; //Load data d3.json("Development_Log_Summary2.json", function(data) { //Uncomment to log the original data to the console console.log(data); //Set scale domains xScale.domain([ d3.min(years, function(d) { return +d; }), d3.max(years, function(d) { return +d; }) ]); yScale.domain([ 1500, //d3.max(data, // function(d) { // return d3.max(d.data, function(dd) { // return +dd.Units; // }); // }), 0 ]); //Make a group for each neighborhood var groups = svg.selectAll("g") .data(data) .enter() .append("g") .attr('class', 'lineg'); //Append a title with the name (so we get easy tooltips) groups.append("title") .text(function(d) { return d.Neighborhood[0]; }); //Within each group, create a new line/path, //binding just the units data to each one groups.selectAll("path") .data(function(d) { return [ d.data ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 3); // Set up a mouseover to sort the groups and show/hide the E Cambridge callout groups.on("mouseover", function(selected) { d3.selectAll('.lineg').sort(function(a, b) { if (a.Neighborhood[0] === selected.Neighborhood[0]) { return 1; } else { if (b.Neighborhood[0] === selected.Neighborhood[0]) { return -1; } else { return 0; } } }); d3.select('.callout') .attr('visibility', selected.Neighborhood[0]=='East Cambridge' ? 'visible' : 'hidden'); }); groups.on('mouseout', function() {d3.select('.callout').attr('visibility', 'hidden')}); // Add a text callout for East Cambridge 2015 svg.append('text') .attr({ x: xScale(2013.5), y: yScale(1500), 'text-anchor': 'end', fill: 'orange', transform: "rotate(-86.5 "+ xScale(2013.5)+ ","+ yScale(1500)+ ")", visibility: 'hidden', 'class': 'callout' }) .text('East Cambridge 2015 - 3411 units -->'); //Axes svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3]) + ",0)") .call(yAxis); }); //End data load function </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js