2d:["$","title",null,{"children":"D3: Mapping data to graphics | Ayaan Kazerouni | Observable"}] 32:T5b8,canvas = { const canvas = htl.html` `; return canvas; }33:T484,{ const height = 300; // Start by creating the svg container as usual. const svg = d3.create('svg') .attr('width', width) .attr('height', height) .style('border', '1pt grey dashed'); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(yWithMargin).tickFormat(d3.format('$~s'))); svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xWithMargin)) // Calling axisBottom returns the axis selection. .selectAll('text') // That selection includes text (the county names). .attr('transform', 'rotate(-90)') // Rotate county names by -90º. .attr('text-anchor', 'end') // Positioning should be done based on the end of the text. .attr('y', 0) // After rotating, changing y position will move the text horizontally. .attr('dy', '0.35em') // Control jitter from rotating the viewport for each text element. .attr('x', 0) // After rotating, changing x position will move the text vertically. .attr('dx', '-9'); // Control jitter from rotating the viewport for each text element. return svg.node(); }34:T616,{ const height = 300; // Start by creating the svg container as usual. const svg = d3.create('svg') .attr('width', width) .attr('height', height); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(yWithMargin).tickFormat(d3.format('$~s'))); svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xWithMargin)) .selectAll('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('y', 0) .attr('dy', '0.35em') .attr('x', 0) .attr('dx', '-9'); // Add a title svg.append('text') .attr('text-anchor', 'start') // Positioning will be based on the middle of the text. .attr('x', 0) // Start of the figure horizontally .attr('y', margin.top - 18) // Above the top margin of the figure vertically. .attr('font-weight', 'bold') .attr('font-family', 'Avenir') .attr('font-size', '11pt') .text('Median household income in California counties'); // Draw a rectangle per data point svg.selectAll('rect') .data(csEnrollmentData) .join('rect') .attr('x', d => xWithMargin(d.county)) .attr('y', d => yWithMargin(d.ami)) // <-- set the y position based on the linear scale, which is now inverted .attr('height', d => yWithMargin(0) - yWithMargin(d.ami)) // <-- set the bar height so that each bar extends downward to the baseline .attr('width', xWithMargin.bandwidth()) .attr('fill', 'steelblue') return svg.node(); }35:[] 30:{"id":"1f526f182e9e3fe8","slug":"csc477-d3-mapping-data-to-graphics","title":"D3: Mapping data to graphics","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"unlisted","create_time":"$D2025-05-13T22:24:07.583Z","update_time":"$D2026-05-22T17:40:07.280Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":1227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"titling":"auto","title":"D3: Mapping data to graphics","cells":[{"id":0,"value":"# D3: Mapping data to graphics \n\n_Data joins, scales, and axes._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"D3 has no primitive for drawing multiple marks. That's why, in [our previous notebook about D3 selections](https://observablehq.com/@ayaankazerouni/csc477-d3-selections), we used a `for` loop to draw multiple circles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":" {\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', '100px');\n\n for (const x of [50, 150, 250, 350, 450]) {\n svg.append('circle')\n .attr('cx', x)\n .attr('cy', 50)\n .attr('r', 25)\n }\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"This may be fine for an initial drawing, but would make updates and interactions quite difficult.\n\nThat's where _D3 data joins_ come in. In D3, a \"data join\" refers to joining data to graphical elements.\n\nTo see data joins in action, we first need some data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"import { data } from '@ayaankazerouni/csc477-interactive-choropleth'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"data.view(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"In the table above (showing only the first three rows), each row is a county. For this example, we'll play with the data not as an Arquero table, but as a simple array of objects.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"csEnrollmentData = data.objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Data joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"Let's start by drawing a circle per county in our dataset.\n\nInstead of manually looping using `for` loop, we pass our data to a D3 selection using the `.data()` function (much like in Vega-Lite).\n\nThen, we join the data with `circle` shapes, each drawn at the same x and y coordinates, with the same size. _Why does only one circle appear?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"{\n // Start by creating the svg container as usual.\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n // Draw a circle per data point.\n svg.selectAll('circle') // <-- Select all circles in the SVG; these circles may or may not exist yet.\n .data(csEnrollmentData) // <-- After this step, the circles that follow are drawn per data point\n .join('circle') // <-- Loop over the provided data and draw circles for each record\n .attr('cx', 25)\n .attr('cy', 25)\n .attr('r', 5);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Because we're drawing all the circles centered at the same x and y coordinates, each circle is drawn on top of the previous ones, making it look like only one circle was drawn. Let's spread them out, drawing a long row of circles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"{\n // Code here.\n // Set the circle's cx attributes according to their position in the list\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n // Draw a circle per data point.\n svg.selectAll('circle') // <-- Select all circles in the SVG; these circles may or may not exist yet.\n .data(csEnrollmentData) // <-- After this step, the circles that follow are drawn per data point\n .join('circle') // <-- Loop over the provided data and draw circles for each record\n .attr('cx', (_, i) => i * 25) // .attr('cx', 25)\n .attr('cy', 25)\n .attr('r', 5);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"In the code above, we set the y-coordinate (`cy`) and radius (`r`) attributes like before.\n\nFor the x-coordinate (`cx`), instead of setting a literal value of 25, we use a function that computes a value based on the record (\"datum\") being drawn and its position in the list.\n\nThe function takes two parameters:\n\n- The first parameter refers to the data record, or \"datum\", and is typically given the name `d`\n- The second (optional) parameter is the index of the datum in the list, and is typically given the name `i`\n\n_The first circle is half-visible because its center point (0, 25); its left half appears off the SVG area._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"## Scaling to the available area\n\nRight now our scales are spaced apart by 12 pixels, a rather arbitrary threshold.\nLet's change our \"visualization\" to instead take up the available width.\n\nRecognise that what we need here is a _scale_, i.e., a function that maps from the data domain to a visual range.\nIn this case, the value in the data domain would be the point's _index_ (position in the list), and the value in the visual range would be a `x` pixel position.\n\n### Band scales\n\nLet's say we want to occupy the entire width of our chart area (${width} pixels).\nWe can express this scale as a function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"function scaleWidth(index) {\n return Math.floor(\n (index / (csEnrollmentData.length)) * width\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"With the function above, the first county (index 0) would be placed at the ${scaleWidth(0)} pixel position, the second county (index 1) at the ${scaleWidth(1)} pixel position, the last (index 56) at the ${scaleWidth(56)} pixel position, etc.\n\nWe can use our `scaleWidth` function to compute a `cx` value based on each datum's index, thereby using up the entire available width.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"{\n // Code here\n // Use the `scaleWidth` function to determine each circle's \"cx\" position\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n // Draw a circle per data point.\n svg.selectAll('circle') // <-- Select all circles in the SVG; these circles may or may not exist yet.\n .data(csEnrollmentData) // <-- After this step, the circles that follow are drawn per data point\n .join('circle') // <-- Loop over the provided data and draw circles for each record\n .attr('cx', d => x(d.county))\n .attr('cy', 25)\n .attr('r', 5);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"This type of scale, used for ordinal or nominal data (in this case, names of counties) is called a **band scale**.\n\nIt is so called because it computes a scale based on uniform \"bands\" (each point is uniformly separated by the same distance).\n\nIn the `scaleWidth` function, we computed our own band scale. But D3 provides a number of scale utilities so that we don't need to compute scales ourselves. We can instead compute our `x` scale using the [`d3.scaleBand`](https://d3js.org/d3-scale/band#band_domain) method.\n\nUsing a series of chained method calls, we can construct a band scale by specifying its domain (the list of county names) and its range (the range of allowed pixel values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"// Code here\nx = d3.scaleBand() // Construct a band scale using d3.scaleBand\n .domain(csEnrollmentData.map(d => d.county)) // Set its domain to the list of county names\n .range([0, width]) // Set its range to the range of possible horizontal pixel values\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"x('Alameda')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$${flag('todo')} Update the figure above to use the `xScale` function instead of the `scaleWidth` function. Note that it now computes a position based on the _county name_, and not on its position in the list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"### Linear scales\n\nDrawing out a list of circles in a line is definitely of limited utility. Let's make use of the `y` visual channel to depict some magnitude: the `ami` (median household income) of each county.\n\nSince this is a quantitative field, a band scale won't cut it. We definitely _don't_ want to evenly space points out vertically. Now, we want to space them out _proportional to their magnitudes_.\n\nWe could roll our own, but instead we'll use D3's [`d3.scaleLinear`](https://d3js.org/d3-scale/linear) function.\n\nIn the code below, we construct our linear scale by specifying the domain (the minimum and maximum `ami` values) and the range.\nUnlike with `width`, we will manually specify what we want to be the height of the chart. **For this example, let's pick a height of 300 pixels.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"yScale = d3.scaleLinear()\n // 👇🏽 We don't want our y axis to start at the min income; we want to start at 0\n .domain([0, d3.max(csEnrollmentData, d => d.ami)])\n // .domain(d3.extent(csEnrollmentData, d => d.ami))\n .range([0, 300]); // <-- Our figure will be 300 pixels tall","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"We can now position our marks vertically using the `y` function and horizontally using the `x` function.\n\nAlso, instead of drawing `circle` elements, let's draw `rectangle`s. That is, **let's draw a bar chart**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"A rectangle, recall, needs the following attributes:\n\n- `x`: the x-coordinate for its top-left point\n- `y`: the y-coordinate for its top-left point\n- `width`: width of the rectangle\n- `height`: height of the rectangle\n\nLet's change our code to draw rectangles instead of circles. Take a moment to examine the `attr` calls below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"{\n // Start by creating the svg container as usual.\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 300); // <-- Increased the size of our SVG area\n\n // Draw a rectangle per data point.\n svg.selectAll('rect')\n .data(csEnrollmentData)\n .join('rect')\n .attr('x', d => x(d.county)) // <-- set the x position based on the band scale\n .attr('y', d => yScale(d.ami)) // <-- set the y position based on the linear scale\n .attr('width', x.bandwidth()) // <-- The band scale can tell us how wide each band should be.\n .attr('height', d => yScale(d.ami)) // <-- set the bar height based on the linear scale\n .attr('fill', 'steelblue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"Woah, that doesn't look right! We can't have bars floating around in mid-air.\n\nCan you see what the problem is?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"**We need to invert our usage of the y-scale.** Remember that in a graphical coordinate system, the origin is at the top-left corner.\n\nOur `yScale` function is correctly computing the _height_ of each of our bars — but we cannot use that value as the _location_ of our bars, since y-coordinates increase from top to bottom.\n\nConsider Santa Clara county, the county with the highest median household income of $168,500.\nApplying the `yScale` function to that income value, we would get the value ${yScale(168500)} in return.\n\nThat's appropriate as a mapping between _income_ and _height_ — the maximum income should take up the height of the figure.\nHowever, directly mapping income to `y` is not appropriate. If the rectangle was drawn _at_ position ${yScale(168500)}, it wouldn't be visible!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"viewof ys = Inputs.radio(new Map([['Direct mapping', yScale], ['Inverted y-scale', y]]), { value: yScale, label: \"Choose a y scale\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"\nThe solution is to _invert the range_ of our `y` scale. Use the controls above to toggle between the direct ❌ and inverted ✅ scales.\n\nHere's our updated `y` scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(csEnrollmentData, d => d.ami)])\n .range([300, 0]); // <-- The range is now reversed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"By reversing the range, min values in the dataset are mapped to the _bottom_ of the figure area, which is what we would expect based on most charts' origins (unless they have inverted axes).\n\nOf course, this will also change how we use the scale. Our `y` scale gives us the vertical position for the top-left corner of each bar, so we cannot use it directly as a height measurement.\n\nWe need each bar to extend from its appropriate `ami` position down to the baseline (the \"`0`-line\") of our figure.\nTo accomplish this, we set each bar's height to `y(0) - y(d.ami)`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"{\n const height = 300;\n \n // Start by creating the svg container as usual.\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n // Draw a rectangle per data point.\n svg.selectAll('rect')\n .data(csEnrollmentData)\n .join('rect')\n .attr('x', d => x(d.county))\n .attr('y', d => y(d.ami)) // <-- set the y position based on the linear scale, which is now inverted\n .attr('height', d => y(0) - y(d.ami)) // <-- set the bar height so that each bar extends downward to the baseline \n .attr('width', x.bandwidth())\n .attr('fill', 'steelblue')\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"In addition to `scaleBand` and `scaleLinear`, d3 provides other scaling methods like `scaleSqrt`, `scaleLog`, `scalePow`, `scaleTime`, etc. See more at the [`d3-scale`](https://d3js.org/d3-scale) documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"## Adding axes and titles\n\nOk, our \"bar chart\" is not very useful right now, without axes, labels, and an informative title. But we need space for them!\n\n### Making space for axes\n\nInstead of stretching all the way to the edges, we'll define _margins_ on all four sides of our figure.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"margin = ({\n top: 30,\n right: 20,\n bottom: 85,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"So our image area will look something like this (though our exact dimensions are different). Instead of using `0` as our left edge, we use `margin.left`. Instead of using `width` as our right edge, we use `width - margin.right`. Similar adjustments are made for the top and bottom edges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"marginConvention","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"Credit: [_Margin Convention_](https://observablehq.com/@d3/margin-convention). Mike Bostock. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1181,"value":"---\nWith the space set aside for margins, our scales now look as follows:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1184,"value":"// x scale\nxWithMargin = d3.scaleBand()\n .domain(csEnrollmentData.map(d => d.county))\n .range([margin.left, width - margin.right]) // <-- New! Use the margins for the range.\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"yWithMargin = d3.scaleLinear()\n .domain([0, d3.max(csEnrollmentData, d => d.ami)])\n .range([300 - margin.bottom, margin.top]); // <-- New! Use the margins for the range.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"Below, see our bar-chart-without-axes again, this time with margins. The figure now has a dashed border so that the margin becomes clear.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"{\n const height = 300;\n\n // Create the svg container as usual.\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('border', '1pt grey dashed');\n\n // Draw a rectangle per data point.\n svg.selectAll('rect')\n .data(csEnrollmentData)\n .join('rect')\n .attr('x', d => xWithMargin(d.county))\n .attr('y', d => yWithMargin(d.ami)) // <-- set the y position based on the linear scale, which is now inverted\n .attr('height', d => yWithMargin(0) - yWithMargin(d.ami)) // <-- set the bar height so that each bar extends downward to the baseline \n .attr('width', xWithMargin.bandwidth())\n .attr('fill', 'steelblue')\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"## Adding axes\n\nNow that we've made the space, let's see about drawing the axes.\n\n_An axis is the visual representation of the scale._ Since we've already done the work of mapping domains to ranges, we can use that in concert with the [`d3-axis`](https://d3js.org/d3-axis) module—it takes a _scale_ as a parameter and generates an axis based on the scale.\n\nThe code below uses the following:\n\n- `d3.axisBottom` for the x axis (along with some text styling for the labels)\n- `d3.axisLeft` for the y axis\n\nBoth `axis...` functions take a scale as an argument. They are used with the `.call(...)` syntax on an existing d3 selection (typically a `` element created to hold the axis).\n\nSee the code below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"Notice the many little adjustments we made to the x axis text labels? They were needed because we rotated the text by -90º.\n\nHere's a little playground to see how rotating the text leads to other changes to positional attributes.\n_Add rotation to the text label and see how it affects its positioning relative to the associated axis tick._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":964,"value":"viewof rotation = Inputs.range([-90, 90], { step: 1, label: 'Rotate' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"We're now ready to add our bars back our bar chart. I've also made the following additions:\n\n- Added a title.\n- Removed the dashed box around the figure, which was only used to illustrate margins.\n- Added a `.nice()` call to the y scale so that it includes a little beyond the max domain value.\n\nIn most cases, you would also add axis titles using `text` elements. In this chart, the tick labels and the chart title work together to make each axis's meaning quite clear, so we don't gain much by adding axis titles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"In the [next notebook](https://observablehq.com/@ayaankazerouni/csc477-d3-animation?collection=@ayaankazerouni/csc-477-cal-poly), we'll work adding basic interactions and animations to this bar chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"import { flag } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"import { vl } from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"import {graphic as marginConvention} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body" 2c:E{"digest":"NEXT_REDIRECT;replace;/@ayaankazerouni/csc477-d3-mapping-data-to-graphics;307;"}