d3netxer/ MapGive 2014 Daily Users

## MapGive 2014 Daily Users
title

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 14px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3.5px;
}

.dot {
  stroke: #000;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 100px;
  height: 55px;
  padding: 4px;
  font: 16px sans-serif;
  color: white;
  font-weight: 500;
  background: black;
  border: 0px;
  border-radius: 4px;
  pointer-events: none;
}

/* http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

//I increased the bottom margin a little bit because the x label is tied to it; so I could lower the x label a little bit
var margin = {top: 50, right: 20, bottom: 60, left: 90},
    width = 1200 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
	  .ticks(d3.time.week,2)
    .tickSize(10)
    .orient("bottom");

/*
var xMinorAxis = d3.svg.axis()
    .scale(x)
	.ticks(d3.time.hours,12)
    .orient("bottom");
*/

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

/*
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.total_km); });
*/

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

//format for tooltip
//https://github.com/mbostock/d3/wiki/Time-Formatting
//var formatTime = d3.time.format("%e %b");
var formatTime = d3.time.format("%e %b");
var formatCount = d3.format(",");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// function for the y grid lines
function make_y_axis() {
  return d3.svg.axis()
      .scale(y)
      .orient("left")
      //.ticks(5)
}

//The format in the CSV, which d3 will read
var parseDate = d3.time.format("%Y-%m-%d");

//reading in CSV which contains data
//https://github.com/mbostock/d3/wiki/CSV
d3.csv("mapgive-changeset-daily.csv", function(error, data) {
  data.forEach(function(d) {
    //console.log(d.date_time)
    d.date = parseDate.parse(d.date);
	  //console.log(d.date);
    //the + operator in javascript coerces strings to numbers
    d.total_km = +d.daily_users;
    //console.log(d.total_km);
  });

  //using imported data to define extent of x and y domains
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.total_km; }));

  // Draw the y Grid lines
	svg.append("g")
		.attr("class", "grid")
		.call(make_y_axis()
			.tickSize(-width, 0, 0)
			.tickFormat("")
		)

  /*
  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
  */

  //taken from http://bl.ocks.org/mbostock/3887118
  //and http://www.d3noob.org/2013/01/change-line-chart-into-scatter-plot.html
  //appending a group(g) to each data element and will append a rect(bar) and 1 line inside each group
  var g = svg.selectAll().data(data).enter().append("g");

  //each bar
  g.append("rect")
          .style("fill", "steelblue")
          .attr("x", function(d) { return x(d.date); })
          .attr("width", 4)
          .attr("y", function(d) { return y(d.total_km); })
          .attr("height", function(d) { return height - y(d.total_km); });

  //The markers on the top of the bar
  /*
	 g.append("circle")
         //circle radius is increased
        .attr("r", 4.5)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.total_km); });
   */

   //The horizontal dashed line that appears when a bar is moused over
	 g.append("line")
        .attr("class", "x")
        .attr("id", "dashedLine")
        .style("stroke", "steelblue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0)
        .attr("x1", function(d) { return x(d.date); })
        .attr("y1", function(d) { return y(d.total_km); })
		    //d3.min gets the min date from the date x-axis scale
		    .attr("x2", function(d) { return x(d3.min(x)); })
        .attr("y2", function(d) { return y(d.total_km); });

  /*
  //The vertical dashed line that appears when a circle marker is moused over
	g.append("line")
        .attr("class", "y")
        .attr("id", "dashedLine")
        .style("stroke", "steelblue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0)
        .attr("x1", function(d) { return x(d.date); })
        .attr("y1", function(d) { return y(d.total_km); })
		    .attr("x2", function(d) { return x(d.date); })
        .attr("y2", height);
  */

   //bars are selected again to add the mouseover functions
 	 g.selectAll("rect")
			.on("mouseover", function(d) {
            console.log('mouseover');
            div.transition()
               .duration(200)
               .style("opacity", .9);
            div.html(formatCount(d.total_km) + " changesets" + "<br/>" + formatTime(d.date))
               .style("left", (d3.event.pageX - 20) + "px")
      		     .style("top", (d3.event.pageY + 6) + "px");
	          //selects the horizontal dashed line in the group
			      d3.select(this.nextElementSibling).transition()
                .duration(200)
                .style("opacity", .9);
            //selects the vertical dashed line in the group
			      d3.select(this.nextElementSibling.nextElementSibling).transition()
                .duration(200)
                .style("opacity", .9);
            })

      .on("mouseout", function(d) {
            div.transition()
               .duration(500)
               .style("opacity", 0);

			      d3.select(this.nextElementSibling).transition()
                .duration(500)
                .style("opacity", 0);

			      d3.select(this.nextElementSibling.nextElementSibling).transition()
                .duration(500)
                .style("opacity", 0);
        });

  //drawing x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
	    .selectAll(".tick text")
      .call(wrap, 35);

  /*
  svg.append("g")
    .attr("class","xMinorAxis")
    .attr("transform", "translate(0," + height + ")")
    .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px'})
    .call(xMinorAxis)
    .selectAll("text").remove();
  */

  //http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html
  svg.append("text")      // text label for the x-axis
        .attr("x", width / 2 )
        .attr("y",  height + margin.bottom)
        .style("text-anchor", "middle")
        .text("Date");

  svg.append("text")      // text label for the y-axis
        .attr("y",40 - margin.left)
        .attr("x",50 - (height / 2))
        .attr("transform", "rotate(-90)")
        .style("text-anchor", "end")
        .style("font-size", "16px")
        .text("Daily Users");

  //http://www.d3noob.org/2013/01/adding-title-to-your-d3js-graph.html
  svg.append("text")      // text label for chart Title
        .attr("x", width / 2 )
        .attr("y", 0 - (margin.top/2))
        .style("text-anchor", "middle")
		    .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("MapGive Daily Users in 2014");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      //text label for the y-axis inside chart
      /*
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .style("font-size", "16px")
        .style("background-color","red")
        .text("road length (km)");
      */

  //http://bl.ocks.org/mbostock/7555321
  //This code wraps label text if it has too much text
  function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
        }
      }
    });
  }

});

</script>

## mapgive-changeset-daily.csv

          
            date
            daily
            cumulative
            daily_users

            
              2014-02-21
              1
              1
              1

            
              2014-02-26
              2
              3
              1

            
              2014-03-09
              1
              4
              1

            
              2014-03-10
              15
              19
              3

            
              2014-03-11
              33
              52
              4

            
              2014-03-12
              53
              105
              7

            
              2014-03-13
              15
              120
              4

            
              2014-03-14
              2
              122
              1

            
              2014-03-15
              2
              124
              2

            
              2014-03-16
              18
              142
              9

            
              2014-03-17
              17
              159
              7

            
              2014-03-18
              9
              168
              3

            
              2014-03-19
              8
              176
              3

            
              2014-03-20
              4
              180
              3

            
              2014-03-23
              2
              182
              1

            
              2014-03-24
              5
              187
              1

            
              2014-03-29
              21
              208
              2

            
              2014-03-30
              13
              221
              3

            
              2014-03-31
              9
              230
              1

            
              2014-04-01
              3
              233
              1

            
              2014-04-02
              6
              239
              1

            
              2014-04-04
              23
              262
              1

            
              2014-04-07
              1
              263
              1

            
              2014-04-08
              2
              265
              2

            
              2014-04-10
              78
              343
              11

            
              2014-04-11
              5
              348
              1

            
              2014-04-12
              84
              432
              1

            
              2014-04-13
              43
              475
              2

            
              2014-04-16
              14
              489
              4

            
              2014-04-17
              39
              528
              3

            
              2014-04-18
              35
              563
              3

            
              2014-04-19
              277
              840
              25

            
              2014-04-20
              10
              850
              3

            
              2014-04-21
              15
              865
              7

            
              2014-04-22
              1
              866
              1

            
              2014-04-23
              331
              1197
              30

            
              2014-04-24
              44
              1241
              2

            
              2014-04-25
              622
              1863
              33

            
              2014-04-27
              13
              1876
              4

            
              2014-04-28
              17
              1893
              3

            
              2014-04-29
              14
              1907
              3

            
              2014-04-30
              392
              2299
              9

            
              2014-05-01
              10
              2309
              1

            
              2014-05-02
              119
              2428
              5

            
              2014-05-04
              1
              2429
              1

            
              2014-05-07
              2
              2431
              1

            
              2014-05-08
              4
              2435
              1

            
              2014-05-10
              1
              2436
              1

            
              2014-05-11
              2
              2438
              1

            
              2014-05-13
              1
              2439
              1

            
              2014-05-15
              2
              2441
              1

            
              2014-05-20
              1
              2442
              1

            
              2014-05-21
              1
              2443
              1

            
              2014-05-22
              23
              2466
              2

            
              2014-05-23
              11
              2477
              2

            
              2014-05-24
              7
              2484
              2

            
              2014-05-25
              4
              2488
              1

            
              2014-05-26
              6
              2494
              1

            
              2014-05-27
              1
              2495
              1

            
              2014-05-28
              5
              2500
              3

            
              2014-05-29
              7
              2507
              3

            
              2014-05-30
              7
              2514
              3

            
              2014-06-01
              7
              2521
              2

            
              2014-06-02
              12
              2533
              2

            
              2014-06-03
              4
              2537
              2

            
              2014-06-05
              3
              2540
              1

            
              2014-06-06
              1
              2541
              1

            
              2014-06-08
              1
              2542
              1

            
              2014-06-09
              3
              2545
              2

            
              2014-06-11
              2
              2547
              1

            
              2014-06-12
              5
              2552
              1

            
              2014-06-18
              6
              2558
              2

            
              2014-06-19
              1
              2559
              1

            
              2014-06-30
              6
              2565
              1

            
              2014-07-01
              6
              2571
              1

            
              2014-07-04
              11
              2582
              1

            
              2014-07-05
              9
              2591
              1

            
              2014-07-06
              3
              2594
              2

            
              2014-07-07
              3
              2597
              1

            
              2014-07-08
              16
              2613
              1

            
              2014-07-09
              13
              2626
              1

            
              2014-07-10
              16
              2642
              3

            
              2014-07-11
              15
              2657
              2

            
              2014-07-12
              26
              2683
              4

            
              2014-07-13
              33
              2716
              10

            
              2014-07-14
              76
              2792
              14

            
              2014-07-15
              36
              2828
              11

            
              2014-07-16
              49
              2877
              12

            
              2014-07-17
              81
              2958
              18

            
              2014-07-18
              400
              3358
              32

            
              2014-07-19
              54
              3412
              13

            
              2014-07-20
              52
              3464
              12

            
              2014-07-21
              82
              3546
              11

            
              2014-07-22
              50
              3596
              13

            
              2014-07-23
              30
              3626
              6

            
              2014-07-24
              57
              3683
              11

            
              2014-07-25
              53
              3736
              10

            
              2014-07-26
              20
              3756
              3

            
              2014-07-27
              36
              3792
              8

            
              2014-07-28
              15
              3807
              4

            
              2014-07-29
              73
              3880
              15

            
              2014-07-30
              46
              3926
              9

            
              2014-07-31
              40
              3966
              8

            
              2014-08-01
              36
              4002
              6

            
              2014-08-02
              9
              4011
              4

            
              2014-08-03
              14
              4025
              4

            
              2014-08-04
              15
              4040
              5

            
              2014-08-05
              19
              4059
              5

            
              2014-08-06
              19
              4078
              8

            
              2014-08-07
              39
              4117
              4

            
              2014-08-08
              4
              4121
              3

            
              2014-08-09
              20
              4141
              7

            
              2014-08-10
              12
              4153
              5

            
              2014-08-11
              24
              4177
              6

            
              2014-08-12
              16
              4193
              6

            
              2014-08-13
              7
              4200
              3

            
              2014-08-14
              28
              4228
              3

            
              2014-08-15
              44
              4272
              9

            
              2014-08-16
              155
              4427
              12

            
              2014-08-17
              84
              4511
              11

            
              2014-08-18
              80
              4591
              10

            
              2014-08-19
              32
              4623
              10

            
              2014-08-20
              45
              4668
              7

            
              2014-08-21
              159
              4827
              12

            
              2014-08-22
              240
              5067
              21

            
              2014-08-23
              42
              5109
              8

            
              2014-08-24
              119
              5228
              7

            
              2014-08-25
              361
              5589
              11

            
              2014-08-26
              88
              5677
              3

            
              2014-08-27
              37
              5714
              6

            
              2014-08-28
              36
              5750
              6

            
              2014-08-29
              3
              5753
              3

            
              2014-08-30
              3
              5756
              1

            
              2014-08-31
              14
              5770
              5

            
              2014-09-01
              37
              5807
              2

            
              2014-09-02
              93
              5900
              4

            
              2014-09-03
              33
              5933
              5

            
              2014-09-04
              8
              5941
              2

            
              2014-09-05
              7
              5948
              2

            
              2014-09-06
              2
              5950
              2

            
              2014-09-07
              10
              5960
              2

            
              2014-09-08
              9
              5969
              3

            
              2014-09-09
              3
              5972
              2

            
              2014-09-10
              40
              6012
              7

            
              2014-09-11
              26
              6038
              5

            
              2014-09-12
              32
              6070
              6

            
              2014-09-13
              17
              6087
              2

            
              2014-09-14
              27
              6114
              2

            
              2014-09-15
              44
              6158
              2

            
              2014-09-16
              11
              6169
              3

            
              2014-09-17
              28
              6197
              5

            
              2014-09-18
              45
              6242
              6

            
              2014-09-19
              30
              6272
              2

            
              2014-09-20
              11
              6283
              2

            
              2014-09-21
              17
              6300
              2

            
              2014-09-22
              4
              6304
              2

            
              2014-09-23
              27
              6331
              4

            
              2014-09-24
              13
              6344
              4

            
              2014-09-25
              33
              6377
              5

            
              2014-09-26
              7
              6384
              3

            
              2014-09-27
              37
              6421
              3

            
              2014-09-28
              10
              6431
              4

            
              2014-09-29
              47
              6478
              3

            
              2014-09-30
              35
              6513
              3

            
              2014-10-01
              30
              6543
              4

            
              2014-10-02
              21
              6564
              5

            
              2014-10-03
              10
              6574
              6

            
              2014-10-04
              20
              6594
              5

            
              2014-10-05
              15
              6609
              4

            
              2014-10-06
              40
              6649
              3

            
              2014-10-07
              36
              6685
              4

            
              2014-10-08
              6
              6691
              1

            
              2014-10-09
              30
              6721
              5

            
              2014-10-10
              15
              6736
              3

            
              2014-10-11
              5
              6741
              3

            
              2014-10-12
              14
              6755
              4

            
              2014-10-13
              2
              6757
              1

            
              2014-10-14
              25
              6782
              3

            
              2014-10-15
              2
              6784
              1

            
              2014-10-16
              17
              6801
              4

            
              2014-10-17
              1
              6802
              1

            
              2014-10-18
              69
              6871
              11

            
              2014-10-19
              33
              6904
              2

            
              2014-10-20
              61
              6965
              7

            
              2014-10-22
              2
              6967
              2

            
              2014-10-23
              10
              6977
              4

            
              2014-10-24
              55
              7032
              4

            
              2014-10-25
              8
              7040
              2

            
              2014-10-26
              12
              7052
              2

            
              2014-10-27
              7
              7059
              4

            
              2014-10-28
              613
              7672
              43

            
              2014-10-29
              166
              7838
              14

            
              2014-10-30
              109
              7947
              10

            
              2014-10-31
              125
              8072
              16

            
              2014-11-01
              63
              8135
              9

            
              2014-11-02
              96
              8231
              7

            
              2014-11-03
              6
              8237
              3

            
              2014-11-04
              26
              8263
              3

            
              2014-11-05
              83
              8346
              2

            
              2014-11-06
              12
              8358
              6

            
              2014-11-07
              233
              8591
              25

            
              2014-11-08
              62
              8653
              8

            
              2014-11-09
              41
              8694
              5

            
              2014-11-10
              25
              8719
              2

            
              2014-11-11
              49
              8768
              9

            
              2014-11-12
              56
              8824
              7

            
              2014-11-13
              105
              8929
              8

            
              2014-11-14
              109
              9038
              9

            
              2014-11-15
              134
              9172
              3

            
              2014-11-16
              75
              9247
              5

            
              2014-11-17
              72
              9319
              5

            
              2014-11-18
              69
              9388
              4

            
              2014-11-19
              94
              9482
              11

            
              2014-11-20
              32
              9514
              5

            
              2014-11-21
              62
              9576
              11

            
              2014-11-22
              32
              9608
              6

            
              2014-11-23
              33
              9641
              3

            
              2014-11-24
              53
              9694
              7

            
              2014-11-25
              24
              9718
              5

            
              2014-11-26
              24
              9742
              7

            
              2014-11-27
              20
              9762
              4

            
              2014-11-28
              30
              9792
              4

            
              2014-11-29
              12
              9804
              4

            
              2014-12-01
              73
              9877
              7

            
              2014-12-02
              17
              9894
              5

            
              2014-12-03
              1
              9895
              1

            
              2014-12-04
              5
              9900
              4

            
              2014-12-05
              1
              9901
              1

            
              2014-12-06
              262
              10163
              38

            
              2014-12-07
              550
              10713
              47

            
              2014-12-08
              77
              10790
              15

            
              2014-12-09
              185
              10975
              10

            
              2014-12-10
              15
              10990
              9

            
              2014-12-11
              112
              11102
              16

            
              2014-12-12
              67
              11169
              14

            
              2014-12-13
              36
              11205
              10

            
              2014-12-14
              16
              11221
              7

            
              2014-12-15
              105
              11326
              9

            
              2014-12-16
              74
              11400
              8

            
              2014-12-17
              70
              11470
              10

            
              2014-12-18
              98
              11568
              14

            
              2014-12-19
              38
              11606
              8

            
              2014-12-20
              24
              11630
              9

            
              2014-12-21
              27
              11657
              7

            
              2014-12-22
              4
              11661
              1
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 14px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	shape-rendering: crispEdges;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3.5px;
	}

	.dot {
	stroke: #000;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 100px;
	height: 55px;
	padding: 4px;
	font: 16px sans-serif;
	color: white;
	font-weight: 500;
	background: black;
	border: 0px;
	border-radius: 4px;
	pointer-events: none;
	}

	/* http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>

	//I increased the bottom margin a little bit because the x label is tied to it; so I could lower the x label a little bit
	var margin = {top: 50, right: 20, bottom: 60, left: 90},
	width = 1200 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(d3.time.week,2)
	.tickSize(10)
	.orient("bottom");

	/*
	var xMinorAxis = d3.svg.axis()
	.scale(x)
	.ticks(d3.time.hours,12)
	.orient("bottom");
	*/

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	/*
	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.total_km); });
	*/

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//format for tooltip
	//https://github.com/mbostock/d3/wiki/Time-Formatting
	//var formatTime = d3.time.format("%e %b");
	var formatTime = d3.time.format("%e %b");
	var formatCount = d3.format(",");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// function for the y grid lines
	function make_y_axis() {
	return d3.svg.axis()
	.scale(y)
	.orient("left")
	//.ticks(5)
	}

	//The format in the CSV, which d3 will read
	var parseDate = d3.time.format("%Y-%m-%d");

	//reading in CSV which contains data
	//https://github.com/mbostock/d3/wiki/CSV
	d3.csv("mapgive-changeset-daily.csv", function(error, data) {
	data.forEach(function(d) {
	//console.log(d.date_time)
	d.date = parseDate.parse(d.date);
	//console.log(d.date);
	//the + operator in javascript coerces strings to numbers
	d.total_km = +d.daily_users;
	//console.log(d.total_km);
	});

	//using imported data to define extent of x and y domains
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.total_km; }));

	// Draw the y Grid lines
	svg.append("g")
	.attr("class", "grid")
	.call(make_y_axis()
	.tickSize(-width, 0, 0)
	.tickFormat("")
	)

	/*
	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);
	*/

	//taken from http://bl.ocks.org/mbostock/3887118
	//and http://www.d3noob.org/2013/01/change-line-chart-into-scatter-plot.html
	//appending a group(g) to each data element and will append a rect(bar) and 1 line inside each group
	var g = svg.selectAll().data(data).enter().append("g");

	//each bar
	g.append("rect")
	.style("fill", "steelblue")
	.attr("x", function(d) { return x(d.date); })
	.attr("width", 4)
	.attr("y", function(d) { return y(d.total_km); })
	.attr("height", function(d) { return height - y(d.total_km); });

	//The markers on the top of the bar
	/*
	g.append("circle")
	//circle radius is increased
	.attr("r", 4.5)
	.attr("cx", function(d) { return x(d.date); })
	.attr("cy", function(d) { return y(d.total_km); });
	*/

	//The horizontal dashed line that appears when a bar is moused over
	g.append("line")
	.attr("class", "x")
	.attr("id", "dashedLine")
	.style("stroke", "steelblue")
	.style("stroke-dasharray", "3,3")
	.style("opacity", 0)
	.attr("x1", function(d) { return x(d.date); })
	.attr("y1", function(d) { return y(d.total_km); })
	//d3.min gets the min date from the date x-axis scale
	.attr("x2", function(d) { return x(d3.min(x)); })
	.attr("y2", function(d) { return y(d.total_km); });

	/*
	//The vertical dashed line that appears when a circle marker is moused over
	g.append("line")
	.attr("class", "y")
	.attr("id", "dashedLine")
	.style("stroke", "steelblue")
	.style("stroke-dasharray", "3,3")
	.style("opacity", 0)
	.attr("x1", function(d) { return x(d.date); })
	.attr("y1", function(d) { return y(d.total_km); })
	.attr("x2", function(d) { return x(d.date); })
	.attr("y2", height);
	*/

	//bars are selected again to add the mouseover functions
	g.selectAll("rect")
	.on("mouseover", function(d) {
	console.log('mouseover');
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div.html(formatCount(d.total_km) + " changesets" + "<br/>" + formatTime(d.date))
	.style("left", (d3.event.pageX - 20) + "px")
	.style("top", (d3.event.pageY + 6) + "px");
	//selects the horizontal dashed line in the group
	d3.select(this.nextElementSibling).transition()
	.duration(200)
	.style("opacity", .9);
	//selects the vertical dashed line in the group
	d3.select(this.nextElementSibling.nextElementSibling).transition()
	.duration(200)
	.style("opacity", .9);
	})

	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0);

	d3.select(this.nextElementSibling).transition()
	.duration(500)
	.style("opacity", 0);

	d3.select(this.nextElementSibling.nextElementSibling).transition()
	.duration(500)
	.style("opacity", 0);
	});

	//drawing x-axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll(".tick text")
	.call(wrap, 35);

	/*
	svg.append("g")
	.attr("class","xMinorAxis")
	.attr("transform", "translate(0," + height + ")")
	.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px'})
	.call(xMinorAxis)
	.selectAll("text").remove();
	*/

	//http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html
	svg.append("text") // text label for the x-axis
	.attr("x", width / 2 )
	.attr("y", height + margin.bottom)
	.style("text-anchor", "middle")
	.text("Date");

	svg.append("text") // text label for the y-axis
	.attr("y",40 - margin.left)
	.attr("x",50 - (height / 2))
	.attr("transform", "rotate(-90)")
	.style("text-anchor", "end")
	.style("font-size", "16px")
	.text("Daily Users");

	//http://www.d3noob.org/2013/01/adding-title-to-your-d3js-graph.html
	svg.append("text") // text label for chart Title
	.attr("x", width / 2 )
	.attr("y", 0 - (margin.top/2))
	.style("text-anchor", "middle")
	.style("font-size", "16px")
	.style("text-decoration", "underline")
	.text("MapGive Daily Users in 2014");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	//text label for the y-axis inside chart
	/*
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font-size", "16px")
	.style("background-color","red")
	.text("road length (km)");
	*/

	//http://bl.ocks.org/mbostock/7555321
	//This code wraps label text if it has too much text
	function wrap(text, width) {
	text.each(function() {
	var text = d3.select(this),
	words = text.text().split(/\s+/).reverse(),
	word,
	line = [],
	lineNumber = 0,
	lineHeight = 1.1, // ems
	y = text.attr("y"),
	dy = parseFloat(text.attr("dy")),
	tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
	while (word = words.pop()) {
	line.push(word);
	tspan.text(line.join(" "));
	if (tspan.node().getComputedTextLength() > width) {
	line.pop();
	tspan.text(line.join(" "));
	line = [word];
	tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
	}
	}
	});
	}

	});

	</script>
date	daily	cumulative	daily_users
2014-02-21	1	1	1
2014-02-26	2	3	1
2014-03-09	1	4	1
2014-03-10	15	19	3
2014-03-11	33	52	4
2014-03-12	53	105	7
2014-03-13	15	120	4
2014-03-14	2	122	1
2014-03-15	2	124	2
2014-03-16	18	142	9
2014-03-17	17	159	7
2014-03-18	9	168	3
2014-03-19	8	176	3
2014-03-20	4	180	3
2014-03-23	2	182	1
2014-03-24	5	187	1
2014-03-29	21	208	2
2014-03-30	13	221	3
2014-03-31	9	230	1
2014-04-01	3	233	1
2014-04-02	6	239	1
2014-04-04	23	262	1
2014-04-07	1	263	1
2014-04-08	2	265	2
2014-04-10	78	343	11
2014-04-11	5	348	1
2014-04-12	84	432	1
2014-04-13	43	475	2
2014-04-16	14	489	4
2014-04-17	39	528	3
2014-04-18	35	563	3
2014-04-19	277	840	25
2014-04-20	10	850	3
2014-04-21	15	865	7
2014-04-22	1	866	1
2014-04-23	331	1197	30
2014-04-24	44	1241	2
2014-04-25	622	1863	33
2014-04-27	13	1876	4
2014-04-28	17	1893	3
2014-04-29	14	1907	3
2014-04-30	392	2299	9
2014-05-01	10	2309	1
2014-05-02	119	2428	5
2014-05-04	1	2429	1
2014-05-07	2	2431	1
2014-05-08	4	2435	1
2014-05-10	1	2436	1
2014-05-11	2	2438	1
2014-05-13	1	2439	1
2014-05-15	2	2441	1
2014-05-20	1	2442	1
2014-05-21	1	2443	1
2014-05-22	23	2466	2
2014-05-23	11	2477	2
2014-05-24	7	2484	2
2014-05-25	4	2488	1
2014-05-26	6	2494	1
2014-05-27	1	2495	1
2014-05-28	5	2500	3
2014-05-29	7	2507	3
2014-05-30	7	2514	3
2014-06-01	7	2521	2
2014-06-02	12	2533	2
2014-06-03	4	2537	2
2014-06-05	3	2540	1
2014-06-06	1	2541	1
2014-06-08	1	2542	1
2014-06-09	3	2545	2
2014-06-11	2	2547	1
2014-06-12	5	2552	1
2014-06-18	6	2558	2
2014-06-19	1	2559	1
2014-06-30	6	2565	1
2014-07-01	6	2571	1
2014-07-04	11	2582	1
2014-07-05	9	2591	1
2014-07-06	3	2594	2
2014-07-07	3	2597	1
2014-07-08	16	2613	1
2014-07-09	13	2626	1
2014-07-10	16	2642	3
2014-07-11	15	2657	2
2014-07-12	26	2683	4
2014-07-13	33	2716	10
2014-07-14	76	2792	14
2014-07-15	36	2828	11
2014-07-16	49	2877	12
2014-07-17	81	2958	18
2014-07-18	400	3358	32
2014-07-19	54	3412	13
2014-07-20	52	3464	12
2014-07-21	82	3546	11
2014-07-22	50	3596	13
2014-07-23	30	3626	6
2014-07-24	57	3683	11
2014-07-25	53	3736	10
2014-07-26	20	3756	3
2014-07-27	36	3792	8
2014-07-28	15	3807	4
2014-07-29	73	3880	15
2014-07-30	46	3926	9
2014-07-31	40	3966	8
2014-08-01	36	4002	6
2014-08-02	9	4011	4
2014-08-03	14	4025	4
2014-08-04	15	4040	5
2014-08-05	19	4059	5
2014-08-06	19	4078	8
2014-08-07	39	4117	4
2014-08-08	4	4121	3
2014-08-09	20	4141	7
2014-08-10	12	4153	5
2014-08-11	24	4177	6
2014-08-12	16	4193	6
2014-08-13	7	4200	3
2014-08-14	28	4228	3
2014-08-15	44	4272	9
2014-08-16	155	4427	12
2014-08-17	84	4511	11
2014-08-18	80	4591	10
2014-08-19	32	4623	10
2014-08-20	45	4668	7
2014-08-21	159	4827	12
2014-08-22	240	5067	21
2014-08-23	42	5109	8
2014-08-24	119	5228	7
2014-08-25	361	5589	11
2014-08-26	88	5677	3
2014-08-27	37	5714	6
2014-08-28	36	5750	6
2014-08-29	3	5753	3
2014-08-30	3	5756	1
2014-08-31	14	5770	5
2014-09-01	37	5807	2
2014-09-02	93	5900	4
2014-09-03	33	5933	5
2014-09-04	8	5941	2
2014-09-05	7	5948	2
2014-09-06	2	5950	2
2014-09-07	10	5960	2
2014-09-08	9	5969	3
2014-09-09	3	5972	2
2014-09-10	40	6012	7
2014-09-11	26	6038	5
2014-09-12	32	6070	6
2014-09-13	17	6087	2
2014-09-14	27	6114	2
2014-09-15	44	6158	2
2014-09-16	11	6169	3
2014-09-17	28	6197	5
2014-09-18	45	6242	6
2014-09-19	30	6272	2
2014-09-20	11	6283	2
2014-09-21	17	6300	2
2014-09-22	4	6304	2
2014-09-23	27	6331	4
2014-09-24	13	6344	4
2014-09-25	33	6377	5
2014-09-26	7	6384	3
2014-09-27	37	6421	3
2014-09-28	10	6431	4
2014-09-29	47	6478	3
2014-09-30	35	6513	3
2014-10-01	30	6543	4
2014-10-02	21	6564	5
2014-10-03	10	6574	6
2014-10-04	20	6594	5
2014-10-05	15	6609	4
2014-10-06	40	6649	3
2014-10-07	36	6685	4
2014-10-08	6	6691	1
2014-10-09	30	6721	5
2014-10-10	15	6736	3
2014-10-11	5	6741	3
2014-10-12	14	6755	4
2014-10-13	2	6757	1
2014-10-14	25	6782	3
2014-10-15	2	6784	1
2014-10-16	17	6801	4
2014-10-17	1	6802	1
2014-10-18	69	6871	11
2014-10-19	33	6904	2
2014-10-20	61	6965	7
2014-10-22	2	6967	2
2014-10-23	10	6977	4
2014-10-24	55	7032	4
2014-10-25	8	7040	2
2014-10-26	12	7052	2
2014-10-27	7	7059	4
2014-10-28	613	7672	43
2014-10-29	166	7838	14
2014-10-30	109	7947	10
2014-10-31	125	8072	16
2014-11-01	63	8135	9
2014-11-02	96	8231	7
2014-11-03	6	8237	3
2014-11-04	26	8263	3
2014-11-05	83	8346	2
2014-11-06	12	8358	6
2014-11-07	233	8591	25
2014-11-08	62	8653	8
2014-11-09	41	8694	5
2014-11-10	25	8719	2
2014-11-11	49	8768	9
2014-11-12	56	8824	7
2014-11-13	105	8929	8
2014-11-14	109	9038	9
2014-11-15	134	9172	3
2014-11-16	75	9247	5
2014-11-17	72	9319	5
2014-11-18	69	9388	4
2014-11-19	94	9482	11
2014-11-20	32	9514	5
2014-11-21	62	9576	11
2014-11-22	32	9608	6
2014-11-23	33	9641	3
2014-11-24	53	9694	7
2014-11-25	24	9718	5
2014-11-26	24	9742	7
2014-11-27	20	9762	4
2014-11-28	30	9792	4
2014-11-29	12	9804	4
2014-12-01	73	9877	7
2014-12-02	17	9894	5
2014-12-03	1	9895	1
2014-12-04	5	9900	4
2014-12-05	1	9901	1
2014-12-06	262	10163	38
2014-12-07	550	10713	47
2014-12-08	77	10790	15
2014-12-09	185	10975	10
2014-12-10	15	10990	9
2014-12-11	112	11102	16
2014-12-12	67	11169	14
2014-12-13	36	11205	10
2014-12-14	16	11221	7
2014-12-15	105	11326	9
2014-12-16	74	11400	8
2014-12-17	70	11470	10
2014-12-18	98	11568	14
2014-12-19	38	11606	8
2014-12-20	24	11630	9
2014-12-21	27	11657	7
2014-12-22	4	11661	1