Skip to content

Instantly share code, notes, and snippets.

@vikkya

vikkya/.block

Created December 18, 2020 19:20
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 vikkya/48f3b9a52e76fa5a59a4be7884c5583f to your computer and use it in GitHub Desktop.
Save vikkya/48f3b9a52e76fa5a59a4be7884c5583f to your computer and use it in GitHub Desktop.
Download ZIP
multiline chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 70, left: 50},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the line
var line = d3.line()
.x(function(d) { return x(d.month); })
.y(function(d) { return y(d.sales); });
var parseTime = d3.timeParse("%Y%m%d");
// Adds the svg canvas
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 + ")");
// Get the data
d3.csv("stockes.csv", function(error, data) {
data.forEach(function(d) {
d.month = parseTime(d.month);
d.sales = +d.sales;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.month; }));
y.domain([0, d3.max(data, function(d) { return d.sales; })]).nice();
// Add the X Axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y));
// Nest the entries by series
var dataNest = d3.nest()
.key(function(d) {return d.series;})
.entries(data);
// set the colour scale
var color = d3.scaleOrdinal(d3.schemeCategory10);
// Loop through each series / key
dataNest.forEach(function(d,i) {
svg.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key); })
.attr("d", line(d.values));
});
});
</script>
</body>
Raw
stockes.csv
series sales month
1 18 20200125
2 36 20200125
1 26 20200126
2 35 20200126
1 25 20200127
2 35 20200127
1 17 20200128
2 39 20200128
1 1 20200129
2 1 20200129
1 5 20200225
2 12 20200225
1 11 20200226
2 22 20200226
1 26 20200227
2 21 20200227
1 27 20200228
2 28 20200228
1 1 20200229
2 1 20200229
1 27 20200325
2 23 20200325
1 29 20200326
2 24 20200326
1 36 20200327
2 30 20200327
1 19 20200328
2 34 20200328
1 1 20200329
2 1 20200329
1 40 20200425
2 36 20200425
1 21 20200426
2 33 20200426
1 30 20200427
2 13 20200427
1 50 20200428
2 26 20200428
1 1 20200429
2 1 20200429
1 33 20200525
2 50 20200525
1 36 20200526
2 12 20200526
1 20 20200527
2 26 20200527
1 25 20200528
2 26 20200528
1 1 20200529
2 1 20200529
1 17 20200625
2 17 20200625
1 26 20200626
2 54 20200626
1 39 20200627
2 40 20200627
1 46 20200628
2 44 20200628
1 1 20200629
2 1 20200629
1 30 20200725
2 28 20200725
1 29 20200726
2 22 20200726
1 42 20200727
2 37 20200727
1 51 20200728
1 1 20200729
2 1 20200729
1 51 20200825
2 71 20200825
1 33 20200826
2 21 20200826
1 41 20200827
2 32 20200827
1 17 20200828
2 17 20200828
1 1 20200829
2 1 20200829
1 37 20200925
2 46 20200925
1 12 20200926
2 36 20200926
1 19 20200927
2 21 20200927
1 33 20200928
2 35 20200928
1 1 20200929
2 1 20200929
1 22 20201024
2 11 20201024
1 33 20201025
2 18 20201025
1 49 20201026
2 36 20201026
1 52 20201027
2 40 20201027
1 30 20201028
2 38 20201028
1 1 20201029
2 1 20201029
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment