chore: rename "part" to "step" (#43934)

* chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing
2021-10-21 10:07:52 -07:00
parent 6dbe68eb2f
commit b36cdbafd1
2194 changed files with 237701 additions and 237701 deletions
--- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md
@ -0,0 +1,123 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9f2
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --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()`.
+
+# --hints--
+
+test-text
+
+```js
+assert(
+  typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code)
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>D3 Dashboard</title>
+    <style>
+      body {
+        background-color: #ccc;
+        padding: 100px 10px;
+      }
+
+      .dashboard {
+        width: 980px;
+        height: 500px;
+        background-color: white;
+        box-shadow: 5px 5px 5px 5px #888;
+        margin: auto;
+        display: flex;
+        align-items: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="dashboard"></div>
+  </body>
+</html>
+```
+
+## --seed-contents--
+
+```html
+<script>
+  const data = [ 
+    { year: 2012, followers: { twitter: 2594, tumblr:  401, instagram:   83 }},
+    { year: 2013, followers: { twitter: 3049, tumblr:  440, instagram:  192 }},
+    { year: 2014, followers: { twitter: 3511, tumblr:  415, instagram:  511 }},
+    { year: 2015, followers: { twitter: 3619, tumblr:  492, instagram: 1014 }},
+    { year: 2016, followers: { twitter: 4046, tumblr:  543, instagram: 2066 }},
+    { year: 2017, followers: { twitter: 3991, tumblr:  701, instagram: 3032 }},
+    { year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
+    { year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
+    { year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
+  ];
+</script>
+<script>
+  const svgMargin = 70,
+    svgWidth = 700,
+    svgHeight = 500,
+    twitterColor = '#7cd9d1',
+    tumblrColor = '#f6dd71',
+    instagramColor = '#fd9b98';
+
+  const lineGraph = d3.select('.dashboard')
+    .append('svg')
+    .attr('width', svgWidth)
+    .attr('height', svgHeight);
+
+
+</script>
+```
+
+# --solutions--
+
+```html
+<script>
+  const data = [ 
+    { year: 2012, followers: { twitter: 2594, tumblr:  401, instagram:   83 }},
+    { year: 2013, followers: { twitter: 3049, tumblr:  440, instagram:  192 }},
+    { year: 2014, followers: { twitter: 3511, tumblr:  415, instagram:  511 }},
+    { year: 2015, followers: { twitter: 3619, tumblr:  492, instagram: 1014 }},
+    { year: 2016, followers: { twitter: 4046, tumblr:  543, instagram: 2066 }},
+    { year: 2017, followers: { twitter: 3991, tumblr:  701, instagram: 3032 }},
+    { year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
+    { year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
+    { year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
+  ];
+</script>
+<script>
+  const svgMargin = 70,
+    svgWidth = 700,
+    svgHeight = 500,
+    twitterColor = '#7cd9d1',
+    tumblrColor = '#f6dd71',
+    instagramColor = '#fd9b98';
+
+  const lineGraph = d3.select('.dashboard')
+    .append('svg')
+    .attr('width', svgWidth)
+    .attr('height', svgHeight);
+
+  const yScale = d3.scaleLinear()
+
+
+</script>
+```