40:null 41:["$","title",null,{"children":"SVG and D3 Basics | Diana Aung | Observable"}] 47:T40f,md`## SVG Before we dive into D3, we'll take a quick look at [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), which stands for Scalable Vector Graphics. SVG is a markup language for graphics. D3 is not limited to SVG. You can also use D3 to create visualizations using [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML), for example. In this course, we will stick with SVG. In Observable, we can render SVG by typing \`svg\` followed by backticks \`\`. We can write out SVG inside the backticks. ### Circles To begin, we'll draw a circle. We'll add an [outer \`

[d3-scale documentation](https://github.com/d3/d3-scale#band-scales)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`We can make an band scale to map from the person's name to the vertical position of their bar (y-axis). The domain will be the names of the people and the range will go from 0 to the height of our visualization. Padding specifies how much space we want in between the bars.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"names = scores.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"y = d3.scaleBand()\n .domain(names)\n .range([0, height])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`This scale maps from a persons name to the vertical position of their bar. Brian is the first name, so his value will be closest to 0. Joe has the last name, so his value will be closest to \\`height\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"y(\"Brian\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"y(\"Kelly\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"y(\"Joe\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`We can get the width of a band in the scale by calling the \\`bandwidth\\` method. This will correspond to the height of a bar in the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`#### Exercise\n\nLet's create the start of a horizontal bar chart for the \\`scores\\` dataset by drawing the bars. Edit the lines noted below to use the \\`x\\` and \\`y\\` scales to set the y-coordinate, width, and height of the bars.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"scores","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // create one bar for each element in scores\n const bars = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // set the attributes for the rects\n .attr('fill', 'steelblue')\n .attr('x', 0)\n .attr('y', d => y(d.name)) // EDIT THIS LINE\n .attr('width', d => x(d.score)) // EDIT THIS LINE\n .attr('height', y.bandwidth()); // EDIT THIS LINE\n\n // return the outer SVG element in order to render it\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":1010,"value":"solution(`{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // create one bar for each element in scores\n const circles = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // set the attributes for the rects\n .attr('fill', 'steelblue')\n .attr('x', 0)\n .attr('y', d => y(d.name)) // EDITED\n .attr('width', d => x(d.score)) // EDITED\n .attr('height', y.bandwidth()); // EDITED\n\n // return the outer SVG element in order to render it\n return svg.node();\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"md`#### Point scale\n\nYou can also checkout point scales. Like \\`scaleBand\\`, [\\`scalePoint\\`](https://github.com/d3/d3-scale#point-scales) also maps from a discrete domain to a continuous range. The difference is that it has no bandwidth. We will use a point scale when we don't need to account for the width of a bar, such as when positioning circles in an adjacency matrix, for example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"md`

[d3-scale documentation](https://github.com/d3/d3-scale#point-scales)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`#### Ordinal Scale\n\n[\\`scaleOrdinal\\`](https://github.com/d3/d3-scale#point-scales) maps from a discrete domain to a discrete range. For example, we can map the words one, two, and three to their corresponding number.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"ordinalScale = d3.scaleOrdinal()\n .domain(['one', 'two', 'three'])\n .range([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"ordinalScale('one')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"ordinalScale('two')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"ordinalScale('three')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`We will often use ordinal scales to map from a category to a color hue. For example, let's say we want each bar in our bar chart to have a different color. We can have a scale that maps from the name of a person to the color of their bar. The domain of this scale is the array of names and the range of this scale is an array of colors. For this array of colors, we could pass our own colors, like \\`['red', 'blue', 'brown', 'pink', 'purple']\\`, or we can use one of the [color schemes](https://github.com/d3/d3-scale-chromatic) that D3 provides.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"names","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"ordinalColor = d3.scaleOrdinal()\n .domain(names)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"md`The [D3 Color Legend notebook](/@d3/color-legend) is useful for creating legends for color scales. That notebook contains examples of many types of continuous color scales as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"swatches({ color: ordinalColor})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"md`#### Exercise\n\nUse the \\`color\\` scale to color the bars by the person's name.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // create one bar for each element in scores\n const circles = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // set the attributes for the rects\n .attr('fill', d => ordinalColor(d.name)) // EDIT THIS LINE\n .attr('x', 0)\n .attr('y', d => y(d.name))\n .attr('width', d => x(d.score))\n .attr('height', y.bandwidth())\n\n // return the outer SVG element in order to render it\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":1013,"value":"solution(`{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // create one bar for each element in scores\n const circles = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // set the attributes for the rects\n .attr('fill', d => ordinalColor(d.name)) // EDITED\n .attr('x', 0)\n .attr('y', d => y(d.name))\n .attr('width', d => x(d.score))\n .attr('height', y.bandwidth())\n\n // return the outer SVG element in order to render it\n return svg.node();\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"solution = (code, lang='javascript') => html`\n

Solution

\n${md`\\`\\`\\`${lang}\n${code}\n\\`\\`\\``}\n