fix(curriculum): Convert blockquote elements to triple backtick syntax for Data Visualization (#35995)
* fix: convert data visualization * fix: reverted to blockquote * fix: changed js to json Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: cleaned up code Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Randell Dawson
Tom
@ -13,7 +13,15 @@ The next step is to render the axis on the SVG canvas. To do so, you can use a g
|
||||
Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works.
|
||||
The last step is to apply a <code>transform</code> attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible.
|
||||
SVG supports different types of <code>transforms</code>, but positioning an axis needs <code>translate</code>. When it's applied to the <code>g</code> element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append("g")<br> .attr("transform", "translate(0, " + (h - padding) + ")")<br> .call(xAxis);</blockquote>
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0, " + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the <code>call()</code> method.
|
||||
The y-axis works is the same way, except the <code>translate</code> argument is in the form (x, 0). Because <code>translate</code> is a string in the <code>attr()</code> method above, you can use concatenation to include variable values for its arguments.
|
||||
</section>
|
||||
|
||||
@ -14,7 +14,13 @@ Two other useful methods are <code>append()</code> and <code>text()</code>.
|
||||
The <code>append()</code> method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.
|
||||
The <code>text()</code> method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.
|
||||
Here's an example that selects an unordered list, appends a list item, and adds text:
|
||||
<blockquote>d3.select("ul")<br> .append("li")<br> .text("Very important item");</blockquote>
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
.append("li")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
D3 allows you to chain several methods together with periods to perform a number of actions in a row.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,13 @@ challengeType: 6
|
||||
<section id='description'>
|
||||
D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the <code>style()</code> method to change the styling for different elements.
|
||||
For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:
|
||||
<blockquote>selection.style("color", (d) => {<br> /* Logic that returns the color based on a condition */<br>});</blockquote>
|
||||
|
||||
```js
|
||||
selection.style("color", (d) => {
|
||||
/* Logic that returns the color based on a condition */
|
||||
});
|
||||
```
|
||||
|
||||
The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,14 @@ challengeType: 6
|
||||
<section id='description'>
|
||||
The last challenge added only one rectangle to the <code>svg</code> element to represent a bar. Here, you'll combine what you've learned so far about <code>data()</code>, <code>enter()</code>, and SVG shapes to create and append a rectangle for each data point in <code>dataset</code>.
|
||||
A previous challenge showed the format for how to create and append a <code>div</code> for each item in <code>dataset</code>:
|
||||
<blockquote>d3.select("body").selectAll("div")<br> .data(dataset)<br> .enter()<br> .append("div")</blockquote>
|
||||
|
||||
```js
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
```
|
||||
|
||||
There are a few differences working with <code>rect</code> elements instead of <code>divs</code>. The <code>rects</code> must be appended to an <code>svg</code> element, not directly to the <code>body</code>. Also, you need to tell D3 where to place each <code>rect</code> within the <code>svg</code> area. The bar placement will be covered in the next challenge.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,7 +7,16 @@ challengeType: 6
|
||||
## Description
|
||||
<section id='description'>
|
||||
The height of each bar can be set to the value of the data point in the array, similar to how the <code>x</code> value was set dynamically.
|
||||
<blockquote>selection.attr("property", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
/*
|
||||
* d is the data point value
|
||||
* i is the index of the data point in the array
|
||||
*/
|
||||
})
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,16 @@ The last challenge created and appended a rectangle to the <code>svg</code> elem
|
||||
The placement of a rectangle is handled by the <code>x</code> and <code>y</code> attributes. They tell D3 where to start drawing the shape in the <code>svg</code> area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
|
||||
For a bar chart, all of the bars should sit on the same vertical level, which means the <code>y</code> value stays the same (at 0) for all bars. The <code>x</code> value, however, needs to change as you add new bars. Remember that larger <code>x</code> values push items farther to the right. As you go through the array elements in <code>dataset</code>, the x value should increase.
|
||||
The <code>attr()</code> method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually <code>d</code>) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
|
||||
<blockquote>selection.attr("property", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
/*
|
||||
* d is the data point value
|
||||
* i is the index of the data point in the array
|
||||
*/
|
||||
})
|
||||
```
|
||||
|
||||
It's important to note that you do NOT need to write a <code>for</code> loop or use <code>forEach()</code> to iterate over the items in the data set. Recall that the <code>data()</code> method parses the data set, and any method that's chained after <code>data()</code> is run once for each item in the data set.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,21 @@ By default, scales use the identity relationship - the input value maps to the o
|
||||
Say a data set has values ranging from 50 to 480. This is the input information for a scale, and is also known as the domain.
|
||||
You want to map those points along the <code>x</code> axis on the SVG canvas, between 10 units and 500 units. This is the output information, which is also known as the range.
|
||||
The <code>domain()</code> and <code>range()</code> methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
|
||||
<blockquote>// Set a domain<br>// The domain covers the set of input values<br>scale.domain([50, 480]);<br>// Set a range<br>// The range covers the set of output values<br>scale.range([10, 500]);<br>scale(50) // Returns 10<br>scale(480) // Returns 500<br>scale(325) // Returns 323.37<br>scale(750) // Returns 807.67<br>d3.scaleLinear()</blockquote>
|
||||
|
||||
```js
|
||||
// Set a domain
|
||||
// The domain covers the set of input values
|
||||
scale.domain([50, 480]);
|
||||
// Set a range
|
||||
// The range covers the set of output values
|
||||
scale.range([10, 500]);
|
||||
scale(50) // Returns 10
|
||||
scale(480) // Returns 500
|
||||
scale(325) // Returns 323.37
|
||||
scale(750) // Returns 807.67
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,12 @@ challengeType: 6
|
||||
<section id='description'>
|
||||
With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
|
||||
You set the coordinate attribute values for an SVG shape with the scaling function. This includes <code>x</code> and <code>y</code> attributes for <code>rect</code> or <code>text</code> elements, or <code>cx</code> and <code>cy</code> for <code>circles</code>. Here's an example:
|
||||
<blockquote>shape<br> .attr("x", (d) => xScale(d[0]))</blockquote>
|
||||
|
||||
```js
|
||||
shape
|
||||
.attr("x", (d) => xScale(d[0]))
|
||||
```
|
||||
|
||||
Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the <code>text()</code> method for a tooltip or label.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,30 @@ The D3 <code>min()</code> and <code>max()</code> methods are useful to help set
|
||||
Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
|
||||
The example below sets the x-axis scale for scatter plot data. The <code>domain()</code> method passes information to the scale about the raw data values for the plot. The <code>range()</code> method gives it information about the actual space on the web page for the visualization.
|
||||
In the example, the domain goes from 0 to the maximum in the set. It uses the <code>max()</code> method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (<code>w</code>), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
|
||||
<blockquote>const dataset = [<br> [ 34, 78 ],<br> [ 109, 280 ],<br> [ 310, 120 ],<br> [ 79, 411 ],<br> [ 420, 220 ],<br> [ 233, 145 ],<br> [ 333, 96 ],<br> [ 222, 333 ],<br> [ 78, 320 ],<br> [ 21, 123 ]<br>];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br> .domain([0, d3.max(dataset, (d) => d[0])])<br> .range([padding, w - padding]);</blockquote>
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
// Padding between the SVG canvas boundary and the plot
|
||||
const padding = 30;
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the <code>range()</code> method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,11 +9,24 @@ challengeType: 6
|
||||
The D3 methods <code>domain()</code> and <code>range()</code> set that information for your scale based on the data. There are a couple methods to make that easier.
|
||||
Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.
|
||||
D3 has two methods - <code>min()</code> and <code>max()</code> to return this information. Here's an example:
|
||||
<blockquote>const exampleData = [34, 234, 73, 90, 6, 52];<br>d3.min(exampleData) // Returns 6<br>d3.max(exampleData) // Returns 234</blockquote>
|
||||
|
||||
```js
|
||||
const exampleData = [34, 234, 73, 90, 6, 52];
|
||||
d3.min(exampleData) // Returns 6
|
||||
d3.max(exampleData) // Returns 234
|
||||
```
|
||||
|
||||
A dataset may have nested arrays, like the [x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum.
|
||||
Fortunately, both the <code>min()</code> and <code>max()</code> methods take a callback function.
|
||||
In this example, the callback function's argument <code>d</code> is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
|
||||
<blockquote>const locationData = [[1, 7],[6, 3],[8, 3]];<br>// Returns the smallest number out of the first elements<br>const minX = d3.min(locationData, (d) => d[0]);<br>// minX compared 1, 6, and 8 and is set to 1</blockquote>
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
// Returns the smallest number out of the first elements
|
||||
const minX = d3.min(locationData, (d) => d[0]);
|
||||
// minX compared 1, 6, and 8 and is set to 1
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,7 +11,21 @@ The first step is to make D3 aware of the data. The <code>data()</code> method i
|
||||
A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the <code>enter()</code> method for this purpose.
|
||||
When <code>enter()</code> is combined with the <code>data()</code> method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
|
||||
Here is an example that selects a <code>ul</code> element and creates a new list item based on the number of entries in the array:
|
||||
<blockquote><body><br> <ul></ul><br> <script><br> const dataset = ["a", "b", "c"];<br> d3.select("ul").selectAll("li")<br> .data(dataset)<br> .enter()<br> .append("li")<br> .text("New item");<br> </script><br></body></blockquote>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul></ul>
|
||||
<script>
|
||||
const dataset = ["a", "b", "c"];
|
||||
d3.select("ul").selectAll("li")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("li")
|
||||
.text("New item");
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text "New item".
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user