25:["$","title",null,{"children":"D3 Playground | Matt Huntsberry | Observable"}] 4b:T4f0,md`# D3 Playground ### Let's learn us some D3 #### Part One _Note: These posts are intended to document my learning as I go through the rabbit hole of D3 and Data Visualizations. A lot of concepts in these posts will be things I have learned in books, blogs, articles and/or tutorials. These write ups are really intended to be a place for me to go link to or possibly help others on their D3 journey._ Observable can be a bit interesting in how it works. As I am just starting my journey with D3 and Observable, I definitely don't know all the ins and out and will update as I learn more. Let's begin. In order to use D3 we need to require it. Unlike in regular JavaScript, which is read top down. We can require **D3** at the bottom of the page. Check out the bottom of this page, in the Appendix section to see all of the 'required' / 'imported' libraries used. In this first example, I am going to use a basic '.csv' (comma separated values) file to plot some basic points to the page. First let's attach a file! I already went ahead and created a very basic (csv) file. We can attach that file by clicking on the 'ellipse' in the top right in the right hand corner. Under file attachments we can add our csv file (or in any other type). `4c:T939,{ // Frist, we next need to create an svg element and pass in our defined width & height const svg = DOM.svg(width, height); // There's a lot going on in the code below. So let's break it down, line by line. /** First we need to select our newly created svg element. The `select` and `selectAll` methods accept a CSS selector and return the matching nodes. select() returns the first match and selectAll() a collection of matches. **/ d3.select(svg) // We then select all elements inside our svg node. // We seems weird since we don't actually have any circle elements inside our svg yet. // Using selectAll("circle") returns us an empty collection of elements. .selectAll('circle') // Now we associate our new empty collection of // elements to our data with a call to data(data) // D3 establishs and manages a one-to-one corresondence between individual data points and their associated DOM elements. .data(data) // Because the elements technically haven't been created we use the enter() to connect any "surplus" "unconnected" items to the DOM elements. .enter() // A element is appended to the collection of circle elements inside the svg .append('circle') // Next we add attributes needed to be defined for our elements. First up, 'r' (radius), which we given a value of 5. .attr('r', 5) // A fill color of 'red' .attr('fill', 'red') // cx which defines its x-coordinate on the svg element. .attr('cx', d => d["x"]) // cx which defines its x-coordinate on the svg element. .attr('cy', d => { console.log(d); return d["y"]; }); // You'll notice in the both of the last .attr() methods, the second parameter, rather passing in a hardcoded value like we did with the radius attribute. We pass in a function. // This function automagically gets access to a parameter we name 'd'. Much like the JavaScript 'map' method or 'filter', 'd' is simply each idexed instance of our data object (ex: d[0] = { x: "100", y: "50" }). // Here we can map which values we'd like to represent our 'cy' or 'cx' attributes for our element // hint: Crack open the console and take a look at the data to get a sense of what happening under the hood. // Lastly, we return our svg element return svg; }4d:[{"id":"8f80c42f64ad89fef9ae739b6d117839eef583df5087d4b8ecfd31fa0c1940d34e9743326ae2644c4253e693a1a04284a28b2ce0ce31eb4c2b4687d586b24ba8","href":"https://static.observableusercontent.com/files/8f80c42f64ad89fef9ae739b6d117839eef583df5087d4b8ecfd31fa0c1940d34e9743326ae2644c4253e693a1a04284a28b2ce0ce31eb4c2b4687d586b24ba8","name":"points.csv","type":"text/csv","lastModified":1606066862251.896,"size":43}] 47:{"id":"ddd2e5ea8c63d935","slug":"d3-playground","title":"D3 Playground","thumbnail":"44690b5b5a257b0f0de9ebc01bbfc4ca50e8dc107cb8d032316fbdf4f26c2779","access_level":"public","create_time":"$D2020-11-22T16:48:19.672Z","update_time":"$D2020-11-22T19:33:19.684Z","view_time":null,"first_public_time":"$D2020-11-22T19:33:35.941Z","has_unpublished_edits":null,"fork":false,"stars":2,"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":172,"publish_version":172,"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":2,"collection":{"id":"e15db4afe7b9514b","slug":"playground","title":"Playground","owner":{"id":"747ccd56620ad723","login":"mmhuntsberry","name":"Matt Huntsberry"}},"type":"notebook","body":{"titling":"auto","title":"D3 Playground","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html`\n

Our data looks something like this:

\n\n

\nx y\n100 50\n200 100\n300 150\n400 200\n500 250\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\nWe can use an attached file by using Observables 'FileAttachment' function with the '.csv()' on it. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"data = FileAttachment(\"points.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`Let's first define a width and height for our incoming svg element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\nNow that we have our width and height let's create our data visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`\nWhew! That's a lot of information. All of that gets us some very basic plotted points rendering to our newly created svg element, which you can see above. \n\nTry it out yourself by playing with the different attributes or adding in your data file. \n\n**Stay tuned** for the next write up where we will use a slightly more complicated data set.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n# Appendix\n Let's require D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"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