3e:null 3f:["$","title",null,{"children":"D3 Chart Updates in Observable | Mike Freeman | Observable"}] 45: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. `46: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(); }47:[] 43:{"id":"36f179aa517fcd6a","slug":"d3-chart-updates-in-observable","title":"D3 Chart Updates in Observable","thumbnail":"a01d5155473ec02ac274431ae8081918d2a9c2cd8f2a99b15195d4552afb3e6c","access_level":"public","create_time":"$D2020-03-14T01:11:10.181Z","update_time":"$D2020-04-13T20:18:57.748Z","view_time":null,"first_public_time":"$D2020-03-14T03:51:23.117Z","has_unpublished_edits":null,"fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":"starter_2024","bio":"Data visualization software enginner: working to make visualization more accessible, equitable, and impactful."},"version":468,"publish_version":468,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"bio":"Data visualization software enginner: working to make visualization more accessible, equitable, and impactful."}],"members":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[{"id":"e22ec8c3f1653192","reply_to_id":null,"content":"Hi Mike. Awesome notebook. I think this should be svg.node().drawData instead of .update?","create_time":"$D2021-02-03T17:51:23.659Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Chart Updates in Observable","cells":[{"id":0,"value":"md`# D3 Chart Updates in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof state = select(states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`## Explanation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"chart.drawData(state) // this cell is what fires the transition!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md`Voilà!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"vega_datasets = require('vega-datasets') // import vega_datasets","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"all_data = vega_datasets['income.json']() // load and parse cars data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"states = d3.map(all_data, d => d.name).keys()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"x = d3.scaleLinear().range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`### Constants, Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"margin = ({\n top: 20,\n right: 30,\n bottom: 30,\n left: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"