31:[] 2f:{"title":"Learning D3.js - Part 4 - Line Chart","cells":[{"id":0,"value":"md`# Learning D3.js - Part 4 - Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` ### Our first notebook project`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md` Up to this point, we have been using individual cells to create our artwork, but typically, we would use a single notebook to create a piece of art. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md` ### Our Data Set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md ` Ice Cream Near Me (interest) [Google Trends - Ice Cream Near Me](https://trends.google.com/trends/explore?date=today%205-y&geo=US&q=ice%20cream%20near%20me) \n* 100 is the peak popularity\n* 50 means that the term is half as popular\n* 0 means there was not enough data for this term\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"iceCream = [\n ({date:\"01/2019\",interest:\"20\"}),\n ({date:\"02/2019\",interest:\"24\"}), \n ({date:\"03/2019\",interest:\"40.8\"}), \n ({date:\"04/2019\",interest:\"49.25\"}),\n ({date:\"05/2019\",interest:\"62\"}),\n ({date:\"06/2019\",interest:\"81\"}),\n ({date:\"07/2019\",interest:\"87.5\"}),\n ({date:\"08/2019\",interest:\"64.25\"}),\n ({date:\"09/2019\",interest:\"42.8\"}),\n ({date:\"10/2019\",interest:\"30.75\"}),\n ({date:\"11/2019\",interest:\"25\"}),\n ({date:\"12/2019\",interest:\"27.2\"}),\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md` The first step in the process is to take a piece of paper and draw a picture of what you believe the graph will look like. While doing this, I would suggest answering the following questions:\n\n1) Is the data continuous or discrete?\n - For *continuous* we assume the data has a range of values \n - For *discrete* we assume the data can be binned\n - this question can be a challenging first conversation to have, but the basic rule is: can you use a ruler? If so, continuous. If not, discrete.\n\n2) Are you interested in *comparing* your data points, or are you looking for a *trend* in your data?\n\n3) Which variables are our independent variables or our dependent variables? \n - For *independent* this is what we control \n - For *dependent* with this control, this is what we are measuring.\n\nFor us, I would say both our continuous, we are interested in the trend of the data, and date is independent and interest in the dependent. So, let's draw this out. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"html` $\"Preview$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md` ### Starting Our Line Artwork`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md` One quick note, the logic of this notebook will work from top to bottom. Even though we can use whatever order we would like, I will be working from top to bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`#### Start D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md` We will be using D3.js functions throughout this notebook, so let's get this declared.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"md` #### Date`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`Ok, the first step we need a function to convert our date in a way to make it usable in our chart. We can use a built-in function in D3.js called timeParse. timeParse needs to know how the date/time is formatted in our text and then use a specific format (called a specifier string). \n\nIf we look at our dates we have (for example) \"01/2019\" or \"month/full year\". \n\nHere is a list of all [specifier strings](https://github.com/d3/d3-time-format#locale_format), and a smaller list for formats that I typically use:\n\n* **%d** - zero-padded day of the month as a decimal number [01,31]\n* **%H** - hour (24-hour clock) as a decimal number [00,23]\n* **%m** - month as a decimal number [01,12]\n* **%M** - minute as a decimal number [00,59]\n* **%y** - year without century as a decimal number [00,99]\n* **%Y** - year with century as a decimal number, such as 1999\n\nMeaning, we need a specifier string of \"**%m/%Y**\" = \"**month/full year**\".\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"dateConverter = d3.timeParse(\"%m/%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"md` Now let's convert our data from its original format to an updated format using a function called d3.map(). [d3.map()](https://github.com/d3/d3-collection#maps) is a really nice function that can take your original data and convert it to other formats. Here is a simple example where we have an array of numbers, but we want to re-map them, so the values are multiplied by pi. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"justSomeData = [1,2,3,4]","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"justSomeData.map((d,i)=> d * Math.PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"md` Or, if for some strange reason, your data set needs the numbers and a cat. d3.map can do this for you!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"justSomeData.map((d,i)=> d + \"\\uD83D\\uDC08\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"md` For us, we need two things accomplished: 1) convert the string *date* to a date object and 2) convert our *interest* values from strings to a numeric value. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"data = iceCream.map((d,i) => ({date:dateConverter(d.date),interest:parseFloat(d.interest)}) )","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"html` One thing to point out, look at last part that specifies:\n
\n\ninterest:+d.interest\n\n
\nThe plus sign (+) changes the string characters to numeric values. There are function in JavaScript that you can use, but this is much more straightforward.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md` Other [Arithmetic operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`### Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md` For the artwork itself, we will need a few basic things: a width, height, and margins. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"margin = 60","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"md` Next, we will need to have a function to scale our date. Again, we are assuming our “date” will be our independent data (the x-axis) and the “interest” our dependent data (y-axis). D3.js has a specific way to scale our time called d3.scaleTime, and for the “interest,” we will use the d3.scaleLinear as we did before.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"xScale = d3.scaleTime().range([margin , width - margin]).domain(d3.extent(data, (d,i) => d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"yScale = d3.scaleLinear().range([height-margin , margin]).domain(d3.extent(data, (d,i) => d.interest))","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md` Finally (for now), we will make our function to create the line itself. This will be a function that creates the path from the data. Remember, *date is the x* and *interest is the y*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"line = d3.line()\n .x((d,i)=> xScale(d.date)) \n .y((d,i)=> yScale(d.interest)) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"md` OK, time to make the artwork!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"{\n const canvas = d3.select(DOM.svg(width, height)) \n \n canvas.selectAll(\"path\")\n .data([data])\n .join(\"path\")\n .attr(\"d\", function(d,i) { return line(d) })\n //.attr(\"d\", line)\n .style(\"stroke\", \"green\" )\n .style(\"stroke-width\", 10) \n .style(\"fill\", \"none\")\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md` That's it! That is all the code we need to make the artwork. Now, we probably want to add an axis for our x and y values. Let's see how that will look within our code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md` The x-axis will need to have the axis label at the bottom of the axis. This is pretty straight-forward by using the axisBottom() function to make the axis text on the bottom. The scale of our axis (the smallest, largest, and the labels in-between) will be based on our x values or scaleTime() values. So, set this as our scale. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"xAxis = d3.axisBottom().scale(xScale).tickFormat(d3.timeFormat(\"%b\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"md` The y-axis will need to have the axis label to the left. Again, straight-forward, axisLeft(), and the scaling is based on our y values or scaleLinear() values. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"yAxis = d3.axisLeft().scale(yScale).tickFormat((d,i) => d + \" kittens\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md` Now let's add these into our plot. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"{\n const canvas = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n\n canvas.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", \"translate(0,\" + (height-margin) + \")\")\n .call(xAxis) \n \n canvas.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis) \n \n canvas.selectAll(\"path.icecream\")\n .data([data])\n .join(\"path\")\n .attr(\"d\", function(d,i) { return line(d) })\n .attr(\"class\", \"icecream\")\n .style(\"stroke\", \"black\" )\n .style(\"stroke-width\", 2) \n .style(\"fill\", \"none\")\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"md` If we take a look our initial drawing and our artwork. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"html` \n\n\n\n\n\n\n\n\n\n

\n\n	\n\n
\nFigure 1 - Our initial drawing and what we expected to see\n	\nFigure 2 - Our artwork so far\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md` To do this, just to keep these ideas separate, we will create a new x and y-axis to showcase how to add this information. You do not need to this, we could use the original **xAxis** and **yAxis** from before, but to keep this notebook moving forward. Let's create a new x and y-axis and add new formatting for each tick. We can complete this using .tickFormat(), which is just appended to our axisBottom() or axisLeft(). We will first start with the y-axis, as all we want to do is add a \"%\" sign. \n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"html` As we have before, we can use the same
\n(d,i) => \n
\nidea to add the d(ata) point and a percent sign.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"yAxis_updated = d3.axisLeft()\n .scale(yScale)\n .tickFormat((d,i) => d + \"%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"md` Pretty straightforward, but our date x-axis allows for us to use d3.timeFormat() to produce abbreviations of our months using [specifier strings](https://github.com/d3/d3-time-format#locale_format). In this case, we will use the %b for month abbreviation. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"xAxis_updated = \nd3.axisBottom().scale(xScale)\n .tickFormat(d3.timeFormat(\"%b\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"md` Last for this exercise is to add text for axis labels. The x-axis label is pretty straightforward, but the y-axis has a couple of specific things to consider. Specifically, it will be rotated by 90°. Please look at the code itself to see these comments, but let's walk through this.\n\n1) For both axes, we want to center our text. In D3.js (and SVG in general) we use [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor). Text anchor has 3 positions:\n * start - the default x,y position and placed to the right \n * middle - will center the text based on the x,y position (what we will be using)\n * end - the default x,y position and placed to the left \n\nHere is a simple example.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"{\n const canvas = d3.select(DOM.svg(width, height/2)) \n\n canvas.append(\"text\")\n .attr(\"x\", width/2)\n .attr(\"y\", (height/2)-115)\n .style(\"text-anchor\", \"start\")\n .text(\"start (anchor)\")\n\n canvas.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", (height/2)-115)\n .attr(\"r\", 3)\n .style(\"fill\", \"purple\")\n \n canvas.append(\"text\")\n .attr(\"x\", width/2)\n .attr(\"y\", (height/2)-65)\n .style(\"text-anchor\", \"middle\")\n .text(\"middle (anchor)\")\n\n canvas.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", (height/2)-65)\n .attr(\"r\", 3)\n .style(\"fill\", \"purple\")\n \n canvas.append(\"text\")\n .attr(\"x\", width/2)\n .attr(\"y\", (height/2)-15)\n .style(\"text-anchor\", \"end\")\n .text(\"end (anchor)\")\n\n canvas.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", (height/2)-15)\n .attr(\"r\", 3)\n .style(\"fill\", \"purple\")\n \n\n \n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md` 2) For the y-axis label, only we need to discuss rotating the text. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"html` To do this, we need to add \n\n.attr(\"transform\", \"rotate(angle,x,y)\")\n\n\nThis can be a bit tricky because your first assumption (this was my first assumption at least) is to set the angle to rotate, but this will set the rotation to x,y = 0,0. Here is what this would look like.\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof textrotate1 = slider({\n min: -90, \n max: 90, \n step: 1, \n value: 0,\n description: \"rotate text around 0,0\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"{\n const canvas = d3.select(DOM.svg(width, height)) \n\n canvas.append(\"circle\")\n .attr(\"transform\", \"rotate(\"+textrotate1+\")\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", 3)\n .style(\"fill\", \"purple\")\n \n canvas.append(\"text\")\n .attr(\"transform\", \"rotate(\"+textrotate1+\")\")\n .attr(\"x\", width/2)\n .attr(\"y\", height/2)\n .style(\"text-anchor\", \"middle\")\n .text(\"rotate me\")\n \n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md` Clearly, this not what we are looking for. Instead, the rotation needs to take place at the center of the object or, in this case, the circle and the text. Now let's try.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"viewof textrotate2 = slider({\n min: -90, \n max: 90, \n step: 1, \n value: 0,\n description: \"rotate text around the center\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"{\n const canvas = d3.select(DOM.svg(width, height)) \n\n canvas.append(\"circle\")\n .attr(\"transform\", \"rotate(\"+textrotate2+\",\"+(width/2)+\",\"+(height/2)+\")\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", 3)\n .style(\"fill\", \"purple\")\n \n canvas.append(\"text\")\n .attr(\"transform\", \"rotate(\"+textrotate2+\",\"+(width/2)+\",\"+(height/2)+\")\")\n .attr(\"x\", width/2)\n .attr(\"y\", height/2)\n .style(\"text-anchor\", \"middle\")\n .text(\"rotate me\")\n\n\n \n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md` Much better! So, let's add those last two components in (text-anchor and rotation). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"{\n const canvas = d3.select(DOM.svg(width, height)) \n\n canvas.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", \"translate(0,\" + (height-margin) + \")\")\n .call(xAxis_updated) \n \n canvas.append(\"text\")\n .attr(\"x\", width/2)\n .attr(\"y\", height-5)\n .style(\"text-anchor\", \"middle\")\n .text(\"Months - 2019\")\n \n canvas.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis_updated)\n \n canvas.append(\"text\")\n .attr(\"transform\", \"rotate(-90,15,\"+(height/2)+\")\")\n //.attr(\"transform\", \"rotate(9)\")\n .attr(\"x\", 15)\n .attr(\"y\", height/2)\n .style(\"text-anchor\", \"middle\")\n .text(\"Interest\")\n \n canvas.selectAll(\"path.icecream\")\n .data([data])\n .join(\"path\")\n .attr(\"d\", line)\n .attr(\"class\", \"icecream\")\n .style(\"stroke\", \"black\" )\n .style(\"stroke-width\", 2) \n .style(\"fill\", \"none\")\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"md` Our next notebook will look at creating bar charts instead of a line chart. To see this same notebook, but with just the code, see the [minified version](https://observablehq.com/@dudaspm/learning-d3-js-part-4-minified).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md` Needed for this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}