Feat: add new Markdown parser (#39800)
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
a07f84c8ec
commit
0bd52f8bd1
@ -4,46 +4,29 @@ title: Part 1
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend.
|
||||
|
||||
First, you need to create the HTML file. Start by adding the `<!DOCTYPE html>` declaration at the top of the file to tell the browser what type of document it's reading.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/<!DOCTYPE\s+html\s*>/gi.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/<!DOCTYPE\s+html\s*>/gi.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,42 +4,31 @@ title: Part 2
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<head\s*>\s*<\/head\s*>\s*<body\s*>\s*<\/body\s*>\s*<\/html\s*>/gi.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<head\s*>\s*<\/head\s*>\s*<body\s*>\s*<\/body\s*>\s*<\/html\s*>/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -51,5 +40,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,23 @@ title: Part 3
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
In the head, add a `title` of `D3 Dashboard`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/<head\s*>\s*<title\s*>D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/<head\s*>\s*<title\s*>D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -43,12 +35,7 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -61,5 +48,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,25 @@ title: Part 4
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const link = code.match(/<link\s+[\s\S]+?[^>]>/gi)[0]; assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const link = code.match(/<link\s+[\s\S]+?[^>]>/gi)[0];
|
||||
assert(
|
||||
/rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) &&
|
||||
/href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -44,12 +38,7 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -63,5 +52,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,21 @@ title: Part 5
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("div.dashboard").length === 1);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('div.dashboard').length === 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -45,12 +35,7 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -67,5 +52,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,44 +4,22 @@ title: Part 6
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -56,12 +34,16 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -70,5 +52,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,48 +4,24 @@ title: Part 7
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const dashboard = $(".dashboard"); assert(dashboard.css("width") === "980px" && dashboard.css("height") === "500px");
|
||||
test-text
|
||||
|
||||
```js
|
||||
const dashboard = $('.dashboard');
|
||||
assert(
|
||||
dashboard.css('width') === '980px' && dashboard.css('height') === '500px'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -60,12 +36,20 @@ body {
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -79,5 +63,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,40 @@ title: Part 8
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const dashboard = $(".dashboard"); assert(dashboard.css("background-color") === "rgb(255, 255, 255)" && dashboard.css("box-shadow") === "rgb(136, 136, 136) 5px 5px 5px 5px");
|
||||
test-text
|
||||
|
||||
```js
|
||||
const dashboard = $('.dashboard');
|
||||
assert(
|
||||
dashboard.css('background-color') === 'rgb(255, 255, 255)' &&
|
||||
dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -45,31 +54,7 @@ body {
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -85,5 +70,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,37 @@ title: Part 9
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -47,31 +53,7 @@ body {
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -88,5 +70,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,37 @@ title: Part 10
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Give the container some space by adding a `padding` of `100px 10px` to the `body` element.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -48,31 +54,7 @@ body {
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -90,5 +72,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,40 @@ title: Part 11
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const dashboard = $(".dashboard"); assert(dashboard.css("display") === "flex" && dashboard.css("align-items") === "center");
|
||||
test-text
|
||||
|
||||
```js
|
||||
const dashboard = $('.dashboard');
|
||||
assert(
|
||||
dashboard.css('display') === 'flex' &&
|
||||
dashboard.css('align-items') === 'center'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -49,31 +58,7 @@ body {
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -93,5 +78,3 @@ body {
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,53 +4,22 @@ title: Part 12
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[0]; assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[0];
|
||||
assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -71,12 +40,25 @@ tests:
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -94,5 +76,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,56 +4,24 @@ title: Part 13
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`.
|
||||
|
||||
|
||||
This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[1]; assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[1];
|
||||
assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
<script src="./d3-5.9.2.min.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -87,12 +55,26 @@ tests:
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
<script src="./d3-5.9.2.min.js"></script>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -111,5 +93,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,55 +4,22 @@ title: Part 14
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[2]; assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[2];
|
||||
assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
<script src="./d3-5.9.2.min.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -86,12 +53,27 @@ tests:
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D3 Dashboard</title>
|
||||
<link rel="stylesheet" href="./dashboard.css">
|
||||
<script src="./d3-5.9.2.min.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
</head>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
<body>
|
||||
<div class="dashboard"></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -110,5 +92,3 @@ tests:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,62 +4,25 @@ title: Part 15
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project.
|
||||
|
||||
In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions.
|
||||
|
||||
The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -90,12 +53,30 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -119,5 +100,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,60 +4,25 @@ title: Part 16
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(twitterColor === '#7cd9d1' && tumblrColor === '#f6dd71' && instagramColor === '#fd9b98');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
twitterColor === '#7cd9d1' &&
|
||||
tumblrColor === '#f6dd71' &&
|
||||
instagramColor === '#fd9b98'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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;
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -88,12 +53,32 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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;
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -120,5 +105,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,8 +4,7 @@ title: Part 17
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar:
|
||||
|
||||
@ -13,59 +12,17 @@ When you added the D3 library earlier, it put an object named `d3` in your proje
|
||||
const variableName = d3.select('.className')
|
||||
```
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(lineGraph._groups[0][0] === $(".dashboard")[0]);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(lineGraph._groups[0][0] === $('.dashboard')[0]);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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';
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -96,12 +53,35 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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';
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -130,5 +110,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,8 +4,7 @@ title: Part 18
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done:
|
||||
|
||||
@ -14,62 +13,17 @@ const variableName = d3.select('selectedElement')
|
||||
.append('elementToAdd')
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(lineGraph._groups[0][0] === $("svg")[0]);
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(lineGraph._groups[0][0] === $('svg')[0]);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -100,12 +54,37 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -135,5 +114,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,8 +4,7 @@ title: Part 19
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --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.
|
||||
|
||||
@ -18,62 +17,18 @@ const variableName = d3.select('element')
|
||||
```
|
||||
|
||||
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>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("svg")[0].attributes.width.value === "700");
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg')[0].attributes.width.value === '700');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -104,12 +59,38 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -140,5 +121,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 20
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Chain another `attr` function that sets the `height` as the `svgHeight` variable you created.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("svg")[0].attributes.height.value === "500");
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg')[0].attributes.height.value === '500');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -60,47 +81,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -132,5 +113,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,56 @@ title: Part 21
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale.
|
||||
|
||||
Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(typeof(yScale) === "function" && /yScale\s*=\s*d3\.scaleLinear/.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -63,47 +86,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -137,5 +120,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,53 @@ title: Part 22
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const domain = yScale.domain(); assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000);
|
||||
test-text
|
||||
|
||||
```js
|
||||
const domain = yScale.domain();
|
||||
assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -63,47 +85,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -138,5 +120,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,34 +4,57 @@ title: Part 23
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate.
|
||||
|
||||
Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly.
|
||||
|
||||
Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
test-text
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const range = yScale.range(); assert(range.length === 2 && range[0] === 430 && range[1] === 70);
|
||||
```js
|
||||
const range = yScale.range();
|
||||
assert(range.length === 2 && range[0] === 430 && range[1] === 70);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -67,47 +90,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -143,5 +126,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,54 @@ title: Part 24
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(typeof(xScale) === "function" && /xScale\s*=\s*d3\.scaleLinear/.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -65,47 +88,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -143,5 +126,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,53 @@ title: Part 25
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const domain = xScale.domain(); assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020);
|
||||
test-text
|
||||
|
||||
```js
|
||||
const domain = xScale.domain();
|
||||
assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -67,47 +89,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -146,5 +128,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,53 @@ title: Part 26
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const range = xScale.range(); assert(range.length === 2 && range[0] === 70 && range[1] === 630);
|
||||
test-text
|
||||
|
||||
```js
|
||||
const range = xScale.range();
|
||||
assert(range.length === 2 && range[0] === 70 && range[1] === 630);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -68,47 +90,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -148,5 +130,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 27
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(typeof(yAxis) === "function" && /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof yAxis === 'function' &&
|
||||
/yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -69,47 +93,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -151,5 +135,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 28
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(typeof(xAxis) === "function" && /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof xAxis === 'function' &&
|
||||
/xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -71,47 +95,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -155,5 +139,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 29
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("svg")[0].children[0] === $("g")[0] && $("g").length === 1);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -73,47 +94,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -159,5 +140,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 30
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($(".tick").length === 11 && /\.call\(\s*yAxis\s*\)/.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -75,47 +96,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -163,5 +144,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,54 @@ title: Part 31
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left.
|
||||
|
||||
Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("g")[0].attributes.transform.nodeValue === "translate(70, 0)");
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -79,47 +100,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -167,5 +148,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 32
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: 'assert($("g")[0].attributes.style.nodeValue === "font: 10px verdana;");'
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -77,47 +98,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -166,5 +147,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,85 +4,21 @@ title: Part 33
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("g").length === 13);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('g').length === 13);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -113,12 +49,57 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -169,5 +150,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 34
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('g').length === 22);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('g').length === 22);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -80,47 +101,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -172,5 +153,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 35
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($("svg > g")[1].attributes.transform.nodeValue === "translate(0, 430)");
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -81,47 +102,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -174,5 +155,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,36 +4,60 @@ title: Part 36
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this:
|
||||
The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this:
|
||||
|
||||
```js
|
||||
.selectAll('element')
|
||||
```
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -87,47 +111,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -181,5 +165,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,58 @@ title: Part 37
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('.tick > text').filter((node, index) => index.style.transform === 'translate(-12px) rotate(-50deg)' || index.style.transform === 'translate(-12px, 0px) rotate(-50deg)').length === 9);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.tick > text').filter(
|
||||
(node, index) =>
|
||||
index.style.transform === 'translate(-12px) rotate(-50deg)' ||
|
||||
index.style.transform === 'translate(-12px, 0px) rotate(-50deg)'
|
||||
).length === 9
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -83,47 +110,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -178,5 +165,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 38
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('.tick > text').filter((node, index) => index.style['text-anchor'] === 'end').length === 9);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.tick > text').filter(
|
||||
(node, index) => index.style['text-anchor'] === 'end'
|
||||
).length === 9
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -84,47 +109,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -180,5 +165,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,59 @@ title: Part 39
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`.
|
||||
|
||||
You will add some hover effects later, so the pointer will make for a better experience.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('.tick > text').filter((node, index) => index.style.cursor === 'pointer' && index.style.font === '10px verdana').length === 9);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.tick > text').filter(
|
||||
(node, index) =>
|
||||
index.style.cursor === 'pointer' && index.style.font === '10px verdana'
|
||||
).length === 9
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -87,47 +113,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -184,5 +170,3 @@ tests:
|
||||
.style('font', '10px verdana');
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,62 @@ title: Part 40
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`.
|
||||
|
||||
The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const ticks = $('.tick > text'); assert(ticks[0].innerHTML === '0k' && ticks[1].innerHTML === '1k' && ticks[2].innerHTML === '2k' && ticks[3].innerHTML === '3k' && ticks[4].innerHTML === '4k' && ticks[5].innerHTML === '5k');
|
||||
test-text
|
||||
|
||||
```js
|
||||
const ticks = $('.tick > text');
|
||||
assert(
|
||||
ticks[0].innerHTML === '0k' &&
|
||||
ticks[1].innerHTML === '1k' &&
|
||||
ticks[2].innerHTML === '2k' &&
|
||||
ticks[3].innerHTML === '3k' &&
|
||||
ticks[4].innerHTML === '4k' &&
|
||||
ticks[5].innerHTML === '5k'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -88,47 +117,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -186,5 +175,3 @@ tests:
|
||||
.style('font', '10px verdana');
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,53 @@ title: Part 41
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const ticks = $('.tick > text'); assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020');
|
||||
test-text
|
||||
|
||||
```js
|
||||
const ticks = $('.tick > text');
|
||||
assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -87,47 +109,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -186,5 +168,3 @@ tests:
|
||||
.style('font', '10px verdana');
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 42
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -88,47 +113,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -190,5 +175,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 43
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -91,47 +112,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -194,5 +175,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,8 +4,7 @@ title: Part 44
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look:
|
||||
|
||||
@ -16,27 +15,53 @@ The line needs x and y values for each point of data. Chain `x` to the line and
|
||||
You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`).
|
||||
|
||||
This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -100,47 +125,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -204,5 +189,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,54 @@ title: Part 45
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale.
|
||||
|
||||
In the "d function" you created, return `xScale(d.year)` instead of `d.year`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -95,47 +116,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -199,5 +180,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,35 +4,58 @@ title: Part 46
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument.
|
||||
|
||||
This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item.
|
||||
|
||||
These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -97,47 +120,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -203,5 +186,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 47
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path').length === 3 && /lineGraph\.append\((`|'|")path\1\)/gi.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg path').length === 3 &&
|
||||
/lineGraph\.append\((`|'|")path\1\)/gi.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -95,47 +119,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -202,5 +186,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,35 +4,56 @@ title: Part 48
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable.
|
||||
|
||||
Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function".
|
||||
|
||||
After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path')[2].getAttribute('d').length === 151);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg path')[2].getAttribute('d').length === 151);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -100,47 +121,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -209,5 +190,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,57 @@ title: Part 49
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const twitterPath = $('svg path')[2]; assert(twitterPath.getAttribute('stroke') === '#7cd9d1' && twitterPath.getAttribute('stroke-width') == '3' && twitterPath.getAttribute('fill') === 'transparent');
|
||||
test-text
|
||||
|
||||
```js
|
||||
const twitterPath = $('svg path')[2];
|
||||
assert(
|
||||
twitterPath.getAttribute('stroke') === '#7cd9d1' &&
|
||||
twitterPath.getAttribute('stroke-width') == '3' &&
|
||||
twitterPath.getAttribute('fill') === 'transparent'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -98,47 +124,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -210,5 +196,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 50
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -101,47 +122,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -214,5 +195,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 51
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculcate their values just like you did for the Twitter line.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -102,47 +127,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -216,5 +201,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,56 @@ title: Part 52
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculcate their values just like you did for the Twitter line.
|
||||
|
||||
The x values for each line will be the same, but the y values will use the data from the different platforms.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -105,47 +128,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -221,5 +204,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,112 +4,24 @@ title: Part 53
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path').length === 4 && code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg path').length === 4 &&
|
||||
code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -140,12 +52,84 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -222,5 +206,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 54
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path')[3].getAttribute('d').length === 115);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg path')[3].getAttribute('d').length === 115);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -106,47 +127,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -225,5 +206,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,57 @@ title: Part 55
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const tumblrPath = $('svg path')[3]; assert(tumblrPath.getAttribute('stroke') === '#f6dd71' && tumblrPath.getAttribute('stroke-width') == '3' && tumblrPath.getAttribute('fill') === 'transparent');
|
||||
test-text
|
||||
|
||||
```js
|
||||
const tumblrPath = $('svg path')[3];
|
||||
assert(
|
||||
tumblrPath.getAttribute('stroke') === '#f6dd71' &&
|
||||
tumblrPath.getAttribute('stroke-width') == '3' &&
|
||||
tumblrPath.getAttribute('fill') === 'transparent'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -108,47 +134,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -229,5 +215,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 56
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -110,47 +131,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -234,5 +215,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 57
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Appropriately set the `x` values for `instagramLine` like you did for the other two lines.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -113,47 +138,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -238,5 +223,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 58
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -114,47 +139,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -241,5 +226,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,123 +4,24 @@ title: Part 59
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, `append` a new `path` for the Instagram line like you did for the other two lines.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path').length === 5 && code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg path').length === 5 &&
|
||||
code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -151,12 +52,95 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -244,5 +228,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 60
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg path')[4].getAttribute('d').length === 171);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg path')[4].getAttribute('d').length === 171);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -117,47 +138,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -246,5 +227,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,57 @@ title: Part 61
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const instagramPath = $('svg path')[4]; assert(instagramPath.getAttribute('stroke') === '#fd9b98' && instagramPath.getAttribute('stroke-width') == '3' && instagramPath.getAttribute('fill') === 'transparent');
|
||||
test-text
|
||||
|
||||
```js
|
||||
const instagramPath = $('svg path')[4];
|
||||
assert(
|
||||
instagramPath.getAttribute('stroke') === '#fd9b98' &&
|
||||
instagramPath.getAttribute('stroke-width') == '3' &&
|
||||
instagramPath.getAttribute('fill') === 'transparent'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -118,47 +144,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -250,5 +236,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,38 +4,60 @@ title: Part 62
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this:
|
||||
Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this:
|
||||
|
||||
```js
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
```
|
||||
|
||||
|
||||
`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -128,47 +150,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -262,5 +244,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,36 +4,56 @@ title: Part 63
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the D3 `data` function to your selection and pass it the data array like this:
|
||||
Add the D3 `data` function to your selection and pass it the data array like this:
|
||||
|
||||
```js
|
||||
.data(data)
|
||||
```
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.data\s*\(\s*data\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/\.data\s*\(\s*data\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -128,47 +148,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -263,5 +243,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,35 +4,56 @@ title: Part 64
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Next, chain the `enter()` function to the selection.
|
||||
Next, chain the `enter()` function to the selection.
|
||||
|
||||
The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before.
|
||||
|
||||
|
||||
In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -128,47 +149,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -264,5 +245,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 65
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle').length === 9);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle').length === 9);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -125,47 +146,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -262,5 +243,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,54 @@ title: Part 66
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function.
|
||||
|
||||
Use the `attr` function to set the `cx` to `d => xScale(d.year)`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[0].getAttribute('cx') == '70');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[0].getAttribute('cx') == '70');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -128,47 +149,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -266,5 +247,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,54 @@ title: Part 67
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`.
|
||||
|
||||
As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[0].getAttribute('cy') == '243.232');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[0].getAttribute('cy') == '243.232');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -129,47 +150,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -268,5 +249,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 68
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[0].getAttribute('r') == '6');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[0].getAttribute('r') == '6');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -128,47 +149,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -268,5 +249,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 69
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[0].getAttribute('fill') === 'white' && $('svg circle')[0].getAttribute('stroke') === '#7cd9d1');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg circle')[0].getAttribute('fill') === 'white' &&
|
||||
$('svg circle')[0].getAttribute('stroke') === '#7cd9d1'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -129,47 +153,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -271,5 +255,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 70
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[0].style.cursor === 'pointer');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[0].style.cursor === 'pointer');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -131,47 +152,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -274,5 +255,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,54 @@ title: Part 71
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -132,47 +155,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -277,5 +260,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,143 +4,23 @@ title: Part 72
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order.
|
||||
|
||||
Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle').length === 18);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle').length === 18);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -171,12 +51,113 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -284,5 +265,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 73
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[9].getAttribute('cx') == '70' && $('svg circle')[9].getAttribute('cy') == '401.128');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg circle')[9].getAttribute('cx') == '70' &&
|
||||
$('svg circle')[9].getAttribute('cy') == '401.128'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -137,47 +161,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -287,5 +271,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,146 +4,25 @@ title: Part 74
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[9].getAttribute('r') == '6' && $('svg circle')[9].getAttribute('fill') === 'white' && $('svg circle')[9].getAttribute('stroke') === '#f6dd71');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg circle')[9].getAttribute('r') == '6' &&
|
||||
$('svg circle')[9].getAttribute('fill') === 'white' &&
|
||||
$('svg circle')[9].getAttribute('stroke') === '#f6dd71'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -174,12 +53,118 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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';
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
const lineGraph = d3.select('.dashboard')
|
||||
.append('svg')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -292,5 +277,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 75
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `cursor` to `pointer` using the `style` function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[9].style.cursor === 'pointer');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[9].style.cursor === 'pointer');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -142,47 +163,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -296,5 +277,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 76
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -143,47 +168,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -299,5 +284,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,152 +4,21 @@ title: Part 77
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet.
|
||||
</section>
|
||||
Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet.
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle').length === 27);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle').length === 27);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -180,12 +49,124 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -304,5 +285,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 78
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Appropriately set the `cx` and `cy` attributes for the Instagram circles.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[18].getAttribute('cx') == '70' && $('svg circle')[18].getAttribute('cy') == '424.024');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg circle')[18].getAttribute('cx') == '70' &&
|
||||
$('svg circle')[18].getAttribute('cy') == '424.024'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -148,47 +172,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -309,5 +293,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,157 +4,25 @@ title: Part 79
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Appropriately set the radius (`r`), `fill`, and `stroke` for these circles.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[18].getAttribute('r') == '6' && $('svg circle')[18].getAttribute('fill') === 'white' && $('svg circle')[18].getAttribute('stroke') === '#fd9b98');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg circle')[18].getAttribute('r') == '6' &&
|
||||
$('svg circle')[18].getAttribute('fill') === 'white' &&
|
||||
$('svg circle')[18].getAttribute('stroke') === '#fd9b98'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -185,12 +53,129 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -314,5 +299,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,160 +4,21 @@ title: Part 80
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Apply the appropriate `cursor` style for these circles.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg circle')[18].style.cursor === 'pointer');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg circle')[18].style.cursor === 'pointer');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', instagramColor)
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -188,12 +49,132 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', instagramColor)
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -318,5 +299,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 81
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -154,47 +179,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -321,5 +306,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 82
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -156,47 +181,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -324,5 +309,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 83
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -157,47 +182,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -327,5 +312,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,55 @@ title: Part 84
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add two `attr` functions that set the `width` and `height` of the new SVG to `200`.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg')[1].getAttribute('width') == '200' && $('svg')[1].getAttribute('height') == '200');
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('svg')[1].getAttribute('width') == '200' &&
|
||||
$('svg')[1].getAttribute('height') == '200'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -159,47 +183,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -331,5 +315,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 85
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -161,47 +182,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -335,5 +316,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,54 @@ title: Part 86
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -163,47 +186,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -338,5 +321,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 87
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -164,47 +189,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -340,5 +325,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,54 @@ title: Part 88
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it.
|
||||
|
||||
|
||||
In this case, each platform of followers you have will map directly to a single color with nothing in between.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -167,47 +188,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -345,5 +326,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 89
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -167,47 +192,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -346,5 +331,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 90
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -168,47 +193,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -348,5 +333,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 91
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -169,47 +190,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -351,5 +332,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,58 @@ title: Part 92
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs.
|
||||
|
||||
In a few steps, you will make an array out of your data variable that will be passed to this function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -173,47 +198,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -356,5 +341,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 93
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -172,47 +197,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -357,5 +342,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,56 @@ title: Part 94
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -174,47 +199,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -360,5 +345,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,8 +4,7 @@ title: Part 95
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks:
|
||||
|
||||
@ -26,27 +25,53 @@ The array it builds looks like this:
|
||||
This is where the `value` comes from in your `pie` variable.
|
||||
|
||||
Add the `d3.entries` function as your `pie` argument. Use it to create the above array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -193,47 +218,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -379,5 +364,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,181 +4,25 @@ title: Part 96
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie.</section>
|
||||
Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie.
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## 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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', instagramColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
const rightDashboard = d3.select('.dashboard')
|
||||
.append('div');
|
||||
|
||||
const pieGraph = rightDashboard.append('svg')
|
||||
.attr('width', 200)
|
||||
.attr('height', 200)
|
||||
|
||||
const pieArc = d3.arc()
|
||||
.outerRadius(100)
|
||||
.innerRadius(0);
|
||||
|
||||
const pieColors = d3.scaleOrdinal()
|
||||
.domain(data[8].followers)
|
||||
.range([twitterColor, tumblrColor, instagramColor]);
|
||||
|
||||
const pie = d3.pie()
|
||||
.value(d => d.value);
|
||||
|
||||
const pieGraphData = pieGraph.selectAll('pieSlices')
|
||||
.data(pie(d3.entries(data[8].followers)))
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### Before Test
|
||||
<div id='html-setup'>
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -209,12 +53,154 @@ tests:
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
## --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')
|
||||
.attr('width', svgWidth)
|
||||
.attr('height', svgHeight);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, 5000])
|
||||
.range([svgHeight - svgMargin, svgMargin]);
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([2012, 2020])
|
||||
.range([svgMargin, svgWidth - svgMargin]);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
.ticks(6, '~s');
|
||||
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
.tickFormat(d3.format(''))
|
||||
.tickPadding(10);
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(yAxis)
|
||||
.attr('transform', `translate(${svgMargin}, 0)`)
|
||||
.style('font', '10px verdana');
|
||||
|
||||
lineGraph.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${svgHeight - svgMargin})`)
|
||||
.selectAll('text')
|
||||
.style('transform', 'translate(-12px, 0) rotate(-50deg)')
|
||||
.style('text-anchor', 'end')
|
||||
.style('cursor', 'pointer')
|
||||
.style('font', '10px verdana')
|
||||
|
||||
const twitterLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.twitter));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', twitterLine(data))
|
||||
.attr('stroke', twitterColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const tumblrLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.tumblr));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', tumblrLine(data))
|
||||
.attr('stroke', tumblrColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
const instagramLine = d3.line()
|
||||
.x(d => xScale(d.year))
|
||||
.y(d => yScale(d.followers.instagram));
|
||||
|
||||
lineGraph.append('path')
|
||||
.attr('d', instagramLine(data))
|
||||
.attr('stroke', instagramColor)
|
||||
.attr('stroke-width', 3)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
lineGraph.selectAll('twitter-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.twitter))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', twitterColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('tumblr-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.tumblr))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', tumblrColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
lineGraph.selectAll('instagram-circles')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d.year))
|
||||
.attr('cy', d => yScale(d.followers.instagram))
|
||||
.attr('r', 6)
|
||||
.attr('fill', 'white')
|
||||
.attr('stroke', instagramColor)
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
const rightDashboard = d3.select('.dashboard')
|
||||
.append('div');
|
||||
|
||||
const pieGraph = rightDashboard.append('svg')
|
||||
.attr('width', 200)
|
||||
.attr('height', 200)
|
||||
|
||||
const pieArc = d3.arc()
|
||||
.outerRadius(100)
|
||||
.innerRadius(0);
|
||||
|
||||
const pieColors = d3.scaleOrdinal()
|
||||
.domain(data[8].followers)
|
||||
.range([twitterColor, tumblrColor, instagramColor]);
|
||||
|
||||
const pie = d3.pie()
|
||||
.value(d => d.value);
|
||||
|
||||
const pieGraphData = pieGraph.selectAll('pieSlices')
|
||||
.data(pie(d3.entries(data[8].followers)))
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -361,5 +347,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 97
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Use `append` to add three `g` elements for the pie.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('svg g').length === 20);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('svg g').length === 20);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -176,47 +197,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -364,5 +345,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 98
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code));
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -177,47 +198,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -367,5 +348,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,31 +4,52 @@ title: Part 99
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: assert($('.dashboard div svg path')[0].getAttribute('d').length === 94);
|
||||
test-text
|
||||
|
||||
```js
|
||||
assert($('.dashboard div svg path')[0].getAttribute('d').length === 94);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -179,47 +200,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -368,5 +349,3 @@ tests:
|
||||
.attr('d', pieArc)
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -4,33 +4,55 @@ title: Part 100
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`.
|
||||
|
||||
|
||||
Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: test-text
|
||||
testString: const transform = $('.dashboard div svg g')[0].getAttribute('transform'); assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform));
|
||||
test-text
|
||||
|
||||
```js
|
||||
const transform = $('.dashboard div svg g')[0].getAttribute('transform');
|
||||
assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --seed--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
<div id='html-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>
|
||||
@ -180,47 +202,7 @@ tests:
|
||||
</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'>
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -387,5 +369,3 @@ tests:
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user