2f:T54e,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const iWidth = width - margin.left - margin.rigth; // the actual width of the scatterplot const iHeight = height - margin.top - margin.bottom; // the actual height of the scatterplot // define axis: maps the available space to the datavalues const xScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[xAttrName])) .range([0, iWidth]) .nice(); // creates axis with nice values and not fractions of values // define axis: maps the available space to the datavalues const yScale = d3 .scaleLinear() .domain(d3.extent(penData, (d) => d[yAttrName])) .range([0, iHeight]) .nice(); // add a group with all the circles and axes, which allows the traslation of all the elements const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // add a child g element to the current g element and execute (.call) a function on it to add the scale -> axis 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(); // retirn the svg node, otherwise the codeblock has no value }30:T47b,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const iWidth = width - margin.left - margin.rigth; 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([iHeight, 0]) .nice(); // add color scale to encode the species property of the dataset const cScale = d3 .scaleOrdinal(d3.schemeCategory10) .domain(new Set(penData.map((e) => e.species)).values()); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); g.append("g") .attr("transform", `translate(0,${iHeight})`) // move the axis to the bottom .call(d3.axisBottom(xScale)); g.append("g").call(d3.axisLeft(yScale)); g.selectAll("circle") .data(penData) .join("circle") .attr("fill", (d) => cScale(d.species)) .attr("cx", (d) => xScale(d[xAttrName])) .attr("cy", (d) => yScale(d[yAttrName])) .attr("r", 3); return svg.node(); }31:T431,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); text = text .data(letters, (d) => d) .join( (enter) => enter .append("text") .attr("y", -7) // start position of new element .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") .call((text) => text.transition(t).attr("y", 41).remove()) ) .call((text) => text .transition(t) .attr("y", 17) // end position of each enter and update element .attr("x", (d, i) => i * 17) ); } }); }32:T407,md`--- ## D3 Further Topics ### Shapes SVG and Canvas are intentionally generic; they allow for any type of graphic. D3 meanwhile is intended for visualization, and so provides a specialized vocabulary of shapes which are functions that generate path data. Fore more information see [https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3) ### Interaction There’s almost always too much information than can reasonably “fit” in a graphic. Thus design is not just deciding how to show something, but what to show and what not to show based on what we think matters to the imagined reader. Fore more information see [https://observablehq.com/@d3/learn-d3-interaction?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3-interaction?collection=@d3/learn-d3) ### More See [https://observablehq.com/@d3/learn-d3-further-topics?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3-further-topics?collection=@d3/learn-d3) `33:Td9b,md`--- ## Resoureces ### Datasets, Images & Notebooks - Iris dataset, Kaggle: [https://www.kaggle.com/datasets/uciml/iris](https://www.kaggle.com/datasets/uciml/iris) - Penguin dataset (removed rows with NA), GitHub: [https://github.com/allisonhorst/palmerpenguins/blob/master/inst/extdata/penguins.csv](https://github.com/allisonhorst/palmerpenguins/blob/master/inst/extdata/penguins.csv) - 'Summary Table' by Observablehq: [https://observablehq.com/@observablehq/summary-table](https://observablehq.com/@observablehq/summary-table) - 'Wrangler' by Observablehq: [https://observablehq.com/@observablehq/data-wrangler](https://observablehq.com/@observablehq/data-wrangler) - 'Histogram' by D3: [https://observablehq.com/@d3/histogram](https://observablehq.com/@d3/histogram) - 'Scrubber' by Mike Bostock: [https://observablehq.com/@mbostock/scrubber](https://observablehq.com/@mbostock/scrubber) - 'Color Legend' by D3: [https://observablehq.com/@d3/color-legend](https://observablehq.com/@d3/color-legend) - Joins Venn diagram by D3: [https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3) - Joins default key image by Michael Oppermann: [https://github.com/michael-oppermann/d3-learning-material/tree/main/d3-tutorials/3_d3_tutorial](https://github.com/michael-oppermann/d3-learning-material/tree/main/d3-tutorials/3_d3_tutorial) - Joins specified key image by Michael Oppermann: [https://github.com/michael-oppermann/d3-learning-material/tree/main/d3-tutorials/3_d3_tutorial](https://github.com/michael-oppermann/d3-learning-material/tree/main/d3-tutorials/3_d3_tutorial) ### Documentations & Tutorials - d3.autoType by D3: [https://observablehq.com/@d3/d3-autotype](https://observablehq.com/@d3/d3-autotype) - D3 AutoType by D3: [https://github.com/d3/d3-dsv/blob/main/README.md#autoType](https://github.com/d3/d3-dsv/blob/main/README.md#autoType) - Hypertext Literal by Observable: [https://observablehq.com/@observablehq/htl](https://observablehq.com/@observablehq/htl) - SVG Documentation by Mozilla: [https://developer.mozilla.org/en-US/docs/Web/SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) - SVG Tutorial by Mozilla: [https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial) - Learn D3 by D3: [https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3) - D3 Example Gallery by D3: [https://observablehq.com/@d3/gallery](https://observablehq.com/@d3/gallery) - Introducing Arquero by UW Interactive Data Lab: [https://observablehq.com/@uwdata/introducing-arquero](https://observablehq.com/@uwdata/introducing-arquero) - Selection.join by D3: [https://observablehq.com/@d3/selection-join](https://observablehq.com/@d3/selection-join) - Data Visualization with D3.js by Michael Oppermann: [https://michaeloppermann.com/d3](https://michaeloppermann.com/d3) - Observable IEEEVIS 2021 tutorial by John Gómez: [https://observablehq.com/@john-guerra/observable-ieeevis-tutorial#d3Viz](https://observablehq.com/@john-guerra/observable-ieeevis-tutorial#d3Viz) - D3 Tutorials by John Gómez: [https://observablehq.com/collection/@john-guerra/d3-tutorials](https://observablehq.com/collection/@john-guerra/d3-tutorials) - D3 Transition by D3: [https://github.com/d3/d3-transition/blob/main/README.md](https://github.com/d3/d3-transition/blob/main/README.md) `34:[{"id":"9586870595860a5317ddb6eb824542a88cc92a8a4d2b60248d883c653f0355e991eab7df2fa830ec678a01edbc9972d22cf43c1ae1a6de963070bba8eb3a7e65","href":"https://static.observableusercontent.com/files/9586870595860a5317ddb6eb824542a88cc92a8a4d2b60248d883c653f0355e991eab7df2fa830ec678a01edbc9972d22cf43c1ae1a6de963070bba8eb3a7e65","name":"penguins_without_nan.csv","type":"text/csv","lastModified":1679408715766.474,"size":15841},{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"iris.csv","type":"text/csv","lastModified":1679408715766.474,"size":5107},{"id":"4d446336291ef17d0b0c9b4cf4dc166033217313734cc211af5245b8e8cad2e07b488973b99f1331e3c2bcf3f1855902c0343280a1abfe41a67381b5380e0a7e","href":"https://static.observableusercontent.com/files/4d446336291ef17d0b0c9b4cf4dc166033217313734cc211af5245b8e8cad2e07b488973b99f1331e3c2bcf3f1855902c0343280a1abfe41a67381b5380e0a7e","name":"iris_part1.csv","type":"text/csv","lastModified":1679408715766.474,"size":2481},{"id":"b54315e51a1ef56b5f67f0d703a6e890e697c68c1a346530e0cf22a2329fab3ed22e16af28e6c86053d59e565d9a5fde62ecae724fbd5367eb086bf0d2d543eb","href":"https://static.observableusercontent.com/files/b54315e51a1ef56b5f67f0d703a6e890e697c68c1a346530e0cf22a2329fab3ed22e16af28e6c86053d59e565d9a5fde62ecae724fbd5367eb086bf0d2d543eb","name":"iris_part2.csv","type":"text/csv","lastModified":1679408715766.474,"size":2691}] 2d:{"title":"InfoVis 2023 Tutorial - d3","cells":[{"id":0,"value":"# InfoVis 2023 Tutorial - d3","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"contents = toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`---\n## Data Loading and Types\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`There are a variety of ways to [access data](/@observablehq/introduction-to-data) in Observable. But as we’re just starting out, let’s use the simplest: [file attachments](/@observablehq/file-attachments).\n\nThe following subsections provide a short overview on how to add type infotmation, for more information see [https://observablehq.com/@d3/learn-d3-data?collection=@d3/learn-d3](https://observablehq.com/@d3/learn-d3-data?collection=@d3/learn-d3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`### Load Untyped CSV File\n\nCSV doesn’t encode any type information, so by default all properties are strings. This makes them tricky to work with. \n\nFor example, if you tried to add two values, it would concatenate them. Oops! ⚡\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"unTyped = FileAttachment(\"penguins_without_nan.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`Get the first object from the data array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"unTypedFirst = unTyped[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`Adding two values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"unTypedFirst.bill_depth_mm + unTypedFirst.bill_length_mm","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`### Load Typed CSV File\nTo convert these strings into dates and numbers, we can set *file*.csv’s *typed* option to true. (This is equivalent to passing [d3.autoType](/@d3/d3-autotype) as the second argument to d3.csvParse, which calls d3.autoType for each row.)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"penData = FileAttachment(\"penguins_without_nan.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`### Manual Type Conversion\n\nGetting back to the task at hand, here’s a more explicit way of fetching, parsing, and type-converting the CSV file in a cell named *data*. You might take this approach if your data isn’t compatible with d3.autoType. (If you’re unsure, don’t rely on automatic type inference or [consult the documentation](https://github.com/d3/d3-dsv/blob/master/README.md#autoType).)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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 }) => ({\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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"---\n## Summary Table\nThe `SummaryTable` function provides a quick visual overview of you dataset.\n\nFor more information see [https://observablehq.com/@observablehq/summary-table](https://observablehq.com/@observablehq/summary-table)\n","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof summary_data = SummaryTable(penData, { label: \"Penguins Data\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`It also provides an array that includes all the information from the table.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"summary_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof iris_data_summary = SummaryTable(\n await FileAttachment(\"iris.csv\").csv({ typed: true }),\n { label: \"Iris Data\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"---\n## Data Wrangling\nData wrangling is often a complex and time consuming part of quantitative work.\nThis (experimental) `Wrangler` function provides an interface to guide **code\ncomposition** and also **display the results**. It uses the\n[Arquero](https://observablehq.com/@uwdata/introducing-arquero) package, a\nrobust data wrangling library based on the grammar of data manipulation.\n\nFor more information see [https://observablehq.com/@observablehq/data-wrangler](https://observablehq.com/@observablehq/data-wrangler)","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"import { Wrangler, op } from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`In this example we want to combine 2 datasets: **iris_part1.csv** & **iris_part2.csv**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"irisPart1 = FileAttachment(\"iris_part1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"irisPart2 = FileAttachment(\"iris_part2.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`### Merge Two Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"Wrangler(irisPart1, irisPart2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`The Wrangler can be used to create the Arquero code combine the two dataset with **union** a set operation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"combinedData = aq.from(irisPart1).union(aq.from(irisPart2)).objects() // Uncomment to return an array of objects","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`---\n## SVG Basic Elements\n\n**Scalable Vector Graphics (SVG)** are an XML-based markup language for describing two-dimensional based [vector graphics](https://en.wikipedia.org/wiki/Vector_graphics).\n\nThere are [several basic shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#path) used for most SVG drawing, e.g. circle, rectangle, .... \nFor more information on SVG see:\n- [SVG Documentation](https://developer.mozilla.org/en-US/docs/Web/SVG)\n- [SVG Tutorial by Mozilla](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)\n\n\n\nUse **Hypertext Literal**!\nHypertext Literal is a tagged template literal for HTML which interpolates values based on context, allowing automatic escaping and the interpolation of non-serializable values, such as event listeners, style objects, and other DOM nodes. \nFor more informaion, see [https://observablehq.com/@observablehq/htl](https://observablehq.com/@observablehq/htl)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`### Create SVG\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`### Create SVG with viewBox\n\nThe viewBox attribute defines the position and dimension, in user space, of an SVG viewport.\n\nFor more information about **viewBox** see [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"md`### Create SVG with a Group Element\nThe SVG element is a container used to group other SVG elements.Transformations applied to the element are performed on its child elements, and its attributes are inherited by its children.\n\nFor more information about the element see [https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`---\n## Simple SVG Scatterplot\n\nWe will use the penguin dataset (penData).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"penData","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"md`Create Scatterplot with html tags and template literals.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"maxBillLen = d3.max(penData, (d) => d.bill_length_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"maxBillDep = d3.max(penData, (d) => d.bill_depth_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`Add viewBox to define the userspace of the scatterplot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"scatter = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`---\n## CSS for SVG Elements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"style = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`---\n## D3 Introduction\n\nD3.js (Data-Driven Documents) is a JavaScript library for manipulating documents based on data. It helps you bring data to life using HTML, SVG, and CSS.\n\nD3 is flexible. D3’s superpower is that you can do whatever you want—creative freedom! The [D3 gallery](/@d3/gallery) is a veritable zoo of forms: [treemap](/@d3/treemap).\n\nIt is renowned for animation and interaction. If you’ve got a few minutes, watch a [bar chart race](/@d3/bar-chart-race) or an [animated treemap](/@d3/animated-treemap).\n\nFor more information see:\n- [Examples by D3](https://observablehq.com/@d3/gallery)\n- [Learn D3 by D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`---\n## D3 Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"svgSel = d3.select(scatter).selectAll(\"circle\").style(\"fill\", \"#69b3a2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"svgSel.nodes()","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`---\n## D3 Visualization: By Example\nFinding, Forking, Importing\n\nOne of the best ways to start with D3 is to [browse the gallery](/@d3/gallery). If you’re lucky (and with many to choose from, your odds aren’t bad), you may find an example you can repurpose as-is.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"import { Histogram } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"penMass = penData.map((elem) => elem.body_mass_g)","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"Histogram(penMass)","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`Change the visualization with an option object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"Histogram(penMass, { width, height: 200, color: \"steelblue\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`Add a Scrubber, it is a reusable input that is intended to drive animations while providing the reader interactive control on demand.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof mu = Scrubber(d3.ticks(-5, 5, 200), {\n format: (x) => `mu = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n alternate: true\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"randoms = Float64Array.from({ length: 2000 }, d3.randomNormal(mu, 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"Histogram(randoms, {\n width,\n height: 200,\n color: \"steelblue\",\n domain: [-10, 10]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`---\n## D3 Visualization: Self-Coded Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`Define the attribute available for the X and Y axis encoding.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"penAttr = Object.keys(penData[0])\n .filter((a) => typeof penData[0][a] === \"number\")\n .slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`Define the input selections for X and Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof xAttrName = Inputs.select(penAttr, {\n label: \"X Attribute\",\n value: penAttr[0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof yAttrName = Inputs.select(penAttr, {\n label: \"Y Attribute\",\n value: penAttr[1]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"height = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`Define the space around the scatterplot, which allows the addition of axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"margin = ({ top: 20, rigth: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"penData","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`### Add Color Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`Add a color legend in the form of Swatches on top of the visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"Swatches(\n d3.scaleOrdinal(\n new Set(penData.map((e) => e.species)).values(),\n d3.schemeCategory10\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`---\n## D3 Joins\n\nD3’s data join lets you specify exactly what happens to the DOM as data changes. This makes it fast—you can minimize DOM operations—and expressive—you can animate enter, update and exit separately. Yet power comes at a cost: the data join’s generality makes it hard to learn and easy to forget.\n\nFor more information, see [https://observablehq.com/@d3/selection-join](https://observablehq.com/@d3/selection-join).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### Static Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"chartStatic = {\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 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":445,"value":"md`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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`### Dynamic Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"md`So why bother with selections? Well, for a static graphic, there’s little reason to.\n\nBut say you want to update this chart in response to changing data. And say you *don’t* want to redraw it from scratch—you want to apply the minimal set of updates to reflect the new data. You want to reuse existing elements, adding what you need, and removing what you don’t. Merely by **moving the above code into a method that is called when the data changes**, you get performant incremental updates!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"md`Create a data array which is a subset of alphabet and change it every 3 seconds.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"randomLetters = {\n while (true) {\n yield d3\n .shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.acending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"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 let text = svg.selectAll(\"text\");\n\n return Object.assign(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":217,"value":"chartDynamic.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`Let’s break down the code.\n\n*text* is a selection of text elements, initially empty, whose parent is the SVG element. This parent determines where entering text elements will be appended later.\n\nBy calling *selection*.data, *text* is bound to a new array of data, *letters*. This computes three disjoint subsets of the *text* selection: the *enter* selection representing new data for which there is no existing element; the *update* selection representing existing elements for which there is new data; and the *exit* selection representing existing elements for which there is no new data.\n\nAs a Venn diagram:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"

\n \n

The three selections computed by the selection.data. Source: Learn D3: Joins

\n","pinned":false,"hidden":false,"mode":"html"},{"id":479,"value":"md`(These selections are hidden in the code: *selection*.data returns the *update* selection, from which you can call *selection*.enter or *selection*.exit to access the others.)\n\nWe could handle these three cases manually, but [*selection*.join](/@d3/selection-join) provides convenient defaults. The *enter* selection is appended; the *exit* selection is removed; and lastly the *update* and *enter* selections are merged, ordered and returned. We can then assign attributes and text on these entering-or-updating elements.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`### Dynamic Visualization with Key Function\n\nWe can be even more efficient by observing that we don’t need to reassign some attributes and text content on updating elements as long as the association between letter and text element remains constant. To preserve this association, *selection*.data needs a key function; and for precise operations on *enter*, *update*, and *exit*, *selection*.join needs corresponding functions. If updates are more common than enters and exits, this can greatly improve performance!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"#### Key Function\n\nExample: We have a data array of numbers which should create circles for each element. The array changes from [5, 10, 15] to [10, 15].\n\n**Default Key Function**: The index will be used as the default key. \n```js\n// Frist\nlet circle = svg.selectAll(\"circle\")\n\t.data([5, 10, 15]);\n\n// Second\nlet circle = svg.selectAll(\"circle\")\n\t.data([10, 15]);\n \n```","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"htl.html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"The index will be used again as the default key to match the new data to the actual circles. There are three circles on the webpage and two items in the new dataset. Therefore, the last circle will be removed and the other two circles will be bound to the new data.","pinned":false,"hidden":false,"mode":"md"},{"id":500,"value":"**Specified Key Function**: The key function returns the key for a given datum or element, in this case the data value is used as the key. It is defined as the second argument (callback function) of the _selection.data_ function. \n```js\n// Frist\n// use the actual data value as key function\nlet circle = svg.selectAll(\"circle\")\n\t.data([5, 10, 15], d => d) // could be also d => d.id if d is an object\n\n// Second\ncircle = svg.selectAll(\"circle\")\n\t.data([10, 15], d => d)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":545,"value":"htl.html`\n

\"Specified — Specified key function update behaviour. Source: III. Data Joins and Basic Interactivity

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"Here the key function maps the data value directly. This means, we can update the appropriate elements without having to delete and re-add elements. We can update them in place!","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"md`For more information on D3 Joins see:\n- [III. Data Joins and Basic Interactivity by Michael Oppermann](https://github.com/michael-oppermann/d3-learning-material/tree/main/d3-tutorials/3_d3_tutorial)\n- [Learn D3: Joins](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"The join function was split into the three stages: enter, update and exit.","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"chartDynamicKey = {\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 let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, (d) => d)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .attr(\"fill\", \"green\")\n .text((d) => d),\n (update) => update.attr(\"fill\", \"gray\"),\n (exit) => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"chartDynamicKey.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`### Dynamic Visualization with Animation\n\nUnlike graphics drawn on paper, computer graphics needn’t be static; like Frankenstein’s monster, they can come alive through animation!\n\nFor more information on animation see:\n- [Learn D3. Animation](https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3)\n- [D3 Transitions](https://github.com/d3/d3-transition/blob/main/README.md)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"chartDynamicAnimation.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`### Helper Functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`Creates the [table of contents (ToC)](https://observablehq.com/@nebrius/indented-toc)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}