145 lines
3.7 KiB
Markdown
145 lines
3.7 KiB
Markdown
|
---
|
||
|
|
id: 5d8a4cfbe6b6180ed9a1c9f0
|
||
|
|
title: Part 19
|
||
|
|
challengeType: 0
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id='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.
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: test-text
|
||
|
|
testString: assert($("svg")[0].attributes.width.value === "700");
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
<div id='html-seed'>
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
### Before Test
|
||
|
|
<div id='html-setup'>
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|