Published
Edited
Aug 23, 2020
1 star
Insert cell
Insert cell
Insert cell
myNumber
Insert cell
viewof myNumber.value // Based on the value of the dropdown when the cell runs, never changes thereafter.
Insert cell
Insert cell
myNumber + 50
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 270, 40]);
const rectangles = svg.append("g")
.attr("fill", "blue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", 10) // No changes depending on `myNumber` are made here
.attr("y", 10)
.attr("width", 20)
.attr("height", 20);
function update() {
const t = svg.transition().duration(750);
rectangles.transition(t)
.attr("width", 40)
.attr("x", viewof myNumber.value + 20); // We make a change based on `myNumber` here
}
viewof myNumber.addEventListener("input", update);
invalidation.then(() => viewof myNumber.removeEventListener("input", update));
return svg.node();
}
Insert cell
Insert cell
html`<div id="observablehq-7d00417a"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@timctran/simple-select-and-transition.js?v=3";
const inspect = Inspector.into("#observablehq-7d00417a");
(new Runtime).module(define, name => name === "viewof myNumber" ? inspect() : undefined);
</script>`
Insert cell
Insert cell
chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 270, 40]);
const rectangles = svg.append("g")
.attr("fill", "blue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", myNumber + 20) // Here we make a change depending on `myNumber`
.attr("y", 10)
.attr("width", 20)
.attr("height", 20);
function update() {
const t = svg.transition().duration(750);
rectangles.transition(t)
.attr("width", 40)
.attr("x", viewof myNumber.value + 20); // And somehow the above causes the update function not to run.
}
viewof myNumber.addEventListener("input", update);
invalidation.then(() => viewof myNumber.removeEventListener("input", update));
return svg.node();
}
Insert cell
Insert cell
chart3 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 270, 40]);
const rectangles = svg.append("g")
.attr("fill", "blue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", viewof myNumber.value + 20) // Here we make a change using the `viewof myNumber.value`
.attr("y", 10)
.attr("width", 20)
.attr("height", 20);
function update() {
const t = svg.transition().duration(750);
rectangles.transition(t)
.attr("width", 40)
.attr("x", viewof myNumber.value + 20); // Using `viewof [...]` above allows this update function to run.
}
viewof myNumber.addEventListener("input", update);
invalidation.then(() => viewof myNumber.removeEventListener("input", update));
return svg.node();
}
Insert cell
data = [1];
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more