D3 Scales in a Bar Chart
Applying D3 Scales scaleBand and scaleLinear in a bar chart.
Follow these to understand the code below:
- Setup D3 Step by Step
- D3 Drawing SVG
- D3 Creating a Bar Chart
- D3 Using Scales
- D3 Linear Scale
- D3 Band Scale
Here is a summary:
- Set the width and height of the SVG canvas
- Set padding for the canvas
- Create a function to parse CSV dates from string to type date
- Use promises to load the CSV
- Scale the width and height of each rectangle of the bar chart
- Create rectangle elements and append the data to the DOM
D3 Scales in a Bar Chart
var w = 500;
var h = 300;
var barPadding = 3;
var padding = 40;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var parseTime = d3.timeParse("%Y");
var rowConverter = function(d) {
return {
year: parseTime(d.year),
population: +d.population
}
}
d3.csv("file.csv", rowConverter).then(function(dataset) {
xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([padding, w])
.paddingInner(0.1)
.paddingOuter(0.1);
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.population; })])
.range([h - padding, padding]);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return yScale(d.population);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return h - padding - yScale(d.population);
})
.attr("fill", "teal");
});
The result is this bar chart:
The HTML
is this:
<svg width="500" height="300">
<rect x="52" y="205" width="101" height="55" fill="teal"></rect>
<rect x="164" y="150" width="101" height="110" fill="teal"></rect>
<rect x="276" y="95" width="101" height="165" fill="teal"></rect>
<rect x="388" y="40" width="101" height="220" fill="teal"></rect>
</svg>
You can use console.log()
to test the output such as in here:
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
console.log("x");
console.log(d);
console.log(xScale.domain());
console.log(xScale.range());
console.log(xScale.paddingInner());
console.log(xScale.paddingOuter());
console.log(xScale.bandwidth());
console.log(xScale(i));
return xScale(i);
})