ee1e8abd87
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
125 lines
3.4 KiB
Markdown
125 lines
3.4 KiB
Markdown
---
|
|
id: 5d8a4cfbe6b6180ed9a1c9f0
|
|
title: Part 19
|
|
challengeType: 0
|
|
dashedName: part-19
|
|
---
|
|
|
|
# --description--
|
|
|
|
You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection.
|
|
|
|
`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection:
|
|
|
|
```js
|
|
const variableName = d3.select('element')
|
|
.append('element')
|
|
.attr('attribute', 'value')
|
|
```
|
|
|
|
Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations.
|
|
|
|
# --hints--
|
|
|
|
test-text
|
|
|
|
```js
|
|
assert($('svg')[0].attributes.width.value === '700');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --before-user-code--
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>D3 Dashboard</title>
|
|
<style>
|
|
body {
|
|
background-color: #ccc;
|
|
padding: 100px 10px;
|
|
}
|
|
|
|
.dashboard {
|
|
width: 980px;
|
|
height: 500px;
|
|
background-color: white;
|
|
box-shadow: 5px 5px 5px 5px #888;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="dashboard"></div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<script>
|
|
const data = [
|
|
{ year: 2012, followers: { twitter: 2594, tumblr: 401, instagram: 83 }},
|
|
{ year: 2013, followers: { twitter: 3049, tumblr: 440, instagram: 192 }},
|
|
{ year: 2014, followers: { twitter: 3511, tumblr: 415, instagram: 511 }},
|
|
{ year: 2015, followers: { twitter: 3619, tumblr: 492, instagram: 1014 }},
|
|
{ year: 2016, followers: { twitter: 4046, tumblr: 543, instagram: 2066 }},
|
|
{ year: 2017, followers: { twitter: 3991, tumblr: 701, instagram: 3032 }},
|
|
{ year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
|
|
{ year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
|
|
{ year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
|
|
];
|
|
</script>
|
|
<script>
|
|
const svgMargin = 70,
|
|
svgWidth = 700,
|
|
svgHeight = 500,
|
|
twitterColor = '#7cd9d1',
|
|
tumblrColor = '#f6dd71',
|
|
instagramColor = '#fd9b98';
|
|
|
|
const lineGraph = d3.select('.dashboard')
|
|
.append('svg')
|
|
|
|
|
|
</script>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<script>
|
|
const data = [
|
|
{ year: 2012, followers: { twitter: 2594, tumblr: 401, instagram: 83 }},
|
|
{ year: 2013, followers: { twitter: 3049, tumblr: 440, instagram: 192 }},
|
|
{ year: 2014, followers: { twitter: 3511, tumblr: 415, instagram: 511 }},
|
|
{ year: 2015, followers: { twitter: 3619, tumblr: 492, instagram: 1014 }},
|
|
{ year: 2016, followers: { twitter: 4046, tumblr: 543, instagram: 2066 }},
|
|
{ year: 2017, followers: { twitter: 3991, tumblr: 701, instagram: 3032 }},
|
|
{ year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
|
|
{ year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
|
|
{ year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
|
|
];
|
|
</script>
|
|
<script>
|
|
const svgMargin = 70,
|
|
svgWidth = 700,
|
|
svgHeight = 500,
|
|
twitterColor = '#7cd9d1',
|
|
tumblrColor = '#f6dd71',
|
|
instagramColor = '#fd9b98';
|
|
|
|
const lineGraph = d3.select('.dashboard')
|
|
.append('svg')
|
|
.attr('width', svgWidth)
|
|
|
|
|
|
</script>
|
|
```
|