Built with blockbuilder.org
forked from abrahamdu's block: Line Chart D3 v4
license: mit |
Built with blockbuilder.org
forked from abrahamdu's block: Line Chart D3 v4
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 |
<!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> |