Skip to content

Instantly share code, notes, and snippets.

@d3netxer

d3netxer/MapGive 2014 Daily Changesets

Last active August 29, 2015 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3netxer/86c282dc016af86a06b2 to your computer and use it in GitHub Desktop.
Save d3netxer/86c282dc016af86a06b2 to your computer and use it in GitHub Desktop.
Download ZIP
MapGive 2014 Daily Changesets
Raw
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;
//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("changesets");
//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 Changesets 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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment