Published
Edited
Oct 8, 2020
md`# Day 45, 2020-10-07`
md`
## Two Unsolved Puzzles
`
md`
### Puzzle One: How to get reset to work?
`
d3 = require("d3@6")
reset01 = html `<button type = "button">Reset</button>`
add01 = html `<button type = "button">Add data</button>`
chart01 = {
const width = 680;
const height = 300;
const dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
const svg = d3.create("svg").attr("width", width).attr("height", height)
let xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width])
.paddingInner(0.05);
let yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, height]);
const rects = svg.selectAll("rect")
.data(dataset)
.join("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
d3.select(add01)
.on("click", function(){
let dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
const maxValue = 40;
let newNumber = Math.round(Math.random() * maxValue)
dataset.push(newNumber)
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset)]);
const bars = svg.selectAll("rect").data(dataset);
const enter = bars.enter().append("rect").attr("x", width).attr("y", d => height - yScale(d))
const updatedBars = enter.merge(bars)
.transition()
.duration(500)
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
})
d3.select(reset01)
.on("click", function(){
const t = svg.transition().duration(750)
const dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset)]);
svg.selectAll("rect")
.data(dataset)
.join(
exit => exit
.call(exit => exit.transition()
.duration(100)
.delay((d, i) => i * 100))
.attr("x", width)
.remove()
)
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
})
return svg.node()
}
md`
### Puzzle Two: How to add Transition to Removal?
`
reset02 = html `<button type = "button">Reset</button>`
add02 = html `<button type = "button">Add data</button>`
chart02 = {
const width = 680;
const height = 300;
const dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
const svg = d3.create("svg").attr("width", width).attr("height", height)
let xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width])
.paddingInner(0.05);
let yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, height]);
const rects = svg.selectAll("rect")
.data(dataset)
.join("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
d3.select(add02)
.on("click", function(){
let dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
const maxValue = 40;
let newNumber = Math.round(Math.random() * maxValue)
dataset.push(newNumber)
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset)]);
const bars = svg.selectAll("rect").data(dataset);
const enter = bars.enter().append("rect").attr("x", width).attr("y", d => height - yScale(d))
const updatedBars = enter.merge(bars)
.transition()
.duration(500)
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
})
d3.select(reset02)
.on("click", function(){
const t = svg.transition().duration(750)
const dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20];
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset)]);
svg.selectAll("rect")
.data(dataset)
.join(
exit => exit
.call(exit => exit.transition()
.duration(100)
.delay((d, i) => i * 100))
.attr("x", width)
.remove()
)
.attr("x", (d, i) => xScale(i))
.attr("y", d => height - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")");
})
return svg.node()
}
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.
