31:T49a,breakout = { const width = 600 const height = 400 const margin = {"left":30,"right":100,"top":30,"bottom":30} // updating our margins const canvas = d3.select(DOM.svg(width, height)) const palette = d3.interpolatePurples const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)]) // adding more of margin for our text and adding the specific margins for left ,right, top, and bottom const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles)) const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1]) canvas.selectAll("rect") .data(drawingCircles) .join("rect") .attr("x", (d,i)=> x(d)) .attr("y", (d,i)=> y(i)) .attr("width", 20) .attr("height", 20) .style("fill", (d,i) => palette(color(d)) ) .style("stroke", "black") .style("stroke-width", 2) canvas.selectAll("text") .data(drawingCircles) .join("text") .attr("x", (d,i)=> x(d)) // moving our text up a bit (subtracting 5 pixels) .attr("y", (d,i)=> y(i)-5) .text((d,i) => "x: "+d+" y: "+i) return canvas.node(); }32:T408,{ const width = 600 const height = 400 const margin = {"left":30,"right":100,"top":30,"bottom":30} const canvas = d3.select(DOM.svg(width, height)) const palette = d3.interpolatePurples const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)]) const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles)) const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1]) // update this to select the lines, then join (or add) lines. canvas.selectAll("line") .data(drawingCircles) .join("line") // lines require x1,y1 (where the line starts) and x2,y2 (where the lines end) .attr("x1", (d,i)=> x(d)) .attr("y1", (d,i)=> y(i)) .attr("x2", (d,i)=> x(d)+10) .attr("y2", (d,i)=> y(i)+10) // to change the color of the line we need to update the stroke, not the fill. .style("stroke", (d,i) => palette(color(d)) ) .style("stroke-width", 10) return canvas.node(); }33:T442,{ const width = 600 const height = 400 const margin = {"left":30,"right":100,"top":30,"bottom":30} const canvas = d3.select(DOM.svg(width, height)) const palette = d3.interpolatePurples const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)]) const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles)) const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1]) canvas.selectAll("line") .data(drawingCircles.slice(0, -1)) // we first need to cut off our data one position short .join("line") .attr("x1", (d,i)=> x(d)) .attr("y1", (d,i)=> y(i)) // we then need to end our line with the next data point. // that's why we use (i+1) and why we cutoff the last position in our array .attr("x2", (d,i)=> x(drawingCircles[i+1])) .attr("y2", (d,i)=> y(i+1)) .style("stroke", "black" ) // changing this back, as not all the data points (and colors) will be represented .style("stroke-width", 10) return canvas.node(); }34:[] 2f:{"title":"Learning D3.js - Part 3 - Styles and Shapes","cells":[{"id":0,"value":"md`# Learning D3.js - Part 3 - Styles and Shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Styles and Shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md` *Styling* - The styling is handled through something call CSS (Cascading Style Sheets), but we can specifically handle this within our D3.js code. Here is a list of typical style changes. \n* fill - the color inside the shape\n* stroke - the border of the shape\n* opacity - the transparency of the shape\n* Note: there are more combinations, but these are the basics and covers a good amount of styling.\n\n*Shapes* - At this point, we have been using circles primarily for out designs. There are few other shapes we need to cover and what is needed to draw these.\n* Circles (\"circle\") - cx, cy, r\n* Rectangles (\"rect\") - x, y, width, height\n* Line (\"line\") - x1, y1, x2, y2\n* Text (\"text\") - x, y\n* Paths (\"path\") - these are by far the most complicate shapes, and will require further discussion throughout these notebooks\n* Note: There are ellipse, polylines, and polygons, but these are RARELY used in D3.js\n. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md` First things, first... Let's bring back our last project for Part 2.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"drawingCircles = [3, 5, 5, 6, 15, 18]","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"md` **NOTE** even though the name of this array is **drawingCircles**, we will use this data to create our rectangles, lines, paths, and text. The name is interchangeable; we just need the data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md` In the above example, we used .attr(ibute) for the attributes of the given shape. We can use another function called .style() to add the CSS styling directly to the shape.\n\nFor our first example, we make these *purple circles with a black border that is 3 px in width*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n .style(\"fill\", \"purple\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 3) // reminder, this means 3 pixels\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md` Again, the cool thing about D3.js is that we can use the data to style as well. Here is the same plot, but the stroke-width will be the value of our data set.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n .style(\"fill\", \"purple\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", (d,i) => d) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"md` ### Color Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md` For the most part, this is not very helpful. One way to make this more useful is to use color based on our data, or in other words, the darker the color, the larger the value. \n\nTo implement this, I would HIGHLY suggest visit [color-scales](https://github.com/d3/d3-scale-chromatic). As mentioned in the article, the color scales were created using Cynthia A. Brewer’s [ColorBrewer](https://colorbrewer2.org/). ColorBrewer was designed to help designers find color-blind safe and print and copier safe color palette. ColorBrewer is my (and several other programming languages) “go-to” color palette.\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md` For this, I will be choosing the Sequential (Single Hue) - Purple color. For these color palettes, they are expecting a value between 0 to 1, where 0 is the far-left of the color palette, the far-right is 1. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html`

0 $\"D3.js$ 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md` For now, to get our values between 0 and 1. I will take the largest value in our array (drawingCircles, which is 18) and divide all of our values by this. Meaning, 3 will become 3/18, 5 will be 5/18 and so on.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n .style(\"fill\", (d,i) => palette(d/18))\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md` Cool! We have some color! Though, we want to setup a way for our data to fit the 0 to 1 range withOUT needing us to manaully adding the largest value. There is a way to do this using [scaling](https://github.com/d3/d3-scale). Scaling allows use to create a range of values based on our data set. There are multiple types of scaling.For continuous data, or data with numeric values (Linear, Power, Log, Identity, Time, Radial). There are types of scaling, but for now we will focus on these.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md` ### Scale Linear (d3.scaleLinear)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md` Let's start by creating a scaling function called between0and1. To do this we will need two things:\n* the **.domain()** which is the lowest and highest number that will be given to the function. This is usually the smallest number in our array or 3, and largest number, 18. \n* the **.range()** is the range of values we want to map to, as in we want all numbers to be within 0 to 1. \n\nOur smallest number (3), will be mapped 0 and our largest number (18) mapped to 1. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"html` $\"between$ `\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"between0and1 = d3.scaleLinear().range([0,1]).domain([3,18])","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md` For 3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"between0and1(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"md` For 5:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"between0and1(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md` For 6:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"between0and1(6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md` For 15:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"between0and1(15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"md` For 18:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"between0and1(18)","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"md ` Again, though, we are still manually putting these values into our boundries. That's why there are built in functions to help AUTOMAGICALLY find the lowest and highest values in an array. \n* **d3.max()** - finds the max value in the array\n* **d3.min()** - finds the min value in the array\n* **d3.extent()** - finds both the min and max values in an array\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"d3.min(drawingCircles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"d3.max(drawingCircles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"d3.extent(drawingCircles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md` Meaning, we can update our function to this automatically.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"updatedBetween0and1 = d3.scaleLinear().range([0,1]).domain(d3.extent(drawingCircles))","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"[updatedBetween0and1(3),updatedBetween0and1(5),updatedBetween0and1(6),updatedBetween0and1(15),updatedBetween0and1(18)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md` Yep! Still working as expected. Meaning we can update our circles again.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain(d3.extent(drawingCircles))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n .style(\"fill\", (d,i) => palette(color(d)) )\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"html`

So, when to use d3.extent or d3.min/d3.max? This is a good example of this case. Right now,

\n\n\nconst color = d3.scaleLinear().range([0,1]).domain(d3.extent(drawingCircles)), \n\n

assumes that our lowest number, 3, is mapped to 0. Though, in some cases, we want 0 to be mapped to 0. Meaning we should use

\n\nconst color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n .style(\"fill\", (d,i) => palette(color(d)) )\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"md` ## Shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`### Rectangles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])\n \n canvas.selectAll(\"rect\")\n .data(drawingCircles)\n .join(\"rect\")\n .attr(\"x\", (d,i)=> d*5)\n .attr(\"y\", (d,i)=> height - (i*20))\n .attr(\"width\", 20)\n .attr(\"height\", 20)\n .style(\"fill\", (d,i) => palette(color(d)) )\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"md` For rectangles, the x,y is the origin of the rectangle (again in the top-lefthand corner). Right now, we are missing a rectangle, well, not missing it, it just off the canvas. For data point 3, index 0, the x position is 15, and the y position is the height. Meaning, we need to correct this. Also, we are not using the space very well. This was true with our circles, but let's see if we can fix this issue here as well. The best way to do this is to create margins. For now, let's just set a margin of 30. 30 on the top, bottom, left, and right. We will do this using the scaleLinear function for both the x and y axis.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"{\n const width = 600\n const height = 400\n const margin = 30 // Add my margin\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])\n \n // Use the margin to create an x domain and range\n const x = d3.scaleLinear().range([margin,width-margin]).domain(d3.extent(drawingCircles)) \n \n // Use the margin to create an y domain and range\n const y = d3.scaleLinear().range([height-margin,margin]).domain([0,drawingCircles.length-1]) \n \n canvas.selectAll(\"rect\")\n .data(drawingCircles)\n .join(\"rect\")\n .attr(\"x\", (d,i)=> x(d))\n .attr(\"y\", (d,i)=> y(i))\n .attr(\"width\", 20)\n .attr(\"height\", 20)\n .style(\"fill\", (d,i) => palette(color(d)) )\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"md` ### Text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md` Next, we add some text next to our boxes. For the most part, we will be using the same code as our rectangles. Let's take a look.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"{\n const width = 600\n const height = 400\n const margin = 30 // Add my margin\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])\n \n const x = d3.scaleLinear().range([margin,width-margin]).domain(d3.extent(drawingCircles)) \n const y = d3.scaleLinear().range([height-margin,margin]).domain([0,drawingCircles.length-1]) \n \n canvas.selectAll(\"rect\")\n .data(drawingCircles)\n .join(\"rect\")\n .attr(\"x\", (d,i)=> x(d))\n .attr(\"y\", (d,i)=> y(i))\n .attr(\"width\", 20)\n .attr(\"height\", 20)\n .style(\"fill\", (d,i) => palette(color(d)) )\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2) \n \n // adding in the text \n canvas.selectAll(\"text\")\n .data(drawingCircles)\n .join(\"text\")\n .attr(\"x\", (d,i)=> x(d))\n .attr(\"y\", (d,i)=> y(i))\n .text((d,i) => \"x: \"+d+\" y: \"+i)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md` Adding in the text, the only additional piece we need to add is what the .text() will be. In this case, I am again using the data to add specific data related text to the screen. If we take a particular look at this function, we can see how we used both text and data together.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"html`\n.text((d,i) => \"x: \"+d+\" y: \"+i)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md` Using the \"x: \", the plus sign (+), and d will combine or concatenate the two to make one string.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md` The last thing that needs to be adjusted is the fact that both the rectangle and the text occupy the same x,y coordinate, which means they overlap a bit. Also, the text for our last rectangle is off the canvas. So, let's adjust both of these.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`### Lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`Next, we have lines. Lines are similar to circles, rectangles, and text. You need a starting x,y, and similar to the rectangle you need secondary dimension (width/height), whereas lines need an ending x,y position. I think there can be a misconception about lines, based on “line graphs.” Line graphs (as seen below) look like a single line but fluctuations here and there when a better way to think about lines independent of one another. Paths (talked about next) are where we will be able to think about one, continuous line. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"html` \n\n\n\n\n\n\n\n\n\n

\n\n	\n\n
\nFigure 1 - How you might assume the line shape would work.\n	\nFigure 2 - How the line shape actually works.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`To create a line chart from these lines would require several changes. Here is an example of how to do it, but there is a MUCH simpler way using paths, which we will talk about in a second.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"md` As you can see, this is not the most elegant way to handle creating a line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md` ### Paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md` Finally, we have paths. Up to this point, we have been focusing on the idea \"for each data point, we create a shape or object.\" Paths require multiple data points to create the shape/object. We can use a function to create our line. We can either do this in a new (separate) cell or in with the code itself. Let's build it in our design. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"{\n const width = 600\n const height = 400\n const margin = {\"left\":30,\"right\":100,\"top\":30,\"bottom\":30}\n const canvas = d3.select(DOM.svg(width, height))\n const palette = d3.interpolatePurples\n const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])\n \n const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles)) \n const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1]) \n \n // this is our function to create the line, where the x is based on the d(ata) and the y on the i(ndex)\n const line = d3.line()\n .x((d,i)=> x(d)) \n .y((d,i)=> y(i)) \n \n canvas.selectAll(\"path\")\n .data([drawingCircles])\n .join(\"path\")\n .attr(\"d\", line)\n .style(\"stroke\", \"black\" )\n .style(\"stroke-width\", 10) \n .style(\"fill\", \"none\") // SPECIAL NOTE HERE: we set the fill to \"none\" because a path will have a fill color\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"md` We now have a taste of styling and shapes available to us in D3.js and D3's use in ObservableHQ. Our next notebook will focus on creating one notebook for one graph (a true line graph, with axis labels and everything!). `","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}