2e:null 2f:["$","title",null,{"children":"SVG and D3 Basics | nyuinfovisspring26 | Observable"}] 34: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.`35:T8ad,{ //in this example we are first creating scales that map two continuous quantities to co-ordinate space, and then drawing their corresponding axes by using the call method // the xScale maps values beetween 0-500 to the horizontal dimensions of the svg (notice the specified range - which also incorporates the margin) //Similarly, the yScale maps values between 0-250 to the vertical dimensions, notice that the specified range and domains for the yscale, we are mapping domain value of 500 to co-ordinate 0 and domain value 0 to the max bounds of the svg - why ? Because the co-ordinate space for SVG starts with 0,0 being the top left corner, in a chart we usually (not always) want the top of the y-axis to correspond to the bigger quantity and the bottom of the y-axis to correspond to a lower quantity // Set up the SVG container dimensions const width = 500; const height = 300; const margin = { top: 20, right: 30, bottom: 40, left: 40 }; // Create the SVG container const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Define the scales const xScale = d3.scaleLinear() .domain([0, 250]) // input domains .range([0, width - margin.right - margin.left]); // output range const yScale = d3.scaleLinear() .domain([0, 500]) .range([height - margin.bottom - margin.top, 0]); // Create the X axis const xAxis = d3.axisBottom(xScale) //notice what happens if you use axisTop instead .ticks(10); //OPTIONAL: set the number of ticks // Create the Y axis const yAxis = d3.axisLeft(yScale) //notice what happens if you use axisRight instead .ticks(10); //OPTIONAL: set the number of ticks //It is good practice to attach each axes to its own group element // Append the X axis to the SVG by using the call method. We are using the translate transform to move the x-position of the axis to start at the left margin and y-position of the x-axis group to be at the bottom of the chart svg.append('g') .attr('transform', `translate(${margin.left},${height - margin.bottom})`) .call(xAxis); // Append the Y axis to the SVG svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) .call(yAxis); return svg.node(); }36:[] 32:{"id":"5c53f10be6fdfb3a","slug":"svg-and-d3-basics","title":"SVG and D3 Basics","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-26T19:30:02.975Z","update_time":"$D2024-09-19T19:36:36.375Z","view_time":null,"first_public_time":"$D2024-09-12T20:54:22.885Z","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":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024"},"version":1507,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4ccb8c7aefe8f092","login":"robert-krueger","name":"Robert Krueger","avatar_url":"https://avatars-next.observableusercontent.com/38aea4a405e12671493d571e75c2a4fef2d7a5971986be85a23edf3ba202f3cb","tier":null}],"members":[{"type":"individual","id":"9d973b8b4160d8a4","login":"chahat-kalsi2","name":"Chahat Kalsi","avatar_url":"https://avatars-next.observableusercontent.com/ffa9c19bea26058814dda8d6c3735322ad89e4426d385aba611aafc84df099e1","tier":null,"role":"editor"},{"type":"team","id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":59,"collection":{"id":"c1b0c78867fb37e3","slug":"guides-and-examples","title":"Guides and Examples","owner":{"id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26"}},"type":"notebook","body":{"title":"SVG and D3 Basics","cells":[{"id":0,"value":"md`# 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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":592,"value":"names = scores.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":487,"value":"y(\"Brian\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"y(\"Kelly\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"y(\"Joe\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":521,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":785,"value":"scores","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":272,"value":"ordinalScale('one')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"ordinalScale('two')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"ordinalScale('three')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":619,"value":"names","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":1251,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"swatches({color: ordinalColor})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":1488,"value":"### Drawing axes corresponding to scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1491,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"solution = (code, lang='javascript') => html`\n

Solution

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

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"import {chart as scaleDiagram} from '@uw-info474/animated-scale-diagram'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"