Skip to content

Instantly share code, notes, and snippets.

@abrahamdu

abrahamdu/.block

Last active October 13, 2017 03:10
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 abrahamdu/65e36be64d281e3429b1fe238adabd25 to your computer and use it in GitHub Desktop.
Save abrahamdu/65e36be64d281e3429b1fe238adabd25 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart D3 v4
Raw
.block
license: mit
Raw
browser_statistics.csv
Date Chrome IE/Edge Firefox Safari Opera
Jun-17 76.30 4.60 13.30 3.30 1.20
May-17 75.80 4.60 13.60 3.40 1.10
Apr-17 75.70 4.60 13.60 3.70 1.10
Mar-17 75.10 4.80 14.10 3.60 1.00
Feb-17 74.10 4.80 15.00 3.60 1.00
Jan-17 73.70 4.90 15.40 3.60 1.00
Dec-16 73.70 4.80 15.50 3.50 1.10
Nov-16 73.80 5.20 15.30 3.50 1.10
Oct-16 73.00 5.20 15.70 3.60 1.10
Sep-16 72.50 5.30 16.30 3.50 1.00
Aug-16 72.40 5.20 16.80 3.20 1.10
Jul-16 71.90 5.20 17.10 3.20 1.10
Jun-16 71.70 5.60 17.00 3.30 1.10
May-16 71.40 5.70 16.90 3.60 1.20
Apr-16 70.40 5.80 17.50 3.70 1.30
Mar-16 69.90 6.10 17.80 3.60 1.30
Feb-16 69.00 6.20 18.60 3.70 1.30
Jan-16 68.40 6.20 18.80 3.70 1.40
Dec-15 68.00 6.30 19.10 3.70 1.50
Nov-15 67.40 6.80 19.20 3.90 1.50
Oct-15 66.50 6.90 20.00 3.80 1.40
Sep-15 65.90 7.20 20.60 3.60 1.40
Aug-15 64.00 6.60 21.20 4.50 2.20
Jul-15 63.30 6.50 21.60 4.90 2.50
Jun-15 64.80 7.10 21.30 3.80 1.80
May-15 64.90 7.10 21.50 3.80 1.60
Apr-15 63.90 8.00 21.60 3.80 1.50
Mar-15 63.70 7.70 22.10 3.90 1.50
Feb-15 62.50 8.00 22.90 3.90 1.50
Jan-15 61.90 7.80 23.40 3.80 1.60
Dec-14 61.60 8.00 23.60 3.70 1.60
Nov-14 60.10 9.80 23.40 3.70 1.60
Oct-14 60.40 9.50 23.40 3.90 1.60
Sep-14 59.60 9.90 24.00 3.60 1.60
Aug-14 60.10 8.30 24.70 3.70 1.80
Jul-14 59.80 8.50 24.90 3.50 1.70
Jun-14 59.30 8.80 25.10 3.70 1.80
May-14 59.20 8.90 24.90 3.80 1.80
Apr-14 58.40 9.40 25.00 4.00 1.80
Mar-14 57.50 9.70 25.60 3.90 1.80
Feb-14 56.40 9.80 26.40 4.00 1.90
Jan-14 55.70 10.20 26.90 3.90 1.80
Dec-13 55.80 9.00 26.80 3.80 1.90
Nov-13 54.80 10.50 26.80 4.00 1.80
Oct-13 54.10 11.70 27.20 3.80 1.70
Sep-13 53.20 12.10 27.80 3.90 1.70
Aug-13 52.90 11.80 28.20 3.90 1.80
Jul-13 52.80 11.80 28.90 3.60 1.60
Jun-13 52.10 12.00 28.90 3.90 1.70
May-13 52.90 12.60 27.70 4.00 1.60
Apr-13 52.70 12.70 27.90 4.00 1.70
Mar-13 51.70 13.00 28.50 4.10 1.80
Feb-13 50.00 13.50 29.60 4.10 1.80
Jan-13 48.40 14.30 30.20 4.20 1.90
Dec-12 46.90 14.70 31.10 4.20 2.10
Nov-12 46.30 15.10 31.20 4.40 2.00
Oct-12 44.90 16.10 31.80 4.30 2.00
Sep-12 44.10 16.40 32.20 4.20 2.10
Aug-12 43.70 16.20 32.80 4.00 2.20
Jul-12 42.90 16.30 33.70 3.90 2.10
Jun-12 41.70 16.70 34.40 4.10 2.20
May-12 39.30 18.10 35.20 4.30 2.20
Apr-12 38.30 18.30 35.80 4.50 2.30
Mar-12 37.30 18.90 36.30 4.40 2.30
Feb-12 36.30 19.50 37.10 4.50 2.30
Jan-12 35.30 20.10 37.20 4.30 2.40
Dec-11 34.60 20.20 37.70 4.20 2.50
Nov-11 33.40 21.20 38.10 4.20 2.40
Oct-11 32.30 21.70 38.70 4.20 2.40
Sep-11 30.50 22.90 39.70 4.00 2.20
Aug-11 30.30 22.40 40.60 3.80 2.30
Jul-11 29.40 22.00 42.00 3.60 2.40
Jun-11 27.90 23.20 42.20 3.70 2.40
May-11 25.90 24.90 42.40 4.00 2.40
Apr-11 25.60 24.30 42.90 4.10 2.60
Mar-11 25.00 25.80 42.20 4.00 2.50
Feb-11 24.10 26.50 42.40 4.10 2.50
Jan-11 23.80 26.60 42.80 4.00 2.50
Dec-10 22.40 27.50 43.50 3.80 2.20
Nov-10 20.50 28.60 44.00 4.00 2.30
Oct-10 19.20 29.70 44.10 3.90 2.20
Sep-10 17.30 31.10 45.10 3.70 2.20
Aug-10 17.00 30.70 45.80 3.50 2.30
Jul-10 16.70 30.40 46.40 3.40 2.30
Jun-10 15.90 31.00 46.60 3.60 2.10
May-10 14.50 32.20 46.90 3.50 2.20
Apr-10 13.60 33.40 46.40 3.70 2.20
Mar-10 12.30 34.90 46.20 3.70 2.20
Feb-10 11.60 35.30 46.50 3.80 2.10
Jan-10 10.80 36.20 46.30 3.70 2.20
Dec-09 9.80 37.20 46.40 3.60 2.30
Nov-09 8.50 37.70 47.00 3.80 2.30
Oct-09 8.00 37.50 47.50 3.80 2.30
Sep-09 7.10 39.60 46.60 3.60 2.20
Aug-09 7.00 39.30 47.40 3.30 2.10
Jul-09 6.50 39.40 47.90 3.30 2.10
Jun-09 6.00 40.70 47.30 3.10 2.10
May-09 5.50 41.00 47.70 3.00 2.20
Apr-09 4.90 42.10 47.10 3.00 2.20
Mar-09 4.20 43.30 46.50 3.10 2.30
Feb-09 4.00 43.60 46.40 3.00 2.20
Jan-09 3.90 44.80 45.50 3.00 2.30
Dec-08 3.60 46.00 44.40 2.70 2.40
Nov-08 3.10 47.00 44.20 2.70 2.30
Oct-08 3.00 47.40 44.00 2.80 2.20
Sep-08 3.10 49.00 42.60 2.70 2.00
Aug-08 51.00 43.70 2.60 2.10
Jul-08 52.40 42.60 2.50 1.90
Jun-08 54.20 41.00 2.60 1.70
May-08 54.40 39.80 2.40 1.50
Apr-08 54.80 39.10 2.20 1.40
Mar-08 53.90 37.00 2.10 1.40
Feb-08 54.70 36.50 2.00 1.40
Jan-08 54.70 36.40 1.90 1.40
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
svg {
width: 100%;
height: 100%;
position: center;
}
body {
background-color: lightgrey;
}
.line:hover{
fill: none;
stroke-width: 5;
}
.axis--x path {
fill: none;
display: yellow;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var margin = {top: 30, right: 60, bottom: 50, left: 60};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%b-%y");
var color = d3.scaleOrdinal(d3.schemeCategory10);
var g = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xRange = d3.scaleTime()
.rangeRound([0, width]);
var yRange = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.x(function(d) { return xRange(d.Date); })
.y(function(d) { return yRange(d.market_share); })
.curve(d3.curveMonotoneX);
d3.csv("browser_statistics.csv",function(d, i, columns) {
d.Date = parseTime(d.Date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
},
function(error,data){
if (error) throw error;
var browsers = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {Date: d.Date, market_share: d[id]};
})
};
});
xRange.domain(d3.extent(data, function(d) { return d.Date; }));
yRange.domain([
d3.min(browsers, function(c) { return d3.min(c.values, function(d) { return d.market_share; }); }),
d3.max(browsers, function(c) { return d3.max(c.values, function(d) { return d.market_share; }); })
]);
color.domain(browsers.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xRange))
.style("text-anchor", "middle")
.attr("dx", "-.1em");
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(yRange))
.append("text")
.attr("x",2)
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.attr("text-anchor", "start")
.text("Market Share, %");
var browser = g.selectAll(".browsers")
.data(browsers)
.enter()
.append("g")
.attr("class", "browser");
browser.append("path")
.style("fill", "none")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.id); });
browser.append("text")
.datum(function(d) { return {id: d.id, value: d.values[0]}; })
.attr("transform", function(d) { return "translate(" + xRange(d.value.Date) + "," + yRange(d.value.market_share) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment