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`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
