31:T44c,## SVG Shapes *[Introduction to the DOM](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)* *[SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG)* *[d3-shape](https://github.com/d3/d3-shape)* The most common SVG elements used in data visualization are these five: tag | example | attributes | positioning attributes --- | --- | --- <rect> | ${tableSVG('')} | width, height | x, y <circle> | ${tableSVG('')} | r | cx, cy <path> | ${tableSVG('')} | d | <text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy <g> | ${tableSVG('group element')} | | transform *Table from [Shirley's Custom D3 workshop materials](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js)*32:T799,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/scatterplot function Scatterplot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value r = 3, // (fixed) radius of dots, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] fill = "none", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(data, x); if (yDomain === undefined) yDomain = d3.extent(data, y); // Construct scales and axes. const xRange = [20, width - 20]; const yRange = [height - 30, 20]; const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80); const yAxis = d3.axisLeft(yScale).ticks(height / 50); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - 30})`) .call(xAxis) .call(g => g.select(".domain").remove()) svg.append("g") .attr("transform", `translate(${20},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) svg.append("g") .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(x(d))) .attr("cy", d => yScale(y(d))) .attr("r", r); return svg.node(); }33:Ta2c,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/scatterplot function AnimatedScatterplot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value r = 3, // (fixed) radius of dots, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale yType = d3.scaleLinear, // type of y-scale fill = "none", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Construct scales and axes. const xRange = [20, width - 20]; const yRange = [height - 30, 20]; let xScale = xType(d3.extent(data, x), xRange); let yScale = yType(d3.extent(data, y), yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80); const yAxis = d3.axisLeft(yScale).ticks(height / 50); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - 30})`) .call(xAxis) .call(g => g.select(".domain").remove()) svg.append("g") .attr("transform", `translate(${20},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) svg.append("g") .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(x(d))) .attr("cy", d => yScale(y(d))) .attr("r", r); return Object.assign(svg.node(), { update(data) { xScale = xType(d3.extent(data, x), xRange); yScale = yType(d3.extent(data, y), yRange); let selection = svg.selectAll("circle") .data(data) selection.enter() .append("circle") .attr("cx", d => xScale(x(d))) .attr("cy", d => yScale(y(d))) .attr("r", 0) .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .transition().duration(750) .attr("r", r) selection .transition() .delay(750) .duration(750) .attr("cx", d => xScale(x(d))) .attr("cy", d => yScale(y(d))) selection.exit() .transition().duration(750) .attr("r", 0) .remove() } }) return svg.node(); }34:Tb0e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/scatterplot function BrushScatterplot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value r = 3, // (fixed) radius of dots, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] fill = "none", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(data, x); if (yDomain === undefined) yDomain = d3.extent(data, y); // Construct scales and axes. const xRange = [20, width - 20]; const yRange = [height - 30, 20]; const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80); const yAxis = d3.axisLeft(yScale).ticks(height / 50); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - 30})`) .call(xAxis) .call(g => g.select(".domain").remove()) svg.append("g") .attr("transform", `translate(${20},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) let circles = svg.append("g") .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(x(d))) .attr("cy", d => yScale(y(d))) .attr("r", r); let brush = d3.brush() .on("start brush end", brushed) svg.call(brush) function brushed(event) { // console.log("event", event) let selection = event.selection let value = []; // selection is the top left and bottom right points of the brush if (selection) { const [[x0, y0], [x1, y1]] = selection; value = circles .attr("r", 2) // we find all the points that are within the bounding box of the brush using the scaled values .filter(d => x0 <= xScale(x(d)) && xScale(x(d)) < x1 && y0 <= yScale(y(d)) && yScale(y(d)) < y1) .attr("r", 6) // this method returns the array of data from this (filtered) selection .data(); } else { circles.attr("r", r); } // update the "dataflow" to be the filtered data svg.property("value", value).dispatch("input"); } return svg.node(); }35:[{"id":"d0995b3c60f175315f196f3b40649c127e2560f21256c93f370795972117a9097901f7d10ac3fb9b3f0d6eff4ee70d2c30f863deb15ff2f1f2225a8140f279ee","href":"https://static.observableusercontent.com/files/d0995b3c60f175315f196f3b40649c127e2560f21256c93f370795972117a9097901f7d10ac3fb9b3f0d6eff4ee70d2c30f863deb15ff2f1f2225a8140f279ee","name":"bandcamp-oneday.csv","type":"text/csv","lastModified":1650325675677.904,"size":2878527}] 2f:{"title":"D3 Essentials","cells":[{"id":0,"value":"# D3 Essentials\n## Introduction to web-based data visualization\n\nLet's dig into the essential concepts needed to create custom visualizations with D3. We'll start with SVG and the DOM, then quickly get into one of the central and also most challenging tools in D3: selections.\n","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":104,"value":"showMe(``, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"---\n## Selections\n*[d3-scale](https://github.com/d3/d3-scale/blob/main/README.md)* \n*[d3-selection](https://github.com/d3/d3-selection/blob/main/README.md#joining-data)* \n*[D3: Selection Join](https://observablehq.com/@d3/selection-join)* \n*[D3: Learning Scales](https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3)* \n\nLet's take a look at the D3 Charts Scatterplot, but with a slightly simpler implementation that we can pick apart.\n","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = FileAttachment(\"bandcamp-oneday.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"Scatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"---\n## Updating & Transitions\n*[d3-transition](https://github.com/d3/d3-transition)* \n*[Learn D3: Joins](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)* ","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"chart = AnimatedScatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Remember the country selector we made in [Dynamic Visualizations](https://observablehq.com/@observablehq/workshop-itdvpd-dynamic-visualizations?collection=@observablehq/intro-data-vis-workshop)? Let's put it to use here:","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"viewof country = Inputs.select(new Set(data.map(d => d.country)), { label: \"select a country\", value: \"Netherlands\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"chart.update(data.filter(d => d.country == country))","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"---\n## Interaction\n*[d3-brush](https://github.com/d3/d3-brush)* \n*[d3-zoom](https://github.com/d3/d3-zoom)* \n*[D3: Mouse & Touch Interaction](https://observablehq.com/@d3/multitouch)* \n*[NYUVIS Guide: Interaction](https://observablehq.com/@nyuvis/interaction?collection=@nyuvis/guides-and-examples)*","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof brushed = BrushScatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"Inputs.table(brushed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"---\n## Further Learning\nThe journey has just begun!\n\n* Try more [D3 Charts](https://observablehq.com/@d3/charts?collection=@d3/charts)\n* Explore the [D3 Gallery](https://observablehq.com/@d3/gallery) for examples\n* Follow the [Learn D3](https://observablehq.com/@d3/learn-d3) tutorial\n* Check out [80+ links and resources](https://observablehq.com/@enjalot/touring-the-d3-ecosystem) in this guided tour\n* Find learning resources in this [Awesome list](https://github.com/datavis-tech/awesome-dataviz-education)","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}