D3: A flexible, scalable bar chart
✓ Published0🌍 Public
Aalokkshukla
Last edited Jul 27, 2017
Created on Jul 27, 2017
A bar chart displays a dataset of random values, with bars and labels that animate when a button triggers new data. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. On click, transitions with staggered delays, durations, and easing functions (`d3.easeBounceOut`, `d3.easeCircleIn`) update bar heights, colors, and label positions smoothly.
AI-generated descriptionUpdates, Transitions, and Motion
Updating Visuals
Not smooth
- For Bar chart, update dataset and update height, y values.
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
});
Update colors and labels similarly.
Introducing Transitions
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d, i) {
return i * 100;
})
.duration(1000)
.ease(d3.easeBounceOut)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0,0," + Math.round(d * 10) + ")";
});
Ordinal Scales
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.08);