Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
File diff suppressed because one or more lines are too long
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Визуализация данных с помощью карты Choropleth
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank">https://codepen.io/freeCodeCamp/full/EZKqza</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Мой choropleth должен иметь заголовок с соответствующим <code>id="title"</code> . <strong>User Story # 2: У</strong> моего choropleth должен быть элемент описания с соответствующим <code>id="description"</code> . <strong>User Story # 3:</strong> Мой choropleth должен иметь графства с соответствующим <code>class="county"</code> которые представляют данные. <strong>User Story # 4:</strong> должно быть не менее 4 разных цветов заливки, используемых для округов. <strong>User Story # 5:</strong> Мои округа должны иметь характеристики <code>data-fips</code> и <code>data-education</code> имеющие соответствующие значения fips и education. <strong>User Story # 6:</strong> Мой choropleth должен иметь графство для каждой предоставленной точки данных. <strong>User Story # 7:</strong> В округах должны быть значения данных и данных, которые соответствуют данным образца. <strong>User Story # 8:</strong> Мой choropleth должен иметь легенду с соответствующим <code>id="legend"</code> . <strong>User Story # 9:</strong> Для легенды должно быть не менее 4 различных цветов заливки. <strong>User Story # 10:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. <strong>User Story # 11:</strong> Моя подсказка должна иметь свойство <code>data-education</code> которое соответствует <code>data-education</code> данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта: <br><ul><li> <strong>Данные об образовании в США:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Данные графства США:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json</code> </li></ul> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask,</a> если вы застряли. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить эффект наведения на элемент D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода <code>attr()</code> . Затем псевдокласс класса <code>:hover</code> для вашего нового класса содержит правила стиля для любых эффектов зависания. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте метод <code>attr()</code> чтобы добавить класс <code>bar</code> ко всем элементам <code>rect</code> . Это изменит цвет <code>fill</code> на коричневый, если вы нажмете на него. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваши <code>rect</code> элементы должны иметь класс <code>bar</code> .
|
||||
testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.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()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавление всплывающей подсказки к элементу D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент <code>title</code> SVG. <code>title</code> с методом <code>text()</code> для динамического добавления данных в столбцы. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавляйте элемент <code>title</code> под каждым <code>rect</code> узлом. Затем вызовите метод <code>text()</code> с функцией обратного вызова, чтобы текст отображал значение данных. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 9 элементов <code>title</code> .
|
||||
testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
|
||||
- text: Первый элемент <code>title</code> должен иметь текст всплывающей подсказки 12.
|
||||
testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.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))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить атрибуты элементов круга
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала элементы <code>circle</code> для каждой точки <code>dataset</code> и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого <code>circle</code> чтобы отображать их правильно. <code>circle</code> в SVG имеет три основных атрибута. Атрибуты <code>cx</code> и <code>cy</code> - это координаты. Они сообщают D3, где можно расположить <em>центр</em> фигуры на холсте SVG. Радиус (атрибут <code>r</code> ) задает размер <code>circle</code> . Как и <code>rect</code> координата <code>y</code> , атрибут <code>cy</code> для <code>circle</code> измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как <code>data(dataset)</code> запускаются один раз для каждого элемента в <code>dataset</code> . Параметр <code>d</code> в функции обратного вызова относится к текущему элементу в <code>dataset</code> , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например <code>d[0]</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте атрибуты <code>cx</code> , <code>cy</code> и <code>r</code> в элементы <code>circle</code> . Значение <code>cx</code> должно быть первым числом в массиве для каждого элемента в <code>dataset</code> . Значение <code>cy</code> должно основываться на втором номере в массиве, но обязательно показывать диаграмму с правой стороны и не инвертировать. Значение <code>r</code> должно быть 5 для всех кругов. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: 'Первый элемент <code>circle</code> должен иметь значение <code>cx</code> 34, значение <code>cy</code> 422 и значение <code>r</code> 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: 'Второй элемент <code>circle</code> должен иметь значение <code>cx</code> 109, значение <code>cy</code> 220 и значение <code>r</code> 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: 'Третий элемент <code>circle</code> должен иметь значение <code>cx</code> 310, значение <code>cy</code> 380 и значение <code>r</code> 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: 'Элемент четвертого <code>circle</code> должен иметь значение <code>cx</code> 79, значение <code>cy</code> 89 и значение <code>r</code> 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: 'Элемент пятого <code>circle</code> должен иметь значение <code>cx</code> 420, значение <code>cy</code> 280 и значение <code>r</code> 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: 'Элемент шестого <code>circle</code> должен иметь значение <code>cx</code> 233, значение <code>cy</code> 355 и значение <code>r</code> 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: 'Элемент седьмого <code>circle</code> должен иметь значение <code>cx</code> 333, значение <code>cy</code> 404 и значение <code>r</code> 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: 'Элемент восьмого <code>circle</code> должен иметь значение <code>cx</code> 222, значение <code>cy</code> 167 и значение <code>r</code> 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: 'Элемент девятого <code>circle</code> должен иметь значение <code>cx</code> 78, значение <code>cy</code> 180 и значение <code>r</code> 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: 'Элемент десятого <code>circle</code> должен иметь значение <code>cx</code> 21, значение <code>cy</code> 377 и значение <code>r</code> 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавление осей к визуализации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода <code>axisLeft()</code> и <code>axisBottom()</code> для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе <code>xScale</code> в предыдущих задачах: <code>const xAxis = d3.axisBottom(xScale);</code> Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент <code>g</code> . Группа <code>g</code> обозначает группу. В отличие от <code>rect</code> , <code>circle</code> и <code>text</code> , ось является прямой линией, когда она отображается. Потому что это простая форма, используя <code>g</code> works. Последний шаг - применить атрибут <code>transform</code> для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы <code>transforms</code> , но позиционирование оси требует <code>translate</code> . Когда он применяется к элементу <code>g</code> , он перемещает всю группу за и на указанные суммы. Вот пример: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append ( "г") <br> .attr ("transform", "translate (0," + (h - padding) + ")") <br> .call (Xaxis); </blockquote> Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу <code>call()</code> . Ось y работает одинаково, за исключением того, что аргумент <code>translate</code> имеет вид (x, 0). Поскольку <code>translate</code> является строкой в методе <code>attr()</code> выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем <code>yAxis</code> используя метод <code>axisLeft()</code> . Затем визуализируйте ось с помощью элемента <code>g</code> . Не забудьте использовать атрибут <code>transform</code> для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте <code>call()</code> ось. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>axisLeft()</code> с <code>yScale</code> в качестве аргумента.
|
||||
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: 'Элемент <code>g</code> оси y должен иметь атрибут <code>transform</code> для перевода оси по (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: Ваш код должен вызывать <code>yAxis</code> .
|
||||
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить классы с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод <code>attr()</code> для добавления любого элемента HTML к элементу, включая имя класса. Метод <code>attr()</code> работает так же, как это делает <code>style()</code> . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: <code>selection.attr("class", "container");</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>attr()</code> в код в редакторе и поместите класс <code>bar</code> в элементы <code>div</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элементы <code>div</code> должны иметь класс <code>bar</code> .
|
||||
testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
|
||||
- text: Ваш код должен использовать метод <code>attr()</code> .
|
||||
testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавление элементов документа с помощью D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод <code>select()</code> выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: <code>const anchor = d3.select("a");</code> Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном <code>anchor</code> . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: <code>append()</code> и <code>text()</code> . Метод <code>append()</code> принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод <code>text()</code> либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: <blockquote> d3.select ( "UL") <br> .append ( "Ли") <br> .text («Очень важный элемент»); </blockquote> D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте метод <code>select</code> для выбора тега <code>body</code> в документе. Затем <code>append</code> к нему тег <code>h1</code> и добавьте текст «Learning D3» в элемент <code>h1</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>body</code> должно иметь один элемент <code>h1</code> .
|
||||
testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
|
||||
- text: Элемент <code>h1</code> должен иметь в нем текст «Learning D3».
|
||||
testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
|
||||
- text: Ваш код должен получить доступ к объекту <code>d3</code> .
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: Ваш код должен использовать метод <code>select</code> .
|
||||
testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>append</code> .
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
|
||||
- text: Ваш код должен использовать <code>text</code> метод.
|
||||
testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить встроенный стиль в элементы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода <code>style()</code> . Метод <code>style()</code> принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: <code>selection.style("color","blue");</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>style()</code> в код в редакторе, чтобы весь отображаемый текст имел <code>font-family</code> <code>verdana</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элементы <code>h2</code> должны иметь <code>font-family</code> шрифтов verdana.
|
||||
testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить ярлыки в элементы D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 позволяет вам наметить элемент графа, например панель, используя <code>text</code> элемент SVG. Подобно элементу <code>rect</code> , <code>text</code> элемент должен иметь атрибуты <code>x</code> и <code>y</code> , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Код в редакторе уже привязывает данные к каждому новому <code>text</code> элементу. Сначала добавьте <code>text</code> узлы в <code>svg</code> . Затем добавьте атрибуты для координат <code>x</code> и <code>y</code> . Они должны быть рассчитаны так же, как и <code>rect</code> , за исключением того, что значение <code>y</code> для <code>text</code> должно помещать ярлык на 3 единицы выше, чем планка. Наконец, используйте метод D3 <code>text()</code> чтобы установить метку равной значению точки данных. <strong>Заметка</strong> <br> Чтобы ярлык находился выше бара, решите, должно ли значение <code>y</code> для <code>text</code> быть на 3 больше или на 3 меньше значения <code>y</code> для панели. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>text</code> элемент должен иметь метку 12 и значение <code>y</code> 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: Второй <code>text</code> элемент должен иметь метку 31 и значение <code>y</code> 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: Третий <code>text</code> элемент должен иметь метку 22 и значение <code>y</code> 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: Четвертый <code>text</code> элемент должен иметь метку 17 и значение <code>y</code> 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: Пятый <code>text</code> элемент должен иметь метку 25 и значение <code>y</code> 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: Шестой <code>text</code> элемент должен иметь метку 18 и значение <code>y</code> 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: Седьмой <code>text</code> элемент должен иметь метку 29 и значение <code>y</code> 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: Восьмой <code>text</code> элемент должен иметь метку 14 и значение <code>y</code> 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: Девятый <code>text</code> элемент должен иметь метку 9 и значение <code>y</code> 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить ярлыки в круги кругов рассеяния
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обозначьте каждую точку на графике рассеяния, используя <code>text</code> элементы. Текст метки должен быть двумя значениями, разделенными запятой и пробелом. Например, ярлык для первой точки - «34, 78». Установите атрибут <code>x</code> чтобы он был на 5 единиц больше, чем значение, которое вы использовали для атрибута <code>cx</code> на <code>circle</code> . Установите атрибут <code>y</code> же, как это используется для значения <code>cy</code> на <code>circle</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 <code>text</code> элементов.
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- text: 'Первая метка должна иметь текст «34, 78», значение <code>x</code> 39 и значение <code>y</code> 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: 'Вторая метка должна иметь текст «109, 280», в <code>x</code> значении 114, и <code>y</code> значения 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: 'Третья метка должна иметь текст «310, 120», значение <code>x</code> 315 и значение <code>y</code> 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: 'Четвертая метка должна иметь текст «79, 411», значение <code>x</code> 84 и значение <code>y</code> 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: 'Пятая метка должна иметь текст «420, 220», значение <code>x</code> 425 и значение <code>y</code> 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: 'Шестой ярлык должен иметь текст «233, 145», значение <code>x</code> 238 и значение <code>y</code> 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: 'Седьмая метка должна иметь текст «333, 96», значение <code>x</code> 338 и значение <code>y</code> 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: 'Восьмая метка должна иметь текст «222, 333», значение <code>x</code> 227 и значение <code>y</code> 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: 'Девятая метка должна иметь текст «78, 320», значение <code>x</code> 83 и значение <code>y</code> 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: 'Десятая метка должна иметь текст «21, 123», значение <code>x</code> 26 и значение <code>y</code> 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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")
|
||||
.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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Change Styles Based on Data
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Изменение стилей на основе данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе <code>style()</code> для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе <code>style()</code> и включать условную логику. Функция обратного вызова использует параметр <code>d</code> для представления точки данных: <blockquote> selection.style ("color", (d) => { <br> / * Логика, возвращающая цвет, основанный на условии * / <br> }); </blockquote> Метод <code>style()</code> не ограничивается настройкой <code>color</code> - его можно использовать и с другими свойствами CSS. </section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>h2</code> должен иметь <code>color</code> красного цвета.
|
||||
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: Второй <code>h2</code> должен иметь <code>color</code> зеленого цвета.
|
||||
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: Третий <code>h2</code> должен иметь <code>color</code> зеленого цвета.
|
||||
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: ''
|
||||
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: Пятые <code>h2</code> должны иметь <code>color</code> зеленого цвета.
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Change the Color of an SVG Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Изменение цвета элемента SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG <code>rect</code> форма окрашена с атрибутом <code>fill</code> . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>attr()</code> чтобы установить «заливку» всех баров на цвет «флот». </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Все бары должны иметь цвет <code>fill</code> флота.
|
||||
testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a <code>fill</code> color of navy.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Change the Presentation of a Bar Chart
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Изменение презентации диаграммы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса <code>bar</code> 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Во- первых, добавьте <code>margin</code> в 2px в <code>bar</code> класса в <code>style</code> тега. Затем измените функцию обратного вызова в методе <code>style()</code> чтобы она вернула значение в 10 раз по сравнению с исходным значением данных (плюс «px»). <strong>Заметка</strong> <br> Умножение каждой точки данных на <em>одну и</em> ту <em>же</em> константу только изменяет масштаб. Это похоже на масштабирование, и оно не меняет значения базовых данных. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>div</code> должен иметь <code>height</code> 120 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Второй <code>div</code> должен иметь <code>height</code> 310 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Третий <code>div</code> должен иметь <code>height</code> 220 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Четвертый <code>div</code> должен иметь <code>height</code> 170 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Пятый <code>div</code> должен иметь <code>height</code> 250 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Шестой <code>div</code> должен иметь <code>height</code> 180 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Седьмой <code>div</code> должен иметь <code>height</code> 290 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Восьмой <code>div</code> должен иметь <code>height</code> 140 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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: Девятый <code>div</code> должен иметь <code>height</code> 90 пикселей и <code>margin</code> в 2 пикселя.
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
/* Add your code below this line */
|
||||
|
||||
/* Add your code above this line */
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<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
|
||||
.style("height", (d) => (d + "px"))
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Создайте панель для каждой точки данных в наборе
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача добавила только один прямоугольник в элемент <code>svg</code> для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах <code>data()</code> , <code>enter()</code> и SVG для создания и добавления прямоугольника для каждой точки <code>dataset</code> в <code>dataset</code> . Предыдущий вызов показал формат создания и добавления <code>div</code> для каждого элемента в <code>dataset</code> : <blockquote> d3.select ( "тело"). SelectAll ( "DIV") <br> .data (набор данных) <br> .войти() <br> .append ( "DIV") </blockquote> Есть несколько отличий, которые работают с <code>rect</code> элементами вместо <code>divs</code> . <code>rects</code> должны быть добавлены к элементу <code>svg</code> , а не непосредственно к <code>body</code> . Кроме того, вам нужно указать D3, где разместить каждый <code>rect</code> в области <code>svg</code> . Размещение бар будет рассмотрено в следующей задаче. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для создания и добавления <code>rect</code> для каждого элемента в <code>dataset</code> . Бары должны отображать все друг на друга, это будет исправлено в следующей задаче. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш документ должен иметь 9 <code>rect</code> элементы.
|
||||
testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
|
||||
- text: Ваш код должен использовать метод <code>data()</code> .
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>enter()</code> .
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>append()</code> .
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Создайте линейную шкалу с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. <code>Scales</code> - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения <code>x</code> и <code>y</code> соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>scale</code> переменную, чтобы создать линейную шкалу. Затем установите <code>output</code> переменную в шкалу с аргументом ввода 50. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 50.
|
||||
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
|
||||
- text: Ваш код должен использовать метод <code>scaleLinear()</code> .
|
||||
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
|
||||
- text: <code>output</code> переменная должна вызывать <code>scale</code> с аргументом 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Создайте Scatterplot с кругами SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям <code>x</code> и <code>y</code> и используются для позиционирования круга при визуализации. SVG имеет <code>circle</code> тег для создания формы круга. Он очень похож на элементы <code>rect</code> которые вы использовали для гистограммы. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для привязки <code>dataset</code> к новым элементам <code>circle</code> , которые добавляются к холсту SVG. <strong>Заметка</strong> <br> Круги не будут видны, потому что мы еще не установили их атрибуты. Мы сделаем это в следующей задаче. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Display Shapes with SVG
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Отображать фигуры с помощью SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>rect</code> форму в <code>svg</code> используя <code>append()</code> , и присвойте ему атрибут <code>width</code> 25 и атрибут <code>height</code> 100. Также дайте атрибутам <code>rect</code> <code>x</code> и <code>y</code> каждый из которых установлен в 0. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем документе должен быть 1 элемент <code>rect</code> .
|
||||
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>width</code> равный 25.
|
||||
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>height</code> равный 100.
|
||||
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>x</code> равный 0.
|
||||
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
|
||||
- text: ''
|
||||
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Динамическое изменение высоты каждой панели
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Высота каждой панели может быть установлена на значение точки данных в массиве, подобно тому, как значение <code>x</code> было задано динамически. <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова для атрибута <code>height</code> чтобы вернуть значение времени данных 3. <strong>Примечание.</strong> <br> Помните, что умножение всех точек данных на одну и ту же константу масштабирует данные (например, масштабирование). Это помогает увидеть различия между значениями бар в этом примере. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь <code>height</code> 36.
|
||||
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
|
||||
- text: Второй <code>rect</code> должен иметь <code>height</code> 93.
|
||||
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
|
||||
- text: Третий <code>rect</code> должен иметь <code>height</code> 66.
|
||||
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
|
||||
- text: Четвертый <code>rect</code> должен иметь <code>height</code> 51.
|
||||
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
|
||||
- text: Пятый <code>rect</code> должен иметь <code>height</code> 75.
|
||||
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
|
||||
- text: Шестой <code>rect</code> должен иметь <code>height</code> 54.
|
||||
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
|
||||
- text: Седьмой <code>rect</code> должен иметь <code>height</code> 87.
|
||||
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
|
||||
- text: Восьмой <code>rect</code> должен иметь <code>height</code> 42.
|
||||
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
|
||||
- text: Девятый <code>rect</code> должен иметь <code>height</code> 27.
|
||||
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth <code>rect</code> should have a <code>height</code> of 27.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Динамически устанавливать координаты для каждого бара
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала и добавила прямоугольник к элементу <code>svg</code> для каждой точки в <code>dataset</code> для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами <code>x</code> и <code>y</code> . Они сообщают D3, где начать рисовать фигуру в области <code>svg</code> . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение <code>y</code> остается неизменным (в 0) для всех баров. Однако значение <code>x</code> должно изменяться при добавлении новых баров. Помните, что большие значения <code>x</code> перемещают элементы дальше вправо. По мере прохождения элементов массива в <code>dataset</code> значение x должно увеличиваться. Метод <code>attr()</code> в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно <code>d</code> ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат: <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote> Важно отметить, что вам не нужно писать цикл <code>for</code> или использовать <code>forEach()</code> для перебора элементов в наборе данных. Напомним, что метод <code>data()</code> анализирует набор данных, и любой метод, который привязан после того, как <code>data()</code> запускается один раз для каждого элемента в наборе данных. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова атрибута <code>x</code> чтобы он возвращал значение индекса 30. <strong>Примечание.</strong> <br> Каждый бар имеет ширину 25, поэтому увеличение каждого значения <code>x</code> на 30 добавляет некоторое пространство между столбцами. Любое значение, большее 25, будет работать в этом примере. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь значение <code>x</code> 0.
|
||||
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
|
||||
- text: Второй <code>rect</code> должен иметь значение <code>x</code> 30.
|
||||
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
|
||||
- text: Третий <code>rect</code> должен иметь значение <code>x</code> 60.
|
||||
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
|
||||
- text: Четвертый <code>rect</code> должен иметь значение <code>x</code> 90.
|
||||
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
|
||||
- text: Пятый <code>rect</code> должен иметь значение <code>x</code> 120.
|
||||
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
|
||||
- text: Шестой <code>rect</code> должен иметь значение <code>x</code> 150.
|
||||
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
|
||||
- text: Седьмой <code>rect</code> должен иметь значение <code>x</code> 180.
|
||||
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
|
||||
- text: Восьмой <code>rect</code> должен иметь значение <code>x</code> 210.
|
||||
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
|
||||
- text: Девятый <code>rect</code> должен иметь значение <code>x</code> 240.
|
||||
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Invert SVG Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Инвертировать элементы SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата <code>x</code> из 0 помещает фигуру на левый край области SVG. Координата <code>y</code> из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения <code>x</code> нажимают прямоугольник вправо. Более высокие значения <code>y</code> выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления <code>y</code> координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата <code>y</code> должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты <code>y</code> из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата <code>y</code> будет равна 99. Координата <code>y</code> которая равна <code>y = heightOfSVG - heightOfBar</code> , поместит бары вправо-вверх. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова для атрибута <code>y</code> чтобы установить бары вправо-вверх. Помните, что <code>height</code> бара в 3 раза превышает значение <code>d</code> . <strong>Заметка</strong> <br> В общем случае соотношение <code>y = h - m * d</code> , где <code>m</code> - постоянная, которая масштабирует точки данных. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь значение <code>y</code> 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: Второй <code>rect</code> должен иметь значение <code>y</code> 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: Третий <code>rect</code> должен иметь значение <code>y</code> 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: Четвертый <code>rect</code> должен иметь значение <code>y</code> 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: Пятый <code>rect</code> должен иметь значение <code>y</code> 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: Шестой <code>rect</code> должен иметь значение <code>y</code> 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: Седьмой <code>rect</code> должен иметь значение <code>y</code> 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: ''
|
||||
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: ''
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Learn About SVG in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Узнайте о SVG в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> SVG означает <code>Scalable Vector Graphics</code> . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны <code>svg</code> теге HTML <code>svg</code> . CSS может быть масштабируемым, когда стили используют относительные единицы (например, <code>vh</code> , <code>vw</code> или проценты), но использование SVG более гибко для создания визуализации данных. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте узел <code>svg</code> в <code>body</code> используя <code>append()</code> . Дайте ему атрибут <code>width</code> установленный для предоставленного <code>w</code> константы, и атрибут <code>height</code> установленный для предоставленной постоянной <code>h</code> используя метод <code>attr()</code> для каждого. Вы увидите его на выходе, потому что в теге <code>style</code> используется <code>background-color</code> розового <code>background-color</code> . <strong>Заметка</strong> <br> Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем документе должен быть 1 элемент <code>svg</code> .
|
||||
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
|
||||
- text: Элемент <code>svg</code> должен иметь атрибут <code>width</code> равный 500.
|
||||
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
|
||||
- text: Элемент <code>svg</code> должен иметь атрибут <code>height</code> равный 100.
|
||||
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Select a Group of Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Выберите группу элементов с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 также имеет метод <code>selectAll()</code> для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: <code>const anchors = d3.selectAll("a");</code> Как и метод <code>select()</code> , <code>selectAll()</code> поддерживает цепочку методов, и вы можете использовать ее другими способами. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выберите все теги <code>li</code> в документе и измените их текст на «элемент списка», связав метод <code>.text()</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'На странице должно быть 3 элемента <code>li</code> , а текст в каждом должен содержать «элемент списка». Капитализация и интервал должны соответствовать точно.'
|
||||
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: Ваш код должен получить доступ к объекту <code>d3</code> .
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: Ваш код должен использовать метод <code>selectAll</code> .
|
||||
testString: 'assert(code.match(/\.selectAll/g), "Your code should use the <code>selectAll</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Set a Domain and a Range on a Scale
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Установка домена и диапазона по шкале
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси <code>x</code> на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы <code>domain()</code> и <code>range()</code> задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример: <blockquote> // Установить домен <br> // Область охватывает набор входных значений <br> scale.domain ([50, 480]); <br> // Установить диапазон <br> // Диапазон охватывает набор выходных значений <br> scale.range ([10, 500]); <br> масштаб (50) // Возвращает 10 <br> масштаб (480) // Возвращает 500 <br> масштаб (325) // Возвращает 323.37 <br> масштаб (750) // Возвращает 807.67 <br> d3.scaleLinear () </blockquote> Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте масштаб и установите его домен в <code>[250, 500]</code> и диапазон до <code>[10, 150]</code> . <strong>Заметка</strong> <br> Вы можете связать методы <code>domain()</code> и <code>range()</code> с переменной <code>scale</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>domain()</code> .
|
||||
testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
|
||||
- text: '<code>domain()</code> шкалы должен быть установлен в <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: Ваш код должен использовать метод <code>range()</code> .
|
||||
testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
|
||||
- text: '<code>range()</code> шкалы должен быть установлен на <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: Текст в <code>h2</code> должен быть -102.
|
||||
testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
const scale = d3.scaleLinear();
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Style D3 Labels
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Стильные этикетки D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Методы D3 могут добавлять стили к ярлыкам бара. Атрибут <code>fill</code> устанавливает цвет текста для <code>text</code> узла. Метод <code>style()</code> устанавливает правила CSS для других стилей, таких как «font-family» или «font-size». </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>font-size</code> для <code>text</code> элементов на 25 пикселей, а цвет текста - красный. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На этикетках должен быть красный цвет <code>fill</code> .
|
||||
testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a <code>fill</code> color of red.");'
|
||||
- text: Все метки должны иметь <code>font-size</code> 25 пикселей.
|
||||
testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a <code>font-size</code> of 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Обновление высоты элемента динамически
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте <code>div</code> для каждой точки данных в массиве. 2) Дайте каждому <code>div</code> динамическую высоту, используя функцию обратного вызова в методе <code>style()</code> которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: <code>selection.style("cssProperty", (d) => d)</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>style()</code> в код в редакторе, чтобы установить свойство <code>height</code> для каждого элемента. Используйте функцию обратного вызова, чтобы вернуть значение точки данных с добавленной к ней строкой «px». </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>div</code> должен иметь <code>height</code> 12 пикселей.
|
||||
testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
|
||||
- text: Второй <code>div</code> должен иметь <code>height</code> 31 пиксель.
|
||||
testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
|
||||
- text: Третий <code>div</code> должен иметь <code>height</code> 22 пикселя.
|
||||
testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
|
||||
- text: Четвертый <code>div</code> должен иметь <code>height</code> 17 пикселей.
|
||||
testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
|
||||
- text: Пятый <code>div</code> должен иметь <code>height</code> 25 пикселей.
|
||||
testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
|
||||
- text: Шестой <code>div</code> должен иметь <code>height</code> 18 пикселей.
|
||||
testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
|
||||
- text: Седьмой <code>div</code> должен иметь <code>height</code> 29 пикселей.
|
||||
testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
|
||||
- text: Восьмой <code>div</code> должен иметь <code>height</code> 14 пикселей.
|
||||
testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
|
||||
- text: Девятый <code>div</code> должен иметь <code>height</code> 9 пикселей.
|
||||
testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте предварительно заданную шкалу для размещения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты <code>x</code> и <code>y</code> для <code>rect</code> или <code>text</code> элементов, или <code>cx</code> и <code>cy</code> для <code>circles</code> . Вот пример: <blockquote> форма <br> .attr ("x", (d) => xScale (d [0])) </blockquote> Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе <code>text()</code> для всплывающей подсказки или метки. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>xScale</code> и <code>yScale</code> чтобы <code>yScale</code> <code>circle</code> и <code>text</code> фигуры на холст SVG. Для <code>circles</code> применяйте шкалы для установки атрибутов <code>cx</code> и <code>cy</code> . Дайте им радиус 5 единиц. Для <code>text</code> элементов примените шкалы для установки атрибутов <code>x</code> и <code>y</code> . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в <code>xScale</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: Первый элемент <code>circle</code> должен иметь значение <code>cx</code> приблизительно 91 и значение <code>cy</code> приблизительно 368 после применения шкал. Он также должен иметь значение <code>r</code> 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: Второй элемент <code>circle</code> должен иметь значение <code>cx</code> приблизительно 159 и значение <code>cy</code> приблизительно 181 после применения шкал. Он также должен иметь значение <code>r</code> 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: Элемент третьего <code>circle</code> должен иметь значение <code>cx</code> приблизительно 340 и значение <code>cy</code> приблизительно 329 после применения весов. Он также должен иметь значение <code>r</code> 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: Элемент четвертого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 131 и значение <code>cy</code> приблизительно 60 после применения весов. Он также должен иметь значение <code>r</code> 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: Элемент пятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 440 и значение <code>cy</code> приблизительно 237 после применения весов. Он также должен иметь значение <code>r</code> 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: Элемент шестого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 271 и значение <code>cy</code> приблизительно 306 после применения шкал. Он также должен иметь значение <code>r</code> 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: Элемент седьмого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 361 и значение <code>cy</code> приблизительно 351 после применения весов. Он также должен иметь значение <code>r</code> 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: Элемент восьмого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 261 и значение <code>cy</code> приблизительно 132 после применения шкал. Он также должен иметь значение <code>r</code> 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: Элемент девятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 131 и значение <code>cy</code> приблизительно 144 после применения шкал. Он также должен иметь значение <code>r</code> 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: Элемент десятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 79 и значение <code>cy</code> приблизительно 326 после применения весов. Он также должен иметь значение <code>r</code> 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: Ваш код должен содержать 10 <code>text</code> элементов.
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- text: Первая метка должна иметь значение <code>x</code> приблизительно 100 и значение <code>y</code> приблизительно 368 после применения весов.
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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: ''
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Использование динамических весов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Методы D3 <code>min()</code> и <code>max()</code> полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод <code>domain()</code> передает информацию в шкалу о значениях необработанных данных для графика. Метод <code>range()</code> дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод <code>max()</code> с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( <code>w</code> ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. <blockquote> const dataset = [ <br> [34, 78], <br> [109, 280], <br> [310, 120], <br> [79, 411], <br> [420, 220], <br> [233, 145], <br> [333, 96], <br> [222, 333], <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Заполнение между границей холста SVG и графиком <br> const padding = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (набор данных, (d) => d [0])]) <br> .range ([padding, w - padding]); </blockquote> Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод <code>range()</code> заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500). </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте переменную <code>yScale</code> для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( <code>h</code> ) и включать прокладку. <strong>Заметка</strong> <br> Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 30.
|
||||
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
|
||||
- text: '<code>domain()</code> yScale должен быть эквивалентен <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: ''
|
||||
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 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")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте функции d3.max и d3.min для поиска минимальных и максимальных значений в наборе данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 method <code>domain()</code> и <code>range()</code> устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - <code>min()</code> и <code>max()</code> чтобы вернуть эту информацию. Вот пример: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Возвращает 6 <br> d3.max (exampleData) // Возвращает 234 </blockquote> Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы <code>min()</code> и <code>max()</code> принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова <code>d</code> для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Возвращает наименьшее число из первых элементов <br> const minX = d3.min (locationData, (d) => d [0]); <br> // minX сравнивается с 1, 6 и 8 и устанавливается в 1 </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Переменная <code>positionData</code> содержит трехмерный (3D) массив. Используйте метод D3, чтобы найти максимальное значение координаты z (третье значение) из массивов и сохранить его в <code>output</code> переменной. <strong>Заметка</strong> <br> Интересный факт - D3 может отображать 3D-массивы. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 8.
|
||||
testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
|
||||
- text: Ваш код должен использовать метод <code>max()</code> .
|
||||
testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<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)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Work with Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Работа с данными в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод <code>data()</code> используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод <code>enter()</code> . Когда метод <code>enter()</code> комбинируется с методом <code>data()</code> , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент <code>ul</code> и создает новый элемент списка в зависимости от количества записей в массиве: <blockquote> <Тело> <br> <UL> </ UL> <br> <Скрипт> <br> const dataset = ["a", "b", "c"]; <br> d3.select ( "UL"). SelectAll ( "Ли") <br> .data (набор данных) <br> .войти() <br> .append ( "Ли") <br> .text («Новый элемент»); <br> </ Скрипт> <br> </ Body> </blockquote> Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать <code>ul</code> на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод <code>data()</code> проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод <code>enter()</code> видит, что на странице нет элементов <code>li</code> , но для этого требуется 3 (по одному для каждой части данных в <code>dataset</code> ). Новые элементы <code>li</code> добавляются в <code>ul</code> и имеют текст «Новый элемент». </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выберите узел <code>body</code> , затем выберите все элементы <code>h2</code> . Создайте D3 и добавьте тег <code>h2</code> для каждого элемента массива <code>dataset</code> . Текст в <code>h2</code> должен содержать «Новое название». Ваш код должен использовать методы <code>data()</code> и <code>enter()</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш документ должен содержать 9 <code>h2</code> элементов.
|
||||
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
|
||||
- text: Текст в элементах <code>h2</code> должен указывать «Новое название». Капитализация и интервал должны соответствовать точно.
|
||||
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: Ваш код должен использовать метод <code>data()</code> .
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>enter()</code> .
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Работа с динамическими данными в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последние две проблемы охватывают основы динамического отображения данных с помощью D3 с использованием методов <code>data()</code> и <code>enter()</code> . Эти методы берут набор данных и вместе с методом <code>append()</code> создают новый элемент DOM для каждой записи в наборе данных. В предыдущей задаче вы создали новый элемент <code>h2</code> для каждого элемента массива <code>dataset</code> , но все они содержали один и тот же текст «Новое название». Это связано с тем, что вы не использовали данные, привязанные к каждому из элементов <code>h2</code> . Метод D3 <code>text()</code> может принимать строку или функцию обратного вызова в качестве аргумента: <code>selection.text((d) => d)</code> В приведенном выше примере параметр <code>d</code> ссылается на одну запись в наборе данных, которая связана с выбором к. Используя текущий пример как контекст, первый элемент <code>h2</code> привязан к 12, второй элемент <code>h2</code> привязан к 31, третий элемент <code>h2</code> привязан к 22 и так далее. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените метод <code>text()</code> чтобы каждый элемент <code>h2</code> отображал соответствующее значение из массива <code>dataset</code> с одним пробелом и «USD». Например, первый заголовок должен быть «12 долларов США». </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>h2</code> должен иметь текст «12 USD».
|
||||
testString: 'assert($("h2").eq(0).text() == "12 USD", "The first <code>h2</code> should have the text "12 USD".");'
|
||||
- text: Второй <code>h2</code> должен иметь текст «31 USD».
|
||||
testString: 'assert($("h2").eq(1).text() == "31 USD", "The second <code>h2</code> should have the text "31 USD".");'
|
||||
- text: Третий <code>h2</code> должен иметь текст «22 USD».
|
||||
testString: 'assert($("h2").eq(2).text() == "22 USD", "The third <code>h2</code> should have the text "22 USD".");'
|
||||
- text: Четвертый <code>h2</code> должен иметь текст «17 USD».
|
||||
testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth <code>h2</code> should have the text "17 USD".");'
|
||||
- text: Пятый <code>h2</code> должен иметь текст «25 USD».
|
||||
testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth <code>h2</code> should have the text "25 USD".");'
|
||||
- text: Шестой <code>h2</code> должен иметь текст «18 USD».
|
||||
testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth <code>h2</code> should have the text "18 USD".");'
|
||||
- text: Седьмой <code>h2</code> должен иметь текст «29 USD».
|
||||
testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh <code>h2</code> should have the text "29 USD".");'
|
||||
- text: Восьмой <code>h2</code> должен иметь текст «14 USD».
|
||||
testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth <code>h2</code> should have the text "14 USD".");'
|
||||
- text: Девятый <code>h2</code> должен иметь текст «9 USD».
|
||||
testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth <code>h2</code> should have the text "9 USD".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Доступ к данным JSON из API
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В предыдущей задаче вы видели, как получить данные JSON от FreeCodeCamp Cat Photo API. Теперь вы более подробно рассмотрите возвращенные данные, чтобы лучше понять формат JSON. Вспомните некоторые обозначения в JavaScript: <blockquote> [] -> Квадратные скобки представляют собой массив <br> {} -> Кудрявые скобки представляют собой объект <br> "" -> Двойные кавычки представляют собой строку. Они также используются для ключевых имен в JSON </blockquote> Понимание структуры данных, возвращаемых API, важно, поскольку оно влияет на то, как вы извлекаете нужные значения. Справа нажмите кнопку «Получить сообщение», чтобы загрузить JavaScript-код FreeCodeCamp Cat Photo API JSON в HTML. Первый и последний символы, которые вы видите в данных JSON, являются квадратными скобками <code>[ ]</code> . Это означает, что возвращаемые данные представляют собой массив. Второй символ в данных JSON - кудрявый <code>{</code> скобка, которая запускает объект. Посмотрев внимательно, вы увидите, что есть три отдельных объекта. Данные JSON представляют собой массив из трех объектов, каждый из которых содержит информацию о фотографии кота. Вы узнали ранее, что объекты содержат пары «ключ-значение», разделенные запятыми. Например, в примере «Кошка» первый объект имеет <code>"id":0</code> где «id» - это ключ, а 0 - его соответствующее значение. Аналогично, есть ключи для «imageLink», «altText» и «codeNames». У каждого объекта фотокамеры есть такие же клавиши, но с разными значениями. Еще одна интересная пара «ключ-значение» в первом объекте - <code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> . Здесь «codeNames» - это ключ, а его значение представляет собой массив из трех строк. Возможно иметь массивы объектов, а также ключ с массивом в качестве значения. Помните, как обращаться к данным в массивах и объектах. Массивы используют скобку для доступа к определенному индексу элемента. Для доступа к значению данного свойства объекты используют либо скобку, либо точечную нотацию. Вот пример, который печатает «altText» первой фотографии кота - обратите внимание, что проанализированные данные JSON в редакторе сохраняются в переменной <code>json</code> : <blockquote> console.log (JSON [0] .altText); <br> // Печатает «Белый кот в зеленой шляпе в форме дыни на голове». </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Для кошки с «id» из 2, напечатайте на консоли второе значение в массиве <code>codeNames</code> . Чтобы получить доступ к значению, вы должны использовать скобки и точечную нотацию на объекте (который сохраняется в переменной <code>json</code> ). </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать скобки и точечные обозначения для доступа к правильному кодовому имени и распечатать «Loki» на консоли.
|
||||
testString: 'assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[("|")codeNames\1\]\[1\])/g), "Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Изменить текст с помощью кнопки «События»
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда происходит событие клика, вы можете использовать JavaScript для обновления элемента HTML. Например, когда пользователь нажимает кнопку «Получить сообщение», он меняет текст элемента с <code>message</code> класса, чтобы сказать «Вот сообщение». Это работает, добавив следующий код в событие click: <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте код внутри обработчика события <code>onclick</code> чтобы изменить текст внутри элемента <code>message</code> чтобы сказать «Вот сообщение». </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>document.getElementsByClassName</code> чтобы выбрать элемент с <code>message</code> класса и установить его <code>textContent</code> в заданную строку.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?("|")Here is the message\2/g), "Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Преобразование данных JSON в HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь, когда вы получаете данные из JSON API, вы можете отобразить его в HTML. Вы можете использовать метод <code>forEach</code> для циклического прохождения данных, поскольку объекты фотографии cat хранятся в массиве. По мере перехода к каждому элементу вы можете изменить элементы HTML. Сначала объявите html-переменную с <code>var html = "";</code> , Затем прокрутите JSON, добавив HTML к переменной, которая обертывает имена ключей в <code>strong</code> тегах, а затем значение. Когда цикл закончен, вы его визуализируете. Вот код, который делает это: <blockquote> json.forEach (function (val) { <br> var keys = Object.keys (val); <br> html + = "<div class = 'cat'>"; <br> keys.forEach (функция (ключ) { <br> html + = "<strong>" + ключ + "</ strong>:" + val [key] + "<br>"; <br> }); <br> html + = "</ div> <br>"; <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен хранить данные в переменной <code>html</code>
|
||||
testString: 'assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), "Your code should store the data in the <code>html</code> variable");'
|
||||
- text: Ваш код должен использовать метод <code>forEach</code> для обработки данных JSON из API.
|
||||
testString: 'assert(code.match(/json\.forEach/g), "Your code should use a <code>forEach</code> method to loop over the JSON data from the API.");'
|
||||
- text: Ваш код должен обернуть имена ключевых слов <code>strong</code> тегами.
|
||||
testString: 'assert(code.match(/<strong>.+<\/strong>/g), "Your code should wrap the key names in <code>strong</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 'Получите данные геолокации, чтобы найти GPS-координаты пользователя'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Еще одна интересная вещь, которую вы можете сделать, - это доступ к текущему местоположению вашего пользователя. Каждый браузер имеет встроенный навигатор, который может предоставить вам эту информацию. Навигатор получит текущую долготу и широту пользователя. Вы увидите приглашение разрешить или заблокировать этот сайт, зная ваше текущее местоположение. Задача может быть завершена в любом случае, если код верен. Выбрав allow, вы увидите, что текст на выходном телефоне изменится на широту и долготу. Вот код, который делает это: <blockquote> if (navigator.geolocation) { <br> navigator.geolocation.getCurrentPosition (функция (позиция) { <br> document.getElementById ('data'). innerHTML = "широта:" + position.coords.latitude + "<br> долгота:" + position.coords.longitude; <br> }); <br> } </blockquote> Во-первых, он проверяет <code>navigator.geolocation</code> объекта <code>navigator.geolocation</code> . Если это так, <code>getCurrentPosition</code> метод <code>getCurrentPosition</code> для этого объекта, который инициирует асинхронный запрос для позиции пользователя. Если запрос выполнен успешно, выполняется функция обратного вызова в методе. Эта функция осуществляет доступ к значениям объекта <code>position</code> для широты и долготы с использованием точечной нотации и обновляет HTML. </section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/navigator\.geolocation\.getCurrentPosition/g), "Your code should use <code>navigator.geolocation</code> to access the user's current location.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/position\.coords\.latitude/g), "Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/position\.coords\.longitude/g), "Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")data\1\s*?\)\.innerHTML/g), "You should display the user's position within the <code>data</code> div element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Получить JSON с помощью метода XMLHttpRequest JavaScript
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обновите код для создания и отправки запроса «GET» в FreeCodeCamp Cat Photo API. Затем нажмите кнопку «Получить сообщение». Функция AJAX заменит текст «Сообщение будет здесь» с исходным выходом JSON из API. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: Ваш код должен использовать <code>open</code> метод для инициализации запроса «GET» в FreeCodeCamp Cat Photo API.
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")GET\1\s*?,\s*?("|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.send\(\s*\)/g), "Your code should use the <code>send</code> method to send the request.");'
|
||||
- text: В вашем коде должен быть обработчик события <code>onload</code> установленный на функцию.
|
||||
testString: 'assert(code.match(/\.onload\s*=\s*function\(\s*?\)\s*?{/g), "Your code should have an <code>onload</code> event handler set to a function.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/JSON\.parse\(.*\.responseText\)/g), "Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.");'
|
||||
- text: Ваш код должен получить элемент с <code>message</code> класса и изменить его внутренний HTML на строку данных JSON.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 'Ручка Нажмите «События» с помощью JavaScript, используя свойство onclick'
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")getMessage\1\s*?\)/g), "Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.");'
|
||||
- text: ''
|
||||
testString: 'assert(typeof document.getElementById("getMessage").onclick === "function", "Your code should add an <code>onclick</code> event handler.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Опубликовать данные с помощью метода XMLHttpRequest JavaScript
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "POST" request to the server.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.setRequestHeader\(\s*?("|")Content-Type\1\s*?,\s*?("|")text\/plain\2\s*?\)/g), "Your code should use the <code>setRequestHeader</code> method.");'
|
||||
- text: В вашем коде должен быть <code>onreadystatechange</code> события <code>onreadystatechange</code> установленный на функцию.
|
||||
testString: 'assert(code.match(/\.onreadystatechange\s*?=/g), "Your code should have an <code>onreadystatechange</code> event handler set to a function.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.send\(\s*?userName\s*?\)/g), "Your code should use the <code>send</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('sendMessage').onclick=function(){
|
||||
|
||||
var userName=document.getElementById('name').value;
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Предварительный фильтр JSON для получения необходимых данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Если вы не хотите отображать каждую фотографию кота, которую вы получаете из FreeCodeCamp Cat Photo API, вы можете предварительно фильтровать JSON перед ее прокруткой. Учитывая , что данные JSON хранится в массиве, вы можете использовать <code>filter</code> метод , чтобы отфильтровать кошку, ключ «Идентификатор» имеет значение 1. Вот код , чтобы сделать это: <blockquote> json = json.filter (функция (val) { <br> return (val.id! == 1); <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте код, чтобы <code>filter</code> данные json, чтобы удалить кошку с «id» значением 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>filter</code> .
|
||||
testString: 'assert(code.match(/json\.filter/g), "Your code should use the <code>filter</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Отображение изображений из источников данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последние несколько проблем показали, что каждый объект в массиве JSON содержит ключ <code>imageLink</code> со значением, которое является URL-адресом изображения кошки. Когда вы перебираете эти объекты, вы можете использовать это свойство <code>imageLink</code> для отображения этого изображения в элементе <code>img</code> . Вот код, который делает это: <code>html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте код, чтобы использовать свойства <code>imageLink</code> и <code>altText</code> в теге <code>img</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Вы должны использовать свойство <code>imageLink</code> для отображения изображений.
|
||||
testString: 'assert(code.match(/val\.imageLink/g), "You should use the <code>imageLink</code> property to display the images.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user