Skip to content

Instantly share code, notes, and snippets.

@asconz

asconz/.block

Last active August 1, 2017 17:30
Show Gist options
  • Save asconz/cc85d738ac8035de56f772a627ab9bba to your computer and use it in GitHub Desktop.
Save asconz/cc85d738ac8035de56f772a627ab9bba to your computer and use it in GitHub Desktop.
Download ZIP
GoogleTrends-OS-MarketShare
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 1.5px;
}
.label {
text-anchor: middle;
}
.label rect {
fill: white;
}
.label-key {
font-weight: bold;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.0.0-alpha.9.min.js"></script>
<script>
var parseTime = d3.timeParse("%Y");
var svg = d3.select("svg");
var margin = {top: 30, right: 50, bottom: 30, left: 30},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
labelPadding = 3;
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.requestCsv("OperatingSystemTimeline.csv", function(d) {
console.log(d.date)
d.date = Date.parse(d.date);
console.log(d.date)
for (var k in d) if (k !== "date") d[k] = +d[k];
return d;
}, function(error, data) {
if (error) throw error;
var series = data.columns.slice(1).map(function(key) {
return data.map(function(d) {
return {
key: key,
date: d.date,
value: d[key]
};
});
});
var x = d3.scaleTime()
.domain([data[0].date, data[data.length - 1].date])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(series, function(s) { return d3.max(s, function(d) { return d.value; }); })])
.range([height, 0]);
var z = d3.scaleCategory10();
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var serie = g.selectAll(".serie")
.data(series)
.enter().append("g")
.attr("class", "serie");
serie.append("path")
.attr("class", "line")
.style("stroke", function(d) { return z(d[0].key); })
.attr("d", d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); }));
var label = serie.selectAll(".label")
.data(function(d) { return d; })
.enter().append("g")
.attr("class", "label")
.attr("transform", function(d, i) { return "translate(" + x(d.date) + "," + y(d.value) + ")"; });
label.append("text")
.attr("dy", ".35em")
.text(function(d) { return d.value; })
.filter(function(d, i) { return i === data.length - 1; })
.append("tspan")
.attr("class", "label-key")
.text(function(d) { return " " + d.key; });
label.append("rect", "text")
.datum(function() { return this.nextSibling.getBBox(); })
.attr("x", function(d) { return d.x - labelPadding; })
.attr("y", function(d) { return d.y - labelPadding; })
.attr("width", function(d) { return d.width + 2 * labelPadding; })
.attr("height", function(d) { return d.height + 2 * labelPadding; });
});
</script>
Raw
OperatingSystemTimeline.csv
date Linux macOS Mac Windows 10 iOS
2016-01-03 8 10 34 21 10
2016-01-10 8 9 32 20 10
2016-01-17 9 10 33 19 11
2016-01-24 9 10 33 19 11
2016-01-31 9 9 33 19 10
2016-02-07 8 9 32 19 9
2016-02-14 9 9 32 18 9
2016-02-21 9 9 32 18 9
2016-02-28 9 9 32 19 9
2016-03-06 9 9 32 19 9
2016-03-13 9 9 31 19 9
2016-03-20 8 9 31 19 14
2016-03-27 8 9 31 19 13
2016-04-03 8 9 31 18 10
2016-04-10 8 8 31 19 9
2016-04-17 8 8 30 18 8
2016-04-24 8 8 30 18 8
2016-05-01 8 8 30 18 8
2016-05-08 8 8 29 18 8
2016-05-15 8 8 29 20 9
2016-05-22 8 8 29 20 9
2016-05-29 8 8 29 20 8
2016-06-05 8 8 29 19 8
2016-06-12 8 9 29 19 13
2016-06-19 8 8 29 19 10
2016-06-26 8 8 28 19 10
2016-07-03 8 8 27 19 13
2016-07-10 8 7 26 19 17
2016-07-17 8 7 26 21 14
2016-07-24 8 7 27 27 15
2016-07-31 8 8 28 22 14
2016-08-07 8 7 27 20 13
2016-08-14 7 7 27 19 12
2016-08-21 8 8 29 18 11
2016-08-28 8 8 30 18 11
2016-09-04 8 8 30 18 14
2016-09-11 8 9 31 18 36
2016-09-18 8 11 33 19 21
2016-09-25 8 10 33 20 17
2016-10-02 8 10 32 19 15
2016-10-09 8 10 31 19 13
2016-10-16 8 9 31 18 12
2016-10-23 8 9 32 18 11
2016-10-30 8 9 32 18 11
2016-11-06 8 9 31 17 10
2016-11-13 9 9 32 17 10
2016-11-20 8 9 34 17 9
2016-11-27 8 9 33 17 9
2016-12-04 8 8 31 17 9
2016-12-11 8 8 31 17 11
2016-12-18 8 8 32 17 11
2016-12-25 7 8 32 19 11
2017-01-01 7 9 31 17 10
2017-01-08 8 9 30 17 9
2017-01-15 8 9 31 17 9
2017-01-22 8 9 30 17 10
2017-01-29 8 9 31 16 10
2017-02-05 9 9 30 17 9
2017-02-12 8 8 29 16 9
2017-02-19 9 8 29 16 9
2017-02-26 9 9 31 16 8
2017-03-05 9 8 30 16 8
2017-03-12 9 8 29 16 8
2017-03-19 8 8 29 17 8
2017-03-26 8 8 28 16 10
2017-04-02 8 8 29 16 9
2017-04-09 8 8 28 18 9
2017-04-16 8 8 28 17 8
2017-04-23 8 8 28 16 8
2017-04-30 8 8 28 16 8
2017-05-07 8 8 28 16 8
2017-05-14 8 7 27 16 8
2017-05-21 8 7 27 15 8
2017-05-28 8 7 25 15 8
2017-06-04 8 7 28 14 13
2017-06-11 8 7 26 15 9
2017-06-18 8 7 25 14 9
2017-06-25 8 7 26 15 10
2017-07-02 7 7 25 15 9
2017-07-09 8 7 25 16 9
2017-07-16 8 7 25 16 9
2017-07-23 8 7 28 16 9
2017-07-30 7 9 39 23 14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment