25:["$","title",null,{"children":"(fork) SVG and D3 Basics | Tsz Wing Li | Observable"}] 49:T482,md`Three key lines here are \`\`\`javascript svg.selectAll('circle') .data(circleInfo) .join('circle') \`\`\` The result of these lines is that we have one \`\` in \`svg\` for each element in \`circleInfo\`. If \`circleInfo\` contains ${circleInfo.length} objects, then we have ${circleInfo.length} circles. Each circle is bound to one element of the \`circleInfo\` array. When we call \`.attr()\`, the first argument is the name of the SVG attribute that we are setting. The second argument can either be a constant value, like setting the \`fill\` to be green, or it can be a function, like for \`cx\`, \`cy\`, and \`r\`. When it is a function, the attribute is set to the return value of the function. This function will be called for each circle and it is passed the data that is bound to the circle. So, in the above code, \`circ\` is an element of \`circleInfo\`. To set \`cx\` and \`cy\`, we are passing [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). To set \`r\`, we are passing a function using the normal syntax. Both syntaxes work for setting attribute values.`4a:[] 29:{"id":"d28e4cb06055126a","slug":null,"title":"(fork) SVG and D3 Basics","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-01-24T16:01:17.773Z","update_time":"$D2024-01-24T17:02:55.094Z","view_time":null,"first_public_time":"$D2024-01-24T16:01:17.773Z","has_unpublished_edits":null,"fork":{"id":"5d149f39f0fdc5d5","slug":"d3-introduction","title":"SVG and D3 Basics","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5b6fc8c900638be3","login":"ef3d2a5f5af73197","name":"Tsz Wing Li","avatar_url":"https://avatars-next.observableusercontent.com/faef741a45a8c5085dde120330d0ef0103791c483a6005959b9724e3c659d2fb","tier":"starter_2024","bio":"i am chaos","following":false},"version":1546,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef3d2a5f5af73197","login":"ef3d2a5f5af73197","name":"Tsz Wing Li","avatar_url":"https://avatars-next.observableusercontent.com/faef741a45a8c5085dde120330d0ef0103791c483a6005959b9724e3c659d2fb","tier":null,"bio":"i am chaos","following":false}],"members":[{"type":"individual","id":"ef3d2a5f5af73197","login":"ef3d2a5f5af73197","name":"Tsz Wing Li","avatar_url":"https://avatars-next.observableusercontent.com/faef741a45a8c5085dde120330d0ef0103791c483a6005959b9724e3c659d2fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"(fork) SVG and D3 Basics","cells":[{"id":0,"value":"md`# (fork) SVG and D3 Basics\n\nD3 is a collection of JavaScript libraries that are useful for making visualizations. We will use D3 in this course because it gives us complete control over the visualizations that we make, unlike some other libraries or tools that are more limited. In addition, D3's popularity and wide-spread use makes it a good skill for a data visualization developer to have.\n\nThis notebook draws inspiration from Arvind Satyanarayan's [Introduction to D3](/@mitvis/introduction-to-d3) notebook and Mike Bostock's [Learn D3](/collection/@d3/learn-d3) and [Let's Make a Bar Chart](/@d3/lets-make-a-bar-chart) collections. I highly recommend reading through those. In addition, I've listed more D3 resources in the [course notebook](/@nyuvis/information-visualization-course).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## SVG\n\nBefore 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) or [HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML), for example. In this course, we will stick with SVG.\n\nYou can write SVG directly in Observable using the HTML cell type.\n\n### Circles\n\nTo begin, we'll draw a circle. We'll add an [outer \\`

[d3-scale documentation](https://github.com/d3/d3-scale/tree/83555bd759c7314420bd4240642beda5e258db9e#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 person's 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 => 0) // EDIT THIS LINE\n .attr('width', d => 0) // EDIT THIS LINE\n .attr('height', 0); // 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\nWe will also use point scales. Like \\`scaleBand\\`, [\\`scalePoint\\`](https://d3js.org/d3-scale/point) 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/tree/83555bd759c7314420bd4240642beda5e258db9e#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://d3js.org/d3-scale/ordinal) 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://d3js.org/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 => 'steelblue') // 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