Published
Edited
Sep 14, 2020
1 fork
md`# Bar chart`
button = html`<button type "butoon">Click here to change dataset</button>`
body = html`<body></body>`
d3 = require("d3@6")
md`# Step 1. Setting attributes`
data = [8, 18, 7, 10, 19, 20, 10, 10, 6, 19, 17, 18, 23, 23, 13, 12, 15, 6, 9, 8]
width = 600
height = 250
// xScale will help us set the x position of the bars
xScale = d3.scaleBand() //Ordinal scale
.domain(d3.range(data.length)) //sets the input domain for the scale
.rangeRound([0, width]) //enables rounding of the range
.paddingInner(0.05); //spacing between each bar
//yScale will help us map data to the height of bars in the barchart
yScale = d3.scaleLinear()
.domain([0, d3.max(data)]) //sets the upper end of the input domain to the largest data value in data
.range([0, height]);
md `# Step 2. Drawing the SVG`
svg = d3.select(body)
.append("svg")
.attr("width",width)
.attr("height",height)
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d,i) {
return xScale(i);
})
.attr("y", function(d) {
return height - yScale(d);
})
.attr("width", xScale.bandwidth()) //Asks for the bandwith of the scale
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb("+ Math.round(d * 8) + ",0," + Math.round(d * 10) + ")"; //Change the color of the bar depending on the value
});
md `# Step 3. Interaction via Event Listener`
d3.select(button)
.on("click", function() {
newData(); //Changes de values of the data
updateBar(); //Updates the bar chart
});
md `# Step 4. Changing the dataset
Because we are not loading the data from a file, let's create a funtion that will change the values of our *dataset*.`
function newData(){
while (data.length > 0) { //Clear the current dataset
data.pop();
}
for (var i = 0; i < 20; i++) { //Loop 20 times
var newNumber = Math.floor(Math.random() * 20) + 5; //New random integer (5-25)
data.push(newNumber); //Add new number to array
}
}
md `# Step 5. Updating the barchart with a transition`
function updateBar(){
//Update all rects
svg.selectAll("rect")
.data(data)
.transition() // <---- Here is the transition
.duration(2000) // 2 seconds
.attr("y", function(d) {
return height - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb("+ Math.round(d * 8) + ",0," + Math.round(d * 10) + ")";
});
}
md `Example taken from https://observablehq.com/@uvizlab/d3-tutorial-4-bar-chart-with-transition?collection=@uvizlab/d3-tutorial`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.