wanyanxie · April 15, 2016 07:10
diff --git a/cities.csv b/cities.csv
diff --git a/data.csv b/data.csv
diff --git a/index.html b/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 draw(data) {
          "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 = 1;

          // specify the radius of our circles and the
          // column we want to plot
          var field = 'CA-San Francisco';
        
          // Append the title for the graph
          d3.select("body")
              .append("h2")
              .text("House price for San Francisco")
              .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
          data = data.filter(function(d) {
            return d[field];
          });

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

            // maximum price for rent
            var max_y = d3.max(data, function(d) {
                return +d[field];
            });

            // get min/max dates
            var time_extent = d3.extent(data, function(d){
                return format.parse(d['month']);
            });

            // 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("Price (dollar/sq-ft)")
            		.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['month']));
                })
                .attr('width', function(d) {
                    return width / data.length - barPadding;
                })
                .attr('y', function(d) {
                    return measure_scale(+d[field]);
                })
                .attr('height', function(d) {
                    return height - measure_scale(+d[field]);
                });
        };
      </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("cities.csv", draw);
    </script>
  </body>
 </html>
month	CA-Los Angeles	CA-San Francisco	CO-Denver
1987-01	59.33	46.61	50.2
1987-02	59.65	46.87	49.96
1987-03	59.99	47.32	50.15
1987-04	60.81	47.69	50.55
1987-05	61.67	48.31	50.63
1987-06	62.71	48.83	50.5
1987-07	63.66	49.49	50.28
1987-08	64.56	49.94	50.38
1987-09	65.38	50.69	50.18
1987-10	66.2	51.33	50.38
1987-11	66.94	51.8	49.89
1987-12	67.91	52.03	49.86
1988-01	68.66	52.24	49.35
1988-02	69.36	52.64	49.27
1988-03	70.14	53.19	48.85
1988-04	70.83	54.19	48.58
1988-05	72.03	56.09	48.22
1988-06	74.35	58.22	48.27
1988-07	77.22	58.7	48.33
1988-08	79.27	59	48.52
1988-09	81.23	59.5	48.37
1988-10	82.94	60.37	48.27
1988-11	84.69	61.31	47.86
1988-12	85.97	62.2	47.36
1989-01	87.3	62.66	47.23
1989-02	88.28	63.32	47.21
1989-03	90.34	64.64	47.33
1989-04	92.11	66.27	47.33
1989-05	93.98	67.77	47.49
1989-06	95.55	69.26	47.73
1989-07	96.71	70.27	47.64
1989-08	97.51	71.36	47.78
1989-09	97.99	72.31	47.8
1989-10	98.55	72.95	48.12
1989-11	99.29	73.25	48.18
1989-12	99.88	73.02	48.06
1990-01	100.23	72.87	47.98
1990-02	100.15	72.95	48.08
1990-03	100.02	73.5	48.29
1990-04	99.99	74.57	48.4
1990-05	99.79	75.12	48.4
1990-06	100.24	75.15	48.75
1990-07	100.05	74.81	48.84
1990-08	99.99	74.45	48.99
1990-09	99.26	74.24	48.98
1990-10	98.66	73.44	48.86
1990-11	97.36	72.58	48.78
1990-12	96.54	71.47	48.53
1991-01	95.28	71.17	48.67
1991-02	94.12	70.27	48.68
1991-03	92.83	69.56	48.85
1991-04	92.83	69.46	49.2
1991-05	93.37	70.13	49.51
1991-06	94.25	70.83	50.09
1991-07	94.85	71.39	50.55
1991-08	95.21	71.52	50.86
1991-09	94.92	71.55	50.9
1991-10	94.51	71.21	50.99
1991-11	93.67	70.69	51.03
1991-12	93.01	70.05	51.08
1992-01	92.45	69.67	51.25
1992-02	91.97	69.48	51.94
1992-03	90.97	69.17	52.83
1992-04	90.58	69.26	53.48
1992-05	90.4	69.86	53.79
1992-06	90.41	70.02	54.18
1992-07	90.06	70	54.4
1992-08	89.86	69.64	54.77
1992-09	89.11	69.51	54.97
1992-10	87.95	69.28	54.96
1992-11	86.8	68.85	55.21
1992-12	85.6	68.21	55.35
1993-01	84.88	67.77	55.83
1993-02	84.09	67.44	56.05
1993-03	82.76	67.09	56.68
1993-04	82.05	67.59	57.05
1993-05	81.67	67.9	57.59
1993-06	81.69	67.99	58.42
1993-07	81.11	67.65	59.1
1993-08	80.33	67.63	59.93
1993-09	79.77	67.5	60.42
1993-10	78.92	67.18	60.99
1993-11	78.36	66.77	61.38
1993-12	77.3	66.27	62.01
1994-01	77	65.98	62.49
1994-02	76.86	65.79	63.04
1994-03	76.47	66.37	63.61
1994-04	76.44	67.05	64.44
1994-05	76.39	67.7	65.09
1994-06	76.72	68.15	65.86
1994-07	76.95	68.38	66.3
1994-08	77.25	68.4	66.71
1994-09	77.13	68.21	66.81
1994-10	77.07	68.17	67.03
1994-11	76.59	68.04	67.16
1994-12	76.07	67.93	67.4
1995-01	75.91	67.73	67.59
1995-02	75.36	67.4	67.82
1995-03	74.99	66.79	68.22
1995-04	74.78	67.08	68.6
1995-05	74.92	67.31	69.2
1995-06	74.88	67.5	69.63
1995-07	75.06	67.72	70.18
1995-08	75.11	67.78	70.58
1995-09	74.87	67.76	71.02
1995-10	74.6	67.3	71.26
1995-11	74.13	66.8	71.38
1995-12	73.6	66.43	71.5
1996-01	73.39	66.15	71.34
1996-02	73.1	65.97	71.43
1996-03	73.07	65.92	71.9
1996-04	73.35	66.44	72.72
1996-05	73.88	67.05	73.36
1996-06	74.52	67.67	73.58
1996-07	74.71	68.02	73.91
1996-08	74.9	68.35	73.97
1996-09	74.69	68.43	74.26
1996-10	74.7	68.53	74.51
1996-11	74.5	68.72	74.81
1996-12	74.15	68.69	75.07
1997-01	73.91	68.8	74.96
1997-02	73.54	68.81	75.15
1997-03	73.98	69.78	75.69
1997-04	74.82	71.09	76.36
1997-05	75.72	72.19	76.95
1997-06	76.62	73.12	77.6
1997-07	77.2	73.75	78.22
1997-08	78.07	74.43	78.76
1997-09	78.29	74.76	78.88
1997-10	78.77	75.22	79.14
1997-11	78.97	75.31	79.45
1997-12	79.5	75.81	79.91
1998-01	80.28	76.19	80.17
1998-02	81.14	76.53	80.33
1998-03	82.73	77.48	80.69
1998-04	83.96	79.08	81.48
1998-05	85.4	80.82	82.4
1998-06	86.97	82.41	83.37
1998-07	88.62	83.52	84.2
1998-08	89.98	84.41	85.05
1998-09	90.95	85.06	85.79
1998-10	91.38	85.05	86.46
1998-11	91.38	84.66	86.96
1998-12	91.3	84.5	87.25
1999-01	91.22	85.03	87.93
1999-02	91.46	85.93	88.67
1999-03	92.37	87.51	90.22
1999-04	93.95	89.21	91.31
1999-05	95.27	90.82	92.51
1999-06	96.62	92.52	93.75
1999-07	97.49	94.2	94.92
1999-08	98.3	95.14	96.14
1999-09	98.63	96.15	97.62
1999-10	98.99	96.72	98.54
1999-11	99.34	97.87	99.06
1999-12	99.79	98.9	99.42
2000-01	100	100	100
2000-02	100.62	102.7	100.73
2000-03	102.13	106.56	101.99
2000-04	103.7	110.97	103.07
2000-05	104.99	115.01	105.26
2000-06	106.36	118.45	107.32
2000-07	107.23	119.48	108.93
2000-08	108.18	119.95	110
2000-09	108.94	120.94	111.35
2000-10	109.56	123.08	112.33
2000-11	110.12	125.66	113.35
2000-12	110.12	128.58	114.24
2001-01	110.88	131.16	114.75
2001-02	111.32	133.27	115.79
2001-03	112.98	134.1	116.33
2001-04	114.12	134.38	117.95
2001-05	115.31	134.09	119.2
2001-06	116.47	132.64	120.45
2001-07	117.36	130.95	121.12
2001-08	118.67	129.15	121.78
2001-09	119.51	128.6	122.41
2001-10	120.16	128.01	122.36
2001-11	120.48	126.99	121.93
2001-12	120.65	125.47	121.32
2002-01	121.45	125.13	121.3
2002-02	122.26	126.06	121.21
2002-03	124.12	128.79	122.05
2002-04	126.23	132.62	122.7
2002-05	128.73	136.07	123.95
2002-06	131.59	139.35	124.75
2002-07	133.97	141.02	125.46
2002-08	136.59	141.93	125.55
2002-09	138.62	142.29	125.66
2002-10	140.76	142.74	125.69
2002-11	142.07	143.06	125.84
2002-12	143.26	142.4	125.41
2003-01	144.27	141.9	124.81
2003-02	145.3	142.19	124.33
2003-03	147.23	143	124.87
2003-04	149.65	144.69	125.17
2003-05	152.27	145.53	125.67
2003-06	154.98	146.53	125.61
2003-07	158.34	147.75	126.07
2003-08	161.89	148.72	126.72
2003-09	165.29	150.25	126.94
2003-10	168.4	151.75	127.05
2003-11	171.11	153.36	127.08
2003-12	173.98	154.62	126.98
2004-01	177.01	155.93	127.2
2004-02	180.49	158.11	127.21
2004-03	186.55	160.9	127.73
2004-04	193.22	164.65	128.34
2004-05	199.58	167.76	129.12
2004-06	206.38	171.51	130.45
2004-07	211.08	173.85	131.1
2004-08	213.49	175.89	131.83
2004-09	215.08	178.15	131.87
2004-10	215.74	180.75	132.18
2004-11	216.58	183.15	132.16
2004-12	217.34	185.72	132.4
2005-01	219.41	189.35	132.34
2005-02	222.29	193.5	132.63
2005-03	226.75	198.3	132.73
2005-04	231.59	201.86	133.85
2005-05	236.68	205.52	134.82
2005-06	241.7	208.92	135.71
2005-07	246.37	211.56	136.47
2005-08	251.1	212.86	137.19
2005-09	255.85	214.73	137.6
2005-10	260.16	215.55	137.69
2005-11	262.56	215.7	137.53
2005-12	264.77	215.11	137.5
2006-01	265.92	214.78	137.42
2006-02	267.75	215.5	137.12
2006-03	268.23	216.04	136.93
2006-04	270.44	217.52	137.28
2006-05	272.12	218.37	138.31
2006-06	273.22	218.12	139.46
2006-07	273.85	217.63	140.26
2006-08	273.8	217.22	140.28
2006-09	273.94	216.37	139.65
2006-10	273.66	215.42	138.62
2006-11	273.05	213.84	137.65
2006-12	270.03	212.13	137.11
2007-01	268.68	211.78	135.86
2007-02	266.63	210.78	134.86
2007-03	264.58	211.09	134.2
2007-04	263.37	211.47	134.86
2007-05	263.19	210.89	136.32
2007-06	262.12	209.48	138.09
2007-07	260.84	208.64	139.24
2007-08	258.07	208.15	139.72
2007-09	254.79	206.46	138.44
2007-10	249.5	202.03	136.09
2007-11	240.43	195.49	133.36
2007-12	233.03	189.23	130.98
2008-01	224.41	183.81	128.95
2008-02	214.83	174.54	127.46
2008-03	207.11	168.38	127.4
2008-04	202.45	164.63	128.49
2008-05	198.54	162.7	129.73
2008-06	195.7	159.83	131.66
2008-07	192.55	156.88	132.67
2008-08	189.18	151.42	132.63
2008-09	184.54	145.53	130.95
2008-10	179.82	139.44	129.04
2008-11	175.85	135.28	127.66
2008-12	171.4	130.12	125.74
2009-01	166.55	124.4	122.33
2009-02	163.17	120.35	120.21
2009-03	160.89	117.71	120.37
2009-04	159.37	118.46	122.15
2009-05	159.18	120.16	123.78
2009-06	160.9	124.7	126.92
2009-07	163.97	128.86	128.79
2009-08	166.62	132.47	130.07
2009-09	168.03	134.16	129.44
2009-10	168.43	135.81	128.9
2009-11	169.72	136.63	128.29
2009-12	171.38	136.4	127.2
2010-01	172.97	135.63	125.59
2010-02	171.81	134.67	124.54
2010-03	170.61	136.74	125.31
2010-04	171.78	139.77	127.5
2010-05	174.67	142.16	128.24
2010-06	175.66	142.55	129.2
2010-07	176.27	143.23	128.72
2010-08	175.55	142.83	128.57
2010-09	175.36	141.54	127.33
2010-10	174.05	138.84	126.58
2010-11	173.28	137.28	125.02
2010-12	170.99	136.02	124.1
2011-01	169.88	133.37	122.73
2011-02	168.23	129.96	121.26
2011-03	167.75	129.83	120.56
2011-04	168.18	132.02	122.32
2011-05	169.07	134.42	123.94
2011-06	169.66	134.9	125.97
2011-07	170.05	135.28	125.98
2011-08	169.38	135.2	126.48
2011-09	168	133.22	125.57
2011-10	165.51	132.34	125.38
2011-11	163.93	129.78	124.79
2011-12	162.11	128.72	123.62
2012-01	160.76	125.47	122.92
2012-02	159.53	124.64	121.81
2012-03	159.72	125.94	123.66
2012-04	162.16	130.23	125.81
2012-05	165.76	135.28	128.48
2012-06	168.57	139.01	131.06
2012-07	170.79	141.71	132.79
2012-08	173.01	142.37	133.48
2012-09	174.79	143.15	134.01
2012-10	175.85	144.15	134.03
2012-11	176.58	146.23	134.5
2012-12	178.59	147.24	134.14
2013-01	180.23	147.45	134.17
2013-02	182.04	148.23	133.9
2013-03	186.3	153.96	135.79
2013-04	192.56	161.46	138.28
2013-05	197.54	168.41	140.98
2013-06	202.08	173.01	143.37
2013-07	206.33	176.87	145.63
2013-08	210.49	178.53	146.95
2013-09	212.83	179.91	147.3
2013-10	214.65	179.55	146.74
2013-11	214.79	180.19	146.44
2013-12	214.84	180.55	146.26
2014-01	214.23	181.52	146.21
2014-02	215.25	181.91	146.13
2014-03	217.61	186.69	148.22
2014-04	219.54	191.2	150.6
2014-05	221.75	194.72	152.59
2014-06	223.39	195.91	154.39
2014-07	224.56	195.48	155.36
2014-08	224.43	194.57	156.14
2014-09	224.47	194.65	156.41
2014-10	225.11	196.33	157.15
2014-11	225.77	196.67	157.32
2014-12	226.57	197.48	158.18
2015-01	225.94	195.75	158.49
2015-02	227.59	200.26	160.72
2015-03	229.67	206.34	162.96
2015-04	232.58	210.85	166.05
2015-05	235.32	213.64	167.86
2015-06	237.14	214.58	170.08
2015-07	238.11	215.48	171.29
2015-08	238.27	215.14	172.78
2015-09	238.68	216.34	173.48
2015-10	238.91	217.83	174.21
2015-11	239.67	218.42	174.42
2015-12	240.54	217.9	174.34
month	Mission	Bernal Heights	Excelsior	Central Richmond	Bayview	Downtown	South of Market	Central Sunset	Tenderloin	Visitacion Valley	Parkside	Pacific Heights	Nob Hill	Inner Richmond	Noe Valley	Outer Sunset	Portola	Outer Richmond	Inner Sunset	Russian Hill	Hayes Valley	Marina	Van Ness - Civic Center	South Beach	Lower Pacific Heights	Eureka Valley - Dolores Heights - Castro	Western Addition	Stonestown	Potrero Hill	North Panhandle	Haight-Ashbury	Mission Terrace	Cow Hollow	Glen Park	Telegraph Hill	Lake	North Beach	Ingleside Heights	Chinatown	Alamo Square	Lakeshore	Parnassus - Ashbury	Yerba Buena	Mission Bay	Miraloma Park	Presidio Heights	Financial District	Presidio	Forest Knolls	Twin Peaks	North Waterfront	Diamond Heights	Westwood Park	Central Waterfront - Dogpatch
2010-02
2010-03																								3.180574555
2010-04							2.542911634																	3.180574555
2010-05							2.586206897																	3.009458298
2010-06							2.223350254																	3.009458298
2010-07							2.142857143																	3.043478261
2010-08							2.769320843																	2.966101695																			3.579310345
2010-09							2.829545455																	2.85198556																			3.579310345
2010-10							2.829545455																	2.966101695																			3.579310345
2010-11							2.935779817																	3.043478261																			3.579310345
2010-12							3.4375		3.325396825			3.1											2.898780488	3.173302108			2.922143579																3.579310345				3.167388167
2011-01	2.666666667	2.480119284					3.296047726	1.752808989	3.325396825			3.1											2.826086957	3.135198135			2.922143579	2.083333333		2.538461538											2.096736597		3.38697318				3.221875	2.911764706
2011-02	2.461538462	2.959501558				3.17007535	3.197831978	1.752808989	3.325396825			2.875											2.554744526	3.466666667			2.922143579	2.083333333													2.096736597		3.734883721				3.167388167	2.911764706
2011-03	2.432432432			1.875		3.440677966	3.260869565	1.752808989	3.325396825			2.785714286								3		2.779369628	2.648171501	3.507404521			2.936170213	2.083333333													2.213286713		3.579310345				3.167388167	2.911764706						2.493261456
2011-04	2.416666667			1.994444444			3.18115942					2.772727273								3			3.121452894	3.507404521			2.777777778																4.080291971
2011-05	2.7			2			3.166666667	1.65				2.93931732			2.858291457							2.8125	2.888888889	3.437738732	2.532751092		3.295454545																4.292307692
2011-06	2.826086957		2				2.945113788					2.9											2.74602026	3.507404521	2.491666667		2.975376197		2.528334786														3.563474388
2011-07	3.4875	2.30369515					2.996005326					2.93931732			2.259036145							3.193333333		3.382352941
2011-08	2.605633803						3.147410359					2.790502793												3.533333333																			4.425465839
2011-09	1.983471074						3.194444444					2.790502793											3.238341969	3.903903904																			4.380475594
2011-10	2.898550725			2.227272727		2.972972973	3.475513428					3.033472803	2.689655172							3.411764706		3.496503497	3.272727273	3.916666667		2.267857143	3.24742268			2.705882353													4.380475594					3.644859813
2011-11	2.828571429			2.111801242	2.111566858	3.046795524	3.610810811					2.93931732	3.668122271							2.181818182		2.900763359	3.03030303	3.523371105	3.894444444		3.264812576																4.285271318					3.413793103	2.556451613
2011-12	2.828571429			2.111801242	2.305938812	3.25	3.619266055		3.460465116			3.033472803	3.668122271		3.573684211					2.4			2.511415525	3.410388128	4.035555556		3.391304348										2.443609023						4.256670902				4.615384615	2.944
2012-01	3.202479339				2.305938812	2.95	3.701369863		2.772727273			3.24375	3.18							2.4375		3.316666667	2.710551791	3.436829067	4.248677249		3.54519774																4.057279236				4.352806415	2.944
2012-02	2.804487179			1	2.257761054	3.046795524	3.877333333		2.85			3.214285714	3.493449782	2.354545455	2.99					3.445229682		1.881876086	3.333333333	3.998384491	3.7328		3.5									3.607272727	2.909090909						4.057279236	3.575233023			4.452054795	3.106363636	3.076923077					2.858261551
2012-03	2.385496183	2.529021559			2.257761054	3.046795524	3.461538462	1.846153846	4.126506024			2.791899441	3.818181818		2.91959799					3.333333333		2.9	3.028634361	3.180842279	3.856		3.417381974		3.55		3.168635875					4.377272727	2.443609023						3.643362832	3.442048518			4.088983051	3.146666667	3.076923077		3.370307167			2.858261551
2012-04	3.246753247	2.529021559			2.080131723	3.046795524	3.294117647	1.859090909	4.174008811	1.851851852		3.25	3.54	2.5	2.686567164					3.053097345		2.96875	3.461134454	3.248670998	3.8784	3.127538587	3.170212766			2.705882353					3.571428571	4.171428571							4.183813443				4.639175258	3.855172414	3.055555556
2012-05	3.111111111				2.12962963	3.161290323	3.648387097		3.835341365			3.551829268	3.574910627		2.80952381					3.623188406	3.15262913	3.285714286	3.625	3.638694639	3.953513514	2.712815716	2.741935484		3.172413793						4.171309192	4.027272727							4.176610979				4.645748988	4.349090909	3.055555556
2012-06	3.106796117	3.180914513		1.95	2.241461477	3.628117914	3.691550451		3.835341365		1.995454545	3.433476395	3.422982885		3.114624506					3.623188406	2.285446009	3.225806452	3.765690377	3.645199063	4.2544	2.678571429	2.5				2.602811036				4.171309192	4.084615385							3.812386157	3.247795414			4.452054795	4.343636364	3.673469388				3.058464223
2012-07	3.266666667	2.596997691		0.959615385	1.848739496	4.144241119	3.73694207		4.337349398			3.6875	3.428571429		2.949748744					3.081818182			4.057771664	3.62529274	4.2208	3.196803197		2.882727273	2.474226804		2.602811036				4.072164948								4.315196998	2.463054187			4.5	4.343636364	3.723994452				2.982873454
2012-08	3	2.236652237			2.061005771	3.971553611	3.646551724	1.818181818	4.457831325			3.475177305	3.272727273		2.888888889					3.281622912	2.777777778	3.33125	3.931203931	3.406095552	3.978378378	1.067615658	3.021276596	2.900530504	3.463414634	2.785714286	3.214285714				4.072164948								4.293785311	2.699662542			4.452054795	4.090769231	3.538461538				2.811965812
2012-09	2.495192308	1.867064974		0.914634146	2.147613065	3.472222222	3.74181478		4.583333333			3.413793103	3.808243728	0.714285714	3.125				1.070950469	4	3.15262913	3.33125	3.931203931	3.475794251	4.195	3.384180791	3.123595506	3.021220159	3.463414634	2.481389578	2.818181818		2.362204724		4.072164948								4.08719346	3.574346405			4.180985109	3.942	3.676691729				2.687007874
2012-10	3	1.9975		1.208333333	2.380272953	3.74058127	3.852702703	1.677316294	4.2375			3.433476395	3.808243728	0.833333333	2.962736714				0.953079179	3.582089552	3.111111111	2.105263158	3.978779841	3.565217391	4.4496				2.538601272		2.272727273				4.545454545								4.185098952	2.699662542			3.983918129	3.92	3.076923077				2.969432314
2012-11	3	1.970954357			2.341811414	3.782343988	3.761643836		3.842465753			3.089533417	4.009090909	1.079039655	2.823529412				0.666666667	3.507899356	1.555555556	2.228846154	4.004914005	3.732121212	4.291578947						1				3.74875								3.69595537	3.65335599			1.986754967	4.032258065	3.761408083				3.055190539
2012-12	3.106332139	2.311495674			2.315024233	3.724832215	3.761643836		4.29			3.55	3.833333333	1	3.015075377				1.98	3.5		3.263636364	4.026845638	3.755230126	4.216	3.333333333	3.286147624	3.197122302	3.097345133	2.583333333	1.060606061		3.496503497		4.166666667								3.584247258	3.588709677		3.041666667	2.965043695	4.192727273	3.538461538		4.499151104		3.325750682
2013-01	3.389830508	2.478813559			2.258481422	4.06779661	3.762385321		4.355932203		1.789297659	3.946322068	3.833333333	1	3.326666667				2.526666667	3.960365854	2.628947368	3.055555556	3.936739659	3.866013072	4.0384	3.665517241	3.892156863	2.684892086	3.698501873	3			3.864516129		4.166666667								3.627586207	3.58490566			2.8125	4.281818182	3.618677043		4.499151104		3.239795918
2013-02	3.5	2.228571429			2.267558528	4.5	3.886198547		4.156626506			2.909090909	3.84	1.196428571	3.331658291			2.1875	1.257633588	3.90702275	2.628947368	3.707627119	3.936739659	3.906666667	3.841081081	3.425925926	3.776541962	2.549367089	3.995				3.246753247		3.714285714		3.537974684						3.731034483	3.495934959			2.780867631		3.997005988				3.136998255
2013-03	3.299120235	2.325581395			2	4.276827372	3.957219251		4.03			3.166666667	3.865979381		2.271567126	2.268178786			2.10989011	3.90702275	3.333333333	3.484042553	4.001267427	4.154566745	3.489769821	3.361254296			3.797468354				3.681578947	2.148148148	3.714285714		3.50877193						4.35862069				2.666666667				5.786736021
2013-04	3.153153153	1.885183782			2.296072508	3.894080997	4.038257173		3.988888889			3.138888889	3.75	1.005747126	2.454545455				2.257861635	4.852125693	3.316666667	2.988505747	3.936739659	4.154566745	4.2144	3.755530973		2.702917772	3.243957704	2.631578947			3.925925926	1.752848379	4.215922799								4.066985646						3.333333333		5.301794454		3.090551181
2013-05	3.496503497	1.704545455		2	1.927194861	4.695652174	4.166666667		3.838461538	2.288461538		3.266666667	3.898458749	2.444444444	3.894472362				2.24137931	4.157549234	2.03125	3.573684211	4.197478992	4.304455446	4.308510638	3.286082474	4.005128205	2.756	3.349056604	2.631578947			4.333333333		4.215922799		4						4.066985646						3.881666667		5.428571429	3.079178886
2013-06	3.254177661	1.542649728			2.163687676	4.844110855	4.166666667		3.174603175		0.923076923	3.362474781	4.148148148		3.966666667	2.34948605		2.410130719	2.736077482	3.6875	2.633744856	3.663333333	4.197478992	4.261363636	4.370629371	2.736581921	4.137254902	2.702917772	3.67335563	1.242038217	3.533333333		4.397590361		4.388888889		3.894269572						4.204386839		2.121212121		2.279635258	3.340314136	3.996598639		5.204166667	3.007518797		3.257686676
2013-07	4.285714286	1.209302326			1.505016722	5.02886836	4.25		3.836538462			3.247863248	4.200726612	1.500664011	3.67839196			1.529051988	2.268181818	4.405737705	3.391304348	3.8	4.199823165	4.721212121	3.992857143	2.736581921	4.133333333	2.702	4.228855721	3.333333333	3.533333333		4.389880952	0.810372771	4.444444444		3.839590444						4.204386839	3.888888889	2.701778386			3.170731707	3.996598639	2.813636364	4.118065434			3.2
2013-08	3.845166809	2.083333333		2.133774161		5.259259259	3.98245614		3.888888889			3.771551724	4.444444444	0.850591716	3.4				2.268181818	3.75	3.391304348	3.88	4.772393539	4.410845588	4.063386944	3.71875	3.723958333	2.702	3.391304348	2.518518519	3.331666667		4.285714286		4.60475825	1.161290323	3.955841766	2.693877551				3.467954346	4.313487242				3.75	3.464912281	3.656509695	2.813636364	4.243197279			3.428571429
2013-09	4	2.671755725		2.109730849		5.5	4.004733728				2.246732026	3.672413793	3.958333333	1.068449198	2.665					4.25974026		3.541666667	4.333333333	4.127198917	3.570102136	3.75		2.870634921	3.814779271		2.626315789		4.090909091		4.064417178		3.963235294						4.236200257	4.59392945			4.661144578	3.768333333	3.621169916					3.428571429
2013-10	4.297040169	2.690802348				5.076923077	4.003703704	1.902173913			2.214285714	3.593333333	4	1.126760563	2.444444444				1.902380952	4.149305556		3.850877193	4.339488636	4.407831901	3.776041667	2.40625		2.839522546	3.630514706				3.125		4.055555556			2.470355731					4.184100418	4.272550921			3.75	3.651			4.654442877
2013-11	4.0125	1.898536585			2.030833333	4.615384615	4		3.833333333		1.916	3.631578947	3.542234332	2.748625687	2				2.6875	4.149305556		3.75	4.405777166	4.305555556	3.147058824	1.679245283		3.031094527	3.07112069	3.1	3.069230769		3.925925926		3.631694791		3.177272727	2.742409403					4.197707736	4.187817259			3.90647482	3.610909091	3.522622345	3	4.088983051	3.361486486		3.428571429
2013-12	4.251269036	2.533333333		1.1	1.517241379	4.592592593	4.058219178		3.888888889			3.677130045	3.976143141	0.977653631	2.826086957					3.775862069	2.24590788	3.947368421	4.382165605	4.088522131	3.3	2.723311547		3.031094527	2.963362069	3.294117647			3.803888419		4		3.021978022						4.006685769	4.239130435			4.298969072	3.803	3.814147018	2.581926514	4.174950298			3.2079459
2014-01	4.211248285	2.324840764		1.501305483	1.894736842	5.272727273	4.072970961		3.888888889			3.629764065	3.363518758	1.688689218	3.457792208	2.037201063		1.25		3.90702275	4.113149847	4.026315789	4.363636364	4.307692308	3.375	3.751705321		3.156735751	2.992733878	3.349194729	3.541448059		3.473438412		3.613636364		3.314606742						3.93442623	4.192893401			3.267411866	3.987	4.134165367		4.654442877
2014-02	4.211248285	2.547263682		1.225	2.152521525	4.949874687	4.164804469	2.458333333	3.992			3.629764065	3.571428571	2.6	3.266666667		2.5	2.198882682		3.9	3.949903661	3.866666667	4.361510791	4.201680672	3.495	3.571428571		2.950549451	3.2		3.571428571	2.153846154	3.308550186		4				3.836150845				4.031674208	4.16751269			3.888888889	4.014285714	4.037593985	1.461538462	4.571428571
2014-03	4.144178874	2.476190476		2.450920245	1.476426799	4.824561404	4.187894073	1.685962373	4.285714286			4.022988506	2.588912134		3.291666667		2.337472608	1.64	3.463203463	3.775862069	4.166666667	3.873659118	4.444444444	4.221388368	3.619047619	3.501308901		2.950549451	3.365384615	3.691275168			4.142857143		3.785714286								4.453793103	4.113924051			2.069124424	4.078181818	4.105263158		4.818965517			2.643171806
2014-04	4.549214227	2.70212766			2.252252252	4.902826855	4.24137931		4.87		0.735294118	4	3.48977136	1.059271523	4.5		2.910592809	1.911764706	2.97786292	3.775862069	4.636363636	4.285714286	4.477272727	4.414285714	3.972972973	3.876582278		3.008547009	3.653113088		3.824986241		4.6875	3.24137931	3.818181818		4.727272727			4.247787611			4.304597701	4.240932642			4.407294833	4.324	4.105263158	2.56	5.434782609		3.078913325	2.666666667
2014-05	4.310631229	3.210831721		2.615384615		4.706840391	4.158595642		4.045608108			3.9	3.899082569	2.974358974	4			2.818181818	3.022222222	4.142857143	4.375	3.928571429	4.551724138	4.321872015	4.453846154	3.995	4.307359307	3.031837916	4.118616145		4.1		4.166666667	3.195067265	3.785714286		3.65630713						4.620689655	4.397668394			4.142857143	4.527272727	4.223076923	2.903946389	5.434782609		3.248447205	3.499283668
2014-06	3.996666667	2.821428571		2.41187384	2.310231023	5.224820144	4.222972973	0.983333333	4.321917808		2.243243243	3.895313451	3.493975904	2.727272727	3.307560137			2.625	3.166666667	3.75	4.404984424	3.375	4.656160458	4.195804196	3.495	3.340336134			3.309968847	2.823529412	3.525498891		2.8		4.402895054								4.524904215	4.221422862			3.660049628	4.249166667	4.424410541		5.45221843			3.428571429
2014-07	4.133333333	2.749762131		2.24		4.863547758	4.304511278	1.280683031	4.666666667			3.878640777	3.493975904	2.95	3.928571429			2.357414449	3.28125	4.136690647	4.218600192	3.375	4.551724138	4.352941176	4.490254873	3.980099502		3.151709402	3.611111111	2.866666667	3.99		2.8				4.380952381					3.421052632	4.448275862	4.110512129			3.973509934	4.488666667	4.909774436					3.711558855
2014-08	4.548635409	2.857142857		3		4.88372093	4.325557809		4.370629371			4.410377358	3.046875		4				2.975734355	4.214285714	4.142857143	4	4.587628866	4.504163512	4.596666667	3.75		3.107512953	3.842307692		3.99		3.428571429			3.777777778	4.838709677					3.647058824	4.487547893	4.245283019			4.104477612	4.85	4.72		4.991525424			3.846153846
2014-09	4.719562244	3.411764706		1.364754098	2.600364964	5.5	4.372759857		4.542465753			4.359879032	3.774509804		3.944444444			2.811965812		3.919860627	4.785714286	4.205263158	4.644808743	5.140898705	4.571428571	3.648269411		3.316680097	3.842307692	3.162618796	4.318181818		3.26984127		3.866525424		4.727272727						4.827586207	4.117647059			4.104477612	3.858974359	4.578947368		4.968944099		3.525408348	3.833333333
2014-10	4.027355623	4.066666667		2.083333333		4.988636364	4.583798883	2.598152425	4.611111111			4.063386944	3.958333333		4.067402673			2.707142857	3.234042553	3.775862069	4.375	4.728070175	4.266666667	4.860148515	4.6	4.275		2.870652174	4.045454545	3.829166667	4.333333333				4.666666667								4.743833017	4.252173913			4.714640199	4.076	4.729323308		4.911838791		3.539581438
2014-11	4.5	3.5	2.833333333	2.083333333	2.745424293	5.215909091	4.683179724	2.584615385				4.36	4.545454545		3.91959799				2.488888889	4.166666667	4.166666667	4.709090909	4.350649351	4.6875	4.555555556	3.046303818			4.09270217		4.363636364		3.9375	3.505263158									4.769578313	4.179829891			4.848484848	3.988095238	4.714285714		4.915110357		3.525932666	3.4
2014-12	4.759398496	3.409090909		2.722222222		4.786666667	4.761904762	2.496875	3.928767123			4.405737705	4.829545455		4.08040201					4.177323103	5.80495356	4.695652174	4.727272727	4.929577465	4.375	4.046692607		3.259782609	4.003505258	3.4375	4.126666667		3.55405911	3.428571429	5.172532781								4.779310345	4.269631031				3.858974359	4.639097744		4.915110357		3.231092437	3.4
2015-01	4.75	3.284671533				5.325630252	4.872881356	2.430555556	3.865			4.448038819	4.966641957		4.111111111				4.153921569	4.444444444	5.807453416	4.536363636	4.710365854	4.971590909	4.289544236	4.275		3.259782609	4.16		4.126666667		5.716878403	2.692307692	4.217432052								4.774904215	4.371428571				4.454545455	4.917664671		5.152979066		3.47133758	3.46907994
2015-02	4.702300406	3.251162791				4.732115677	4.742612011	2.971014493	4.22			5	4.912568306		4.379105411			3.181818182	3.897292994	4.444444444	5.726351351	4	4.756871036	4.84962406	4.278918919	4.275		3.203846154	3.981008035		4.461538462			3.272727273	4.485852312								4.743833017	4.426059153				4.028333333	4.917664671		5.348460292
2015-03	4.897196262	3.375	3.2		2.4600246	4.988636364	4.768907563		4.524657534			5	4.8		4.379105411				3.369905956	4.545454545	5.445454545	4.38902439	4.661111111	4.666666667	4.676870748	4.328519856		3.275641026	4.444444444	4.497126437	4.363636364		3.913043478		5.227272727		4.52173913						4.849612403	4.324900133				4.271333333			4.9			3.2079459
2015-04	4.901746725	4.295		3.061861521	2.091216216	5.161290323	4.915862069		4.524657534			5	4.862842893	3.266666667	4.3			3.11875	3.333333333	4.909090909	5.326666667	4.59	4.753804834	4.813118812	4.579166667	4.5		3.367875648	4.583333333	4.5	3.880597015		5	3.666666667	4.6	3.695652174	4.289428076						4.995	4.492102066			4.578313253		4.850299401		4.911838791		4.06455863	3.661111111
	<!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 draw(data) {
	"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 = 1;

	// specify the radius of our circles and the
	// column we want to plot
	var field = 'CA-San Francisco';

	// Append the title for the graph
	d3.select("body")
	.append("h2")
	.text("House price for San Francisco")
	.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
	data = data.filter(function(d) {
	return d[field];
	});

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

	// maximum price for rent
	var max_y = d3.max(data, function(d) {
	return +d[field];
	});

	// get min/max dates
	var time_extent = d3.extent(data, function(d){
	return format.parse(d['month']);
	});

	// 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("Price (dollar/sq-ft)")
	.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['month']));
	})
	.attr('width', function(d) {
	return width / data.length - barPadding;
	})
	.attr('y', function(d) {
	return measure_scale(+d[field]);
	})
	.attr('height', function(d) {
	return height - measure_scale(+d[field]);
	});
	};
	</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("cities.csv", draw);
	</script>
	</body>
	</html>