National Day of Civic Hacking: Learning D3.js (part 1)

Part 1 of Project 1 for MSAN 622 Data Viz at USF

The Data

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.

<!DOCTYPE html>
<!DOCTYPE html>
<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>

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