+
+
+
+## Solution
+
+
+```html
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.english.md
new file mode 100644
index 0000000000..52ccff216d
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.english.md
@@ -0,0 +1,392 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca41
+title: Part 100
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.english.md
new file mode 100644
index 0000000000..0bdbcb3390
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.english.md
@@ -0,0 +1,397 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca42
+title: Part 101
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+
+Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range.
+
+
+## Instructions
+
+
+
+
+## Tests
+
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const pathsArr = $('.dashboard div svg g path'); assert(pathsArr[0].getAttribute('fill') === '#7cd9d1' && pathsArr[1].getAttribute('fill') === '#f6dd71' && pathsArr[2].getAttribute('fill') === '#fd9b98');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.english.md
new file mode 100644
index 0000000000..96185c6b15
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.english.md
@@ -0,0 +1,403 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca47
+title: Part 104
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this:
+
+```js
+.text(d => {
+
+})
+```
+
+The method for getting the percent of each slice will take a few steps:
+
+1. Find the total number of followers for the displayed year
+2. Divide the followers of a single platform by that total
+3. Turn it into a string to display
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.english.md
new file mode 100644
index 0000000000..c38504f669
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.english.md
@@ -0,0 +1,400 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca48
+title: Part 105
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values:
+
+```js
+d3.values(data[8].followers)
+```
+
+It will be an array with the values of the followers for the three platforms in 2020.
+
+Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.english.md
new file mode 100644
index 0000000000..f4894aee01
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.english.md
@@ -0,0 +1,393 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca49
+title: Part 106
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.english.md
new file mode 100644
index 0000000000..b2218674f2
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.english.md
@@ -0,0 +1,405 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca4b
+title: Part 108
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function:
+
+```js
+${Math.round(percent * 100)}%
+```
+
+Don't forget that you need a `return` statement here since you aren't using an implicit return.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.english.md
new file mode 100644
index 0000000000..3e742957ba
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.english.md
@@ -0,0 +1,404 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca4c
+title: Part 109
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })`
+
+The `centroid` function will find the midpoint of each slice for each text element.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const transform = $('.dashboard div svg g text')[0].getAttribute('transform').replace('translate(','').replace(')','').split(','); assert(transform[0] < 39 && transform[1] > 31);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.english.md
new file mode 100644
index 0000000000..2a0c0e5c3c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.english.md
@@ -0,0 +1,406 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca4d
+title: Part 110
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice.
+
+After that, set the `font` to `10px verdana`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const text = $('.dashboard div svg g text')[0]; assert(text.style.textAnchor === 'middle' && text.style.font.toLowerCase() === '10px verdana');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.english.md
new file mode 100644
index 0000000000..32408e80e7
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.english.md
@@ -0,0 +1,408 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca4e
+title: Part 111
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.english.md
new file mode 100644
index 0000000000..fb8d204726
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.english.md
@@ -0,0 +1,418 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca51
+title: Part 114
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.english.md
new file mode 100644
index 0000000000..4311f55c36
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.english.md
@@ -0,0 +1,422 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca52
+title: Part 115
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.dashboard div table thead tr th').length === 1);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.english.md
new file mode 100644
index 0000000000..bf708b8874
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.english.md
@@ -0,0 +1,427 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca54
+title: Part 117
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.english.md
new file mode 100644
index 0000000000..d02cc61a37
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.english.md
@@ -0,0 +1,429 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca55
+title: Part 118
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-12.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-12.english.md
new file mode 100644
index 0000000000..f981d95595
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-12.english.md
@@ -0,0 +1,99 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9e9
+title: Part 12
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = code.match(/]>\s*<\/script\s*>/gi)[0]; assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+
+ D3 Dashboard
+
+
+
+
+
+
+
+
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.english.md
new file mode 100644
index 0000000000..3210912a14
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.english.md
@@ -0,0 +1,434 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca57
+title: Part 120
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.english.md
new file mode 100644
index 0000000000..7657174b06
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.english.md
@@ -0,0 +1,445 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca5a
+title: Part 123
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.english.md
new file mode 100644
index 0000000000..8d7b682ebc
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.english.md
@@ -0,0 +1,461 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca60
+title: Part 129
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.dashboard div table tbody tr td div')[0].style.backgroundColor === 'rgb(124, 217, 209)');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-13.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-13.english.md
new file mode 100644
index 0000000000..53ea256e6c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-13.english.md
@@ -0,0 +1,116 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9ea
+title: Part 13
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = code.match(/]>\s*<\/script\s*>/gi)[1]; assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.english.md
new file mode 100644
index 0000000000..f89f67654c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.english.md
@@ -0,0 +1,468 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca64
+title: Part 133
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const th = $('.dashboard div table thead tr th')[0]; assert(th.style.position === 'relative' && th.style.left === '20px');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.english.md
new file mode 100644
index 0000000000..6084fda77a
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.english.md
@@ -0,0 +1,491 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca67
+title: Part 136
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want.
+
+Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(typeof(drawDashboard) === 'function' && /<\/script>\s*
+
+```
+
+
+
+
+### Before Test
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.english.md
new file mode 100644
index 0000000000..f53d02999c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.english.md
@@ -0,0 +1,500 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca68
+title: Part 137
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function.
+
+Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example:
+
+```js
+array.findIndex(d =>
+ // find the index where the year passed to
+ // drawDashboard equals the year of the array
+)
+```
+
+After this, you will be able to use `data[index]` to get that item in the array.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = $('.dashboard').siblings('script')[1].innerHTML; assert(/var index = data.findIndex\(function \(d\) \{\s*return (year === d\.year|d.year === year);\s*\}\);/g.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.english.md
new file mode 100644
index 0000000000..bc37e88f5e
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.english.md
@@ -0,0 +1,499 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca6a
+title: Part 138
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year.
+
+The five spots are:
+
+1. The `domain` for `pieColors`.
+2. The `data` for `pieGraphData`.
+3. The `text` for your pie slice text.
+4. The `data` for your `legendRows`.
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(!/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.english.md
new file mode 100644
index 0000000000..9ced59cc20
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.english.md
@@ -0,0 +1,501 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca6b
+title: Part 139
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this:
+
+```js
+.on('mouseover', d => drawDashboard(d))
+```
+
+So now, when you hover a label, the function will be called with the year that is being hovered.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = $('.dashboard').siblings('script')[1].innerHTML; assert(/\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\);\s*\}\)/g.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-14.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-14.english.md
new file mode 100644
index 0000000000..854b929af4
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-14.english.md
@@ -0,0 +1,115 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9eb
+title: Part 14
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = code.match(/]>\s*<\/script\s*>/gi)[2]; assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+
+ D3 Dashboard
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.english.md
new file mode 100644
index 0000000000..b6fc211053
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.english.md
@@ -0,0 +1,498 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca6c
+title: Part 140
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be.
+
+Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = $('.dashboard').siblings('script')[1].innerHTML; assert(/d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g.test(script));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.english.md
new file mode 100644
index 0000000000..a353919072
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.english.md
@@ -0,0 +1,507 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca6d
+title: Part 141
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Now when you hover a label, you can see the data for the different years.
+
+Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year.
+
+To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this.
+
+Here's a hint:
+
+```js
+.style('font', d => d === year ? )
+```
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(Object.values($('.dashboard svg g text')).filter(el => el.style && el.style.font.toLowerCase() === 'bold 10px verdana').length === 1);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.english.md
new file mode 100644
index 0000000000..e90154dfe6
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.english.md
@@ -0,0 +1,500 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca6f
+title: Part 143
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(Object.values($('.dashboard svg circle')).filter(el => el.getAttribute && el.getAttribute('fill') === '#7cd9d1').length === 1);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.english.md
new file mode 100644
index 0000000000..f57b50d821
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.english.md
@@ -0,0 +1,506 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca70
+title: Part 144
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`.
+
+After that, you will be able hover any of the circles or year labels to get the information for that year.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const script = $('.dashboard').siblings('script')[1].innerHTML; assert(script.match(/\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g).length === 3);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.english.md
new file mode 100644
index 0000000000..b1ea603c8d
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.english.md
@@ -0,0 +1,506 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca71
+title: Part 145
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles.
+
+Then, all of the circles will get filled in for the currently displayed year.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const circles = Object.values($('.dashboard svg circle')); assert(circles.filter(el => el.getAttribute && (el.getAttribute('fill') === '#7cd9d1' || el.getAttribute('fill') === '#f6dd71' || el.getAttribute('fill') === '#fd9b98')).length === 3);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.english.md
new file mode 100644
index 0000000000..53d22087fb
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.english.md
@@ -0,0 +1,504 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca72
+title: Part 146
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`.
+
+That's it, your dashboard is finished! Don't forget to admire your hard work.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-15.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-15.english.md
new file mode 100644
index 0000000000..ad459fcb14
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-15.english.md
@@ -0,0 +1,124 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9ec
+title: Part 15
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-17.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-17.english.md
new file mode 100644
index 0000000000..47bf9b3e7d
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-17.english.md
@@ -0,0 +1,135 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9ee
+title: Part 17
+challengeType: 0
+isBeta: true
+---
+
+## 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:
+
+```js
+const variableName = d3.select('.className')
+```
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(lineGraph._groups[0][0] === $(".dashboard")[0]);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-18.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-18.english.md
new file mode 100644
index 0000000000..b75c8df4b2
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-18.english.md
@@ -0,0 +1,140 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9ef
+title: Part 18
+challengeType: 0
+isBeta: true
+---
+
+## 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:
+
+```js
+const variableName = d3.select('selectedElement')
+ .append('elementToAdd')
+```
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(lineGraph._groups[0][0] === $("svg")[0]);
+
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-19.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-19.english.md
new file mode 100644
index 0000000000..2f83629293
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-19.english.md
@@ -0,0 +1,145 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f0
+title: Part 19
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection.
+
+`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection:
+
+```js
+const variableName = d3.select('element')
+ .append('element')
+ .attr('attribute', 'value')
+```
+
+Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($("svg")[0].attributes.width.value === "700");
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-21.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-21.english.md
new file mode 100644
index 0000000000..46b194168c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-21.english.md
@@ -0,0 +1,142 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f2
+title: Part 21
+challengeType: 0
+isBeta: true
+---
+
+## 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()`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(typeof(yScale) === "function" && /yScale\s*=\s*d3\.scaleLinear/.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-22.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-22.english.md
new file mode 100644
index 0000000000..acb1709aff
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-22.english.md
@@ -0,0 +1,143 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f3
+title: Part 22
+challengeType: 0
+isBeta: true
+---
+
+## 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]`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const domain = yScale.domain(); assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-23.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-23.english.md
new file mode 100644
index 0000000000..cf133d9cf3
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-23.english.md
@@ -0,0 +1,148 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f4
+title: Part 23
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const range = yScale.range(); assert(range.length === 2 && range[0] === 430 && range[1] === 70);
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-24.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-24.english.md
new file mode 100644
index 0000000000..dd0fe50410
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-24.english.md
@@ -0,0 +1,148 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f5
+title: Part 24
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(typeof(xScale) === "function" && /xScale\s*=\s*d3\.scaleLinear/.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-25.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-25.english.md
new file mode 100644
index 0000000000..2d71f94541
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-25.english.md
@@ -0,0 +1,151 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f6
+title: Part 25
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const domain = xScale.domain(); assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-26.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-26.english.md
new file mode 100644
index 0000000000..9d605d2239
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-26.english.md
@@ -0,0 +1,153 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f7
+title: Part 26
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const range = xScale.range(); assert(range.length === 2 && range[0] === 70 && range[1] === 630);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-27.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-27.english.md
new file mode 100644
index 0000000000..089186d8c5
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-27.english.md
@@ -0,0 +1,156 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f8
+title: Part 27
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(typeof(yAxis) === "function" && /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-28.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-28.english.md
new file mode 100644
index 0000000000..90efe7c53e
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-28.english.md
@@ -0,0 +1,160 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f9
+title: Part 28
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(typeof(xAxis) === "function" && /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-29.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-29.english.md
new file mode 100644
index 0000000000..4adf19fff4
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-29.english.md
@@ -0,0 +1,164 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9fa
+title: Part 29
+challengeType: 0
+isBeta: true
+---
+
+## 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".
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($("svg")[0].children[0] === $("g")[0] && $("g").length === 1);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-31.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-31.english.md
new file mode 100644
index 0000000000..e51cbcd0cf
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-31.english.md
@@ -0,0 +1,172 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9fc
+title: Part 31
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($("g")[0].attributes.transform.nodeValue === "translate(70, 0)");
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-35.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-35.english.md
new file mode 100644
index 0000000000..6107fe6f4a
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-35.english.md
@@ -0,0 +1,179 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca00
+title: Part 35
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($("svg > g")[1].attributes.transform.nodeValue === "translate(0, 430)");
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-36.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-36.english.md
new file mode 100644
index 0000000000..bed37fa3a8
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-36.english.md
@@ -0,0 +1,186 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca01
+title: Part 36
+challengeType: 0
+isBeta: true
+---
+
+## 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:
+
+```js
+.selectAll('element')
+```
+
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-38.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-38.english.md
new file mode 100644
index 0000000000..e248f57d99
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-38.english.md
@@ -0,0 +1,185 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca03
+title: Part 38
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.tick > text').filter((node, index) => index.style['text-anchor'] === 'end').length === 9);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-4.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-4.english.md
new file mode 100644
index 0000000000..f92dd6aa58
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-4.english.md
@@ -0,0 +1,68 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9e1
+title: Part 4
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: const link = code.match(/]>/gi)[0]; assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+
+ D3 Dashboard
+
+
+
+
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-40.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-40.english.md
new file mode 100644
index 0000000000..9261b4fe9d
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-40.english.md
@@ -0,0 +1,191 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca05
+title: Part 40
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## 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');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-43.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-43.english.md
new file mode 100644
index 0000000000..4c89000eae
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-43.english.md
@@ -0,0 +1,199 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca08
+title: Part 43
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-44.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-44.english.md
new file mode 100644
index 0000000000..1e75e2db44
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-44.english.md
@@ -0,0 +1,209 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca09
+title: Part 44
+challengeType: 0
+isBeta: true
+---
+
+## 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:
+
+```js
+.x(d => d.year)
+```
+
+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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-45.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-45.english.md
new file mode 100644
index 0000000000..deb1ad16d1
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-45.english.md
@@ -0,0 +1,204 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca0a
+title: Part 45
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-46.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-46.english.md
new file mode 100644
index 0000000000..547d10bd8a
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-46.english.md
@@ -0,0 +1,208 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca0b
+title: Part 46
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-47.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-47.english.md
new file mode 100644
index 0000000000..32bbdb114e
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-47.english.md
@@ -0,0 +1,207 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca0c
+title: Part 47
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('svg path').length === 3 && /lineGraph\.append\((`|'|")path\1\)/gi.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-48.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-48.english.md
new file mode 100644
index 0000000000..7321a24e28
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-48.english.md
@@ -0,0 +1,214 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca0d
+title: Part 48
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('svg path')[2].getAttribute('d').length === 151);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-49.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-49.english.md
new file mode 100644
index 0000000000..c40f650fd9
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-49.english.md
@@ -0,0 +1,215 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca0e
+title: Part 49
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## 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');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-5.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-5.english.md
new file mode 100644
index 0000000000..912cce4bb9
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-5.english.md
@@ -0,0 +1,72 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9e2
+title: Part 5
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($("div.dashboard").length === 1);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-52.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-52.english.md
new file mode 100644
index 0000000000..1f6d658b4a
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-52.english.md
@@ -0,0 +1,226 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca11
+title: Part 52
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-56.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-56.english.md
new file mode 100644
index 0000000000..8670b7b519
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-56.english.md
@@ -0,0 +1,239 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca15
+title: Part 56
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-6.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-6.english.md
new file mode 100644
index 0000000000..e25c5126cc
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-6.english.md
@@ -0,0 +1,75 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9e3
+title: Part 6
+challengeType: 0
+isBeta: true
+---
+
+## 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`.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-62.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-62.english.md
new file mode 100644
index 0000000000..8767060ec2
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-62.english.md
@@ -0,0 +1,267 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca1b
+title: Part 62
+challengeType: 0
+isBeta: true
+---
+
+## 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:
+
+```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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-64.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-64.english.md
new file mode 100644
index 0000000000..c5e941d946
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-64.english.md
@@ -0,0 +1,269 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca1d
+title: Part 64
+challengeType: 0
+isBeta: true
+---
+
+## Description
+
+
+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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-65.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-65.english.md
new file mode 100644
index 0000000000..9ba98ab22a
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-65.english.md
@@ -0,0 +1,267 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca1e
+title: Part 65
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('svg circle').length === 9);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-66.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-66.english.md
new file mode 100644
index 0000000000..c714179706
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-66.english.md
@@ -0,0 +1,271 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca1f
+title: Part 66
+challengeType: 0
+isBeta: true
+---
+
+## 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)`.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('svg circle')[0].getAttribute('cx') == '70');
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-71.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-71.english.md
new file mode 100644
index 0000000000..1b160b965c
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-71.english.md
@@ -0,0 +1,282 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca24
+title: Part 71
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-72.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-72.english.md
new file mode 100644
index 0000000000..c42ef95cef
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-72.english.md
@@ -0,0 +1,289 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca25
+title: Part 72
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('svg circle').length === 18);
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-76.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-76.english.md
new file mode 100644
index 0000000000..bbbe313a45
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-76.english.md
@@ -0,0 +1,304 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca29
+title: Part 76
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-81.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-81.english.md
new file mode 100644
index 0000000000..244bb57f60
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-81.english.md
@@ -0,0 +1,326 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca2e
+title: Part 81
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-82.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-82.english.md
new file mode 100644
index 0000000000..e3d264a9ed
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-82.english.md
@@ -0,0 +1,329 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca2f
+title: Part 82
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-83.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-83.english.md
new file mode 100644
index 0000000000..ec88d0b4e0
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-83.english.md
@@ -0,0 +1,332 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca30
+title: Part 83
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-85.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-85.english.md
new file mode 100644
index 0000000000..be8086adea
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-85.english.md
@@ -0,0 +1,340 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca32
+title: Part 85
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-87.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-87.english.md
new file mode 100644
index 0000000000..9f945dc626
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-87.english.md
@@ -0,0 +1,345 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca34
+title: Part 87
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-88.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-88.english.md
new file mode 100644
index 0000000000..1c2b155cd3
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-88.english.md
@@ -0,0 +1,350 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca35
+title: Part 88
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-90.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-90.english.md
new file mode 100644
index 0000000000..05a74e85f7
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-90.english.md
@@ -0,0 +1,353 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca37
+title: Part 90
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-92.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-92.english.md
new file mode 100644
index 0000000000..3d52afe441
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-92.english.md
@@ -0,0 +1,361 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca39
+title: Part 92
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## 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));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-96.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-96.english.md
new file mode 100644
index 0000000000..5837d9d0d2
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-96.english.md
@@ -0,0 +1,366 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca3d
+title: Part 96
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert(/\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test(code));
+
+```
+
+
+
+## Challenge Seed
+
+
+
+
+
+## Solution
+
+
+```html
+
+
+```
+
+
diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-99.english.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-99.english.md
new file mode 100644
index 0000000000..a62f6961ea
--- /dev/null
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-99.english.md
@@ -0,0 +1,373 @@
+---
+id: 5d8a4cfbe6b6180ed9a1ca40
+title: Part 99
+challengeType: 0
+isBeta: true
+---
+
+## 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.
+
+
+## Instructions
+
+
+
+## Tests
+
+
+```yml
+tests:
+ - text: test-text
+ testString: assert($('.dashboard div svg path')[0].getAttribute('d').length === 94);
+
+```
+
+
+
+## Challenge Seed
+
+