Published
Edited
Jun 5, 2019
3 stars
md`# Data Join Example`
{
// ========== CONSTANTS ==========
const MARGIN = 25
const HEIGHT = 300
const WIDTH = width
// learn more on data joins: https://bost.ocks.org/mike/join/
const svg = d3.select(DOM.svg(WIDTH, HEIGHT))
// continous call to update function
const interval = d3.interval((t) => {
if (t > 1500 * 10) { // stop after 10 times
interval.stop()
return
}
let endIndex = Math.floor(Math.random() * circleData.length - 1)
if (endIndex < 1) {
endIndex = 1
}
// change updateFruit() to updateFruit2()
return updateFruit(svg, d3.shuffle([...circleData]).slice(0, endIndex).sort())
}, 1500)
return svg.node()
}
// more on how to use selection.join: https://observablehq.com/@d3/selection-join
updateFruit = (svg, data) => {
const t = svg.transition().duration(750)
const node = svg
.selectAll(".imgs")
.data(data, (d, i) => d.key) // Bind your data elements
.join(
enter => enter.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width", (d) => 10)
.attr("height", (d) => 10)
.call(enter => enter.transition(t.delay((d, i) => 100 * i))
.attr("x", (d, i) => 10 + i * 100)
.attr("y", 50)
.attr("width", 100)
.attr("height", 100)
),
update => update
.call( update =>
update.transition(t.delay((d, i) => 100 * i))
.attr("x", (d, i) => 10 + i * 100)
.attr("y", 50)
.attr("width", 100)
.attr("height", 100)
),
exit => exit
.call(exit =>
exit.transition(t)
.attr("height", 10)
.remove()
)
)
.attr("class", "imgs")
.attr("href", (d) => `${imgRoot}${d.key}.svg`)
return svg.node()
}
imgRoot = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2860258/'
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.
