2b:null 2c:["$","title",null,{"children":"Chapter 9 | 123d | Observable"}] 31:T5e1,## Updating Scales For [this visualization in the book](https://github.com/scotthmurray/d3-book/blob/master/chapter_09/18_dynamic_scale.html), Murray uses a `

` tag as the event listener, but here we will set the SVG itself as the event listener — for now, this keeps us from having to "refresh" an HTML cell every time we make a change to the code. It is important to note that when we click on the visualization, we only update the values of the data that already exists. It is as if we are "correcting" the data that was previously shown, i.e., this visualization does not generalize to adding new data points, or removing any old ones. Later, we'll see how this done with `exit` and `merge`. A few notes on the visualization below: - As usual, we need to create the SVG, and return the `node`. - We took Murray's advice, and updated the `text` transitions to set the labels above the bars if they're less than a certain value (in this case, 5). - The ["on click" function](https://github.com/scotthmurray/d3-book/blob/4cbba7c74ebd29e6a07ec25150bf0ddb6e108112/chapter_09/18_dynamic_scale.html#L82) has been moved outside, to its own function. Creating different functions for different events (e.g., like [these examples](https://observablehq.com/@nyuvis/interaction?collection=@nyuvis/guides-and-examples)) is a good habit to get into, especially as things get more and more complex. - Some of the anonymous functions have been updated to use the `=>` syntax, since it's a little easier to read.32:T93b,chart = { //Width and height 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]); // **create** svg var svg = d3.create("svg") .attr("width", w) .attr("height", h); // Create bars svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => h - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => "rgb(0, 0, " + Math.round(d * 10) + ")"); //Create labels svg.selectAll("text") .data(dataset) .enter() .append("text") .text(d => d) .attr("text-anchor", "middle") .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => h - yScale(d) + 14) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); function updateData() { var maxValue = 100; var smallBar = 5; // new values for dataset dataset = Array.from({length: dataset.length}, d3.randomInt(0, maxValue)) //Update scale domain //Recalibrate the scale domain, given the new max value in dataset yScale.domain([0, d3.max(dataset)]); //Update all rects svg.selectAll("rect") .data(dataset) .transition() .delay((d, i) => i / dataset.length * 1000) .duration(500) .attr("y", d => h - yScale(d)) .attr("height", d => yScale(d)) .attr("fill", d => "rgb(0, 0, " + Math.round(d * 10) + ")"); //Update all labels svg.selectAll("text") .data(dataset) .transition() .delay((d, i) => i / dataset.length * 1000) .duration(500) .text(d => d) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => d <= smallBar ? h - yScale(d) - 10 : h - yScale(d) + 14) .attr("fill", d => d <= smallBar ? "black" : "white"); } //On click, update with new data svg.on("click", updateData); return svg.node() }33:Tf0e,chart2 = { //Width and height var w = 500; var h = 300; var padding = 30; //Dynamic, random dataset var dataset = []; //Initialize empty array var numDataPoints = 50; //Number of dummy data points to create var maxRange = Math.random() * 1000; //Max range of new values for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer dataset.push([newNumber1, newNumber2]); //Add new number to array } //Create scale functions var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([padding, w - padding * 2]); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([h - padding, padding]); //Define X axis var xAxis = d3.axisBottom() .scale(xScale) .ticks(5); //Define Y axis var yAxis = d3.axisLeft() .scale(yScale) .ticks(5); //Create SVG element var svg = d3.create("svg") .attr("width", w) .attr("height", h); //Define clipping path svg.append("clipPath") .attr("id", "chart-area") .append("rect") .attr("x", padding) .attr("y", padding) .attr("width", w - padding * 3) .attr("height", h - padding * 2); //Create circles svg.append("g") .attr("id", "circles") .attr("clip-path", "url(#chart-area)") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", 2); //Create X axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); //Create Y axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis); //On click, update with new data svg.on("click", function() { //New values for dataset var numValues = dataset.length; //Count original length of dataset var maxRange = Math.random() * 1000; //Max range of new values dataset = []; //Initialize empty array for (var i = 0; i < numValues; i++) { //Loop numValues times var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer dataset.push([newNumber1, newNumber2]); //Add new number to array } //Update scale domains xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]); yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]); //Update all circles svg.selectAll("circle") .data(dataset) .transition() .duration(1000) .on("start", function() { d3.select(this) .attr("fill", "magenta") .attr("r", 7); }) .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .on("end", function() { d3.select(this) .transition() .duration(1000) .attr("fill", "black") .attr("r", 2); }); //Update X axis svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); return svg.node() }34:T1295,chart3 = { //Width and height var w = 600; var h = 250; var dataset = [ { key: 0, value: 5 }, //dataset is now an array of objects. { key: 1, value: 10 }, //Each object has a 'key' and a 'value'. { key: 2, value: 13 }, { key: 3, value: 19 }, { key: 4, value: 21 }, { key: 5, value: 25 }, { key: 6, value: 22 }, { key: 7, value: 18 }, { key: 8, value: 15 }, { key: 9, value: 13 }, { key: 10, value: 11 }, { key: 11, value: 12 }, { key: 12, value: 15 }, { key: 13, value: 20 }, { key: 14, value: 18 }, { key: 15, value: 17 }, { key: 16, value: 16 }, { key: 17, value: 18 }, { key: 18, value: 23 }, { key: 19, value: 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, function(d) { return d.value; })]) .range([0, h]); //Define key function, to be used when binding data var key = function(d) { return d.key; }; //Create SVG element var svg = d3.select("#final-chart") .append("svg") .attr("width", w) .attr("height", h); //Create bars svg.selectAll("rect") .data(dataset, key) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d.value); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d.value * 10) + ")"; }); //Create labels svg.selectAll("text") .data(dataset, key) .enter() .append("text") .text(function(d) { return d.value; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return h - yScale(d.value) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); //On click, update with new data d3.selectAll("p") .on("click", function() { //See which p was clicked var paragraphID = d3.select(this).attr("id"); //Decide what to do next if (paragraphID == "add") { //Add a data value var minValue = 2; var maxValue = 25 - minValue; var newNumber = Math.floor(Math.random() * maxValue) + minValue; var lastKeyValue = dataset[dataset.length - 1].key; dataset.push({ key: lastKeyValue + 1, value: newNumber }); } else { //Remove a value dataset.shift(); //Remove one value from dataset } //Update scale domains xScale.domain(d3.range(dataset.length)); yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]); //Select… var bars = svg.selectAll("rect") .data(dataset, key); //Enter… bars.enter() .append("rect") .attr("x", w) .attr("y", function(d) { return h - yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d.value); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d.value * 10) + ")"; }) .merge(bars) //Update… .transition() .duration(500) .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d.value); }); //Exit… bars.exit() .transition() .duration(500) .attr("x", -xScale.bandwidth()) .remove(); //Update all labels //Select… var labels = svg.selectAll("text") .data(dataset, key); //Exit… labels.exit() .transition() .duration(500) .attr("x", -xScale.bandwidth()) .remove(); //Enter… labels.enter() .append("text") .text(function(d) { return d.value; }) .attr("text-anchor", "middle") .attr("x", w) .attr("y", function(d) { return h - yScale(d.value) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) //Update… .transition() .duration(500) .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }); }); }35:[] 2f:{"id":"2e95560cefd8d84a","slug":null,"title":"Chapter 9","thumbnail":"cef4668dd208d77ecf819c7c6b99ad8218becd9fc874461d4193caf854df13a1","access_level":"public","create_time":"$D2023-08-07T16:50:55.349Z","update_time":"$D2023-08-08T13:56:35.737Z","view_time":null,"first_public_time":"$D2026-10-05T19:41:15.347Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1dace3b2603d462b","login":"123d","name":"123d","avatar_url":"https://avatars-next.observableusercontent.com/e05afee27b01d15bfe69a6e3cebfc74ffee561bd243b93a47555d3cfbf07705f","tier":"education_2026"},"version":95,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"445a5d84ebf45008","login":"leontoddjohnson","name":"leon todd johnson","avatar_url":"https://avatars-next.observableusercontent.com/a26805e7da5279be6ef5326cebe21cae263359b8261a4bd6d0d2524e3a18efda","tier":null}],"members":[{"type":"individual","id":"445a5d84ebf45008","login":"leontoddjohnson","name":"leon todd johnson","avatar_url":"https://avatars-next.observableusercontent.com/a26805e7da5279be6ef5326cebe21cae263359b8261a4bd6d0d2524e3a18efda","tier":null,"role":"editor"},{"type":"team","id":"1dace3b2603d462b","login":"123d","name":"123d","avatar_url":"https://avatars-next.observableusercontent.com/e05afee27b01d15bfe69a6e3cebfc74ffee561bd243b93a47555d3cfbf07705f","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"dfdb93b0a1abc583","slug":"d3-book-observed","title":"d3-book-observed","owner":{"id":"1dace3b2603d462b","login":"123d","name":"123d"}},"type":"notebook","body":{"titling":"auto","title":"Chapter 9","cells":[{"id":0,"value":"# Chapter 9\n\nIn this chapter, Murray talks about updates, transitions, and motion. First, here are a few helpful D3/Observable references that incorporate the topics in this chapter and the next:\n\n- [Ease Functions](https://observablehq.com/@d3/easing-animations)\n- A great [collection of D3 guides](https://observablehq.com/@nyuvis/review?collection=@nyuvis/guides-and-examples), for example the notebook on [interaction](https://observablehq.com/@nyuvis/interaction?collection=@nyuvis/guides-and-examples)\n\nThere are **many** [code examples for this chapter](https://github.com/scotthmurray/d3-book/tree/master/chapter_09), but here we'll only go over the latter examples, as those are the ones that will most resemble your final visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Containing visual elements within clipped paths\n\nIn the next example, we see chained transitions and clipped paths. In this example, I leave it to the reader to clean up the code below based on previous examples ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"## Data Joins with Keys\n\n_See Mike Bostock's blog post on [Object Constancy](https://bost.ocks.org/mike/constancy/) (referenced in the book)._\n\nBelow, I've added the code from the last example from this chapter. Again, I leave it to the reader to update this code as we've done in past examples. Consider:\n\n- creating standalone update functions\n- coming up with a creative way to add/remove values that don't involve a separate HTML cell (consider using `g` elements ...)\n- using `=>` notation where appropriate\n- more ingenious ways to add random data\n- any other changes Murray suggests in the book ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"

\n
Add a new data value
\n \t
Remove a data value
\n

\n
\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"