2b:null 2c:["$","title",null,{"children":"Intro to D3 | John Alexis Guerra Gómez | Observable"}] 31:T4df,{ const svg = d3.select(DOM.svg(width, height)), margin = {top:60, bottom:50, left:50, right:10}, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom, x = d3.scaleLinear() .domain([ 0, d3.max(myData, d=> d.height) ]) .range([ 0, iwidth]), y = d3.scaleLinear() .domain([0, d3.max(myData, d=> d.age) ]) .range([ iheight, 0]); console.log("iheight", iheight); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) g.append("g") .call(d3.axisBottom(x)) .attr("transform", `translate(0,${iheight})`); g.append("g") .call(d3.axisLeft(y)); const circles = g.selectAll("circle") .data(myData) .enter() .append("circle") .attr("cx", d => x(d.height)) .attr("cy", d => y(d.age)) .style("fill", "steelblue") .attr("r", 5) .append("title") .text(d => d.name); const text = g.selectAll(".label") .data(myData) .enter() .append("text") .attr("class", "label") .attr("x", d => x(d.height)) .attr("y", d => y(d.age) + 10) .text(d => d.name); return svg.node(); }32:[] 2f:{"id":"b605d5b65a8ac303","slug":"intro-to-d3","title":"Intro to D3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-08-04T19:57:41.119Z","update_time":"$D2019-08-06T22:21:22.919Z","view_time":null,"first_public_time":"$D2018-08-04T20:14:14.192Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":967,"publish_version":967,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":121,"collection":{"id":"d4a72bc9c6841b90","slug":"d3-tutorials","title":"D3 Tutorials","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Intro to D3","cells":[{"id":0,"value":"md`# Intro to D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"md`## Step 0: Selections and DOM manipulation\n[Selections](https://github.com/d3/d3-selection) are the main building of D3. You can use them to modify a website by manipulating the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction). Let's start with an example, assume you have this HTML:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"playUl = html`\n

Uno
Dos
Tres

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"md`If you look at the code closely you can see that it has an \\`id=\"target\"\\`, therefore we can select it using the [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) #target and the *d3.select* method call`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"selTarget = d3.select(\"#target\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"md`Now that we saved it on a *selTarget* variable, we can use this selection to modify the properties of the *ul* element. There are four main methods that you can use with selections:\n* _.attr_ for adding attributes. e.g. \\`selTarget.attr(\"class\", \"myList\")\\`, \n* _.style_ for changing the CSS. e.g. \\`selTarget.style(\"color\", \"firebrick\")\\`\n* _.text_ for changing the contents of the tag as text. e.g. \\`selTarget.text(\"4\")\\`\n* _.html_ for changing the contents of the tag as html. e.g. \\`selTarget.html(\"

Only one now

\")\\`\n\nAs an exercise try some of this methods on the next cell and check how it affects our playUl\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"{ \n const playUl = html`\n

Uno
Dos
Tres

`;\n \n // On observable we can select directly to an html element\n const selTarget = d3.select(playUl);\n \n // Uncomment some of these lines and re run this cell\n \n // selTarget.style(\"color\", \"firebrick\");\n // selTarget.attr(\"class\", \"myList\");\n // selTarget.html(\"

Only one now

\"); \n // selTarget.text(\"

Only one now

\"); // The

doesn't get parsed\n \n return playUl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"md`You can also use \\`.append\\` for adding a new element inside a selection. Notice that this method will return a new selection that will affect only the new child. Let's use it to append a new \\`

\\` inside our [playUl](#playUl)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"{\n const playUl = html`\n

Uno
Dos
Tres

`;\n \n const selTarget = d3.select(playUl);\n \n selTarget.append(\"li\")\n .text(\"Cuatro\")\n .style(\"color\", \"slateblue\");\n \n return playUl;\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"md`### Exercise\nTry modyfying the next cell to insert in the \\`

\\` an image like this \n~~~html\n $\"D3$ \n~~~\n\nThen set its css property \\`padding\\` to \\`20px\\` \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"{\n const div = html`

Should show an img

`;\n \n // Write code to insert an img showing \n const url = \"https://camo.githubusercontent.com/722a5cc12c7d40231ebeb8ca6facdc8547e2abf7/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667\";\n \n // YOUR CODE HERE\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"md`## Step 1 Data Binding\nLet's add some data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"myData = [ \n { name:\"John\", age:37, height:193},\n { name:\"Mafe\", age:36, height:173}, \n { name:\"Santi\", age:9, height:120},\n { name:\"David\", age:3, height:70}, \n { name:\"Sonia\", age:73, height:150},\n { name:\"Vicente\", age:73, height:189},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"md`### Exercise \nTry to generate a itemized list with the names from myData`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"md`Let's see some possible solutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"{\n const ul = d3.select(html`

`);\n \n ul.append(\"li\").text(myData[0].name);\n ul.append(\"li\").text(myData[1].name);\n ul.append(\"li\").text(myData[2].name); \n \n return ul.node(); // We can get the html element from a single item selection using .node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md`### Let's use functions \nThat's ugly, because we need an instruction per each element of the array. One could use an array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"{\n const ul = d3.select(html`

`);\n \n const addLi = (d, i) => \n ul.append(\"li\").text(d.name);\n\n // Calls addLi for each item on the array\n myData.forEach(addLi);\n \n return ul.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"md`That was useful, but it isn't the D3 way. In D3 you need to do data binding. What this means is that D3 tries to match each data item on the array to an element on the DOM on this case one \\`

\\` for each item`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"{\n const ul = d3.select(html`

`); // create a new ul and select it\n \n const getName = (d) => {\n return d.name;\n }\n\n const getAge = (d) => d.age + \"pt\";\n \n // Select all the elements\n const lis = ul.selectAll(\"li\")\n .data(myData) // data binding\n .enter() // The elements that must be created\n .append(\"li\")\n .text(getName); // This doesn't call getName, it passes it as a parameter\n \n return ul.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"md`### Exercise \nModify the previous code to make the \\`font-size\\` change depending on the \\`age\\` attribute of the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"{ // Solve exercise here\n const ul = d3.select(html`

`); // create a new ul and select it\n \n const getName = (d) => {\n return d.name;\n }\n \n // Select all the elements\n const lis = ul.selectAll(\"li\")\n .data(myData)\n .enter() // The elements that must be created\n .append(\"li\")\n .text(getName); // This doesn't call getName, it passes it as a parameter\n \n return ul.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"md`## Step 3: Enter, Update and Exit\n\nEverytime you do a data binding on D3 you get access to three sets:\n* The items that must be *created*,\n* The items that must be *updated*,\n* and the items that must be *removed*. \n\nYou create a data binding using the \\`data()\\` method on a selection with multiple elements. Let's explain this on multiple cells.\n\nFirst, here is a \\`

\\`, that contains a couple \\`

\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"baseDiv = html`\n

Uno

Dos

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"md`Now let's select it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"selDiv = d3.select(baseDiv)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"md`Now on this selection that contains the \\`

\\` we can **select all** the \\`

\\`s inside it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"selPs = selDiv.selectAll(\"p\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"md` \\`selPs\\` contains ${selPs.nodes().length} paragraphs, those are the paragraphs that contains the text Uno and Dos . \n\n**Tip:** when working with selections use the \\`.node()\\` and \\`.nodes()\\` to access the actually selected items\n\nNow let's do some data binding with our \\`myData\\` variable `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"ps = selPs.data(myData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":589,"value":"md`By doing this, D3 will try to match each element on our array \\`myData\\` that has ${myData.length} elements with our selection of ps \\`selPs\\` which contains only ${selPs.nodes().length}. ps, which is the variable where we hold the data binding, also contains the elements that must be updated.\n\nWe are then missing ${myData.length - selPs.nodes().length} \\`

\\` that must be created. To access them we can use:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"psEnter = ps.enter()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"md` psEnter contains the set of items that must be created, which has a size of ${psEnter.nodes().length}. However these \\`

\\` don't exist yet, if you want to create them we must append them. Uncomment the code in the next cell, run it again to see the baseDiv change`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"{\n const baseDiv = html`\n

Uno

Dos

\n `;\n \n const selDiv = d3.select(baseDiv);\n const selPs = selDiv.selectAll(\"p\");\n const ps = selPs.data(myData);\n const psEnter = ps.enter();\n \n // psEnter.append(\"p\")\n // .text( d => d.name)\n // .style(\"color\", \"salmon\");\n \n return baseDiv;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"md` There is a third set that contains the items that must be removed, but since the \\`div\\` doesn't have enoug \\`

\\`, then this set has ${psExit.nodes().length} elements. You can access it anyways using \\`.exit()\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"psExit = ps.exit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"md`### Exercise \nModify adding more than ${myData.length} elements and try to guess how many elements will each set have. Remember my data is \n~~~js\n${JSON.stringify(myData, null, 2)}\n~~~\nInitial elements:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"viewof initialElements = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":862,"value":"{\n const div = html`\n

${e}

\n\n

\n`;\n \n const ps = d3.select(div)\n .select(\"ul\")\n .selectAll(\"li\")\n .data(myData);\n \n const psEnter = ps.enter()\n .append(\"li\")\n .text( d => d.name)\n .style(\"color\", \"steelblue\");\n \n const psExit = ps.exit()\n .style(\"color\", \"salmon\")\n .transition().duration(2000)\n .style(\"opacity\", \"0\")\n .remove();\n \n d3.select(div)\n .select(\"#counts\")\n .append(\"div\")\n .html(`\n 👉 Enter: ${psEnter.nodes().length} \n 👉 Update: ${ps.nodes().length}\n 👉 Exit: ${psExit.nodes().length}\n`);\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"md` ## Exercise\nModify the code above to change the (update) nodes to also use the names from the data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"md` Once you have the sets you can use them to modify the DOM and make it reflect the values of your data. Here is an example function joining the three sets to create a list of \\`

\\`s`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"addPs = (selection, mData) => {\n const ps = selection.selectAll(\"p\")\n .data(mData)\n .text(d => d.name) ;\n \n const psEnter = ps.enter()\n .append(\"p\")\n .style(\"color\", \"steelblue\")\n .text(d => d.name);\n \n const psExit = ps.exit().remove(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"md `### Exercise \n1. Use \\`addPs\\` on the following cell to populate the \\`newDiv\\` with the [myData](#myData) array\n2. Change [myData](#myData) and make it such that the updated elements get colored firebrick\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"{\n const newDiv = d3.select(html`

old element

`);\n \n // Exercise\n return newDiv.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":635,"value":"md `## Step 3.1 Merge\n\\`selA.merge(selB)\\` is a convenient function that you can use to **merge** two selections, and therefore you can use it to modify their attributes at once.\n\n### Exercise \nmodify [addPs](/#addPs) to use \\`merge\\` and therefore avoid two calls of \\`.text\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"{\n const addPs = (selection, mData) => {\n const ps = selection.selectAll(\"li\")\n .data(mData)\n .text(d => d.name); // We don't want this redundant call\n\n const psEnter = ps.enter()\n .append(\"li\")\n .style(\"color\", \"steelblue\")\n .text(d => d.name);\n\n const psExit = ps.exit().remove(); \n }\n \n const div = html`

`;\n \n addPs(d3.select(div), myData);\n \n return div;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":949,"value":"md `## Step 3.2 Join\n\nJoin is a convenient function added in d3@5 that greatly simplify data binding\n \n### Old data binding \n\n~~~js\n const ps = selection.selectAll(\"li\")\n .data(mData)\n .text(d => d.name); // We don't want this redundant call\n\n const psEnter = ps.enter()\n .append(\"li\")\n .style(\"color\", \"steelblue\")\n .text(d => d.name);\n\n const psExit = ps.exit().remove(); \n~~~\n\n### With join\n\n~~~js\n const ps = selection.selectAll(\"li\")\n .data(mData)\n .join(\"li\")\n .text(d => d.name);\n~~~\n\nIf you want to learn more, check this [other observable that I created explaining data binding ](https://observablehq.com/@john-guerra/d3-data-binding-v3-to-v5)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"md`## Step 4 SVG\n\nFine, we have been modyfing the DOM to reflect some data using text, but usually you use graphics for dataviz. For this, we have two options, either use [svg](https://developer.mozilla.org/en-US/docs/Web/SVG) or [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas). Let's reuse our [myData](/#myData) and what we learned about data binding to draw a simple scatterplot\n\nHere is a function that draws circles on the svg based on the data\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"drawCirclesNoScale = (selection, mData) => {\n\n const circles = selection.selectAll(\".point\")\n .data(mData); \n \n const circlesEnter = circles.enter()\n .append(\"circle\")\n .attr(\"class\", \"point\");\n \n circlesEnter.merge(circles)\n .attr(\"cx\", d => d.height)\n .attr(\"cy\", d => d.age)\n .style(\"fill\", \"steelblue\")\n .attr(\"r\", 5);\n \n circles.exit().remove(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"md `Let's call it using a new SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"circlesWithoutScales = {\n const svg = d3.select(html``);\n\n drawCirclesNoScale(svg, myData);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`### Exercise\n\nCreate a function that modifies the SVG and adds [text](/#text) tags to show the names next to the circles \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"drawTextNoScale = (selection, mData) => {\n // Complete me!\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"circlesAndTextWithoutScales = {\n const svg = d3.select(html``);\n\n drawCirclesNoScale(svg, myData);\n drawTextNoScale(svg, myData);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"md`# Step 5 scales \n\nNice, we have a function to draw the circles, but it isn't using all the screen. This is because we are placing the circles on the exact value of the \\`age\\` and \\`height\\` attributes. We could do some math to distribute them on the screen, or even better we could create some scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"xScale = d3.scaleLinear()\n .domain([0, d3.max(myData, d => d.height) ])\n .range([50, width - 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(myData, d => d.age)])\n .range([height - 50, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n \n const circles = svg.selectAll(\"circle\")\n .data(myData)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => xScale(d.height))\n .attr(\"cy\", d => yScale(d.age)) \n .style(\"fill\", \"steelblue\")\n .attr(\"r\", 5)\n .append(\"title\")\n .text(d => d.name)\n \n const text = svg.selectAll(\"text\")\n .data(myData)\n .enter()\n .append(\"text\")\n .attr(\"x\", d => xScale(d.height))\n .attr(\"y\", d => yScale(d.age) + 10) \n .text(d => d.name)\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"md`### Step 6 \n\nLet's add the axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"