30:T474,{ const container = d3.create('div'); const data = barData; const barChart = container.selectAll('div') /* ADDED: Add code here to generate the bar chart within the container. */ .data(data) .join('div') barChart .style('background', 'steelblue') // Set the background color of the div to 'steelblue' .style('border', '1px solid white') // Set the border of the div as 'white' .style('font-size', 'small') // Set the text font size in the div to 'small' .style('color', 'white') // Set the text font color to 'white' .style('text-align', 'right') // Set the text alignment in the div to 'right' .style('padding', '3px') // HINT: CSS styles require units, not just numbers /* ADDED: Add code here to finish updating the visual properties of the bars */ .style('width', d => `${d.value}px`) // This makes short bars // .style('width', d => `${(width/78) * d.value}px`) // .style('width', d => `${xscale(d.value)}px`) // using xscale(), defined below .text(d => d.value) return container.node(); }31:T4ca,md`First, we need to create an svg element and specify its width and height. The height is based on the height of each bar, which we specify, and the number of bars in the data (\`barData.length\`). *Important:* In SVG, position (0,0) is the top left corner of the element. Positive values in the *x* direction move the item right. Positive values in the *y* direction move the item down. Then, we create new \`rect\` elements for each item in the data using \`selectAll('rect').data(barData).join('rect')\`. These will be the bars. For each bar, we set * x, y starting position - top left corner of the bar * width (or length) and height (\`barHeight\`) * color - using the \`color()\` scale function defined earlier * \`.style('stroke', 'white'\`) draws a white border on the bars so that they are easier to distinguish Then, we create new \`text\` elements for each item. These will be the values displayed at the right edge of each bar. These are specified similar to the \`rect\` elements, but with some changes to the positioning * x, y starting position - top right corner of the bar * dx is used to nudge the starting x position 20 pixels to the left * dy is used to nudge the starting y position 1.25em up `32:T522,{ const width = 400; const height = 200; const container = d3.create('svg') .attr('width', width) .attr('height', height); // Update the x scale here. const xscale = d3.scaleBand() .domain(barData.map(d => d.key)) .range([0,width]) .padding(0.1); // Update the y scale here. const yscale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value)]) .range([0, height]); container.selectAll('rect') .data(barData) .join('rect') .attr('x', d => xscale(d.key)) // Update the x position .attr('y', 0) // Update the y position .attr('width', xscale.bandwidth()) // Update the width .attr('height', d => yscale(d.value)) // Update the height .style('fill', d => color(d.key)) .style('stroke', 'white'); container.selectAll('text') .data(barData) .join('text') .attr('x', d => xscale(d.key)) // Update the x position .attr('y', d => yscale(d.value)) // Update the y position .attr('dx', '2.2em') // Update the x offset .attr('dy', -20) // Update the y offset .attr('fill', 'white') .style('font-size', 'small') .style('text-anchor', 'middle') .text(d => d.value); return container.node(); }33:T443,md`The first thing we need to change is \`xscale()\` and \`yscale()\`. The range for these should stay the same (we still have the same range of width and height as in the horizontal chart). What changes is the type of scaling and the data that's mapped to that axis. * xscale becomes a \`scaleBand()\` with a domain mapped to \`barData.map(d => d.key)\`, which was previously the domain in yscale * yscale becomes a \`scaleLinear()\` with a domain mapped to the range of data (\`[0, d3.max(barData, d => d.value)]\`), which was previously the domain in xscale Then in our bar definition, we need to update where we use xscale and yscale. In most cases, we're swapping the parameters given to xscale() and yscale(). * x: \`d => xscale(d.key)\` * y: 0 -- *This is wrong, but we'll come back to it later.* * width: \`xscale.bandwidth()\` * height: \`d => yscale(d.value)\` Finally, we do similar adjustments to the text. * x: \`d => xscale(d.key)\` * y: \`d => yscale(d.value)\` * dx: '2.2em' -- *This needed some manual adjustment.* * dy: -20 *But oops! Our chart is upside down!* `34:T495,{ const width = 400; const height = 200; const container = d3.create('svg') .attr('width', width) .attr('height', height); const xscale = d3.scaleBand() .domain(barData.map(d => d.key)) .range([0,width]); const yscale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value)]) .range([height, 0]); // Update yscale range container.selectAll('rect') .data(barData) .join('rect') .attr('x', d => xscale(d.key)) .attr('y', d => yscale(d.value)) // Update the y position .attr('width', xscale.bandwidth()) .attr('height', d => height - yscale(d.value)) // Update the height .style('fill', d => color(d.key)) .style('stroke', 'white'); container.selectAll('text') .data(barData) .join('text') .attr('x', d => xscale(d.key)) .attr('y', d => yscale(d.value)) .attr('dx', '2.2em') .attr('dy', 20) // Update the y offset .attr('fill', 'white') .style('font-size', 'small') .style('text-anchor', 'middle') .text(d => d.value); return container.node(); }35:T52a,md`### \<g\>: SVG Group Element This will allow us to have multiple charts in the same page, by grouping elements under one container element that can be transformed together and that have a common coordinate system with (0,0) in the top left corner. We bind our data to the 'g' element and apply the [translate(x, y) transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#transform_functions), which moves the whole object by *x* and *y*. Because this is done for each item in the dataset, our *y* position for each bar is already set by the transform. If we inspect the bar elements, we'll see a set of 'g' elements with increasing *y* values for their transform: ~~~html ... ... ... ... ... ~~~ Then instead of binding our data to 'rect' with \`container.selectAll('text').data(barData)\`, we can just append to the 'g' element with \`g.append('rect')\` since 'g' is already bound to \`barData\`. Same goes for our 'text' element for the labels. Before moving on, let's look at *translate* a bit more using the "Groups" section from the [SVG and D3 Basics notebook](https://observablehq.com/@nyuvis/d3-introduction) from NYU. `36:T6fa,md`### Visualizing Scales: Axes & Legends There's no room in our previous charts for axes. We need to add in space for them. We do this via margins (see [Margin Convention notebook](https://observablehq.com/@d3/margin-convention)). Set a variable to hold the margin values: \`margin = ({top: 10, right: 10, bottom: 20, left: 20})\` Create new scale functions to incorporate the margins. Usually we just call these \`xscale()\`, \`yscale()\` or \`x()\`, \`y()\`, but since these are already defined in this notebook, they're named as \`xMargin()\` and \`yMargin()\`. Only change is to the *range()*, since those are the display coordinates. *x*: from \`range([0, width])\` to \`.range([margin.left, width - margin.right])\` *y*: from \`.range([height, 0])\` to \`.range([height - margin.bottom, margin.top])\` To draw the axes, we add a new 'g' element and use *translate* to position the axes on the left and bottom, as appropriate. *x*: element should be positioned *margin.bottom* units from the bottom of the chart (which is at position *height*) - \`translate(0,\${height - margin.bottom})\` *y*: element should be positioned *margin.left* units from the left of the chart - \`translate(\${margin.left},0)\` Then, we use use [*d3.axis*](https://github.com/d3/d3-axis) module to draw the axes. This is usually done using the [*call()*](https://github.com/d3/d3-selection#selection_call) function. \`selection.call(func)\` is like \`func(selection)\`, but using *call()* returns the selection, so that you can continue to do method chaining and apply other functions to the selection. You may see this done in slightly different ways -- this notebook applies *d3.axis* in a slightly different way than the Margin Convention notebook, but they should both work. `37:T476,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, heightScatter]) .attr("width", myWidth) .attr("max-width", myWidth); // set the x and y domains based on our data x.domain(d3.extent(diamonds, d => d.carat)).nice() y.domain(d3.extent(diamonds, d => d.price)).nice() // setup the x-axis and label svg.append("g").call(xAxis) .append("text") .attr("x", myWidth) .attr("y", margin.bottom) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("carat") // setup the y-axis and label svg.append("g").call(yAxis) .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("price ($)") // draw the circles svg.append("g") .attr("stroke-width", 1) .attr("fill", "none") .selectAll("circle") .data(diamonds) .join("circle") .attr("cx", d => x(d.carat)) .attr("cy", d => y(d.price)) .attr('stroke', d => colorScatter(d.cut)) .attr("r", 3); return svg.node(); }38:T470,md`Couple notes on this: * Observable's \`width\` variable is responsive -- it can vary with the width of your browser window. * I've specified both *viewBox* and *width* here. Note that *viewBox* is still using Observable's *width* variable. Let's look at what happens when you set \`myWidth\` to match \`height\` (for a square chart). * There's also a *max-width* parameter. We'll look at what happens when we comment out *width*. You'll need to experiment with *viewBox*, *width*, and *max-width* if you want to customize chart sizes. * *nice()* - rounds the tick mark range to "nice" values, especially useful when the domain is computed from the data, see [D3 in Depth: Scale functions](https://www.d3indepth.com/scales/) for an example (scroll down to near the bottom) * *colorScatter()* (below) is an ordinal scale mapped to a 10-color colormap based on default Tableau colors. See [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic/blob/master/README.md) for a list of colormaps. * We'll look at adding tooltips later. As you probably can guess, it's a good bit more code than adding them to a Vega-Lite chart. `39:[] 2e:{"title":"D3 Vis Intro","cells":[{"id":0,"value":"md`# D3 Vis Intro`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`## [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1?collection=@uwdata/introduction-to-d3)\n\n### A Simple Bar Chart\n * page width = ${width}px\n * show \\`barData\\` array\n * \"Try to recreate the bar chart below\" -> Example 1\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`### Example 1 - Simple Bar Chart\n*Recreate simple bar chart using *barData* array.* The bars are just colored \\`div\\` elements set to a width based on the array value.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"import {barData} from \"@uwdata/introduction-to-d3-part-1\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"barData","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`We bind the data with \\`.data(data)\\` and join to the div with \\`.join('div')\\`. So to *barChart*, add \n~~~js\n .data(data) \n .join('div') \n~~~\n\nThis will create a new 'div' for every element in the data array.\n\nThen we want to set the width of the div based on the data and add the value as text. To *barChart* styling, add\n~~~js\n .style('width', d => \\`\\${d.value}px\\`) \n .text(d => d.value) \n~~~\n\nThis makes really short bars. How can we scale it based on the width of the window? We know that 78 is the largest value, so let's add scaling so that it would match the window width (${width}px).\n\nscale = width / 78 \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"(width/78) * 78","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"(width/78)* 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"md`In our bars above, replace the \\`.style('width'...)\\` line with \n\n~~~js\n .style('width', d => \\`\\${(width/78) * d.value}px\\`) \n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`### Scale Functions\n * domain - data range\n * range - display range\n * scale functions allow the domain to range mapping\n * scaleLinear() - population is quantitative, bar length should be proportional to the data value\n * scaleBand() - country name is nominal/categorical, so we want the bars all the same width\n\n~~~js\n .domain([0, d3.max(barData, d => d.value)]) // range of the data (starting at 0 - needed for bar charts)\n .range([0, width]) // range of the display\n~~~\n\nThis essentially does this same thing as dividing by 78, but scales it based on the max value of the data rather than having a hard-coded number.\n\nFor more on scales, see [Introduction to D3's scales](https://observablehq.com/@d3/introduction-to-d3s-scales)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"xscale = d3.scaleLinear()\n .domain([0, d3.max(barData, d => d.value)])\n .range([0, width]) // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"value":"d3.max(barData, d=>d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"xscale(78)","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"xscale(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"md`In our bars above, replace \n~~~js\n .style('width', d => \\`\\${(width/78) * d.value}px\\`) \n~~~\nwith \n~~~js\n .style('width', d => \\`\\${xscale(d.value)}px\\`)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`### SVG: Scalable Vector Graphics\n\nNow, instead of modifying \\`div\\` elements, let's use SVG, which allows for more flexibility and complex shapes. But, now we have to explicitly set the x, y positions of all elements, and the width and height of our \\`rect\\` elements.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md `**Last Step**: Add in \\`yscale()\\` using [\\`scaleBand\\`](https://observablehq.com/@d3/d3-scaleband) to evenly distribute the bars. \\`yscale.bandwidth()\\` is the height of each bar based on the scaling. We can add space between the bars using \\`padding()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"height=150","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"color = d3.scaleOrdinal(d3.schemeTableau10); //.domain(barData.map(d => d.key)); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"yscale = d3.scaleBand()\n .domain(barData.map(d => d.key))\n .range([0, height]) // Try flipping this to [height, 0] and see the effect on the bars below.\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n container.selectAll('rect') // bars\n .data(barData)\n .join('rect')\n .attr('x', 0)\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning bars\n .attr('width', d => xscale(d.value))\n .attr('height', yscale.bandwidth()) // <-- Band scales split a pixel range into equal-sized bands\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n container.selectAll('text') // labels\n .data(barData)\n .join('text')\n .attr('x', d => xscale(d.value))\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning labels\n .attr('dx', -20)\n .attr('dy', '1.2em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"md`### Example 2 - Rotating the Chart\n\n*Change your bar chart from a horizontal orientation to a vertical orientation. Think about how the scales of a horizontal bar chart differ from those of a vertical bar chart.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`**Flipping the Chart**\n\nOur *xscale()* works fine, but we need to adjust *yscale()* based on 0,0 being the top left instead of the bottom left, as in Cartesian units.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`In *yscale()*, we need to flip the range, so \\`.range([0, height])\\` becomes \\`.range([height, 0])\\`. Now, the largest value in the dataset is mapped to *y=0* in SVG, and 0 in the dataset is mapped to *y=height*.\n\nThe largest value in the dataset should have a full bar that runs from 0 to height.\n\nHere's a [diagram example of computing the bar heights](https://docs.google.com/presentation/d/1URKmrpvA15C_NXRlOOXfYtNz5tDpcBICsX9Z1OtkGhk/preview?rm=minimal).\n\n*yscale()* is now going to return the position where the bar should start (top of the bar), so we set *y* to \\`d => yscale(d.value)\\`. Then the height of the bar should be *height* - *yscale()*, so the *height* attribute is set to \\`height - yscale(d.value)\\`.\n\nFinally, for our text, we just need to reverse the direction of our *dy* by setting *dy* to 20 instead of -20.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"md`### Modifying barData\n\nTo see the power of all of this, let's look at what happens when we modify \\`barData\\`, which originally contains 6 objects with the keys ('key', 'value'). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"barData","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"//barData.push({\"key\":6, \"value\": 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"//barData.push({\"key\":7, \"value\": 80})","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"// to remove the added items, just run this cell 2 times\n//barData.pop()","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`#### Exercise\n*Take the sample code from the horizontal bar chart with axes and add axes to the vertical bar chart (code above)*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## [Learn D3: Shapes](https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3)\n* Line chart - uses [SVG path format](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)\n* [*d3.scaleUtc()*](https://observablehq.com/@d3/d3-scaletime) - similar to d3.scaleTime(), but in Coordinated Universal Time\n* [*d3.line()*](https://observablehq.com/@d3/d3-line) - default line generator, use line.x() and line.y() to take data, pass through scale function, and generate SVG path instructions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`### Example 1 - Line Chart\n*Create basic line chart in tutorial to without the \\`html\\` notation.*\n\n**Important:** Since we're importing xAxis (renamed as *xAxisDate*) and yAxis (renamed as *yAxisUpper*), these functions and their associated scales are defined in https://observablehq.com/@d3/learn-d3-shapes. We'll define general versions of these for ourselves (for a complete example) in the scatterplot below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"import {data, line, xAxis as xAxisDate, yAxis as yAxisUpper, height as heightLine} from \"@d3/learn-d3-shapes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"{\n const svg = d3.create('svg')\n .attr(\"viewBox\", [0, 0, width, heightLine]);\n \n svg.append('g')\n .call(xAxisDate);\n \n svg.append('g')\n .call(yAxisUpper);\n \n svg.append('path')\n .datum(data)\n .style('fill', 'none')\n .style('stroke', 'steelblue')\n .style('stroke-width', '1.5')\n .style('stroke-miterlimit', '1')\n .attr('d', line);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`This adaptation from HTML to SVG was based on the line chart example at https://observablehq.com/@d3/line-chart\n\nThis example uses *viewBox* instead of setting *width* and *height*. You'll see examples that set *width* and *height* and some that use *viewBox* instead and some that use both. For most charts, you can do either (especially if you're setting the *viewBox* values to your *width* and *height*). Check out [SVG Viewport and View Box](http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) for a compact explanation and [Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio](https://www.sarasoueidan.com/blog/svg-coordinate-systems/) for a longer explanation with lots of examples. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`### Example 2 - Area Chart\n*Create basic line chart in tutorial to without the \\`html\\` notation.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"import {area} from \"@d3/learn-d3-shapes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"{\n const svg = d3.create('svg')\n .attr(\"viewBox\", [0, 0, width, heightLine]);\n\n svg.append('g')\n .call(xAxisDate);\n \n svg.append('g')\n .call(yAxisUpper);\n \n svg.append('path')\n .datum(data)\n .style('fill', 'steelblue')\n .attr('d', area); // just changed 'line' to 'area'\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`## Scatterplot\n\n*Create scatterplot of diamond dataset with carat on x-axis and price on y-axis*\n\nScatterplot based on https://observablehq.com/@d3/scatterplot. We won't include the grid or data point labels, but that example shows how to add those.\n\nSteps:\n1. set new height, margins\n1. create x and y scales (both using scaleLinear()\n * make general functions with *range* only\n * will define *domain* when creating chart\n1. create xAxis and yAxis\n * make general versions \n * will define text labels when creating the chart\n1. plot data using svg 'circle'\n * use 'diamonds' for data\n * give appropriate data fields to the x() and y() functions\n * color by cut\n\nFor general steps on how to approach writing your D3 code, see \"How to approach writing your code\" in [Fundamental Graphs with D3](https://observablehq.com/@nyuvis/fundamental-graphs)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`**Step 1 - set new height, margins**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"heightScatter = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"//myWidth = Math.min(heightScatter, width); // don't override 'width' in an Observable notebook\nmyWidth = width;","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`**Step 2 - create x, y scales**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"x = d3.scaleLinear()\n .range([margin.left, myWidth - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"y = d3.scaleLinear()\n .range([heightScatter - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"md`**Step 3 - create xAxis, yAxis**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${heightScatter - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(myWidth / 80)) // replace","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"md`[*axis.ticks()*](https://observablehq.com/@d3/axis-ticks) lets you control how the axis ticks and labels appear. For scaleLinear, the parameter is the number of tick marks. The linked page has several examples of how you can customized the ticks and labels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"colorScatter = d3.scaleOrdinal(d3.schemeTableau10); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`### Debugging Scales\n*visualizeTicks()* provides a nice way to help debug your scales. You can test out different parameters and the effect of *nice()*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"visualizeTicks(\n d3.scaleLinear().domain(d3.extent(diamonds, d => d.carat)).nice()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"visualizeTicks(\n d3.scaleLinear().domain(d3.extent(diamonds, d => d.price)).nice()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`# Additional Resources\n\n[CS 725/825 Collection](https://observablehq.com/collection/@weiglemc/cs-725-825-spring-2021) - public notebooks for this semester\n\n[Learn D3 Collection](https://observablehq.com/collection/@d3/learn-d3)\n\n[D3 Observable notebooks](https://observablehq.com/@d3) - many authored by Mike Bostock\n\n[NYU Visualization Guides and Examples](https://observablehq.com/collection/@nyuvis/guides-and-examples)\n\n[D3 Tutorials](http://www.jonathansoma.com/tutorials/d3/)\n\nJavaScript references: [MDN JavaScript docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [W3Schools JavaScript reference](https://www.w3schools.com/jsref/jsref_reference.asp)\n\njQuery references: [jQuery API](https://api.jquery.com), [W3Schools jQuery tutorial](https://www.w3schools.com/jquery/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {toc} from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"diamonds = require('@observablehq/diamonds')","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}