2f:T42e,{ const svg = d3.create("svg").attr("viewBox", [0,0,width,height]); const xScale = d3 .scaleLinear() // create a new linear scale - a function that maps input to output at a different scale linearly .domain(d3.extent(penData, (d) => d[xAttrName])) // sets the input domain of the xScale getting min and max of xAttrName .range([0, width]) // sets the output range of the xScale const yScale = d3 .scaleLinear() // create a new linear scale - a function that maps input to output at a different scale linearly .domain(d3.extent(penData, (d) => d[yAttrName])) // sets the input domain of the xScale getting min and max of xAttrName .range([0, height]) // sets the output range of the xScale svg .selectAll("circle") .data(penData) .join("circle") .attr("cx", (d) => xScale(d[xAttrName])) // using the scaled value for x .attr("cy", (d) => yScale(d[yAttrName])) // using the scaled value for y .attr("r", 3) return svg.node(); // returns the DOM node of the SVG container such that observable can show it }30:T4a2,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const iWidth = width - margin.left - margin.right; // define new width that takes the margins into account const iHeight = height - margin.top - margin.bottom; // define new height that takes the margins into account const xScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[xAttrName])) .range([0, iWidth]) .nice(); // called on the scale to adjust the domain to include "nice", round, human-readable values (for axis tick values) const yScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[yAttrName])) .range([0, iHeight]) // use new iHeight .nice(); // called on the scale to adjust the domain to include "nice", round, human-readable values (for axis tick values) const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); g.append("g").call(d3.axisTop(xScale)); g.append("g").call(d3.axisLeft(yScale)); g.selectAll("circle") .data(penData) .join("circle") .attr("cx", (d) => xScale(d[xAttrName])) .attr("cy", (d) => yScale(d[yAttrName])) .attr("r", 3); return svg.node(); }31:T50d,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const iWidth = width - margin.left - margin.right; const iHeight = height - margin.top - margin.bottom; const xScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[xAttrName])) .range([0, iWidth]) .nice(); const yScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[yAttrName])) .range([0, iHeight]) .nice(); const cScale = d3 // define a color scale .scaleOrdinal(d3.schemeCategory10) // ordinal scale with color scheme d3.schemeCategory10 - array of 10 categorical colors. used as output range .domain(new Set(penData.map((e) => e.species)).values()); // set input domain of cScale using the uníque set of species as an iterator const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); g.append("g").call(d3.axisTop(xScale)); g.append("g").call(d3.axisLeft(yScale)); g.selectAll("circle") .data(penData) .join("circle") .attr("fill", (d) => cScale(d.species)) // using the species attribute and plugging it into the color scale for the fill property .attr("cx", (d) => xScale(d[xAttrName])) .attr("cy", (d) => yScale(d[yAttrName])) .attr("r", 3); return svg.node(); } 32:T51a,chartDynamicIndexKey = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 33]) .attr("font-family", "sans-serif") .attr("font-size", 16); let text = svg.selectAll("text"); return Object.assign(svg.node(), { update(letters) { text = text .data(letters) // by default, d3 matches data to elements based on index .join( (enter) => // creates new text elements for any missing data points in letters enter .append("text") .attr("y", 17) .attr("dy", "0.35em") .attr("fill", "orange") .text((d) => d), (update) => update.attr("fill", "black"), // updates the existing text elements to match the new data points (exit) => exit.remove() // removes any text elements that are no longer needed ) // everything after join is run on enter and update .attr("x", (d, i) => i * 17); } }); } // for join - key defines what should be checked between dataset items and corresponding svg elements // without defining a key for join it uses the index for matching the elements to - "does the first element in svg elemnts match first element in data array?" etc. if it doesn't match it gets removed and a new one is added33:T476,chartDynamicKey = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 33]) .attr("font-family", "sans-serif") .attr("font-size", 16); let text = svg.selectAll("text"); return Object.assign(svg.node(), { update(letters) { text = text .data(letters, (d) => d) // key function that determines how data points are matched to existing elements .join( (enter) => enter .append("text") .attr("y", 17) .attr("dy", "0.35em") .attr("fill", "orange") .text((d) => d), (update) => update.attr("fill", "black"), (exit) => exit.remove() ) // everything after join is run on enter and update .attr("x", (d, i) => i * 17); } }); } // for join - key defines what should be checked between dataset items and corresponding svg elements // without defining a key for join it uses the index for matching the elements to - "does the first element in svg elemnts match first element in data array?" etc. if it doesn't match it gets removed and a new one is added34:T580,chartDynamicAnimation = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 33]) .attr("font-family", "sans-serif") .attr("font-size", 16); let text = svg.selectAll("text"); return Object.assign(svg.node(), { update(letters) { const t = svg.transition().duration(750); // changes made to elements within the SVG during the transition will be animated text = text .data(letters, (d) => d) .join( (enter) => enter .append("text") .attr("y", -7) // new elements will appear above the existing elements, and will be animated downwards .attr("x", (d, i) => i * 17) .attr("dy", "0.35em") .attr("fill", "green") .text((d) => d), (update) => update.attr("fill", "black"), (exit) => exit .attr("fill", "red") // color elements to be removed red .call((text) => text.transition(t).attr("y", 41).remove()) // move them downwards out of the svg, and remove them ) .call((text) => // after handling the data udpates, do the following with the text. called on enter and update selections text .transition(t) .attr("y", 17) // final position of each enter and update element .attr("x", (d, i) => i * 17) ); } }); }35:[{"id":"4d446336291ef17d0b0c9b4cf4dc166033217313734cc211af5245b8e8cad2e07b488973b99f1331e3c2bcf3f1855902c0343280a1abfe41a67381b5380e0a7e","href":"https://static.observableusercontent.com/files/4d446336291ef17d0b0c9b4cf4dc166033217313734cc211af5245b8e8cad2e07b488973b99f1331e3c2bcf3f1855902c0343280a1abfe41a67381b5380e0a7e","name":"iris_part1.csv","type":"text/csv","lastModified":1679415563998.566,"size":2481},{"id":"9586870595860a5317ddb6eb824542a88cc92a8a4d2b60248d883c653f0355e991eab7df2fa830ec678a01edbc9972d22cf43c1ae1a6de963070bba8eb3a7e65","href":"https://static.observableusercontent.com/files/9586870595860a5317ddb6eb824542a88cc92a8a4d2b60248d883c653f0355e991eab7df2fa830ec678a01edbc9972d22cf43c1ae1a6de963070bba8eb3a7e65","name":"penguins_without_nan.csv","type":"text/csv","lastModified":1679415564403.018,"size":15841},{"id":"98c8eedd32c2abfb97d8dc7e08f6478e8a50de5538cca8a96f14ff84ac716520c0e445ca1b896026452e98da803f6acfe5c287cc4e9e777ac717d159899922d5","href":"https://static.observableusercontent.com/files/98c8eedd32c2abfb97d8dc7e08f6478e8a50de5538cca8a96f14ff84ac716520c0e445ca1b896026452e98da803f6acfe5c287cc4e9e777ac717d159899922d5","name":"data_concept.png","type":"image/png","lastModified":1679488913143.09,"size":397971},{"id":"b06a63482b3007a19cabd04b32e386b9e552cb85fa23577aace73dd530ea9a660141d1d0b54f6743bbca6040cf494fc40989f0d210bcd12e4d80212ffa50364c","href":"https://static.observableusercontent.com/files/b06a63482b3007a19cabd04b32e386b9e552cb85fa23577aace73dd530ea9a660141d1d0b54f6743bbca6040cf494fc40989f0d210bcd12e4d80212ffa50364c","name":"key-function-1.png","type":"image/png","lastModified":1679491202779.472,"size":31071},{"id":"7d6a3d09f707a411c873c08c8be65e85d63b4d597baf85984c39fda47c6347b99f4d13f4b971f2870aa978b4cb38ba7b073d24548a17ff16176fa6fce0fabb82","href":"https://static.observableusercontent.com/files/7d6a3d09f707a411c873c08c8be65e85d63b4d597baf85984c39fda47c6347b99f4d13f4b971f2870aa978b4cb38ba7b073d24548a17ff16176fa6fce0fabb82","name":"key-function-2.png","type":"image/png","lastModified":1679491340517.803,"size":30089},{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"iris.csv","type":"text/csv","lastModified":1679415564416.675,"size":5107},{"id":"b54315e51a1ef56b5f67f0d703a6e890e697c68c1a346530e0cf22a2329fab3ed22e16af28e6c86053d59e565d9a5fde62ecae724fbd5367eb086bf0d2d543eb","href":"https://static.observableusercontent.com/files/b54315e51a1ef56b5f67f0d703a6e890e697c68c1a346530e0cf22a2329fab3ed22e16af28e6c86053d59e565d9a5fde62ecae724fbd5367eb086bf0d2d543eb","name":"iris_part2.csv","type":"text/csv","lastModified":1679415564415.228,"size":2691}] 2d:{"title":"InfoVis 2023 - d3","cells":[{"id":19,"value":"# InfoVis 2023 - d3","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"md`---\n## Data Loading and Types\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`### Load Untyped CSV File`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"unTyped = FileAttachment(\"penguins_without_nan.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"unTypedFirst = unTyped[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"unTypedFirst.bill_depth_mm + unTypedFirst.bill_length_mm\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`### Load Typed CSV File`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"penData = FileAttachment(\"penguins_without_nan.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"penData.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`### Manual Type Conversion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"manuData = {\n const text = await FileAttachment(\"penguins_without_nan.csv\").text()\n return d3.csvParse(\n text,\n ({\n id,\n species,\n island,\n bill_length_mm,\n bill_depth_mm,\n flipper_length_mm,\n body_mass_g,\n sex\n }) => ({ // maps each row of the CSV data to a new object with the same properties, but modifying the type\n id: parseInt(id),\n species,\n island,\n bill_length_mm: parseFloat(bill_length_mm),\n bill_depth_mm: parseFloat(bill_depth_mm),\n flipper_length_mm: parseFloat(flipper_length_mm),\n body_mass_g: parseFloat(body_mass_g),\n sex\n })\n );\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`---\n## Summary Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof summary_data = SummaryTable(penData, { label: \"Penguins Data\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"summary_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof iris_data_summary = SummaryTable(\n await FileAttachment(\"iris.csv\").csv({ typed: true }),\n {\n label: \"Iris Data\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`---\n## Data Wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"irisPart1 = FileAttachment(\"iris_part1.csv\").csv({ typed: true }) // first half of the iris data","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"irisPart2 = FileAttachment(\"iris_part2.csv\").csv({ typed: true }) // second half of the iris data","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"md`### Merge Two Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"Wrangler(irisPart1, irisPart2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"// To use copied code replace \"data\" with your own variable\naq.from(data)\n\t.union(aq.from(data2))\n\t// .objects() // Uncomment to return an array of objects","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"// To use copied code replace \"data\" with your own variable\ncombinedDataTable =\naq.from(irisPart1)\n\t.union(aq.from(irisPart2))\n\t.objects() // Uncomment to return an array of objects","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`---\n## SVG Basic Elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`### Create SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"// see https://observablehq.com/@observablehq/htl\nhtl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"md`### Create SVG with viewBox`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`### Create SVG with a Group Element`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`---\n## Simple SVG Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"htl.html``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"maxBillLen = d3.max(penData, (d) => d.bill_length_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"maxBillDep = d3.max(penData, (d) => d.bill_depth_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"// store the element in scatter\nscatter = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"md`---\n## CSS for SVG Elements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"style = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`---\n## D3 Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`---\n## D3 Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`Observable D3 Gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"\nhtml`D3 Bar Chart Race Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"html`D3 Bar Force-Directed Graph Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"svgSel = d3.select(scatter) // select the scatter SVG element\n .selectAll(\"circle\") // select all circle elements inside the SVG element\n .style(\"fill\", \"#3EB489\") // Set the fill property of all circle elements to the color #3EB489 (mint green)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"svgSel.nodes() // Retrieve the DOM nodes corresponding to the D3 selection `svgSel`","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"md`---\n## D3 Visualization: By Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"import { Histogram } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"penMass = penData.map((elem) => elem.body_mass_g)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"Histogram(penMass)","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"Histogram(penMass, {width, height: 200, color: \"steelblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"viewof scrub = Scrubber(d3.ticks(-5,5,200), {\n format: (x) => `scrub = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n alternate: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"randoms = Float64Array.from({length: 2000}, d3.randomNormal(scrub, 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"Histogram(randoms, { width, height: 200, color: \"steelblue\", domain: [-10, 10] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"md`---\n## D3 Visualization: Self-Coded Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"penAttrNumerical = Object.keys(penData[0]).filter(\n (a) => typeof penData[0][a] === \"number\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"penAttr = Object.keys(penData[0])\n .filter((a) => typeof penData[0][a] === \"number\")\n .slice(1)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"// viewof select = Inputs.select([\"A\", \"B\"], {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"// this was created using the select input snippet\nviewof xAttrName = Inputs.select(penAttr, {label: \"X Attribute\", value: penAttr[0]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof yAttrName = Inputs.select(penAttr, {label: \"Y Attribute\", value: penAttr[1]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"height = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0,0,width,height]);\n svg\n .selectAll(\"circle\") // selects all the existing circle elements or empty selection\n .data(penData) // binds the penData dataset to the selected circle elements\n .join(\"circle\") // creates, updates, or removes circle elements based on the bound data\n .attr(\"cx\", (d) => d[xAttrName])\n .attr(\"cy\", (d) => d[yAttrName])\n .attr(\"r\", 3)\n return svg.node(); // returns the DOM node of the SVG container such that observable can show it\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`### set x and y scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"## create margins","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0,0,width,height]);\n const iWidth = width - margin.left - margin.right // define new width that takes the margins into account\n const iHeight = height - margin.top - margin.bottom // define new height that takes the margins into account\n \n const xScale = d3\n .scaleLinear()\n .domain(d3.extent(penData, (d) => d[xAttrName]))\n .range([0, iWidth]); // use new iWidth\n \n const yScale = d3\n .scaleLinear()\n .domain(d3.extent(penData, (d) => d[yAttrName]))\n .range([0, iHeight]); // use new iHeight\n\n // define the circles as a group and translate them to take the margin into account\n const g = svg.append(\"g\").attr(\"transform\",`translate(${margin.left},${margin.top})`) \n\n g // using the group instead of the svg\n .selectAll(\"circle\")\n .data(penData)\n .join(\"circle\")\n .attr(\"cx\", (d) => xScale(d[xAttrName]))\n .attr(\"cy\", (d) => yScale(d[yAttrName]))\n .attr(\"r\", 3)\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"### render scales/axes","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"### add a color scale","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"// import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"Swatches(\n d3.scaleOrdinal( // ordinal scale with the following and domain\n new Set(penData.map((e) => e.species)).values(), // set input domain of cScale using the uníque set of species as an iterator\n d3.schemeCategory10 // use d3.schemeCategory10 - array of 10 categorical colors as output range\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`## Join`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"data_concept = FileAttachment(\"data_concept.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"// This graphic is static in the sense that it is created from scratch each time the cell runs, making the D3 code equivalent in spirit to an HTML literal\nchartStatic = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16);\n\n // bind alphabet to text elements, create them if they don't exist, and set their attributes and text content\n svg\n .selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text((d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"// equivalent static html:\nhtl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"randomLetters = {\n while (true) {\n yield d3\n .shuffle(alphabet.slice()) // create a shallow copy and shuffle it\n .slice(Math.floor(Math.random() * 10) + 5) // take a random subset between 5 and 14 (inclusive) letters\n .sort(d3.descending);\n await Promises.delay(3000); // yield repeatedly after this time\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"chartDynamic = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16);\n\n // create selection of text elements\n let text = svg.selectAll(\"text\");\n\n // return the svg dom node with an update function attached to it\n return Object.assign(svg.node(), {\n // the update function takes letters as an argument and bind the new letters data to the svg.node()\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text((d) => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"// use the generator randomLetters to udpate the chart\n// will be undefined here, but the returned svg.node() in the above cell will show\nchartDynamic.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"chartDynamicIndexKey.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"chartDynamicKey.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"keyFunction1 = FileAttachment(\"key-function-1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"keyFunction2 = FileAttachment(\"key-function-2.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"chartDynamicAnimation.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}