gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.english.md
View File

@ -23,7 +23,7 @@ Use the <code>attr()</code> method to add a class of <code>bar</code> to all the
```yml
tests:
- text: Your <code>rect</code> elements should have a class of <code>bar</code>.
testString: 'assert($(''rect'').attr(''class'') == "bar", ''Your <code>rect</code> elements should have a class of <code>bar</code>.'');'
testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'
```
@ -43,15 +43,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -62,11 +62,11 @@ tests:
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
@ -74,7 +74,7 @@ tests:
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3);
</script>
</body>
```

38
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md
View File

@ -23,25 +23,25 @@ Append a <code>title</code> element under each <code>rect</code> node. Then call
```yml
tests:
- text: Your code should have 9 <code>title</code> elements.
testString: 'assert($(''title'').length == 9, ''Your code should have 9 <code>title</code> elements.'');'
testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
- text: The first <code>title</code> element should have tooltip text of 12.
testString: 'assert($(''title'').eq(0).text() == ''12'', ''The first <code>title</code> element should have tooltip text of 12.'');'
testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
- text: The second <code>title</code> element should have tooltip text of 31.
testString: 'assert($(''title'').eq(1).text() == ''31'', ''The second <code>title</code> element should have tooltip text of 31.'');'
testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
- text: The third <code>title</code> element should have tooltip text of 22.
testString: 'assert($(''title'').eq(2).text() == ''22'', ''The third <code>title</code> element should have tooltip text of 22.'');'
testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
- text: The fourth <code>title</code> element should have tooltip text of 17.
testString: 'assert($(''title'').eq(3).text() == ''17'', ''The fourth <code>title</code> element should have tooltip text of 17.'');'
testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
- text: The fifth <code>title</code> element should have tooltip text of 25.
testString: 'assert($(''title'').eq(4).text() == ''25'', ''The fifth <code>title</code> element should have tooltip text of 25.'');'
testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
- text: The sixth <code>title</code> element should have tooltip text of 18.
testString: 'assert($(''title'').eq(5).text() == ''18'', ''The sixth <code>title</code> element should have tooltip text of 18.'');'
testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
- text: The seventh <code>title</code> element should have tooltip text of 29.
testString: 'assert($(''title'').eq(6).text() == ''29'', ''The seventh <code>title</code> element should have tooltip text of 29.'');'
testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
- text: The eighth <code>title</code> element should have tooltip text of 14.
testString: 'assert($(''title'').eq(7).text() == ''14'', ''The eighth <code>title</code> element should have tooltip text of 14.'');'
testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
- text: The ninth <code>title</code> element should have tooltip text of 9.
testString: 'assert($(''title'').eq(8).text() == ''9'', ''The ninth <code>title</code> element should have tooltip text of 9.'');'
testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'
```
@ -61,15 +61,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -81,19 +81,19 @@ tests:
.attr("fill", "navy")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
.attr("y", (d, i) => h - (d * 3 + 3))
</script>
</body>
```

38
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md
View File

@ -25,27 +25,27 @@ Add <code>cx</code>, <code>cy</code>, and <code>r</code> attributes to the <code
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: 'assert($(''circle'').length == 10, ''Your code should have 10 <code>circle</code> elements.'');'
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
- text: 'The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(0).attr(''cx'') == ''34'' && $(''circle'').eq(0).attr(''cy'') == ''422'' && $(''circle'').eq(0).attr(''r'') == ''5'', ''The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.");'
- text: 'The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(1).attr(''cx'') == ''109'' && $(''circle'').eq(1).attr(''cy'') == ''220'' && $(''circle'').eq(1).attr(''r'') == ''5'', ''The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.");'
- text: 'The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(2).attr(''cx'') == ''310'' && $(''circle'').eq(2).attr(''cy'') == ''380'' && $(''circle'').eq(2).attr(''r'') == ''5'', ''The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.");'
- text: 'The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(3).attr(''cx'') == ''79'' && $(''circle'').eq(3).attr(''cy'') == ''89'' && $(''circle'').eq(3).attr(''r'') == ''5'', ''The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.");'
- text: 'The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(4).attr(''cx'') == ''420'' && $(''circle'').eq(4).attr(''cy'') == ''280'' && $(''circle'').eq(4).attr(''r'') == ''5'', ''The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.");'
- text: 'The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(5).attr(''cx'') == ''233'' && $(''circle'').eq(5).attr(''cy'') == ''355'' && $(''circle'').eq(5).attr(''r'') == ''5'', ''The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.");'
- text: 'The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(6).attr(''cx'') == ''333'' && $(''circle'').eq(6).attr(''cy'') == ''404'' && $(''circle'').eq(6).attr(''r'') == ''5'', ''The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.");'
- text: 'The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(7).attr(''cx'') == ''222'' && $(''circle'').eq(7).attr(''cy'') == ''167'' && $(''circle'').eq(7).attr(''r'') == ''5'', ''The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.");'
- text: 'The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(8).attr(''cx'') == ''78'' && $(''circle'').eq(8).attr(''cy'') == ''180'' && $(''circle'').eq(8).attr(''r'') == ''5'', ''The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.");'
- text: 'The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.'
testString: 'assert($(''circle'').eq(9).attr(''cx'') == ''21'' && $(''circle'').eq(9).attr(''cy'') == ''377'' && $(''circle'').eq(9).attr(''r'') == ''5'', ''The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.'');'
testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.");'
```
@ -71,26 +71,26 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
// Add your code below this line
// Add your code above this line
</script>
</body>
```

32
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md
View File

@ -31,11 +31,11 @@ The scatter plot now has an x-axis. Create a y-axis in a variable named <code>yA
```yml
tests:
- text: Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), ''Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.'');'
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.");'
- text: 'The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).'
testString: 'assert($(''g'').eq(1).attr(''transform'').match(/translate\(60\s*?,\s*?0\)/g), ''The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).'');'
testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).");'
- text: Your code should call the <code>yAxis</code>.
testString: 'assert(code.match(/\.call\(yAxis\)/g), ''Your code should call the <code>yAxis</code>.'');'
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'
```
@ -61,24 +61,24 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 60;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
@ -86,7 +86,7 @@ tests:
.attr("cx", (d) => xScale(d[0]))
.attr("cy",(d) => yScale(d[1]))
.attr("r", (d) => 5);
svg.selectAll("text")
.data(dataset)
.enter()
@ -94,22 +94,22 @@ tests:
.text((d) => (d[0] + "," + d[1]))
.attr("x", (d) => xScale(d[0] + 10))
.attr("y", (d) => yScale(d[1]))
const xAxis = d3.axisBottom(xScale);
// Add your code below this line
const yAxis = undefined;
// Add your code above this line
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
// Add your code below this line
// Add your code above this line
</script>
</body>
```

12
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.english.md
View File

@ -24,9 +24,9 @@ Add the <code>attr()</code> method to the code in the editor and put a class of
```yml
tests:
- text: Your <code>div</code> elements should have a class of <code>bar</code>.
testString: 'assert($(''div'').attr(''class'') == "bar", ''Your <code>div</code> elements should have a class of <code>bar</code>.'');'
testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
- text: Your code should use the <code>attr()</code> method.
testString: 'assert(code.match(/\.attr/g), ''Your code should use the <code>attr()</code> method.'');'
testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'
```
@ -49,15 +49,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// Add your code below this line
// Add your code above this line
</script>
</body>

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md
View File

@ -31,17 +31,17 @@ Use the <code>select</code> method to select the <code>body</code> tag in the do
```yml
tests:
- text: The <code>body</code> should have one <code>h1</code> element.
testString: 'assert($(''body'').children(''h1'').length == 1, ''The <code>body</code> should have one <code>h1</code> element.'');'
testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
- text: The <code>h1</code> element should have the text "Learning D3" in it.
testString: 'assert($(''h1'').text() == "Learning D3", ''The <code>h1</code> element should have the text "Learning D3" in it.'');'
testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
- text: Your code should access the <code>d3</code> object.
testString: 'assert(code.match(/d3/g), ''Your code should access the <code>d3</code> object.'');'
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
- text: Your code should use the <code>select</code> method.
testString: 'assert(code.match(/\.select/g), ''Your code should use the <code>select</code> method.'');'
testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
- text: Your code should use the <code>append</code> method.
testString: 'assert(code.match(/\.append/g), ''Your code should use the <code>append</code> method.'');'
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
- text: Your code should use the <code>text</code> method.
testString: 'assert(code.match(/\.text/g), ''Your code should use the <code>text</code> method.'');'
testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'
```
@ -56,9 +56,9 @@ tests:
<body>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>

12
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md
View File

@ -24,9 +24,9 @@ Add the <code>style()</code> method to the code in the editor to make all the di
```yml
tests:
- text: Your <code>h2</code> elements should have a <code>font-family</code> of verdana.
testString: 'assert($(''h2'').css(''font-family'') == ''verdana'', ''Your <code>h2</code> elements should have a <code>font-family</code> of verdana.'');'
testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
- text: Your code should use the <code>style()</code> method.
testString: 'assert(code.match(/\.style/g), ''Your code should use the <code>style()</code> method.'');'
testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'
```
@ -41,16 +41,16 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// Add your code below this line
// Add your code above this line
</script>
</body>

34
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.english.md
View File

@ -25,23 +25,23 @@ The code in the editor already binds the data to each new <code>text</code> elem
```yml
tests:
- text: The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.
testString: 'assert($(''text'').eq(0).text() == ''12'' && $(''text'').eq(0).attr(''y'') == ''61'', ''The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.'');'
testString: 'assert($("text").eq(0).text() == "12" && $("text").eq(0).attr("y") == "61", "The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.");'
- text: The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.
testString: 'assert($(''text'').eq(1).text() == ''31'' && $(''text'').eq(1).attr(''y'') == ''4'', ''The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.'');'
testString: 'assert($("text").eq(1).text() == "31" && $("text").eq(1).attr("y") == "4", "The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.");'
- text: The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.
testString: 'assert($(''text'').eq(2).text() == ''22'' && $(''text'').eq(2).attr(''y'') == ''31'', ''The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.'');'
testString: 'assert($("text").eq(2).text() == "22" && $("text").eq(2).attr("y") == "31", "The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.");'
- text: The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.
testString: 'assert($(''text'').eq(3).text() == ''17'' && $(''text'').eq(3).attr(''y'') == ''46'', ''The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.'');'
testString: 'assert($("text").eq(3).text() == "17" && $("text").eq(3).attr("y") == "46", "The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.");'
- text: The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.
testString: 'assert($(''text'').eq(4).text() == ''25'' && $(''text'').eq(4).attr(''y'') == ''22'', ''The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.'');'
testString: 'assert($("text").eq(4).text() == "25" && $("text").eq(4).attr("y") == "22", "The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.");'
- text: The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.
testString: 'assert($(''text'').eq(5).text() == ''18'' && $(''text'').eq(5).attr(''y'') == ''43'', ''The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.'');'
testString: 'assert($("text").eq(5).text() == "18" && $("text").eq(5).attr("y") == "43", "The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.");'
- text: The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.
testString: 'assert($(''text'').eq(6).text() == ''29'' && $(''text'').eq(6).attr(''y'') == ''10'', ''The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.'');'
testString: 'assert($("text").eq(6).text() == "29" && $("text").eq(6).attr("y") == "10", "The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.");'
- text: The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.
testString: 'assert($(''text'').eq(7).text() == ''14'' && $(''text'').eq(7).attr(''y'') == ''55'', ''The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.'');'
testString: 'assert($("text").eq(7).text() == "14" && $("text").eq(7).attr("y") == "55", "The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.");'
- text: The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.
testString: 'assert($(''text'').eq(8).text() == ''9'' && $(''text'').eq(8).attr(''y'') == ''70'', ''The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.'');'
testString: 'assert($("text").eq(8).text() == "9" && $("text").eq(8).attr("y") == "70", "The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.");'
```
@ -56,15 +56,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -74,15 +74,15 @@ tests:
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
// Add your code below this line
// Add your code above this line
</script>
<body>

38
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md
View File

@ -24,27 +24,27 @@ Label each point on the scatter plot using the <code>text</code> elements. The t
```yml
tests:
- text: Your code should have 10 <code>text</code> elements.
testString: 'assert($(''text'').length == 10, ''Your code should have 10 <code>text</code> elements.'');'
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
- text: 'The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.'
testString: 'assert($(''text'').eq(0).text() == ''34, 78'' && $(''text'').eq(0).attr(''x'') == ''39'' && $(''text'').eq(0).attr(''y'') == ''422'', ''The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.'');'
testString: 'assert($("text").eq(0).text() == "34, 78" && $("text").eq(0).attr("x") == "39" && $("text").eq(0).attr("y") == "422", "The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.");'
- text: 'The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.'
testString: 'assert($(''text'').eq(1).text() == ''109, 280'' && $(''text'').eq(1).attr(''x'') == ''114'' && $(''text'').eq(1).attr(''y'') == ''220'', ''The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.'');'
testString: 'assert($("text").eq(1).text() == "109, 280" && $("text").eq(1).attr("x") == "114" && $("text").eq(1).attr("y") == "220", "The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.");'
- text: 'The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.'
testString: 'assert($(''text'').eq(2).text() == ''310, 120'' && $(''text'').eq(2).attr(''x'') == ''315'' && $(''text'').eq(2).attr(''y'') == ''380'', ''The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.'');'
testString: 'assert($("text").eq(2).text() == "310, 120" && $("text").eq(2).attr("x") == "315" && $("text").eq(2).attr("y") == "380", "The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.");'
- text: 'The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.'
testString: 'assert($(''text'').eq(3).text() == ''79, 411'' && $(''text'').eq(3).attr(''x'') == ''84'' && $(''text'').eq(3).attr(''y'') == ''89'', ''The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.'');'
testString: 'assert($("text").eq(3).text() == "79, 411" && $("text").eq(3).attr("x") == "84" && $("text").eq(3).attr("y") == "89", "The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.");'
- text: 'The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.'
testString: 'assert($(''text'').eq(4).text() == ''420, 220'' && $(''text'').eq(4).attr(''x'') == ''425'' && $(''text'').eq(4).attr(''y'') == ''280'', ''The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.'');'
testString: 'assert($("text").eq(4).text() == "420, 220" && $("text").eq(4).attr("x") == "425" && $("text").eq(4).attr("y") == "280", "The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.");'
- text: 'The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.'
testString: 'assert($(''text'').eq(5).text() == ''233, 145'' && $(''text'').eq(5).attr(''x'') == ''238'' && $(''text'').eq(5).attr(''y'') == ''355'', ''The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.'');'
testString: 'assert($("text").eq(5).text() == "233, 145" && $("text").eq(5).attr("x") == "238" && $("text").eq(5).attr("y") == "355", "The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.");'
- text: 'The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.'
testString: 'assert($(''text'').eq(6).text() == ''333, 96'' && $(''text'').eq(6).attr(''x'') == ''338'' && $(''text'').eq(6).attr(''y'') == ''404'', ''The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.'');'
testString: 'assert($("text").eq(6).text() == "333, 96" && $("text").eq(6).attr("x") == "338" && $("text").eq(6).attr("y") == "404", "The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.");'
- text: 'The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.'
testString: 'assert($(''text'').eq(7).text() == ''222, 333'' && $(''text'').eq(7).attr(''x'') == ''227'' && $(''text'').eq(7).attr(''y'') == ''167'', ''The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.'');'
testString: 'assert($("text").eq(7).text() == "222, 333" && $("text").eq(7).attr("x") == "227" && $("text").eq(7).attr("y") == "167", "The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.");'
- text: 'The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.'
testString: 'assert($(''text'').eq(8).text() == ''78, 320'' && $(''text'').eq(8).attr(''x'') == ''83'' && $(''text'').eq(8).attr(''y'') == ''180'', ''The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.'');'
testString: 'assert($("text").eq(8).text() == "78, 320" && $("text").eq(8).attr("x") == "83" && $("text").eq(8).attr("y") == "180", "The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.");'
- text: 'The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.'
testString: 'assert($(''text'').eq(9).text() == ''21, 123'' && $(''text'').eq(9).attr(''x'') == ''26'' && $(''text'').eq(9).attr(''y'') == ''377'', ''The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.'');'
testString: 'assert($("text").eq(9).text() == "21, 123" && $("text").eq(9).attr("x") == "26" && $("text").eq(9).attr("y") == "377", "The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.");'
```
@ -70,16 +70,16 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
@ -87,15 +87,15 @@ tests:
.attr("cx", (d, i) => d[0])
.attr("cy", (d, i) => h - d[1])
.attr("r", 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
// Add your code below this line
// Add your code above this line
</script>
</body>

26
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md
View File

@ -26,23 +26,23 @@ Add the <code>style()</code> method to the code in the editor to set the <code>c
```yml
tests:
- text: The first <code>h2</code> should have a <code>color</code> of red.
testString: 'assert($(''h2'').eq(0).css(''color'') == "rgb(255, 0, 0)", ''The first <code>h2</code> should have a <code>color</code> of red.'');'
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first <code>h2</code> should have a <code>color</code> of red.");'
- text: The second <code>h2</code> should have a <code>color</code> of green.
testString: 'assert($(''h2'').eq(1).css(''color'') == "rgb(0, 128, 0)", ''The second <code>h2</code> should have a <code>color</code> of green.'');'
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second <code>h2</code> should have a <code>color</code> of green.");'
- text: The third <code>h2</code> should have a <code>color</code> of green.
testString: 'assert($(''h2'').eq(2).css(''color'') == "rgb(0, 128, 0)", ''The third <code>h2</code> should have a <code>color</code> of green.'');'
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third <code>h2</code> should have a <code>color</code> of green.");'
- text: The fourth <code>h2</code> should have a <code>color</code> of red.
testString: 'assert($(''h2'').eq(3).css(''color'') == "rgb(255, 0, 0)", ''The fourth <code>h2</code> should have a <code>color</code> of red.'');'
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth <code>h2</code> should have a <code>color</code> of red.");'
- text: The fifth <code>h2</code> should have a <code>color</code> of green.
testString: 'assert($(''h2'').eq(4).css(''color'') == "rgb(0, 128, 0)", ''The fifth <code>h2</code> should have a <code>color</code> of green.'');'
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth <code>h2</code> should have a <code>color</code> of green.");'
- text: The sixth <code>h2</code> should have a <code>color</code> of red.
testString: 'assert($(''h2'').eq(5).css(''color'') == "rgb(255, 0, 0)", ''The sixth <code>h2</code> should have a <code>color</code> of red.'');'
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth <code>h2</code> should have a <code>color</code> of red.");'
- text: The seventh <code>h2</code> should have a <code>color</code> of green.
testString: 'assert($(''h2'').eq(6).css(''color'') == "rgb(0, 128, 0)", ''The seventh <code>h2</code> should have a <code>color</code> of green.'');'
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh <code>h2</code> should have a <code>color</code> of green.");'
- text: The eighth <code>h2</code> should have a <code>color</code> of red.
testString: 'assert($(''h2'').eq(7).css(''color'') == "rgb(255, 0, 0)", ''The eighth <code>h2</code> should have a <code>color</code> of red.'');'
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth <code>h2</code> should have a <code>color</code> of red.");'
- text: The ninth <code>h2</code> should have a <code>color</code> of red.
testString: 'assert($(''h2'').eq(8).css(''color'') == "rgb(255, 0, 0)", ''The ninth <code>h2</code> should have a <code>color</code> of red.'');'
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'
```
@ -57,16 +57,16 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// Add your code below this line
// Add your code above this line
</script>
</body>

14
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md
View File

@ -23,7 +23,7 @@ Add an <code>attr()</code> method to set the "fill" of all the bars to the color
```yml
tests:
- text: The bars should all have a <code>fill</code> color of navy.
testString: 'assert($(''rect'').css(''fill'') == "rgb(0, 0, 128)", ''The bars should all have a <code>fill</code> color of navy.'');'
testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a <code>fill</code> color of navy.");'
```
@ -38,15 +38,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -56,9 +56,9 @@ tests:
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
// Add your code below this line
// Add your code above this line
</script>
</body>

24
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
View File

@ -25,23 +25,23 @@ First, add a <code>margin</code> of 2px to the <code>bar</code> class in the <co
```yml
tests:
- text: The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(0).css(''height'') == ''120px'' && $(''div'').eq(0).css(''margin-right'') == ''2px'', ''The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.");'
- text: The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(1).css(''height'') == ''310px'' && $(''div'').eq(1).css(''margin-right'') == ''2px'', ''The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.");'
- text: The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(2).css(''height'') == ''220px'' && $(''div'').eq(2).css(''margin-right'') == ''2px'', ''The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.");'
- text: The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(3).css(''height'') == ''170px'' && $(''div'').eq(3).css(''margin-right'') == ''2px'', ''The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.");'
- text: The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(4).css(''height'') == ''250px'' && $(''div'').eq(4).css(''margin-right'') == ''2px'', ''The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.");'
- text: The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(5).css(''height'') == ''180px'' && $(''div'').eq(5).css(''margin-right'') == ''2px'', ''The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.");'
- text: The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(6).css(''height'') == ''290px'' && $(''div'').eq(6).css(''margin-right'') == ''2px'', ''The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.");'
- text: The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(7).css(''height'') == ''140px'' && $(''div'').eq(7).css(''margin-right'') == ''2px'', ''The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.");'
- text: The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.
testString: 'assert($(''div'').eq(8).css(''height'') == ''90px'' && $(''div'').eq(8).css(''margin-right'') == ''2px'', ''The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.'');'
testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.");'
```
@ -58,7 +58,7 @@ tests:
width: 25px;
height: 100px;
/* Add your code below this line */
/* Add your code above this line */
display: inline-block;
background-color: blue;
@ -67,7 +67,7 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
@ -75,7 +75,7 @@ tests:
.attr("class", "bar")
// Add your code below this line
.style("height", (d) => (d + "px"))
// Add your code above this line
</script>
</body>

20
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md
View File

@ -25,13 +25,13 @@ Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> met
```yml
tests:
- text: Your document should have 9 <code>rect</code> elements.
testString: 'assert($(''rect'').length == 9, ''Your document should have 9 <code>rect</code> elements.'');'
testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
- text: Your code should use the <code>data()</code> method.
testString: 'assert(code.match(/\.data/g), ''Your code should use the <code>data()</code> method.'');'
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Your code should use the <code>enter()</code> method.
testString: 'assert(code.match(/\.enter/g), ''Your code should use the <code>enter()</code> method.'');'
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
- text: Your code should use the <code>append()</code> method.
testString: 'assert(code.match(/\.append/g), ''Your code should use the <code>append()</code> method.'');'
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'
```
@ -46,20 +46,20 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
// Add your code below this line
// Add your code above this line
.attr("x", 0)
.attr("y", 0)

14
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md
View File

@ -28,11 +28,11 @@ Change the <code>scale</code> variable to create a linear scale. Then set the <c
```yml
tests:
- text: The text in the <code>h2</code> should be 50.
testString: 'assert($(''h2'').text() == ''50'', ''The text in the <code>h2</code> should be 50.'');'
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
- text: Your code should use the <code>scaleLinear()</code> method.
testString: 'assert(code.match(/\.scaleLinear/g), ''Your code should use the <code>scaleLinear()</code> method.'');'
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
- text: The <code>output</code> variable should call <code>scale</code> with an argument of 50.
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), ''The <code>output</code> variable should call <code>scale</code> with an argument of 50.'');'
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'
```
@ -47,16 +47,16 @@ tests:
<body>
<script>
// Add your code below this line
const scale = undefined; // Create the scale here
const output = scale(); // Call the scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md
View File

@ -24,7 +24,7 @@ Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> met
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: 'assert($(''circle'').length == 10, ''Your code should have 10 <code>circle</code> elements.'');'
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
```
@ -50,23 +50,23 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
// Add your code below this line
// Add your code above this line
</script>
</body>
```

20
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md
View File

@ -26,15 +26,15 @@ Add a <code>rect</code> shape to the <code>svg</code> using <code>append()</code
```yml
tests:
- text: Your document should have 1 <code>rect</code> element.
testString: 'assert($(''rect'').length == 1, ''Your document should have 1 <code>rect</code> element.'');'
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
- text: The <code>rect</code> element should have a <code>width</code> attribute set to 25.
testString: 'assert($(''rect'').attr(''width'') == ''25'', ''The <code>rect</code> element should have a <code>width</code> attribute set to 25.'');'
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
- text: The <code>rect</code> element should have a <code>height</code> attribute set to 100.
testString: 'assert($(''rect'').attr(''height'') == ''100'', ''The <code>rect</code> element should have a <code>height</code> attribute set to 100.'');'
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
- text: The <code>rect</code> element should have an <code>x</code> attribute set to 0.
testString: 'assert($(''rect'').attr(''x'') == ''0'', ''The <code>rect</code> element should have an <code>x</code> attribute set to 0.'');'
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
- text: The <code>rect</code> element should have a <code>y</code> attribute set to 0.
testString: 'assert($(''rect'').attr(''y'') == ''0'', ''The <code>rect</code> element should have a <code>y</code> attribute set to 0.'');'
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
```
@ -49,18 +49,18 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
// Add your code above this line
</script>
</body>

30
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md
View File

@ -24,23 +24,23 @@ Change the callback function for the <code>height</code> attribute to return the
```yml
tests:
- text: The first <code>rect</code> should have a <code>height</code> of 36.
testString: 'assert($(''rect'').eq(0).attr(''height'') == ''36'', ''The first <code>rect</code> should have a <code>height</code> of 36.'');'
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
- text: The second <code>rect</code> should have a <code>height</code> of 93.
testString: 'assert($(''rect'').eq(1).attr(''height'') == ''93'', ''The second <code>rect</code> should have a <code>height</code> of 93.'');'
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
- text: The third <code>rect</code> should have a <code>height</code> of 66.
testString: 'assert($(''rect'').eq(2).attr(''height'') == ''66'', ''The third <code>rect</code> should have a <code>height</code> of 66.'');'
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
- text: The fourth <code>rect</code> should have a <code>height</code> of 51.
testString: 'assert($(''rect'').eq(3).attr(''height'') == ''51'', ''The fourth <code>rect</code> should have a <code>height</code> of 51.'');'
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
- text: The fifth <code>rect</code> should have a <code>height</code> of 75.
testString: 'assert($(''rect'').eq(4).attr(''height'') == ''75'', ''The fifth <code>rect</code> should have a <code>height</code> of 75.'');'
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
- text: The sixth <code>rect</code> should have a <code>height</code> of 54.
testString: 'assert($(''rect'').eq(5).attr(''height'') == ''54'', ''The sixth <code>rect</code> should have a <code>height</code> of 54.'');'
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
- text: The seventh <code>rect</code> should have a <code>height</code> of 87.
testString: 'assert($(''rect'').eq(6).attr(''height'') == ''87'', ''The seventh <code>rect</code> should have a <code>height</code> of 87.'');'
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
- text: The eighth <code>rect</code> should have a <code>height</code> of 42.
testString: 'assert($(''rect'').eq(7).attr(''height'') == ''42'', ''The eighth <code>rect</code> should have a <code>height</code> of 42.'');'
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
- text: The ninth <code>rect</code> should have a <code>height</code> of 27.
testString: 'assert($(''rect'').eq(8).attr(''height'') == ''27'', ''The ninth <code>rect</code> should have a <code>height</code> of 27.'');'
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth <code>rect</code> should have a <code>height</code> of 27.");'
```
@ -55,15 +55,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -73,9 +73,9 @@ tests:
.attr("width", 25)
.attr("height", (d, i) => {
// Add your code below this line
// Add your code above this line
});
</script>

30
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md
View File

@ -28,23 +28,23 @@ Change the <code>x</code> attribute callback function so it returns the index ti
```yml
tests:
- text: The first <code>rect</code> should have an <code>x</code> value of 0.
testString: 'assert($(''rect'').eq(0).attr(''x'') == ''0'', ''The first <code>rect</code> should have an <code>x</code> value of 0.'');'
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
- text: The second <code>rect</code> should have an <code>x</code> value of 30.
testString: 'assert($(''rect'').eq(1).attr(''x'') == ''30'', ''The second <code>rect</code> should have an <code>x</code> value of 30.'');'
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
- text: The third <code>rect</code> should have an <code>x</code> value of 60.
testString: 'assert($(''rect'').eq(2).attr(''x'') == ''60'', ''The third <code>rect</code> should have an <code>x</code> value of 60.'');'
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
- text: The fourth <code>rect</code> should have an <code>x</code> value of 90.
testString: 'assert($(''rect'').eq(3).attr(''x'') == ''90'', ''The fourth <code>rect</code> should have an <code>x</code> value of 90.'');'
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
- text: The fifth <code>rect</code> should have an <code>x</code> value of 120.
testString: 'assert($(''rect'').eq(4).attr(''x'') == ''120'', ''The fifth <code>rect</code> should have an <code>x</code> value of 120.'');'
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
- text: The sixth <code>rect</code> should have an <code>x</code> value of 150.
testString: 'assert($(''rect'').eq(5).attr(''x'') == ''150'', ''The sixth <code>rect</code> should have an <code>x</code> value of 150.'');'
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
- text: The seventh <code>rect</code> should have an <code>x</code> value of 180.
testString: 'assert($(''rect'').eq(6).attr(''x'') == ''180'', ''The seventh <code>rect</code> should have an <code>x</code> value of 180.'');'
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
- text: The eighth <code>rect</code> should have an <code>x</code> value of 210.
testString: 'assert($(''rect'').eq(7).attr(''x'') == ''210'', ''The eighth <code>rect</code> should have an <code>x</code> value of 210.'');'
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
- text: The ninth <code>rect</code> should have an <code>x</code> value of 240.
testString: 'assert($(''rect'').eq(8).attr(''x'') == ''240'', ''The ninth <code>rect</code> should have an <code>x</code> value of 240.'');'
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
```
@ -59,24 +59,24 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("y", 0)

30
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md
View File

@ -27,23 +27,23 @@ Change the callback function for the <code>y</code> attribute to set the bars ri
```yml
tests:
- text: The first <code>rect</code> should have a <code>y</code> value of 64.
testString: 'assert($(''rect'').eq(0).attr(''y'') == h - (dataset[0] * 3), ''The first <code>rect</code> should have a <code>y</code> value of 64.'');'
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first <code>rect</code> should have a <code>y</code> value of 64.");'
- text: The second <code>rect</code> should have a <code>y</code> value of 7.
testString: 'assert($(''rect'').eq(1).attr(''y'') == h - (dataset[1] * 3), ''The second <code>rect</code> should have a <code>y</code> value of 7.'');'
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second <code>rect</code> should have a <code>y</code> value of 7.");'
- text: The third <code>rect</code> should have a <code>y</code> value of 34.
testString: 'assert($(''rect'').eq(2).attr(''y'') == h - (dataset[2] * 3), ''The third <code>rect</code> should have a <code>y</code> value of 34.'');'
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third <code>rect</code> should have a <code>y</code> value of 34.");'
- text: The fourth <code>rect</code> should have a <code>y</code> value of 49.
testString: 'assert($(''rect'').eq(3).attr(''y'') == h - (dataset[3] * 3), ''The fourth <code>rect</code> should have a <code>y</code> value of 49.'');'
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth <code>rect</code> should have a <code>y</code> value of 49.");'
- text: The fifth <code>rect</code> should have a <code>y</code> value of 25.
testString: 'assert($(''rect'').eq(4).attr(''y'') == h - (dataset[4] * 3), ''The fifth <code>rect</code> should have a <code>y</code> value of 25.'');'
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth <code>rect</code> should have a <code>y</code> value of 25.");'
- text: The sixth <code>rect</code> should have a <code>y</code> value of 46.
testString: 'assert($(''rect'').eq(5).attr(''y'') == h - (dataset[5] * 3), ''The sixth <code>rect</code> should have a <code>y</code> value of 46.'');'
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth <code>rect</code> should have a <code>y</code> value of 46.");'
- text: The seventh <code>rect</code> should have a <code>y</code> value of 13.
testString: 'assert($(''rect'').eq(6).attr(''y'') == h - (dataset[6] * 3), ''The seventh <code>rect</code> should have a <code>y</code> value of 13.'');'
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh <code>rect</code> should have a <code>y</code> value of 13.");'
- text: The eighth <code>rect</code> should have a <code>y</code> value of 58.
testString: 'assert($(''rect'').eq(7).attr(''y'') == h - (dataset[7] * 3), ''The eighth <code>rect</code> should have a <code>y</code> value of 58.'');'
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth <code>rect</code> should have a <code>y</code> value of 58.");'
- text: The ninth <code>rect</code> should have a <code>y</code> value of 73.
testString: 'assert($(''rect'').eq(8).attr(''y'') == h - (dataset[8] * 3), ''The ninth <code>rect</code> should have a <code>y</code> value of 73.'');'
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth <code>rect</code> should have a <code>y</code> value of 73.");'
```
@ -58,15 +58,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -74,9 +74,9 @@ tests:
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("width", 25)

16
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md
View File

@ -26,11 +26,11 @@ Add an <code>svg</code> node to the <code>body</code> using <code>append()</code
```yml
tests:
- text: Your document should have 1 <code>svg</code> element.
testString: 'assert($(''svg'').length == 1, ''Your document should have 1 <code>svg</code> element.'');'
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
- text: The <code>svg</code> element should have a <code>width</code> attribute set to 500.
testString: 'assert($(''svg'').attr(''width'') == ''500'', ''The <code>svg</code> element should have a <code>width</code> attribute set to 500.'');'
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
- text: The <code>svg</code> element should have a <code>height</code> attribute set to 100.
testString: 'assert($(''svg'').attr(''height'') == ''100'', ''The <code>svg</code> element should have a <code>height</code> attribute set to 100.'');'
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
```
@ -50,15 +50,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
// Add your code above this line
</script>
</body>

12
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md
View File

@ -24,11 +24,11 @@ Select all of the <code>li</code> tags in the document, and change their text to
```yml
tests:
- text: 'There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.'
testString: 'assert($(''li'').text().match(/list item/g).length == 3, ''There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.'');'
testString: 'assert($("li").text().match(/list item/g).length == 3, "There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.");'
- text: Your code should access the <code>d3</code> object.
testString: 'assert(code.match(/d3/g), ''Your code should access the <code>d3</code> object.'');'
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
- text: Your code should use the <code>selectAll</code> method.
testString: 'assert(code.match(/\.selectAll/g), ''Your code should use the <code>selectAll</code> method.'');'
testString: 'assert(code.match(/\.selectAll/g), "Your code should use the <code>selectAll</code> method.");'
```
@ -48,9 +48,9 @@ tests:
</ul>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>

16
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md
View File

@ -28,15 +28,15 @@ Create a scale and set its domain to <code>[250, 500]</code> and range to <code>
```yml
tests:
- text: Your code should use the <code>domain()</code> method.
testString: 'assert(code.match(/\.domain/g), ''Your code should use the <code>domain()</code> method.'');'
testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
- text: 'The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.'
testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), ''The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.'');'
testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.");'
- text: Your code should use the <code>range()</code> method.
testString: 'assert(code.match(/\.range/g), ''Your code should use the <code>range()</code> method.'');'
testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
- text: 'The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.'
testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), ''The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.'');'
testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.");'
- text: The text in the <code>h2</code> should be -102.
testString: 'assert($(''h2'').text() == ''-102'', ''The text in the <code>h2</code> should be -102.'');'
testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'
```
@ -52,9 +52,9 @@ tests:
<script>
// Add your code below this line
const scale = d3.scaleLinear();
// Add your code above this line
const output = scale(50);
d3.select("body")

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md
View File

@ -22,9 +22,9 @@ Set the <code>font-size</code> of the <code>text</code> elements to 25px, and th
```yml
tests:
- text: The labels should all have a <code>fill</code> color of red.
testString: 'assert($(''text'').css(''fill'') == ''rgb(255, 0, 0)'', ''The labels should all have a <code>fill</code> color of red.'');'
testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a <code>fill</code> color of red.");'
- text: The labels should all have a <code>font-size</code> of 25 pixels.
testString: 'assert($(''text'').css(''font-size'') == ''25px'', ''The labels should all have a <code>font-size</code> of 25 pixels.'');'
testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a <code>font-size</code> of 25 pixels.");'
```
@ -39,15 +39,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
@ -57,7 +57,7 @@ tests:
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
@ -66,9 +66,9 @@ tests:
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3)
// Add your code below this line
// Add your code above this line
</script>
</body>

26
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.english.md
View File

@ -26,23 +26,23 @@ Add the <code>style()</code> method to the code in the editor to set the <code>h
```yml
tests:
- text: The first <code>div</code> should have a <code>height</code> of 12 pixels.
testString: 'assert($(''div'').eq(0).css(''height'') == ''12px'', ''The first <code>div</code> should have a <code>height</code> of 12 pixels.'');'
testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
- text: The second <code>div</code> should have a <code>height</code> of 31 pixels.
testString: 'assert($(''div'').eq(1).css(''height'') == ''31px'', ''The second <code>div</code> should have a <code>height</code> of 31 pixels.'');'
testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
- text: The third <code>div</code> should have a <code>height</code> of 22 pixels.
testString: 'assert($(''div'').eq(2).css(''height'') == ''22px'', ''The third <code>div</code> should have a <code>height</code> of 22 pixels.'');'
testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
- text: The fourth <code>div</code> should have a <code>height</code> of 17 pixels.
testString: 'assert($(''div'').eq(3).css(''height'') == ''17px'', ''The fourth <code>div</code> should have a <code>height</code> of 17 pixels.'');'
testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
- text: The fifth <code>div</code> should have a <code>height</code> of 25 pixels.
testString: 'assert($(''div'').eq(4).css(''height'') == ''25px'', ''The fifth <code>div</code> should have a <code>height</code> of 25 pixels.'');'
testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
- text: The sixth <code>div</code> should have a <code>height</code> of 18 pixels.
testString: 'assert($(''div'').eq(5).css(''height'') == ''18px'', ''The sixth <code>div</code> should have a <code>height</code> of 18 pixels.'');'
testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
- text: The seventh <code>div</code> should have a <code>height</code> of 29 pixels.
testString: 'assert($(''div'').eq(6).css(''height'') == ''29px'', ''The seventh <code>div</code> should have a <code>height</code> of 29 pixels.'');'
testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
- text: The eighth <code>div</code> should have a <code>height</code> of 14 pixels.
testString: 'assert($(''div'').eq(7).css(''height'') == ''14px'', ''The eighth <code>div</code> should have a <code>height</code> of 14 pixels.'');'
testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
- text: The ninth <code>div</code> should have a <code>height</code> of 9 pixels.
testString: 'assert($(''div'').eq(8).css(''height'') == ''9px'', ''The ninth <code>div</code> should have a <code>height</code> of 9 pixels.'');'
testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'
```
@ -65,16 +65,16 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
</script>
</body>

68
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md
View File

@ -26,49 +26,49 @@ For the <code>text</code> elements, apply the scales to set the <code>x</code> a
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: 'assert($(''circle'').length == 10, ''Your code should have 10 <code>circle</code> elements.'');'
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
- text: The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(0).attr(''cx'')) == ''91'' && Math.round($(''circle'').eq(0).attr(''cy'')) == ''368'' && $(''circle'').eq(0).attr(''r'') == ''5'', ''The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(0).attr("cx")) == "91" && Math.round($("circle").eq(0).attr("cy")) == "368" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(1).attr(''cx'')) == ''159'' && Math.round($(''circle'').eq(1).attr(''cy'')) == ''181'' && $(''circle'').eq(1).attr(''r'') == ''5'', ''The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(1).attr("cx")) == "159" && Math.round($("circle").eq(1).attr("cy")) == "181" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(2).attr(''cx'')) == ''340'' && Math.round($(''circle'').eq(2).attr(''cy'')) == ''329'' && $(''circle'').eq(2).attr(''r'') == ''5'', ''The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(2).attr("cx")) == "340" && Math.round($("circle").eq(2).attr("cy")) == "329" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(3).attr(''cx'')) == ''131'' && Math.round($(''circle'').eq(3).attr(''cy'')) == ''60'' && $(''circle'').eq(3).attr(''r'') == ''5'', ''The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(3).attr("cx")) == "131" && Math.round($("circle").eq(3).attr("cy")) == "60" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(4).attr(''cx'')) == ''440'' && Math.round($(''circle'').eq(4).attr(''cy'')) == ''237'' && $(''circle'').eq(4).attr(''r'') == ''5'', ''The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(4).attr("cx")) == "440" && Math.round($("circle").eq(4).attr("cy")) == "237" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(5).attr(''cx'')) == ''271'' && Math.round($(''circle'').eq(5).attr(''cy'')) == ''306'' && $(''circle'').eq(5).attr(''r'') == ''5'', ''The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(5).attr("cx")) == "271" && Math.round($("circle").eq(5).attr("cy")) == "306" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(6).attr(''cx'')) == ''361'' && Math.round($(''circle'').eq(6).attr(''cy'')) == ''351'' && $(''circle'').eq(6).attr(''r'') == ''5'', ''The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(6).attr("cx")) == "361" && Math.round($("circle").eq(6).attr("cy")) == "351" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(7).attr(''cx'')) == ''261'' && Math.round($(''circle'').eq(7).attr(''cy'')) == ''132'' && $(''circle'').eq(7).attr(''r'') == ''5'', ''The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(7).attr("cx")) == "261" && Math.round($("circle").eq(7).attr("cy")) == "132" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(8).attr(''cx'')) == ''131'' && Math.round($(''circle'').eq(8).attr(''cy'')) == ''144'' && $(''circle'').eq(8).attr(''r'') == ''5'', ''The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(8).attr("cx")) == "131" && Math.round($("circle").eq(8).attr("cy")) == "144" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.
testString: 'assert(Math.round($(''circle'').eq(9).attr(''cx'')) == ''79'' && Math.round($(''circle'').eq(9).attr(''cy'')) == ''326'' && $(''circle'').eq(9).attr(''r'') == ''5'', ''The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.'');'
testString: 'assert(Math.round($("circle").eq(9).attr("cx")) == "79" && Math.round($("circle").eq(9).attr("cy")) == "326" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: Your code should have 10 <code>text</code> elements.
testString: 'assert($(''text'').length == 10, ''Your code should have 10 <code>text</code> elements.'');'
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
- text: The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(0).attr(''x'')) == ''100'' && Math.round($(''text'').eq(0).attr(''y'')) == ''368'', ''The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(0).attr("x")) == "100" && Math.round($("text").eq(0).attr("y")) == "368", "The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.");'
- text: The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(1).attr(''x'')) == ''168'' && Math.round($(''text'').eq(1).attr(''y'')) == ''181'', ''The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(1).attr("x")) == "168" && Math.round($("text").eq(1).attr("y")) == "181", "The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.");'
- text: The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(2).attr(''x'')) == ''350'' && Math.round($(''text'').eq(2).attr(''y'')) == ''329'', ''The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(2).attr("x")) == "350" && Math.round($("text").eq(2).attr("y")) == "329", "The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.");'
- text: The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(3).attr(''x'')) == ''141'' && Math.round($(''text'').eq(3).attr(''y'')) == ''60'', ''The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(3).attr("x")) == "141" && Math.round($("text").eq(3).attr("y")) == "60", "The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.");'
- text: The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(4).attr(''x'')) == ''449'' && Math.round($(''text'').eq(4).attr(''y'')) == ''237'', ''The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(4).attr("x")) == "449" && Math.round($("text").eq(4).attr("y")) == "237", "The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.");'
- text: The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(5).attr(''x'')) == ''280'' && Math.round($(''text'').eq(5).attr(''y'')) == ''306'', ''The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(5).attr("x")) == "280" && Math.round($("text").eq(5).attr("y")) == "306", "The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.");'
- text: The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(6).attr(''x'')) == ''370'' && Math.round($(''text'').eq(6).attr(''y'')) == ''351'', ''The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(6).attr("x")) == "370" && Math.round($("text").eq(6).attr("y")) == "351", "The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.");'
- text: The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(7).attr(''x'')) == ''270'' && Math.round($(''text'').eq(7).attr(''y'')) == ''132'', ''The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(7).attr("x")) == "270" && Math.round($("text").eq(7).attr("y")) == "132", "The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.");'
- text: The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(8).attr(''x'')) == ''140'' && Math.round($(''text'').eq(8).attr(''y'')) == ''144'', ''The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(8).attr("x")) == "140" && Math.round($("text").eq(8).attr("y")) == "144", "The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.");'
- text: The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.
testString: 'assert(Math.round($(''text'').eq(9).attr(''x'')) == ''88'' && Math.round($(''text'').eq(9).attr(''y'')) == ''326'', ''The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.'');'
testString: 'assert(Math.round($("text").eq(9).attr("x")) == "88" && Math.round($("text").eq(9).attr("y")) == "326", "The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.");'
```
@ -94,34 +94,34 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 60;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
@ -129,9 +129,9 @@ tests:
.text((d) => (d[0] + ", "
+ d[1]))
// Add your code below this line
// Add your code above this line
</script>
</body>

24
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md
View File

@ -28,11 +28,11 @@ Use the <code>yScale</code> variable to create a linear y-axis scale. The domain
```yml
tests:
- text: The text in the <code>h2</code> should be 30.
testString: 'assert(output == 30 && $(''h2'').text() == ''30'', ''The text in the <code>h2</code> should be 30.'');'
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
- text: 'The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), ''The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.'');'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
- text: 'The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.'
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), ''The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.'');'
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
```
@ -58,26 +58,26 @@ tests:
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = undefined;
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")

10
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md
View File

@ -30,9 +30,9 @@ The <code>positionData</code> variable holds a 3-dimensional (3D) array. Use a D
```yml
tests:
- text: The text in the <code>h2</code> should be 8.
testString: 'assert(output == 8 && $(''h2'').text() == ''8'', ''The text in the <code>h2</code> should be 8.'');'
testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
- text: Your code should use the <code>max()</code> method.
testString: 'assert(code.match(/\.max/g), ''Your code should use the <code>max()</code> method.'')'
testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'
```
@ -48,11 +48,11 @@ tests:
<script>
const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
// Add your code below this line
const output = undefined; // Change this line
// Add your code above this line
d3.select("body")
.append("h2")
.text(output)

16
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md
View File

@ -28,13 +28,13 @@ Select the <code>body</code> node, then select all <code>h2</code> elements. Hav
```yml
tests:
- text: Your document should have 9 <code>h2</code> elements.
testString: 'assert($(''h2'').length == 9, ''Your document should have 9 <code>h2</code> elements.'');'
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
- text: The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.
testString: 'assert($(''h2'').text().match(/New Title/g).length == 9, ''The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.'');'
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
- text: Your code should use the <code>data()</code> method.
testString: 'assert(code.match(/\.data/g), ''Your code should use the <code>data()</code> method.'');'
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Your code should use the <code>enter()</code> method.
testString: 'assert(code.match(/\.enter/g), ''Your code should use the <code>enter()</code> method.'');'
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
```
@ -49,11 +49,11 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// Add your code below this line
// Add your code above this line
</script>
</body>

24
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md
View File

@ -27,23 +27,23 @@ Change the <code>text()</code> method so that each <code>h2</code> element displ
```yml
tests:
- text: The first <code>h2</code> should have the text "12 USD".
testString: 'assert($(''h2'').eq(0).text() == "12 USD", ''The first <code>h2</code> should have the text "12 USD".'');'
testString: 'assert($("h2").eq(0).text() == "12 USD", "The first <code>h2</code> should have the text "12 USD".");'
- text: The second <code>h2</code> should have the text "31 USD".
testString: 'assert($(''h2'').eq(1).text() == "31 USD", ''The second <code>h2</code> should have the text "31 USD".'');'
testString: 'assert($("h2").eq(1).text() == "31 USD", "The second <code>h2</code> should have the text "31 USD".");'
- text: The third <code>h2</code> should have the text "22 USD".
testString: 'assert($(''h2'').eq(2).text() == "22 USD", ''The third <code>h2</code> should have the text "22 USD".'');'
testString: 'assert($("h2").eq(2).text() == "22 USD", "The third <code>h2</code> should have the text "22 USD".");'
- text: The fourth <code>h2</code> should have the text "17 USD".
testString: 'assert($(''h2'').eq(3).text() == "17 USD", ''The fourth <code>h2</code> should have the text "17 USD".'');'
testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth <code>h2</code> should have the text "17 USD".");'
- text: The fifth <code>h2</code> should have the text "25 USD".
testString: 'assert($(''h2'').eq(4).text() == "25 USD", ''The fifth <code>h2</code> should have the text "25 USD".'');'
testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth <code>h2</code> should have the text "25 USD".");'
- text: The sixth <code>h2</code> should have the text "18 USD".
testString: 'assert($(''h2'').eq(5).text() == "18 USD", ''The sixth <code>h2</code> should have the text "18 USD".'');'
testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth <code>h2</code> should have the text "18 USD".");'
- text: The seventh <code>h2</code> should have the text "29 USD".
testString: 'assert($(''h2'').eq(6).text() == "29 USD", ''The seventh <code>h2</code> should have the text "29 USD".'');'
testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh <code>h2</code> should have the text "29 USD".");'
- text: The eighth <code>h2</code> should have the text "14 USD".
testString: 'assert($(''h2'').eq(7).text() == "14 USD", ''The eighth <code>h2</code> should have the text "14 USD".'');'
testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth <code>h2</code> should have the text "14 USD".");'
- text: The ninth <code>h2</code> should have the text "9 USD".
testString: 'assert($(''h2'').eq(8).text() == "9 USD", ''The ninth <code>h2</code> should have the text "9 USD".'');'
testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth <code>h2</code> should have the text "9 USD".");'
```
@ -58,15 +58,15 @@ tests:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
// Add your code below this line
.text("New Title");
// Add your code above this line
</script>
</body>