fix(curriculum) replace single-line blocks with multi-line blocks for… (#41526)
* fix(curriculum) replace single-line blocks with multi-line blocks for issue 51418 Data visualization and Coding Interview Prep portions. * Update execute-a-markov-algorithm.md Implemented as inline code blocks as discussed * Adding missed blocks * Last file added
This commit is contained in:
@ -12,7 +12,9 @@ Using a lot of inline styles on HTML elements gets hard to manage, even for smal
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
|
||||
|
||||
`selection.attr("class", "container");`
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
|
||||
|
||||
|
@ -12,7 +12,9 @@ D3 has several methods that let you add and change elements in your document.
|
||||
|
||||
The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
|
||||
|
||||
`const anchor = d3.select("a");`
|
||||
```js
|
||||
const anchor = d3.select("a");
|
||||
```
|
||||
|
||||
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
|
||||
|
||||
|
@ -12,7 +12,9 @@ D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
|
||||
|
||||
The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
|
||||
|
||||
`selection.style("color","blue");`
|
||||
```js
|
||||
selection.style("color","blue");
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -18,7 +18,9 @@ It's unlikely you would plot raw data as-is. Before plotting it, you set the sca
|
||||
|
||||
D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
|
||||
|
||||
`const scale = d3.scaleLinear()`
|
||||
```js
|
||||
const scale = d3.scaleLinear()
|
||||
```
|
||||
|
||||
By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
|
||||
|
||||
|
@ -10,7 +10,9 @@ dashedName: select-a-group-of-elements-with-d3
|
||||
|
||||
D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
|
||||
|
||||
`const anchors = d3.selectAll("a");`
|
||||
```js
|
||||
const anchors = d3.selectAll("a");
|
||||
```
|
||||
|
||||
Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
|
||||
|
||||
|
@ -16,7 +16,9 @@ The previous challenges covered how to display data from an array and how to add
|
||||
|
||||
Recall the format to set a style using a callback function:
|
||||
|
||||
`selection.style("cssProperty", (d) => d)`
|
||||
```js
|
||||
selection.style("cssProperty", (d) => d)
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -14,7 +14,9 @@ In the previous challenge, you created a new `h2` element for each item in the `
|
||||
|
||||
The D3 `text()` method can take a string or a callback function as an argument:
|
||||
|
||||
`selection.text((d) => d)`
|
||||
```js
|
||||
selection.text((d) => d)
|
||||
```
|
||||
|
||||
In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
|
||||
|
||||
|
Reference in New Issue
Block a user