Skip to content

Instantly share code, notes, and snippets.

@dawaldron

dawaldron/QueryResults.csv

Last active October 12, 2018 14:37
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 dawaldron/29f27ab3ec8836c830db1207448271fc to your computer and use it in GitHub Desktop.
Save dawaldron/29f27ab3ec8836c830db1207448271fc to your computer and use it in GitHub Desktop.
Download ZIP
Stack Overflow tag comparison
Raw
index.html
<!DOCTYPE html>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
margin:10px;
font-family:Roboto,sans-serif;
}
.chart-line {
fill:none;
stroke:#000;
stroke-width:1.5;
}
.axis line, .axis path {
stroke-width:.5;
}
.title {
margin-bottom:5px;
font-weight:300;
font-size:22px;
}
.subtitle {
color:#888;
font-size:12px;
}
.source {
color:#aaa;
font-size:11px;
}
</style>
<div class="title">The popularity of R's dplyr package</div>
<div class="subtitle">Number of Stack Overflow questions by tag (quarterly)</div>
<div id="chart" style="width:500px"></div>
<div class="source">Data source: Stack Exchange Data Explorer</div>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var divwidth = +d3.select("#chart").style("width").replace("px",""),
margin = { top:15, right:65, bottom:25, left:35 },
width = divwidth - margin.left - margin.right,
height = divwidth * .5 - margin.top - margin.bottom,
svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y-%m-%d 00:00:00");
d3.csv("QueryResults.csv", function(error, data) {
if (error) throw error;
data.pop();
data.forEach(function(d) {
d.date = parseTime(d.month);
d.tag1 = +d.tag1;
d.tag2 = +d.tag2;
d.tag3 = +d.tag3 > 0 ? d.tag3 : null;
return(d);
})
data = data.filter(function(d) { return d.date >= parseTime("2010-01-01 00:00:00"); })
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.rangeRound([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return +d.tag3; })])
.rangeRound([height, 0]);
var color = ["#84a4b5", "#8eb26e", "#186090"];
var radius = 2;
var line1 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tag1); });
var line2 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tag2); });
var line3 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tag3); });
var yAxis = g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y)
.ticks(4));
yAxis.select(".domain").remove();
yAxis.selectAll(".tick line")
.attr("x2", width)
.style("stroke", "#ddd")
.style("stroke-width", .5);
var xAxis = g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("path")
.datum(data)
.attr("class", "chart-line")
.style("stroke", color[0])
.attr("d", line1);
g.append("path")
.datum(data)
.attr("class", "chart-line")
.style("stroke", color[1])
.attr("d", line2);
g.append("path")
.datum(data)
.attr("class", "chart-line")
.style("stroke", color[2])
.attr("d", line3);
g.append("circle")
.attr("cx", x(data[data.length - 1].date))
.attr("cy", y(data[data.length - 1].tag1))
.attr("r", radius)
.style("fill", color[0]);
g.append("circle")
.attr("cx", x(data[data.length - 1].date))
.attr("cy", y(data[data.length - 1].tag2))
.attr("r", radius)
.style("fill", color[1]);
g.append("circle")
.attr("cx", x(data[data.length - 1].date))
.attr("cy", y(data[data.length - 1].tag3))
.attr("r", radius)
.style("fill", color[2]);
g.append("text")
.attr("x", x(data[data.length - 1].date))
.attr("y", y(data[data.length - 1].tag1))
.attr("dx", 5)
.attr("dy", 3)
.style("font-size", "12px")
.style("fill", color[0])
.text("plyr");
g.append("text")
.attr("x", x(data[data.length - 1].date))
.attr("y", y(data[data.length - 1].tag2))
.attr("dx", 5)
.attr("dy", 3)
.style("font-size", "12px")
.style("fill", color[1])
.text("data.table");
g.append("text")
.attr("x", x(data[data.length - 1].date))
.attr("y", y(data[data.length - 1].tag3))
.attr("dx", 5)
.attr("dy", 3)
.style("font-size", "12px")
.style("fill", color[2])
.text("dplyr");
g.append("text")
.attr("x", x(parseTime("2014-01-01 00:00:00")))
.attr("y", 0)
.attr("dx", 3)
.attr("dy", 9)
.style("font-size", "12px")
.style("fill", color[2])
.text("dplyr released");
g.append("line")
.attr("x1", x(parseTime("2014-01-01 00:00:00")))
.attr("y1", 0)
.attr("x2", x(parseTime("2014-01-01 00:00:00")))
.attr("y1", height)
.style("stroke", color[2])
.style("stroke-width", 1)
.style("stroke-dasharray", "1 2");
});
</script>
Raw
QueryResults.csv
month tag1 tag2 tag3 tag4 total
2009-07-01 00:00:00 2 0 0 0 2
2009-10-01 00:00:00 2 0 0 0 2
2010-01-01 00:00:00 3 2 0 0 5
2010-04-01 00:00:00 7 0 0 0 7
2010-07-01 00:00:00 8 1 0 0 9
2010-10-01 00:00:00 12 2 0 0 13
2011-01-01 00:00:00 20 6 0 0 25
2011-04-01 00:00:00 20 4 0 0 23
2011-07-01 00:00:00 35 14 0 0 47
2011-10-01 00:00:00 50 26 0 0 71
2012-01-01 00:00:00 59 22 0 0 76
2012-04-01 00:00:00 71 77 0 0 133
2012-07-01 00:00:00 63 97 3 0 148
2012-10-01 00:00:00 64 91 0 0 149
2013-01-01 00:00:00 94 131 1 0 221
2013-04-01 00:00:00 64 177 0 0 236
2013-07-01 00:00:00 117 184 0 0 293
2013-10-01 00:00:00 85 167 1 0 245
2014-01-01 00:00:00 98 279 74 0 418
2014-04-01 00:00:00 92 266 88 0 419
2014-07-01 00:00:00 92 248 171 0 480
2014-10-01 00:00:00 82 226 217 0 495
2015-01-01 00:00:00 108 294 344 0 699
2015-04-01 00:00:00 88 369 390 0 785
2015-07-01 00:00:00 65 372 380 0 783
2015-10-01 00:00:00 65 411 387 0 811
2016-01-01 00:00:00 75 370 424 0 832
2016-04-01 00:00:00 55 365 487 0 855
2016-07-01 00:00:00 47 345 539 0 880
2016-10-01 00:00:00 66 335 533 0 875
2017-01-01 00:00:00 41 424 666 0 1075
2017-04-01 00:00:00 54 438 809 0 1230
2017-07-01 00:00:00 65 401 932 0 1318
2017-10-01 00:00:00 58 372 978 0 1323
2018-01-01 00:00:00 48 423 1062 0 1433
2018-04-01 00:00:00 49 466 1212 0 1617
2018-07-01 00:00:00 49 387 1165 0 1492
2018-10-01 00:00:00 0 21 101 0 117
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment