Skip to content

Instantly share code, notes, and snippets.

@ProQuestionAsker
Created May 3, 2017 22:28
d3v4 Multi-Line Chart with Nesting
Month Sales Fruit
Jan 87 strawberry
Feb 3 strawberry
Mar 89 strawberry
Apr 56 strawberry
May 1 strawberry
Jun 17 strawberry
Jul 59 strawberry
Aug 43 strawberry
Sep 16 strawberry
Oct 94 strawberry
Nov 99 strawberry
Dec 53 strawberry
Jan 93 grape
Feb 8 grape
Mar 95 grape
Apr 62 grape
May 5 grape
Jun 24 grape
Jul 62 grape
Aug 49 grape
Sep 18 grape
Oct 101 grape
Nov 103 grape
Dec 53 grape
Jan 94 blueberry
Feb 15 blueberry
Mar 95 blueberry
Apr 64 blueberry
May 11 blueberry
Jun 33 blueberry
Jul 64 blueberry
Aug 53 blueberry
Sep 27 blueberry
Oct 103 blueberry
Nov 108 blueberry
Dec 62 blueberry
// Set the margins
var margin = {top: 60, right: 100, bottom: 20, left: 80},
width = 850 - margin.left - margin.right,
height = 370 - margin.top - margin.bottom;
// Parse the month variable
var parseMonth = d3.timeParse("%b");
var formatMonth = d3.timeFormat("%b");
// Set the ranges
var x = d3.scaleTime().domain([parseMonth("Jan"),parseMonth("Dec")]).range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the line
var valueLine = d3.line()
.x(function(d) { return x(d.Month); })
.y(function(d) { return y(+d.Sales); })
// Create the svg canvas in the "graph" div
var svg = d3.select("#graph")
.append("svg")
.style("width", width + margin.left + margin.right + "px")
.style("height", height + margin.top + margin.bottom + "px")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")
.attr("class", "svg");
// Import the CSV data
d3.csv("Example2.csv", function(error, data) {
if (error) throw error;
// Format the data
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
d.Sales = +d.Sales;
d.Fruit = d.Fruit;
});
var nest = d3.nest()
.key(function(d){
return d.Fruit;
})
.entries(data)
// 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; })]);
// Set up the x axis
var xaxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(d3.axisBottom(x)
.ticks(d3.timeMonth)
.tickSize(0, 0)
.tickFormat(d3.timeFormat("%B"))
.tickSizeInner(0)
.tickPadding(10));
// Add the Y Axis
var yaxis = svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y)
.ticks(5)
.tickSizeInner(0)
.tickPadding(6)
.tickSize(0, 0));
// yaxis.select(".domain").style("display","none")
// Add a label to the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 60)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Monthly Sales")
.attr("class", "y axis label");
// Draw the line
svg.selectAll(".line")
.data(nest)
.enter()
.append("path")
.attr("class", "line")
.attr("d", function(d){
return valueLine(d.values)});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="graph"></div>
<script src="Exploration2.js"></script>
</body>
</html>
.line {
fill: none;
stroke: #EF5285;
stroke-width: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment