The data is from data.okfn.org.
The files are comma separated with headers with each column representing a given neighborhood in SF:
| Source | Year | Mean |
|---|---|---|
| GCAG | 2015 | 0.89 |
| GISTEMP | 2015 | 0.86 |
| GCAG | 2014 | 0.74 |
| ... | ... | ... |
Visit /pollardj/57b38a203d506eec565160d2feff7588 to see the chart rendered.
xxxxxxxxxx<html><head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script> <style> body { font-family: futura; } h2.title { color: black; text-align: center; } .axis { font-family: arial; font-size: 0.7em; } text { fill: black; stroke: none; } .label { font-size: 2em; } path { fill: none; stroke: black; stroke-width: 2px; } .tick { fill: none; stroke: black; } .bar--positive { opacity: 0.85; stroke: none; fill: orangered; } .bar--negative { opacity: 0.85; stroke: none; fill: turquoise; }/* .bar { opacity: 0.9; stroke: none; fill: steelblue; }*/ </style> <script type="text/javascript"> // https://github.com/mbostock/d3/wiki/Time-Formatting format = d3.time.format("%Y"); function draw(data) { "use strict"; debugger; // set margins according to Mike Bostock's margin conventions // https://bl.ocks.org/mbostock/3019563 var margin = {top: 25, right: 40, bottom: 100, left: 75}; // set height and width of chart var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var barPadding = 1; // column we want to plot var field = 'Mean'; var src = 'Source'; // Append the title for the graph // d3.select("body") // .append("h2") // .text("Global Temperature Anomolies per Year 1880-2015") // .attr('class', 'title'); // append the SVG tag with height and width to accommodate for margins var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append('g') .attr('class','chart') .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // remove missing values if they exist data = data.filter(function(d) { return d[src] == 'GCAG'; }); // bind our data to svg rects for the bar plot svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr('class', 'bar') //console.log(data) svg.append('text') .attr('x', (width / 2)) .attr('y', margin.top / 2) .attr('text-anchor', 'middle') .style('font-size', '30px') .text('Global Temperature Anomolies per Year 1880-2015') // maximum temp anomaly var max_y = d3.max(data, function(d) { return +d[field]; }); // minimum temp anomaly var min_y = d3.min(data, function(d) { return +d[field]; }); // get min/max years var time_extent = d3.extent(data, function(d){ return format.parse(d['Year']); }); // Create x-axis scale mapping years -> pixels var time_scale = d3.time.scale() .range([0, width]) .domain(time_extent); // Create y-axis scale mapping temp -> pixels var measure_scale = d3.scale.linear() .range([height, 0]) .domain([min_y, max_y]); // Create D3 axis object from time_scale for the x-axis var time_axis = d3.svg.axis() .scale(time_scale) .tickFormat(d3.time.format("%Y")); // Create D3 axis object from measure_scale for the y-axis var measure_axis = d3.svg.axis() .scale(measure_scale) .orient("left"); // Append SVG to page corresponding to the D3 x-axis svg.append('g') .attr('class', 'x axis') .attr('transform', "translate(0," + height + ")") .call(time_axis); // Append SVG to page corresponding to the D3 y-axis svg.append('g') .attr('class', 'y axis') .call(measure_axis); // add label to y-axis var y_label = d3.select(".y.axis") .append("text") .attr('class', 'label') .text("Temp Anomaly (Celsius)") .style('font-size', '1.2em') .attr("transform", "rotate(-90)"); // center y axis label y_label.attr("x", -(height / 2)).attr('y', -40) .style("text-anchor", "middle"); // based on the data bound to each svg rect, // change its x, y, width, height accordingly d3.selectAll('.bar') .attr("class", function(d) { return "bar bar--" + (d['Mean'] < 0 ? "negative" : "positive"); }) .attr('x', function(d) { return time_scale(format.parse(d['Year'])); }) .attr('width', function(d) { return width / data.length - barPadding; }) .attr('y', function(d) { return measure_scale(Math.max(0, d['Mean'])); }) .attr('height', function(d) { return Math.abs(measure_scale(d['Mean']) - measure_scale(0)); }) }; </script> </head> <body> <script type="text/javascript"> // load our data file asynchronously and pass the data // to the draw function once it is loaded. d3.csv("data.csv", draw); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js