md`# Day Thirty (A puzzle to be solved), 2020-09-22`
d3 = require("d3@6")
button = html`<button type "butoon">Click here to change dataset</button>`
body = html`<body></body>`
md`
I sort of understood what puzzled me on [Day 26](https://observablehq.com/@hongtaoh/day-twenty-six-2020-09-19).
Every time you click, the dataset will bu updated. That is to say, the dataset keeps growing. However, every time, the \`.append()\` function only returns reference to the newly created rect, which is then merged with the pre-defined \`previous_rects\`. That is to say, the merged array is only 21 rects whereas the dataset itself is more than that.
`
md`
I don't want to think about it for now. But I now know that the ticky part is \`rangeRound()\`. If I set it to be \`range()\` without the \`round\` part, everything is fine. However, when I use \`rangeRound()\` and if I merge with \`previous_rects\` (the one before I use \`d3.select("p").on("click", ...))\`, I'll see that the newly generated bar is sometimes moving towards the left, which really surprised me.
`
md`
When \`rangeRound()\` is used, and if merge with \`bars()\`, I'll also see that the range of the xAxis is not fixed. It's dynamic and constantly moving as new data comes in.
Using \`range()\` solved all the problems.
`
{
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15,
13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var previous_rects = svg.selectAll("placeholder_for_rect")
.data(dataset) // Bind the data to the bars and return references to these elements, which are called update selection
.enter() // Contain references to placeholder elements
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.style("fill", d => "rgb(0, 0, "+ Math.floor(d * 10) +")");
d3.select("p")
.on("click", function(){
//alert("Hey, don't click that")
//dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5,10,13,19,21,25,22,18,15,13];
var maxValue = 25
var newnumber = Math.floor(Math.random() * maxValue);
dataset.push(newnumber)
xScale.domain(d3.range(dataset.length))
yScale.domain([0, d3.max(dataset)]);
//var bars = svg.selectAll("rect")
//.data(dataset)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", w)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", "green")
.merge(previous_rects)
.transition()
.duration(500)
.attr("x", function(d, i){
return xScale(i);
})
.attr("y", function(d){
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d){
return yScale(d);
})
.style("fill", function(d){
return "rgb(0, 0, "+ Math.round(d * 10) +")"
});
})
}
md`
Go to [Day 31](https://observablehq.com/@hongtaoh/day-31-2020-09-24).
`
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.
