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

For my alternative version of the bar graph, I am using South of Market's rental price for one bedroom units. I had to transform my data such that it was compatible for d3.

<!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 {
        opacity: 0.9;
        stroke: none;
        fill: steelblue;
      }
    </style>

var data2 = [];
        x_vals.forEach(function(x) {
          var price = csv[x];
          var diction = {};
          diction['x_lab'] = x;
          diction['y_lab'] = price;

data2.push(diction);
          });

console.log(data2);

draw(data2);
      };

function draw(data2) {
        "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 = 10;
        // specify the radius of our circles and the
        // column we want to plot

// Append the title for the graph
        d3.select("body")
          .append("h2")
          .text("South of Market Monthly Pricing\nfor One Bedrooms")
          .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 + ")");

// bind our data to svg rects for the bar plot
        svg.selectAll(".bar")
          .data(data2)
          .enter()
          .append("rect")
          .attr('class', 'bar')
              // maximum price for rent

var max_y = d3.max(data2, function(d){
          return +d.y_lab; });

//console.log(max_y);

// get min/max dates

var time_extent = d3.extent(data2, function(d){
          return format.parse(d.x_lab);
        });

// Create x-axis scale mapping dates -> pixels
        var time_scale = d3.time.scale()
                            .range([0, width])
                            .domain(time_extent);

// Create y-axis scale mapping price -> pixels
        var measure_scale = d3.scale.linear()
                              .range([height, 0])
                              .domain([0, 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("%b %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("Rent Price")
                        .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('x', function(d) {
            return time_scale(format.parse(d.x_lab));
          })
          .attr('width', function(d) {
            return width / data2.length - barPadding;
          })
          .attr('y', function(d) {
            return measure_scale(+d.y_lab);
          })
          .attr('height', function(d) {
            return height - measure_scale(+d.y_lab);
          });

}
      </script>
  </head>
  <body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js