44:["$","title",null,{"children":"D3 - Getting started | Matt Huntsberry | Observable"}] 4c:T679,md` Before finishing the implementation of add our circles based on data points. It's important to explain what is happening here. Starting on the first line after the "console.clear()" call. - We create our svg and assign initial attrs to it. - We then use our svg label to selectAll the circle elements on the page and then chain on a "data" method to it. Wait.... What? Where are these circles coming from? The only circle we have created was that one in the beginning of this write up and we certainly didn't make several of them. What's happened here is that when we invoked our "svg.selectAll('circle').data(data)", d3 went a head a created us an svg element linked to a piece of data in our data array. If we crack open the dev tools and take a look at our "console.log('circles', circles)", you'll see that each element has a piece of data tied to it. Okay, okay. That makes sense. Let's keep going. We then.... - We then get access to a "enter" methhod that now is attached to our "circles" label. (_Note: function creates the initial join of the data with our DOM elements. Thus selecting only the elements that were not in the DOM yet_.) - Then we append an actual "circle" element to element tht was made by running" svg.selectAll('circle').data(data)" - Lastly, we give attributes to each circle element. You'll notice in the example above, we are no longer passing in a hardcoded value like before. We now pass in a callback function that gets two parameters: _the data_ and _the index_. Often abbreviated to d and i. Check out the console logs and you'll see values of d and i. Let's finish showing all of our circles! `4d:[] 48:{"id":"01e25c5f1c4809b9","slug":"d3-getting-started","title":"D3 - Getting started","thumbnail":"57ca908bfd422569236878e7cb8fe04efa084b4d45008a7a01d0babd76311788","access_level":"public","create_time":"$D2021-04-02T20:05:24.741Z","update_time":"$D2024-03-13T20:47:41.739Z","view_time":null,"first_public_time":"$D2021-04-02T20:08:28.113Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"747ccd56620ad723","login":"mmhuntsberry","name":"Matt Huntsberry","avatar_url":"https://avatars-next.observableusercontent.com/b71780ff4049b468d749105f709b989680c3c844c37bba879c7981be776f8625","tier":"starter_2024","bio":"JavaScript Jedi Apprentice","following":false},"version":431,"publish_version":431,"role":null,"authored":false,"authors":[{"type":"individual","id":"7275f3daa168dd89","login":"mmhuntsberry","name":"Matt Huntsberry","avatar_url":"https://avatars-next.observableusercontent.com/b71780ff4049b468d749105f709b989680c3c844c37bba879c7981be776f8625","tier":null,"bio":"JavaScript Jedi Apprentice","following":false}],"members":[{"type":"individual","id":"7275f3daa168dd89","login":"mmhuntsberry","name":"Matt Huntsberry","avatar_url":"https://avatars-next.observableusercontent.com/b71780ff4049b468d749105f709b989680c3c844c37bba879c7981be776f8625","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 - Getting started","cells":[{"id":0,"value":"md`# D3 - Getting started\n## Fundamentals (Part one)\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`\n- [D3 Select](#d3Select)
\n- [Using External Data](#usingExternalData)
\n- [D3 Append & D3 Attr](#d3Append)
\n- [Selections & Data joins](#selections)
\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"md`\n## Introduction\n\nI've been jumping in and out of D3 for a few months now. Each time I take a break, because of the vastness of the D3 API, I forget a lot of the syntax and basics. I figured this time around I would document my progress that way I have something to fall back upon if I have to take a long break again or I forget somehthing short term (probably the more likely scenario). \n\nLet's get started!\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3Select = md`## D3 Select`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`D3 Select uses CSS selectors to return pages elements. This then gives us an object that we can then manipulate with D3 commands (_Such as binding data to shapes._)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`_Example:_ d3.select('rect') d3.select(\"#center\") d3.selectAll('rect') d3.selectAll(\"#center\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`d3.select will return the first element it finds match the passed in selector. While d3.selectAll will return all matching elements on the page.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Once we have an element selected we can use D3's append method to add something to it as a child node.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"svg = {\n let height = 100;\n let width = 200;\n \n let svg = d3.select(DOM.svg(width, height))\n\n // Take a look at Observablehq DOM class.\n console.clear()\n console.log(DOM)\n\n console.log(\"SVG\", svg)\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`Above because we are using observable we do a few things differently than if we were working directly in JavaScript.\n\n

We use a set of \"{}\" braces to tell observable we are going to write some JavaScript code.
We set height and width values.
We use d3.select to \"select\" the Observables \"DOM\" element that has an svg method attached that will allow us to render an svg. Then binding our d3 methods to it and assigning it the label of \"svg\".
We console log the results to our dev console. _If we crack open the object in the console, we can see the current targeted element and its parent_.\n
We return svg inside of the JavaScript expression.
Lastly, we assign our entire JS expression to a label called svg.

\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3Append = md`## D3 Append & D3 Attr`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"{\n const rect = svg.append(\"rect\");\n \n rect.attr('x', 25)\n .attr('y', 0)\n .attr('width', 150)\n .attr('height', 60)\n .attr('fill', \"#031634\")\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":206,"value":"md`\n In the example of above we show two new methods for interacting with our svg.\n

We target the \"append\" method that lives on svg and pass in \"rect\". Telling it that we want to append an svg rect element to the current instance of svg.
We assign the results to a label called \"rect\".
Using on new label of rect, we then use the \"attr\" method to give our rect element the attributes needed. _Note: Here we give height, width, x and y coordinates and a fill color.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"{\n const svg = d3.create('svg').attr('width', 400).attr('height', 400)\n\n svg.append('circle')\n .attr(\"cx\", 200)\n .attr(\"cy\", 200)\n .attr('r', 100)\n .attr('fill', \"#031634\");\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":219,"value":"md`\nIn the above code we want to add a circle to the canvas.\n\nStarting on the first line, these are the steps we take to complete that action:\n\n- We create an svg element using the \"create\" method, given to us by d3.\n- We chain on two \"attr\" methods to give our svg a width and height.\n- We assign the result of those invocations to a label we call \"svg\".\n\nWith the \"svg\" label we then chain on several method to create and position on \"circle\" element.\n- We append a \"circle\" element to our \"svg\".\n- We then assign our needed \"attr\" methods to create our \"circle\". Giving it a position, radius and fill color. \n\n\nLastly,\n- We return our svg.node() method to render it to our observable notebook.\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"selections = md`## Selections and data joins`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`Now that we can render some svgs to the screen we can now begin tying our SVGs to pieces of data. Giving us Data Driven Documents. D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`One of the key features of D3 is the ability to perform a data join. D3 reads in an array of data, and associates each item of the array with an svg.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`\nUsing our \"circle\" example from above, let's create a similar example but this time using an array of data points to create multiple circles.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"data = [4, 8, 15, 16, 23, 42]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"{\n // Clears console of any noise before running the following.\n console.clear();\n \n const svg = d3.create(\"svg\").attr(\"width\", 600).attr(\"height\", 200);\n\n const circles = svg.selectAll('circle').data(data);\n console.log('circles', circles)\n\n \n circles.enter().append(\"circle\")\n .attr(\"cx\", (d, i) => {\n console.log(`Item ${d} is at ${i}`)\n })\n .attr(\"cy\", 250)\n .attr(\"r\", (d) => {\n console.log(d)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n // Clears console of any noise before running the following.\n console.clear();\n \n const svg = d3.create(\"svg\").attr(\"width\", '100%').attr(\"height\", 200);\n \n\n const circles = svg.selectAll('circle').data(data);\n\n\n circles.enter().append(\"circle\")\n .attr(\"cx\", (d, i) => {\n return (i * 100) + 150\n })\n .attr(\"cy\", 100)\n .attr(\"r\", (d) => {\n return d;\n })\n .attr('fill', '#031634')\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":315,"value":"md`\nStarting where we \"enter\" our \"circles\" label from the result of \"svg.selectAll('circle').data(data)\".\nWe can display our circles a bit more dynamicallly by passing in and returning the index or data. \n\n- We tell \"cx\" that we want it to render on the \"x-axis\", 100 pixels times the index. This will spread out our circles along the axis, otherwise they would render one on top of a another. \n- We still hardcode in the \"y-axis\", telling it to center it on 100px.\n- We only pass and return d to the \"r\" attr defining how big our circles are going to be.\n- Add a splash of color.\n- And return our svg.node()\n\nThis, as you can see, will spread out some very lovely green circle in our svg canvas. \n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"usingExternalData = md`\n## Using External Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`\nOften we are going to want with data coming in from a file or an API. We can bring in external data by using one of d3's built in methods. I know of three data types that d3 can bring in. There may be more but these are the three I'm familiar with when writing this. \n\n- CSV (Comma separated values)\n- TSV (Tab separated values)\n- JSON (JavaScript Object Notation)\n\nThese are 3 pretty common file types and if you are unfamiliar, check out google and go a bit deeper. \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"buildings = d3.json(\"https://raw.githubusercontent.com/adamjanes/udemy-d3/master/02/2.08.1/data/buildings.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"md`Now we have our external data. d3.json is pointing to a GitHub repository for the tallest buildings in the world. The data comes back as an array of objects with a name and height proptery. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`Let's use our new data and render out the beginning of a bar chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"{\n const svg = d3.create('svg').attr('width', 400).attr('height', 500);\n\n const rects = svg.selectAll('rect').data(buildings);\n\n rects.enter().append('rect')\n .attr('x', (d, i) => {\n return i * 45;\n })\n .attr('y', 0)\n .attr('height', (d) => {\n console.clear()\n console.log(Number(d.height))\n return Number(d.height)\n })\n .attr('width', 40)\n .attr('fill', \"#031634\")\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":375,"value":"md`You'll notice this code is extremely similar to what we had for our circles example. Let's walk through this\n\n- We create our svg and chain on two \"attr\" methods for height and width.\n- We \"selectAll\" \"rect\" elements (_which haven't been created yet_), bind them with our data and save it all to a label we call \"rects\".\n- On our rects label we then chain on a method call of enter (_the function that binds our data to the DOM element_) and append a \"rect\" element.\n- We then chain on several \"attr\" methods all the attributes needed to create our \"rects\".\n- We first position our elements to be 45px apart\n- We start them at 0 on the y access. \n- Give them the height of what the data object says for each indice.\n- Add a width of 40\n- And a fill color\n- Lastly we return the svg.node()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null