jaclyncnguyen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.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 {
        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-%m");
      function format_data(csv) {
        csv = csv[0];
        var x_vals = Object.keys(csv);
        console.log(csv);

        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
        // http://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>


    <script type="text/javascript">
d3.csv('median_price_1bed.csv', draw)
    </script>
  </body>
</html>

## median_price_1bed.csv

          
            2012-01
            2012-02
            2012-03
            2012-04
            2012-05
            2012-06
            2012-07
            2012-08
            2012-09
            2012-10
            2012-11
            2012-12
            2013-01
            2013-02
            2013-03
            2013-04
            2013-05
            2013-06
            2013-07
            2013-08
            2013-09
            2013-10
            2013-11
            2013-12
            2014-01
            2014-02
            2014-03
            2014-04
            2014-05
            2014-06
            2014-07
            2014-08
            2014-09
            2014-10
            2014-11
            2014-12
            2015-01
            2015-02
            2015-03
            2015-04
            2015-05
            2015-06
            2015-07
            2015-08
            2015-09
            2015-10
            2015-11
            2015-12
            2016-01
            2016-02

            
              2963
              2795
              2795
              2825
              3071.5
              3000
              3078
              3232.5
              3200
              3083
              2987
              2990
              2955
              3132.5
              3232
              2951
              3292.5
              3297.5
              3395
              3220.5
              3165
              3190
              3200
              3315
              3345
              3414
              3417
              3500
              3400
              3449
              3455
              3465
              3425
              3605
              3707.5
              3640
              3617
              3795
              3645
              3650
              3810
              3839.5
              3797.5
              3746
              3725
              3600
              3592.5
              3565
              3636
              3671.5
	<!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>

	<script type="text/javascript">
	// https://github.com/mbostock/d3/wiki/Time-Formatting
	format = d3.time.format("%Y-%m");
	function format_data(csv) {
	csv = csv[0];
	var x_vals = Object.keys(csv);
	console.log(csv);

	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
	// http://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>


	<script type="text/javascript">
	d3.csv('median_price_1bed.csv', draw)
	</script>
	</body>
	</html>
	2012-01	2012-02	2012-03	2012-04	2012-05	2012-06	2012-07	2012-08	2012-09	2012-10	2012-11	2012-12	2013-01	2013-02	2013-03	2013-04	2013-05	2013-06	2013-07	2013-08	2013-09	2013-10	2013-11	2013-12	2014-01	2014-02	2014-03	2014-04	2014-05	2014-06	2014-07	2014-08	2014-09	2014-10	2014-11	2014-12	2015-01	2015-02	2015-03	2015-04	2015-05	2015-06	2015-07	2015-08	2015-09	2015-10	2015-11	2015-12	2016-01	2016-02
	2963	2795	2795	2825	3071.5	3000	3078	3232.5	3200	3083	2987	2990	2955	3132.5	3232	2951	3292.5	3297.5	3395	3220.5	3165	3190	3200	3315	3345	3414	3417	3500	3400	3449	3455	3465	3425	3605	3707.5	3640	3617	3795	3645	3650	3810	3839.5	3797.5	3746	3725	3600	3592.5	3565	3636	3671.5