A line chart with the y-axis domain max fixed at 100.
The y-axis label appears at the max y value of all of the lines.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.yVariable); });
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 + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
//console.log(d.date);
});
var browsers = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, yVariable: +d[name]};
})
};
});
console.log("browsers")
console.log(browsers);
// get an array of all of the values that we can
// compute the max of
var marketShares = [];
color.domain().forEach(function(name) {
data.map(function(d) { return +d[name] }).forEach(function(el){
marketShares.push(el);
})
})
console.log("max marketShare")
console.log(d3.max(marketShares));
console.log("marketShares");
console.log(marketShares);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(browsers, function(c) { return d3.min(c.values, function(v) { return v.yVariable; }); }),
100// d3.max(browsers, function(c) { return d3.max(c.values, function(v) { return v.yVariable; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("x", 0) // y(d3.max(marketShares))
.attr("y", -margin.left*.75)
.attr("transform", "translate(0," + y(d3.max(marketShares)) + ")" + " " + "rotate(-90)")
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Market Share (%)");
console.log(d3.max(function(d) { return d.yVariable }))
var browser = svg.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
browser.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.yVariable) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.style("opacity", 1)
.text(function(d) { return d.name; });
});
</script>
"date","IE","Chrome","Firefox","Safari","Opera","Android","360 Safe Browser","Maxthon","Yandex Browser","Sony PS3","Silk","Sogou Explorer","Mozilla","Chromium","QQ Browser","AOL","SeaMonkey","RockMelt","BlackBerry","UC Browser","Pale Moon","Iron","Coc Coc","TheWorld","Flock","Puffin","Other"
2008-07,68.57,0,26.14,3.3,1.78,0,0,0,0,0,0,0,0,0,0,0,0.04,0,0,0,0,0,0,0,0,0,0.17
2008-08,68.91,0,26.08,2.99,1.83,0,0,0,0,0,0,0,0,0,0,0,0.04,0,0,0,0,0,0,0,0,0,0.15
2008-09,67.16,1.03,25.77,3,2.86,0,0,0,0,0,0,0,0,0,0,0,0.04,0,0,0,0,0,0,0,0,0,0.14
2008-10,67.68,1.02,25.54,2.91,2.69,0,0,0,0,0,0,0,0,0,0,0,0.04,0,0,0,0,0,0,0,0,0,0.13
2008-11,68.14,0.93,25.27,2.49,3.01,0,0,0,0,0.02,0,0,0,0,0,0,0.03,0,0,0,0,0,0,0,0,0,0.11
2008-12,67.84,1.21,25.23,2.41,2.83,0,0,0,0,0.06,0,0,0.08,0,0,0.14,0.03,0,0,0,0,0,0,0,0.01,0,0.15
2009-01,65.41,1.38,27.03,2.57,2.92,0,0,0,0,0.08,0,0,0.15,0,0,0.27,0.04,0,0,0,0,0,0,0,0.01,0,0.14
2009-02,64.43,1.52,27.85,2.59,2.95,0,0,0,0,0.07,0,0,0.15,0,0,0.26,0.04,0,0,0,0,0,0,0,0.01,0,0.14
2009-03,62.52,1.73,29.4,2.73,2.94,0,0,0,0,0.08,0,0,0.16,0,0,0.25,0.03,0,0,0,0,0,0,0,0.01,0,0.14
2009-04,61.88,2.07,29.67,2.75,2.96,0,0,0,0,0.1,0,0,0.17,0,0,0.24,0.03,0,0,0,0,0,0,0,0.01,0,0.13
2009-05,62.09,2.42,28.75,2.65,3.23,0,0,0,0,0.09,0,0,0.4,0,0,0.21,0.03,0,0,0,0,0,0,0,0.01,0,0.13
2009-06,59.49,2.82,30.33,2.93,3.36,0,0,0,0,0.11,0,0,0.55,0,0,0.21,0.03,0,0,0,0,0,0,0,0.02,0,0.15
2009-07,60.11,3.01,30.5,3.02,2.64,0,0,0,0,0.14,0,0,0.2,0,0,0.2,0.03,0,0,0,0,0,0,0,0.01,0,0.13
2009-08,58.69,3.38,31.28,3.25,2.67,0,0,0,0,0.15,0,0,0.24,0,0,0.19,0.03,0,0,0,0,0,0,0,0.01,0,0.11
2009-09,58.37,3.69,31.34,3.28,2.62,0,0,0,0,0.12,0,0,0.26,0,0,0.18,0.03,0,0,0,0,0,0,0,0.01,0,0.09
2009-10,57.96,4.17,31.82,3.47,1.88,0,0,0,0,0.13,0,0,0.28,0,0,0.17,0.03,0,0,0,0,0,0,0,0.01,0,0.09
2009-11,56.57,4.66,32.21,3.67,2.02,0,0,0,0,0.14,0,0,0.44,0,0,0.16,0.03,0,0,0,0,0,0,0,0.01,0,0.09
2009-12,55.72,5.45,31.97,3.48,2.06,0,0,0.28,0,0.15,0,0,0.6,0,0,0.14,0.03,0,0,0,0,0,0,0,0.01,0,0.1
2010-01,55.25,6.04,31.64,3.76,2,0,0,0.38,0,0.15,0,0,0.48,0,0,0.14,0.03,0,0,0,0,0,0,0,0.02,0,0.11
2010-02,54.5,6.72,31.82,4.08,1.97,0,0,0.3,0,0.13,0,0,0.16,0,0,0.14,0.03,0,0,0,0,0,0,0,0.03,0,0.11
2010-03,54.44,7.29,31.27,4.16,1.97,0,0,0.28,0,0.13,0,0,0.16,0,0,0.13,0.03,0,0,0,0,0,0,0,0.03,0,0.1
2010-04,53.26,8.06,31.74,4.23,1.82,0,0,0.26,0,0.14,0,0,0.16,0,0,0.12,0.03,0,0,0,0,0,0,0,0.03,0,0.14
2010-05,52.77,8.61,31.64,4.14,1.96,0,0,0.24,0,0.14,0,0,0.15,0,0,0.11,0.03,0,0,0,0,0,0,0,0.03,0,0.17
2010-06,52.86,9.24,31.15,4.07,1.91,0,0,0.22,0,0.15,0,0,0.14,0,0,0.11,0.03,0,0,0,0,0,0,0,0.03,0,0.09
2010-07,52.68,9.88,30.69,4.09,1.91,0,0,0.2,0,0.15,0,0,0.12,0,0,0.11,0.03,0,0,0,0,0,0,0,0.03,0,0.1
2010-08,51.34,10.76,31.09,4.23,1.88,0,0,0.19,0,0.15,0,0,0.11,0,0,0.1,0.03,0,0,0,0,0,0,0,0.03,0,0.09
2010-09,49.87,11.54,31.5,4.42,2.03,0,0,0.18,0,0.14,0,0,0.1,0,0,0.08,0.03,0,0,0,0,0,0,0,0.02,0,0.08
2010-10,49.21,12.39,31.24,4.56,2,0,0,0.17,0,0.14,0,0,0.1,0,0,0.07,0.03,0,0,0,0,0,0,0,0.03,0,0.07
2010-11,48.16,13.35,31.17,4.7,2.01,0,0,0.18,0,0.13,0,0,0.09,0,0,0.06,0.03,0,0,0,0,0,0,0,0.03,0,0.08
2010-12,46.94,14.85,30.76,4.79,2.07,0,0,0.17,0,0.15,0,0,0.09,0,0,0.06,0.03,0,0,0,0,0,0,0,0.02,0,0.07
2011-01,46,15.68,30.68,5.09,2,0.01,0,0.15,0,0.15,0,0,0.08,0,0,0.06,0.03,0,0,0,0,0,0,0,0.02,0,0.07
2011-02,45.44,16.54,30.37,5.08,2,0.01,0,0.16,0,0.14,0,0,0.08,0,0,0.05,0.03,0,0,0,0,0,0,0,0.02,0,0.07
2011-03,45.11,17.37,29.98,5.02,1.97,0.02,0,0.17,0,0.13,0,0,0.07,0,0,0.05,0.03,0,0,0,0,0,0,0,0.02,0,0.06
2011-04,44.52,18.29,29.67,5.04,1.91,0.02,0,0.17,0,0.14,0,0,0.06,0.01,0,0.04,0.02,0.01,0,0,0,0,0,0,0.02,0,0.06
2011-05,43.87,19.36,29.29,5.01,1.84,0.03,0,0.15,0,0.15,0,0,0.05,0.05,0,0.02,0.02,0.04,0,0,0,0.02,0,0,0.02,0,0.07
2011-06,43.58,20.65,28.34,5.07,1.74,0.04,0,0.15,0,0.14,0,0,0.04,0.05,0,0.02,0.02,0.03,0,0,0,0.02,0,0,0.02,0,0.07
2011-07,42.45,22.14,27.95,5.17,1.66,0.06,0,0.16,0,0.15,0,0,0.04,0.05,0,0.02,0.02,0.03,0,0,0,0.02,0,0,0.02,0,0.06
2011-08,41.89,23.16,27.49,5.19,1.67,0.07,0,0.13,0,0.15,0,0,0.03,0.05,0,0.01,0.02,0.03,0,0,0,0.02,0,0,0.02,0,0.06
2011-09,41.66,23.61,26.79,5.6,1.72,0.07,0,0.14,0,0.15,0,0,0.03,0.05,0,0.01,0.02,0.03,0.01,0,0,0.02,0,0,0.01,0,0.06
2011-10,40.18,25,26.39,5.93,1.81,0.13,0,0.14,0,0.15,0,0,0.03,0.06,0,0.01,0.03,0.03,0.01,0,0,0.02,0,0,0.01,0,0.06
2011-11,40.63,25.69,25.23,5.92,1.82,0.15,0,0.13,0,0.14,0,0,0.03,0.06,0,0.01,0.03,0.03,0.01,0,0,0.02,0,0.02,0.01,0,0.08
2011-12,38.65,27.27,25.27,6.08,1.98,0.19,0,0.1,0,0.15,0,0,0.02,0.07,0,0.01,0.03,0.03,0.01,0,0,0.02,0,0.02,0.01,0,0.08
2012-01,37.45,28.4,24.78,6.62,1.95,0.24,0,0.09,0,0.14,0,0,0.02,0.07,0,0.01,0.03,0.03,0.03,0,0,0.02,0,0.02,0.02,0,0.08
2012-02,35.75,29.84,24.88,6.77,2.02,0.25,0,0.09,0,0.04,0,0,0.02,0.07,0,0.01,0.03,0.03,0.03,0,0,0.02,0,0.02,0.02,0,0.09
2012-03,34.81,30.87,24.98,6.72,1.78,0.27,0,0.1,0,0.06,0.04,0,0.02,0.07,0,0.01,0.04,0.04,0.03,0,0,0.03,0,0.02,0.03,0,0.08
2012-04,34.07,31.23,24.87,7.13,1.72,0.29,0,0.11,0,0.12,0.08,0,0.02,0.07,0.01,0.01,0.04,0.05,0.03,0,0,0.03,0,0.02,0.02,0,0.08
2012-05,32.12,32.43,25.55,7.09,1.77,0.31,0.02,0.12,0,0.12,0.08,0,0.02,0.07,0.02,0,0.03,0.06,0.03,0,0,0.03,0,0.02,0.02,0,0.08
2012-06,32.31,32.76,24.56,7,1.77,0.34,0.32,0.12,0,0.13,0.08,0,0.02,0.07,0.02,0,0.03,0.06,0.03,0,0.03,0.03,0,0.02,0.01,0,0.23
2012-07,32.04,33.81,23.73,7.12,1.72,0.36,0.43,0.12,0,0.13,0.1,0.01,0.01,0.08,0.02,0,0.02,0.06,0.03,0,0.03,0.02,0,0.02,0.01,0,0.1
2012-08,32.85,33.59,22.85,7.39,1.63,0.38,0.4,0.12,0,0.14,0.1,0.11,0.01,0.08,0.03,0,0.02,0.06,0.03,0,0.03,0.02,0,0.02,0.01,0,0.12
2012-09,32.7,34.21,22.4,7.7,1.61,0.41,0.06,0.13,0,0.13,0.09,0.12,0.01,0.09,0.03,0,0.02,0.06,0.03,0,0.03,0.02,0,0.02,0.01,0,0.1
2012-10,32.08,34.77,22.32,7.81,1.63,0.44,0.07,0.13,0,0.13,0.08,0.13,0.01,0.08,0.03,0,0.02,0.06,0.03,0,0.03,0.01,0,0.02,0.01,0,0.09
2012-11,31.23,35.72,22.37,7.83,1.39,0.49,0.08,0.14,0.01,0.13,0.08,0.13,0.01,0.08,0.03,0,0.02,0.05,0.04,0,0.03,0.01,0,0.02,0.01,0,0.09
2012-12,30.78,36.42,21.89,7.92,1.26,0.59,0.17,0.16,0.05,0.14,0.08,0.13,0.01,0.08,0.03,0,0.02,0.05,0.04,0,0.03,0.01,0,0.02,0.01,0,0.1
2013-01,30.71,36.52,21.42,8.29,1.19,0.69,0.1,0.15,0.12,0.13,0.15,0.13,0.01,0.06,0.03,0,0.02,0.05,0.04,0,0.03,0.01,0,0.02,0.01,0,0.1
2013-02,29.82,37.09,21.34,8.6,1.22,0.74,0.1,0.15,0.16,0.12,0.17,0.13,0.01,0.05,0.03,0,0.02,0.04,0.04,0,0.04,0.01,0,0.02,0.01,0,0.1
2013-03,29.3,38.07,20.87,8.5,1.17,0.77,0.12,0.17,0.2,0.12,0.17,0.16,0.01,0.06,0.03,0,0.02,0.04,0.04,0.01,0.04,0.01,0,0.02,0.01,0,0.1
2013-04,29.71,39.15,20.06,8,1.01,0.74,0.14,0.16,0.23,0.11,0.15,0.16,0.01,0.07,0.03,0,0.02,0.04,0.04,0.01,0.04,0.01,0,0.02,0,0,0.1
2013-05,27.72,41.38,19.76,7.96,1,0.78,0.14,0.17,0.26,0.11,0.15,0.16,0.01,0.07,0.04,0,0.02,0.03,0.03,0.01,0.03,0.01,0,0.02,0,0,0.12
2013-06,25.44,42.68,20.01,8.39,1.03,0.86,0.18,0.19,0.31,0.12,0.17,0.18,0.02,0.07,0.04,0,0.02,0.03,0.04,0.01,0.04,0.02,0,0.02,0,0,0.13
2013-07,24.53,43.12,20.09,8.59,1.1,0.92,0.18,0.19,0.3,0.13,0.18,0.18,0.01,0.08,0.05,0,0.02,0.03,0.04,0.01,0.04,0.02,0,0.02,0,0.02,0.18
2013-08,25.55,42.78,19.25,8.57,1.16,0.94,0.22,0.19,0.32,0.13,0.17,0.19,0.01,0.07,0.06,0,0.02,0.02,0.03,0.02,0.04,0.02,0,0.02,0,0.03,0.18
2013-09,28.56,40.8,18.36,8.52,1.16,0.92,0.24,0.19,0.33,0.1,0.16,0.16,0.01,0.08,0.05,0,0.02,0.01,0.03,0.01,0.04,0.02,0,0.02,0,0.03,0.18
2013-10,28.96,40.44,18.11,8.54,1.2,0.9,0.41,0.2,0.31,0.09,0.16,0.16,0.01,0.07,0.06,0,0.02,0.01,0.03,0.02,0.04,0.02,0,0.02,0,0.03,0.2
2013-11,27.31,41.87,18.15,8.5,1.18,0.94,0.55,0.22,0.32,0.09,0.17,0.15,0.02,0.08,0.07,0,0.02,0.01,0.03,0.02,0.04,0.02,0,0.03,0,0.03,0.19
2013-12,23.24,43.92,18.95,9.14,1.31,1.13,0.69,0.23,0.34,0.09,0.21,0.17,0.02,0.07,0.08,0,0.02,0.01,0.03,0.02,0.02,0.02,0,0.03,0,0.03,0.21
2014-01,22.86,43.68,18.92,9.74,1.3,1.22,0.59,0.23,0.37,0.08,0.24,0.19,0.02,0.07,0.09,0,0.02,0.01,0.03,0.02,0.02,0.02,0,0.03,0,0.03,0.21
2014-02,22.58,43.85,19.24,9.68,1.34,1.2,0.37,0.25,0.34,0.09,0.23,0.23,0.02,0.07,0.1,0,0.02,0.01,0.03,0.03,0.02,0.02,0,0.03,0,0.03,0.21
2014-03,22.58,43.66,18.75,9.91,1.38,1.18,0.84,0.25,0.33,0.08,0.22,0.16,0.02,0.08,0.1,0,0.02,0.01,0.03,0.03,0.02,0.02,0,0.04,0,0.03,0.24
2014-04,21.43,45.22,18.62,9.79,1.39,1.17,0.68,0.23,0.37,0.08,0.21,0.15,0.02,0.11,0.09,0,0.02,0.01,0.03,0.03,0.02,0.02,0,0.03,0,0.04,0.23
2014-05,20.78,45.6,18.72,10.02,1.35,1.24,0.68,0.22,0.29,0.07,0.21,0.14,0.02,0.12,0.09,0,0.02,0,0.02,0.04,0.02,0.02,0,0.03,0,0.04,0.24
2014-06,20.98,45.46,17.95,10.3,1.37,1.34,0.91,0.24,0.3,0.07,0.23,0.15,0.03,0.1,0.11,0,0.02,0,0.02,0.04,0.02,0.02,0.05,0.04,0,0.04,0.2
2014-07,21.38,45.28,17.52,10.6,1.39,1.36,0.78,0.23,0.29,0.06,0.24,0.16,0.03,0.11,0.12,0,0.02,0,0.02,0.04,0.02,0.02,0.05,0.03,0,0.03,0.21
2014-08,20.31,46.26,17.5,10.81,1.47,1.37,0.5,0.23,0.33,0.06,0.25,0.19,0.03,0.11,0.13,0,0.02,0,0.02,0.05,0.02,0.02,0.07,0.02,0,0.03,0.2
2014-09,20.46,45.58,17.44,11.21,1.39,1.33,0.81,0.26,0.28,0.05,0.25,0.2,0.03,0.09,0.14,0,0.02,0,0.02,0.05,0.02,0.02,0.07,0.03,0,0.03,0.21
2014-10,19.3,47.63,17.04,10.99,1.33,1.36,0.66,0.24,0.29,0.05,0.22,0.19,0.04,0.08,0.12,0,0.02,0,0.02,0.04,0.02,0.02,0.06,0.03,0,0.03,0.19
2014-11,19.6,48.06,16.74,10.63,1.43,1.6,0.16,0.22,0.34,0.06,0.22,0.2,0.04,0.09,0.11,0,0.02,0.01,0.02,0.05,0.02,0.05,0.08,0.01,0,0.04,0.19
2014-12,22.3,46.13,16.34,10.3,1.43,1.58,0.17,0.22,0.31,0.05,0.25,0.19,0.04,0.09,0.11,0,0.02,0,0.02,0.06,0.02,0.03,0.08,0.01,0,0.04,0.21
2015-01,19.28,48.15,16.96,10.28,1.58,1.58,0.29,0.24,0.33,0.05,0.25,0.21,0.05,0.11,0.13,0,0.02,0,0.02,0.07,0.03,0.02,0.09,0.01,0,0.04,0.23
2015-02,18.91,48.71,16.53,10.21,1.63,1.61,0.46,0.25,0.34,0.05,0.24,0.22,0.04,0.12,0.15,0,0.02,0,0.02,0.07,0.03,0.01,0.11,0.02,0,0.03,0.24
2015-03,18.06,49.19,16.96,10.4,1.65,1.48,0.34,0.24,0.35,0.04,0.24,0.23,0.04,0.12,0.14,0,0.02,0,0.02,0.08,0.03,0.01,0.09,0.02,0,0.03,0.24
2015-04,18.28,49.84,16.77,9.88,1.65,1.28,0.39,0.25,0.35,0.04,0.22,0.23,0.03,0.13,0.14,0,0.02,0,0.01,0.08,0.03,0.01,0.1,0.02,0,0.03,0.22
2015-05,18.3,49.24,16.39,10.83,1.65,1.4,0.34,0.23,0.35,0.04,0.21,0.2,0.04,0.12,0.13,0,0.02,0,0.01,0.09,0.02,0.01,0.1,0.01,0,0.03,0.21
2015-06,18.5,49.65,16.11,10.55,1.65,1.42,0.23,0.23,0.35,0.03,0.22,0.23,0.04,0.12,0.14,0,0.02,0,0.01,0.1,0.03,0.01,0.1,0.01,0,0.03,0.22
2015-07,17.19,51.74,15.68,9.79,1.83,1.51,0.14,0.25,0.4,0.03,0.24,0.26,0.04,0.13,0.17,0,0.03,0,0.02,0.11,0.03,0.01,0.1,0.01,0,0.03,0.27
2015-08,16.01,52.75,15.69,9.31,1.81,1.39,0.14,0.25,0.43,0.04,0.22,0.29,0.03,0.15,0.2,0,0.02,0,0.01,0.13,0.02,0.02,0.1,0.01,0,0.04,0.91