31:T6c4,{ const height = 500 const width = 600 const margin = ({top: 30, right: 40, bottom: 40, left: 50}) const canvas = d3.select(DOM.svg(width, height)) const paddingValues = d3.range(0,11) const y = d3.scaleLinear().range([height-margin.bottom , margin.top]).domain(d3.extent(paddingValues)) const scaleBand = d3.scaleBand().range([margin.left,width-margin.right]).domain(someData) canvas.append("text") .attr("x", width/2) .attr("y", height-5) .style("text-anchor", "middle") .text("bands") canvas.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin.left + ",-10)") .call(d3.axisLeft().scale(y).tickFormat((d,i) => d/10)) canvas.append("text") .attr("transform", "rotate(-90,15,"+(height/2)+")") .attr("x", 15) .attr("y", height/2) .style("text-anchor", "middle") .text("padding values") canvas.selectAll("g.rect").data(paddingValues) .join("g") .attr("class","rect") .attr("id",(d,i)=>"rect_"+i) .attr("transform", (d,i)=>"translate(0," + (y(i)-20) + ")") for (var i = 0; i < paddingValues.length; i++) { const d = paddingValues[i] canvas.select("g#rect_"+i).append("g") .attr("class", "axis") .attr("transform", "translate(0,20)") .call(d3.axisBottom().scale(scaleBand.padding((d/10)))) canvas.select("g#rect_"+i).selectAll("rect") .data(someData) .join("rect") .attr("x", (e,j)=>scaleBand.padding((d/10))(e)) .attr("y", 0) .attr("width",(e,j)=>scaleBand.padding((d/10)).bandwidth()) .attr("height",20) .style("stroke-width", 2) .style("stroke","black") .style("fill", "steelblue") } return canvas.node(); } 32:T577,html`


  canvas.append("g").selectAll("rect")

  .data(data)

  .join("rect")

the x position (as it relates to the date)

  .attr("x", (d,i)=>x(d.date)) 

the y position (as it relates to the interest), NOTE it is NOT the x-axis

  .attr("y",(d,i)=>y(d.interest))

the width, which we talked about in regards to using the bandwidth

  .attr("width",x.bandwidth)

this one is a bit, well, weird. I will explain below. 

  .attr("height", d => y(0) - y(d.interest))

  .style("stroke-width", 2) 

  .style("stroke","black")

  .style("fill", "steelblue")

`33:T483,{ const height = 200 const canvas = d3.select(DOM.svg(width, height)) canvas .append("rect") .attr("x", 0) .attr("y", 0) .attr("width",width) .attr("height",height) .style("stroke-width", 2) .style("stroke","black") .style("fill", "none") canvas .append("line") .attr("x1", width/2) .attr("y1", 0) .attr("x2", width/2) .attr("y2", height/2) .style("stroke-width", 2) .style("stroke","black") .style("fill","black") canvas .append("line") .attr("x1", 0) .attr("y1", height/2) .attr("x2", width/2) .attr("y2", height/2) .style("stroke-width", 2) .style("stroke","black") .style("fill","black") canvas .append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r",5) .style("stroke-width", 2) .style("stroke","black") .style("fill", "black") canvas .append("rect") .attr("x", width/2) .attr("y", height/2) .attr("width",20) .attr("height",50) .style("stroke-width", 2) .style("stroke","black") .style("fill", "steelblue") return canvas.node(); }34:T818,html` This how we get the following. We first need to recall that the y is
.attr("y",(d,i)=>y(d.interest))
This is NOT the x-axis, but the position of the actual value at that given interest.

Next, we take the maximum height value from our y scaleLinear().


y = d3.scaleLinear().range([height-margin.bottom , margin.top]).domain([0,100])

The largest value is (height-margin.bottom) or in another words, the smallest index in our y scaleLinear() ( y(0)) Last part we need to remember that we are starting at y(d.interest) and we trying to get back to the x-axis. Meaning, we need to subtract out y(d.interest)

We can write out the height two different ways:


.attr("height", d => y(0) - y(d.interest))


.attr("height", d => (height-margin.bottom) - y(d.interest))

My choice?


.attr("height", d => (height-margin.bottom) - y(d.interest))

because this will be true no matter what the minimal value is for y. It is constant. `35:T48f,{ const canvas = d3.select(DOM.svg(width, height)) canvas.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (height-margin.bottom) + ")") .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(90)") .style("text-anchor", "start"); canvas.append("text") .attr("x", width/2) .attr("y", height-5) .style("text-anchor", "middle") .text("Months - 2019") canvas.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis) canvas.append("text") .attr("transform", "rotate(-90,15,"+(height/2)+")") .attr("x", 15) .attr("y", height/2) .style("text-anchor", "middle") .text("Interest") canvas.append("g").selectAll("rect") .data(data) .join("rect") .attr("x", (d,i)=>x(d.date)) .attr("y",(d,i)=>y(d.interest)) .attr("width",x.bandwidth) .attr("height", d => (height-margin.bottom) - y(d.interest)) .style("stroke-width", 2) .style("stroke","black") .style("fill", "steelblue") return canvas.node(); }36:[] 2f:{"title":"Learning D3.js - Part 5 - Bar Chart","cells":[{"id":0,"value":"md`# Learning D3.js - Part 5 - Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`If you recall from our last notebook, we had three characteristics: \n1) Is the data continuous or 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\nThis time, even though the data itself has not changed, let's consider the scenario where:\n\n1) Our months of the year are discrete.\n\n2) Because of this, we want to compare those data points. \n\n3) This will stay the same - the date is independent and interest in the dependent\n\nWith this information, I would recommend a bar chart vs. a line chart. You may be thinking; I thought the data dictated the type of design. And yes, this can be true, but more than likely, the ***purpose*** of the graph dictates the design.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md` There is going to be overlap with the last notebook, so if you are starting with this notebook and wondering how we go here, please see [line chart graph](https://observablehq.com/@dudaspm/learning-d3-js-part-4?collection=@dudaspm/d3-in-observablehq).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`Let's start with the data, and again, we talked about this more in the last [notebook](https://observablehq.com/@dudaspm/learning-d3-js-part-4?collection=@dudaspm/d3-in-observablehq).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"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":24,"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":28,"value":"md`#### Start D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`#### Re-mapping data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"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":37,"value":"dateConverter = d3.timeParse(\"%m/%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"data = iceCream.map((d,i) => ({date:dateConverter(d.date),interest:+d.interest}) )","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`### Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"margin = ({top: 30, right: 40, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"margin[\"left\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Creating our X/Y Scales and Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"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). For the “interest,” we will use the d3.scaleLinear as we did before. Now we will be using a new way to handle our x-axis. Instead of a continuous function like d3.scaleTime(), we will be using a discrete function called d3.scaleBand().`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`### scaleBand()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md` Let's start with a scaleBand() example. Here is a list (or an array) of numbers from 1 to 10 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"someData = [1,2,3,4,5,6,7,8,9,10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md` Create a scaleBand() example with this data, and we will set the range from 0 to 100.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"tryingScaleBands = d3.scaleBand().range([0,100]).domain(d3.extent(someData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md` Now let's see formats the data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"someData.map(d=>tryingScaleBands(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md` As you can see, we have a problem. Whereas scaleLinear() (used for continuous data), we only needed to supply the lower and upper limits. For scaleBand(), we need to provide all the values in the array (someData).` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"temp = d3.scaleBand().range([0,1000]).domain([0,4,14,20,30,31,42,50,59,62])","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"[0,4,14,20,30,31,42,50,59,62].map(d=>temp(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"letsTryScaleBandsAgain = d3.scaleBand().range([0,100]).domain(someData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"someData.map(d=>letsTryScaleBandsAgain(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"md` This makes a bit more sense. As you can see, this is evenly spacing all of our data based on the maximum range (100) minus the minimal range value (0), then dividing this by the size (the number of values) in the list. Or...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"tex.block`\\frac{(\\text{maximum range value} - \\text{minimum range value})}{\\text{total number in the array}} = \\frac{(100-0)}{10}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`scaleBand() has a couple of neat features that can help with bar chart design. Two in particular are called scaleBand().bandwidth and scaleBand().padding.\n* scaleBand().bandwidth - will give you the distance between points in scaleBand(). Meaning, it will be perfect for our bar charts, because we will be using rectangles for our bars.\n* scaleBand().padding - increases the padding between each bar.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`Here is a graph showing the use of scaleBand() and using scaleBand().bandwidth to create the width of the rectangles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"{\n const height = 75\n const width = 600\n const margin = ({top: 30, right: 40, bottom: 40, left: 50})\n const canvas = d3.select(DOM.svg(width, height)) \n \n\n const scaleBand = d3.scaleBand().range([margin.left,width-margin.right]).domain(someData)\n \n canvas.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", \"translate(0,\" + (height-20) + \")\")\n .call(d3.axisBottom().scale(scaleBand)) \n console.log(scaleBand.bandwidth())\n \n canvas.append(\"g\").selectAll(\"rect\")\n .data(someData)\n .join(\"rect\")\n .attr(\"x\", (d,i)=>scaleBand(d))\n .attr(\"y\", height-margin.bottom)\n .attr(\"width\",scaleBand.bandwidth)\n .attr(\"height\",20)\n .style(\"stroke-width\", 2) \n .style(\"stroke\",\"black\")\n .style(\"fill\", \"steelblue\")\n \n return canvas.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"md` The figure below maps out 10 values and padding for 0 to 1. 0 indicating no padding and 1 meaning 100% padding (or no rectangle at all). Notice how values and the axis get evenly spaced based on the padding as well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`So, with this updated information available to us. Let's update our artwork to use rangeBand() instead of timeLinear(). Also, we will use the padding of .1 and use bandwidth for spacing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`#### Update the x scale from scaleTime() -> scaleBand() `","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md` Remember, we need all the values of the array instead of the max and min values. d3.map() can make this much easier for us.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"data.map((d,i)=>d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"x = d3.scaleBand().range([margin.left , width - margin.right]).domain(data.map((d,i)=>d.date)).padding(.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"md` With the scaleBand() update, the rest is pretty much the same.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"xAxis = d3.axisBottom().scale(x)\n .tickFormat(d3.timeFormat(\"%b\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"md` Here is a small update, but an IMPORTANT one. The idea of the bar chart is to allow for direct comparison. Direct comparison only works if all the data plays fair. With the line chart, using the maximum and minimum values in our *interest* data was ok, we were looking at the overall trend. For the bar chart, we always want to have a 0 value. If not, we are artificially adding distance between our bar charts, making changes more dramatic than they need to be. So, let's see our y domain from 0 to 100%. Why ''0 to 100%,'' because those are the maximum and minimum potential values for our percentages, even though it is not represented in our data. We will see an example of this in a minute.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"y = d3.scaleLinear().range([height-margin.bottom , margin.top]).domain([0,100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"yAxis = d3.axisLeft()\n .scale(y)\n .tickFormat((d,i) => d + \"%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md` Creating the rectangles themselves is another significant change from the line chart. With rectangles, you need 4 components:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"md` OK, let's talk about height. The weirdness stems from our 0,0 being in the top-left corner of the screen. Meaning, when we create a rectangle and add a ''height,'' it goes down and not up. \n\nHere is an example of a rectangle that starts in the middle of the box. When we add height, it goes down. You may think, well, can I use a negative height? The answer is no. What does this mean? Continue below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"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.bottom) + \")\")\n .call(xAxis) \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.left + \",0)\")\n .call(yAxis)\n \n canvas.append(\"text\")\n .attr(\"transform\", \"rotate(-90,15,\"+(height/2)+\")\")\n .attr(\"x\", 15)\n .attr(\"y\", height/2)\n .style(\"text-anchor\", \"middle\")\n .text(\"Interest\")\n \n canvas.append(\"g\").selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d,i)=>x(d.date))\n .attr(\"y\",(d,i)=>y(d.interest))\n .attr(\"width\",x.bandwidth)\n .attr(\"height\", d => (height-margin.bottom) - y(d.interest))\n .style(\"stroke-width\", 2) \n .style(\"stroke\",\"black\")\n .style(\"fill\", \"steelblue\")\n\n \n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"md` Another piece of artwork completed!\n\nAs we did last time, here is a minified version of the [project](https://observablehq.com/@dudaspm/learning-d3-js-part-5-bar-chart-minified). `","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}