Skip to content

Instantly share code, notes, and snippets.

@ProQuestionAsker

ProQuestionAsker/Example3.csv

Created May 5, 2017 02:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ProQuestionAsker/60e7a6e3117f9f433ef9c998f6c776b6 to your computer and use it in GitHub Desktop.
Save ProQuestionAsker/60e7a6e3117f9f433ef9c998f6c776b6 to your computer and use it in GitHub Desktop.
Download ZIP
d3v4 Rollup Data Bar Chart
Raw
Example3.csv
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
Raw
Exploration3.js
// 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.scaleBand().rangeRound([0, width]).padding(0.1)
var y = d3.scaleLinear().range([height, 0]);
// 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("Example3.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;
})
.sortKeys(d3.ascending)
.rollup(function(leaves){
return d3.sum(leaves, function(d) {return (d.Sales)});
})
.entries(data)
console.log(nest)
// Scale the range of the data
x.domain(nest.map(function(d) { return d.key; }));
y.domain([0, d3.max(nest, function(d) { return d.value; })]);
// 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("Annual Sales")
.attr("class", "y axis label");
// Draw the bars
svg.selectAll(".rect")
.data(nest)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.value); });
})
Raw
index.html
<!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="Exploration3.js"></script>
</body>
</html>
Raw
style.css
.bar {
fill: #EF5285;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment