44:["$","title",null,{"children":"Intro to D3 | Nurki Kirshenbaum's Workspace | Observable"}] 4c:T4bb,Before we dive into D3, we'll take a quick look at [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), which stands for Scalable Vector Graphics. SVG is a markup language for graphics. D3 is not limited to SVG. You can also use D3 to create visualizations using [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) or [HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML), for example, but you will usually see it use SVG. You can write SVG directly in Observable using the HTML cell type. This section is based on [this notebook](https://observablehq.com/@nyuvis/d3-introduction). ### Circles To begin, we'll draw a circle. We'll add an [outer `
`
``
``4d:T4df,### Rectangles Another SVG element that we will often use is [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect), for rectangles. The `x` and `y` attributes of the rectangle set the position of its top-left corner. The `width` and `height` attributes then set its width and height. ### Lines To draw a straight line from one point to another, we can use the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) element. The attributes `x1`, `y1`, `x2`, and `y2` define the starting and ending coordinates of the line. `stroke` sets the color and `stroke-width` sets the thickness. ### Path To draw more complex lines, we use the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) element. The most important attribute is `d`, which defines the shape of the path. For example: `` Will first move (`M`) to coordinate 10,10, then will draw a horizontal line (`H`) until x is 90, then draw a vertical line (`V`) until y is 90, then will draw a horizontal line (`H`) until x is 50, and finally draw a line (`L`) to coordinate 10,10. The paths can be more complex, with curves and arcs, there are many resources online that cover paths.4e:T5d2,4f:T4f9,Once you bind data to a selection with `selection.data()`, the `selection.join()` function manages these three states for you in each cycle. When you call the selection for the first time - there are no `circle` nodes, though we have 20 data items. Those data items then will be selected during the `Enter` phase, at which point, if there is no `circle` tag for them, one will be appended to the svg for them. The data binding means that the array passed into `data(some_array)` is passed down to every operation that is called on selected tags. That means that even without a `for` loop, every one of the `attr()` calls in the code above iterates over items from the array (in this case, the iterator is named `circ`, but `d` is often use, and you can choose any name.) Once every data item has a corresponding `circle` tag, they will be drawn during the `Update` phase, and when a data items is removed from the dataset but a `circle` tag remains for it, it is moved to the `Exit` phase where the tag can be removed. This is all extremely useful for creating dynamic visualizations. Note that instead of `join()`, you can use `Enter()`, `Update()`, and `Exit()` independently as selectors (if, for example, you need to do something beyond appending or removing tags.)50:[{"id":"26b48a756c0cd5ef5639f37a4b3f8615d58edfd3e6b388a75b338a72ea7cb02ef2db4c3196ab17089a93e99dbe249cd6cfa7322bdb47047c419b2bbe75c7603c","href":"https://static.observableusercontent.com/files/26b48a756c0cd5ef5639f37a4b3f8615d58edfd3e6b388a75b338a72ea7cb02ef2db4c3196ab17089a93e99dbe249cd6cfa7322bdb47047c419b2bbe75c7603c","name":"statesD3.png","type":"image/png","lastModified":1729579257195.238,"size":112255},{"id":"5cfeccbb5eb962525ade94a66c8380adac96ce1af520c86de676be42de9942fbdf67d5b9eb17b235a42dd2946e172e1596e3c6e3789c3c5d532c992999186ea8","href":"https://static.observableusercontent.com/files/5cfeccbb5eb962525ade94a66c8380adac96ce1af520c86de676be42de9942fbdf67d5b9eb17b235a42dd2946e172e1596e3c6e3789c3c5d532c992999186ea8","name":"svg practice.png","type":"image/png","lastModified":1729502238824.043,"size":36179}] 48:{"id":"333b386e71c57ea6","slug":"intro-to-d3","title":"Intro to D3","thumbnail":"315d5df5db41d68e29d5f735d536467358867f917b0367c8e287bb5d247ac211","access_level":"public","create_time":"$D2026-10-22T07:18:56.944Z","update_time":"$D2026-10-22T20:03:32.973Z","view_time":null,"first_public_time":"$D2026-10-22T08:13:10.884Z","has_unpublished_edits":null,"fork":{"id":"a617d842cb84266e","slug":null,"title":"Intro to D3","owner":{"id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5f28bec0774ac6e0cbea5811c547c9b3f3bec2873a41ab68be5e16615ef40f44","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":298,"publish_version":298,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4cff2d12cf30147","login":"nurki-kirshenbaum","name":"Nurki Kirshenbaum","avatar_url":"https://avatars-next.observableusercontent.com/6cec06e1b4c99cbd0dc4384bbf946c15f1482285f331d6a304e57ca99aff9bb7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5f28bec0774ac6e0cbea5811c547c9b3f3bec2873a41ab68be5e16615ef40f44","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to D3","cells":[{"id":0,"value":"# Intro to D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Since the Observable platform is written for D3, you will find a lot of documentation about it here. This is a [good starting point](https://d3js.org/what-is-d3) that includes a diagram with all of D3s modules.\n\nYou can dive right into code with the example below. This used to be a template provided by ObservableHQ for simple D3 code when you started a \"New Notebook\" (there were multiple templates, but now they start with a blank).\n\nThe code will look like the cell below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"chart = {\n // const width = 928; // uncomment for responsive width\n const height = 200;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n svg\n .selectAll(\"circle\")\n .data(d3.range(18))\n .join(\"circle\")\n .attr(\"cx\", d => 30 + d * 50)\n .attr(\"cy\", height / 2)\n .attr(\"r\", d => Math.random() * 20)\n .attr(\"fill\", \"#001b42\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"To understand this code, first we need to understand SVGs (Scalable Vector Graphics), and then we need to understand how D3 binds data to SVGs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"## Simple SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"### Groups\n\nWe can group SVG elements using the [`` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g). Groups help organize the different parts of our visualization, and consequently, we can use the groups to control multiple elements with one property. Groups can also be used to set certain attributes on all the children such as a fill color. \n\nFor example, we can place a `` around two circles and then we can apply a transformation to the `` in order to move **both** circles that are inside it. We do this by setting the [`transform` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) of the group. This will move everything in the `` 200 pixels to the right and 25 pixels up :\n`transform=\"translate(200, -25)\"`\n\nSince coordinate y starts as 0 at the top of the space and increases downwards, if we want to go *up*, we need to use a negative value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"### Text\n\nTo add text, we can use the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) element. Some handy attributes for `` include\n\n* `x` and `y`: the (x, y) coordinates\n* `font-family`: the typeface\n* `font-size`: the size\n* `fill`: color\n* `text-anchor`: the text can be horizontally positioned based on its \"start\", \"middle\", or \"end\". It is useful for horizontally centering text.\n* `dominant-baseline`: the vertical baseline that is used to set the position. The value can be either \"baseline\", \"middle\", or \"hanging\". It is useful for vertically centering text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"$4e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## SVG Practice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"const practice = await FileAttachment(\"svg practice.png\").image({width:500})\ndisplay(practice)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Recreate the sketch above with simple SVG tags. Hint, you can group all of the elements and move them (for example, translate them by 100 on the x axis) so you can use the marked coordinates and still \"center\" the drawing. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"## Moving to JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"We now want to recreate these SVG with D3. This will be done using JS function chaining. D3 allows us to create an SVG tag using `d3.create('svg')`, this will return an object that we can then change by chaining the `attr()` function. For example:\n\n`const svg = d3.create('svg')`
\n` .attr('width', 500)`
\n` .attr('height', 100);`\n\nWill create an SVG object with width set to 500 and height set to 100. Likewise, we can add elements inside the tag using, for example, `svg.append('circle')`, which will add a `` tag inside the SVG object and return it so we can chain attributes that will help us specify the `cx`, `cy`, `r` and any other attributes we may want to use.\n\nSee for example the code below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":" // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // add one circle to the svg element and set its attributes\n svg.append('circle')\n .attr('cx', 25)\n .attr('cy', 50)\n .attr('r', 25)\n .attr('fill', 'blue');\n\n // add a second circle to the svg element and set its attributes\n svg.append('circle')\n .attr('cx', 100)\n .attr('cy', 75)\n .attr('r', 25)\n .attr('fill', 'red');\n\n // show the outer SVG element for Observable to render it\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"See below an example of using a group (`g` tag) to group and move those circles. We save the group into its own variable so we can have easier access to it when we append elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":" const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // add a group to the svg element and translate it\n const g = svg.append('g')\n .attr('transform', 'translate(100, -25)');\n\n // add a circle to the group and set its attributes\n g.append('circle')\n .attr('cx', 25)\n .attr('cy', 50)\n .attr('r', 25)\n .attr('fill', 'blue');\n\n // add another circle to the group and set its attributes\n g.append('circle')\n .attr('cx', 100)\n .attr('cy', 75)\n .attr('r', 25)\n .attr('fill', 'red');\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"### Practice\nRecreate the example below using D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 250);\n\n// Code goes here\n\n\ndisplay(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Selections and Joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"If we have a dataset we want to visualize, writing code for each item can be too long and repetitive. D3 offers a much more clever way to interface with datasets. At the core of D3's power is the use of **selections** borrowed from web standard (i.e. selecting DOM objects by tags, class, id, etc.) and **joins** which bind data to the selected elements. You can read more about this [here](https://bost.ocks.org/mike/join/) and in the original paper that [presented D3](http://vis.stanford.edu/files/2011-D3-InfoVis.pdf).\n\nLet's generate some random data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"const cdata = d3.range(20).map(item =>\n {return {id:item,\n r:5 + Math.random() * 20, // generate a random radius\n cx: 20 + item * (860/20), // space the 20 circles out along 860 pixels\n cy: 100, // we will line them\n // Using d3.color to create random colors with the same hue/saturation but different luminance\n c: d3.color(\"hsl(330, 100%, \"+(Math.random()*100)+\"%)\")}\n })\ndisplay(cdata)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"Let's draw our data as a line of circles using D3.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":" const svg = d3.create('svg')\n .attr('width', 860)\n .attr('height', 200);\n\n // create one circle for each element in cdata\n svg.selectAll('circle')\n .data(cdata)\n .join('circle')\n // set the attributes for the circles based on the data\n .attr('fill', circ => circ.c)\n .attr('cx', circ => circ.cx)\n .attr('cy', circ => circ.cy) // could also be .attr('cy', 100)\n .attr('r', circ => circ.r);\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"Look at:
\n`svg.selectAll('circle')`
\n`.data(cdata)`
\n`.join('circle')`
\netc.\n\nIn the cell above, we generated an svg and selected all the elements with the tag `circle` in that svg and bind them to the data... But _we didn't draw any circles yet!_\n\nThis is explained by the three states **`Enter`**, **`Update`**, and **`Exit`**. See this illustration from the original D3 paper.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"statesd3 = FileAttachment(\"statesD3.png\").image({width:500})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"The following example is taken from the [reference notebook](https://observablehq.com/@nyuvis/d3-introduction) and shows nested joins.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"const circleGrid = [\n {\n y: 50,\n color: 'purple',\n label: 'Row A',\n circles: [\n { x: 25, radius: 5 },\n { x: 75, radius: 10 },\n { x: 125, radius: 15 },\n { x: 175, radius: 20 },\n { x: 225, radius: 25 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n label: 'Row B',\n circles: [\n { x: 25, radius: 25 },\n { x: 75, radius: 20 },\n { x: 125, radius: 15 },\n { x: 175, radius: 10 },\n { x: 225, radius: 5 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n label: 'Row C',\n circles: [\n { x: 25, radius: 20 },\n { x: 75, radius: 10 },\n { x: 125, radius: 5 },\n { x: 175, radius: 10 },\n { x: 225, radius: 20 }\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":" // create our outer SVG element and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n\n // create one group for each row of circles\n const rows = svg.selectAll('g')\n .data(circleGrid)\n .join('g')\n // set the y position and color for each row\n .attr('transform', row => `translate(0,${row.y})`) // *\n .attr('fill', row => row.color);\n\n // add one text label to each row\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n\n // we need to do another data join to add the circles for each row\n rows.selectAll('circle')\n // row.circles contains the array circles for the row\n .data(row => row.circles)\n .join('circle')\n .attr('fill', circ => circ.color)\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius);\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"If you are not familiar with the syntax in the line marked with an asterisks, that is a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"### Practice\nUse D3 to visualize the following data as a word cloud. Hint: use `text(d => d.text)` instead of `attr()` to set the content of the text tag.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"const worddata = [\n { text: \"Data Viz\", xPos: 150, yPos: 60, size: 40, color: 'purple' },\n { text: \"Charts\", xPos: 260, yPos: 20, size: 20, color: 'brown' },\n { text: \"Maps\", xPos: 300, yPos: 70, size: 15, color: 'orange' },\n { text: \"D3 Intro\", xPos: 70, yPos: 40, size: 18, color: 'DarkBlue' },\n { text: \"Infographics\", xPos: 10, yPos: 90, size: 30, color: 'DarkViolet' },\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":" const svg = d3.create('svg')\n .attr('width', 860)\n .attr('height', 200);\n\n // Code goes here\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"## Adding Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"We can add interaction to our visualizations by adding [`Event Listeners`](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers).\n\nFor example, by using `on(\"event name\", callback_function)` on a D3 selection, we add event listeners to all of them. The callback functions should receive two parameter: the event (from which you can grab the target, x and y positions of the event and other things) and the datum that is bound to the selected element. \n\nThe example below uses the colorful circles we created before. It adds handlers for the `mouseover` and `mouseout` events. In this case, we are modifying the background object - setting its fill to the color of a hovered circled and back to black when nothing is hovered.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":" const svg = d3.create('svg')\n .attr('width', 860)\n .attr('height', 200);\n\n const background = svg.append('rect')\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 860)\n .attr(\"height\", 200)\n .attr(\"fill\", \"black\");\n\n\n // create one circle for each element in cdata\n const circs = svg.selectAll('circle')\n .data(cdata)\n .join('circle')\n // set the attributes for the circles based on the data\n .attr('fill', circ => circ.c)\n .attr('cx', circ => circ.cx)\n .attr('cy', circ => circ.cy) // could also be .attr('cy', 100)\n .attr('r', circ => circ.r)\n .on(\"mouseover\", (event, d) => background.attr(\"fill\",d.c)) // try changing the type of the event to \"click\"\n .on(\"mouseout\", (event, d) => background.attr(\"fill\",\"black\"))\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"What would happen if you changes `mouseover` to `click`?\n\nWhat would happen if we change the line
\n`.on(\"mouseout\", (event, d) => background.attr(\"fill\",\"black\"))`
\nto
\n`.on(\"mouseout\", (event, d) => background.transition().duration(1000).attr(\"fill\",\"black\"))`
\nCan you change the other handler to have a similar effect?\n\nHow can we change it so instead of changing the background to the color of the circle, we highlight the selected circle? See the example below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":" const svg = d3.create('svg')\n .attr('width', 860)\n .attr('height', 200);\n\n const background = svg.append('rect')\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 860)\n .attr(\"height\", 200)\n .attr(\"fill\", \"black\");\n\n\n // create one circle for each element in cdata\n const circs = svg.selectAll('circle')\n .data(cdata)\n .join('circle')\n // set the attributes for the circles based on the data\n .attr('fill', circ => circ.c)\n .attr('cx', circ => circ.cx)\n .attr('cy', circ => circ.cy) // could also be .attr('cy', 100)\n .attr('r', circ => circ.r)\n // we need to grab the specific circle with our datum out of all the circles\n .on(\"mouseover\", (event, d) => circs.filter(p => p === d).attr(\"stroke\",\"white\").attr(\"stroke-width\",3))\n .on(\"mouseout\", (event, d) => circs.filter(p => p === d).attr(\"stroke\",\"none\"))\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"Let's see another example.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"const rects = [\n {x:0, y:0, width: 100, height:50},\n {x:50, y:60, width: 70, height:50},\n {x:200, y:30, width: 320, height:50}\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":" const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n svg.selectAll('rect')\n .data(rects)\n .join('rect')\n .attr('fill', \"coral\")\n .attr('x', d => d.x)\n .attr('y', d => d.y)\n .attr('width', d=> d.width)\n .attr('height', d=> d.height)\n .on(\"click\", (event, d) => {\n txt\n .attr(\"x\",d.x + d.width/2)\n .attr(\"y\",d.y + d.height/2)\n .text(\"Selected\")\n })\n\n const txt = svg.append(\"text\")\n .attr(\"x\",250)\n .attr(\"y\", 15)\n .attr(\"text-anchor\" ,\"middle\")\n .attr(\"dominant-baseline\", \"middle\")\n .text(\"No selection\")\n\n display(svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"Exercise: How would you go about changing the code so another click on an already selected element (toggeling selection) will reset the text label to its original location/text?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 24:null