31:T454,md`It took me a while to understand how to integrate the D3 Update Pattern into an Observable notebook (specifically, when using _inputs_ to change the data being displayed in a chart). I found it particularly difficult to achieve an **animated transition** in the chart. This notebook is a brief explanation of how to use an Observable style approach for managing such animated updates (based on a technique I found in [this notebook](https://observablehq.com/@d3/stacked-to-grouped-bars)).

If you know of a better/simpler approach for doing this, please let [me](https://twitter.com/mf_viz) know!

There are essentially two pieces to be considered: - **Triggering Animations**: How does interacting with the select element trigger an animation? - **Updating Data**: How can the _value_ of the \`select\` element be used to update the _data_ to be displayed? The explanation below describes how to achieve the interaction between the dropdown menu and chart below, showing the income distribution in the selected U.S. state. `32:T801,chart = { // On building the chart, create the svg and axis elements const svg = d3 .create("svg") .attr("width", width) .attr("height", height); // Axes const xAxis = svg .append("g") .attr("class", "xaxis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg .append("g") .attr("class", "yaxis") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); const title = svg .append("text") .attr("class", "chart_title") .attr("transform", `translate(${width / 2},15)`) .text("") .style("text-anchor", "middle"); // When the data changes, do the following svg.node().drawData = function(input_state) { // Filter data down using the new value of state const data = all_data.filter(d => d.name == input_state); // Update the scales to the new data x.domain(d3.extent(data.map(d => d.pct))); // Update the axes svg .select(".xaxis") .transition() .duration(500) .call(d3.axisBottom(x).tickFormat(d3.format(".0%"))); svg .select(".yaxis") .transition() .duration(500) .call(d3.axisLeft(y).tickFormat(customTickFormatter)); // Join the data to a selection of rectangles and transition their attributes const rects = svg.selectAll("rect").data(data, d => d.group); // Enter // update // exit as necessary // See: https://observablehq.com/@d3/selection-join rects.join( enter => enter .append("rect") .attr("x", x.range()[0]) .attr("y", d => y(d.group)) .attr("height", d => y.bandwidth()) .attr("width", d => { return x(d.pct); }), update => update .transition() .duration(500) .attr("width", d => x(d.pct)) ); // Why does updating this title.text( `Percentage of people in ${input_state} living in each income bracket` ); }; return svg.node(); }33:[] 2f:{"title":"D3 Chart Updates in Observable","cells":[{"id":0,"value":"md`# D3 Chart Updates in Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof state = select(states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`## Explanation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`\n

Triggering Animations

\n\nThe \\`select\\` element above the chart is a _View_ of a value called \\`state\\`, so when it is updated, _all cells_ that reference \\`state\\` are re-evaluated (more on Views [here](https://observablehq.com/@observablehq/introduction-to-views)). So, the cell below this one is re-evaluated when you choose a new state using the \\`select\\` element.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"chart.drawData(state) // this cell is what fires the transition!","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`\n

Updating Data

\n\nLooking at the [chart](#chart) code above, you can see that the exported \\`update\\` method does the following:\n\n~~~js\n// Update function, that is defined as part of the chart\nsvg.node().update = function(input_state) {\n // Filter data down using the value of \\`input_state\\`\n\n // Update the scales to the new data\n \n // Update the axes\n \n // Join the data to a selection of rectangles and transition their attributes\n\n}\n~~~\n\nThat method takes in an \\`input_state\\`, which is used to filter down the [full dataset](#all_data) down to the data of interest using a simple JavaScript filter:\n\n~~~js\nconst data = all_data.filter(d => d.name == input_state);\n~~~\n\nThat \\`data\\` variable is then used to update the scales and transition the sizes of the rectangles using a [data join](https://observablehq.com/@d3/selection-join).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`Voilà!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"vega_datasets = require('vega-datasets') // import vega_datasets","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"all_data = vega_datasets['income.json']() // load and parse cars data","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"states = d3.map(all_data, d => d.name).keys()","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"x = d3.scaleLinear().range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"y = {\n // Sort the income groups by increasing value for the y scale\n let domain = d3\n .map(all_data, d => d.group)\n .keys()\n .sort((a, b) => {\n let valA = a.split(' ')[0].replace(/\\+| \"\");\n let valB = b.split(' ')[0].replace(/\\+| \"\");\n return +valA - +valB;\n });\n\n return d3\n .scaleBand()\n .paddingInner(0.25)\n .paddingOuter(0.5)\n .rangeRound([height - margin.bottom, margin.top])\n .domain(domain);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"customTickFormatter = function(val) {\n const sciFormatter = d3.format(\".2s\");\n if (val === \"<10000\") return \"<$10K\";\n if (val === \"200000+\") return \"$200K+\";\n let values = val.split(\" \");\n values[0] = \"$\" + sciFormatter(values[0]);\n values[2] = \"$\" + sciFormatter(values[2]);\n return values.join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`### Constants, Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"margin = ({\n top: 20,\n right: 30,\n bottom: 30,\n left: 150\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}