Crafting Visual Stories with Data.
Published
Edited
Aug 31, 2018
3 stars
data1 = [2, 3, 5, 4]
data2 = [5, 3, 2]
chart = {
const svg = d3.select(DOM.svg(600, 100))
const circles = svg.selectAll("circle")
.data(data2)
circles.enter().append("circle")
.attr("cx", (d,i) => (i*100 + 50))
.attr("cy", 50 )
.attr("r", d => d * 5 )
return svg.node()
}
chart3 = {
let el = this
if (!el) {
el = DOM.svg(600, 100)
// Empty Selection
el.circles = d3.select(el).selectAll("circle")
.data(data)
// Enter the data
el.circles.enter().append("circle")
.attr("cy", 50 )
.attr("cx", (d,i) => (i*50 + 100))
.attr("fill", "brown")
.attr("r", 0 )
.transition().duration(2000)
.attr("r", d => d * 5 )
console.log(el.circles)
}
console.log("updating...")
el.circles = d3.select(el).selectAll("circles")
.data(data)
// Update the data
el.circles.enter().append("circle")
.attr("cy", 50 )
.attr("cx", (d,i) => (i*50 + 100))
.attr("fill", "black")
.attr("r", 0 )
.transition().duration(2000)
.attr("r", d => d * 5 )
// Exit
el.circles.exit().remove
console.log(el.circles)
return el
}
d3 = require("d3@5")
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.
