<section id="description">
Цель: создать приложение <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. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим <code>id="title"</code> . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим <code>id="description"</code> . User Story # 3: Мой choropleth должен иметь графства с соответствующим <code>class="county"</code> которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики <code>data-fips</code> и <code>data-education</code> имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим <code>id="legend"</code> . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство <code>data-education</code> которое соответствует <code>data-education</code> данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта: <ul><li> Данные об образовании в США: <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json</code> </li><li> Данные графства США: <code>https://cdn.freecodecamp.org/testable-projects-fcc/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://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Visualize Data with a Choropleth Map

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank">https://codepen.io/freeCodeCamp/full/KaNGNR</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим <code>id="title"</code> . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим <code>id="description"</code> . User Story # 3: Моя карта деревьев должна иметь <code>rect</code> элементы с соответствующим <code>class="tile"</code> которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства <code>data-name</code> , <code>data-category</code> и <code>data-value</code> содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим <code>id="legend"</code> . User Story # 8: Моя легенда должна иметь <code>rect</code> элементы с соответствующим <code>class="legend-item"</code> . User Story # 9: <code>rect</code> элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство <code>data-value</code> , соответствующее <code>data-value</code> данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных: <ul><li> Kickstarter Pledges: <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json</code> </li><li> Продажа фильмов: <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json</code> </li><li> Продажа видеоигр: <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.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://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Visualize Data with a Treemap Diagram

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк для создания интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге это исправим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Ваша диаграмма должна иметь заголовок с соответствующим <code>id="title"</code> . История пользователя # 2: Ваша диаграмма должна иметь <code>g</code> элемент оси х с соответствующим <code>id="x-axis"</code> . User Story # 3: Ваша диаграмма должна иметь ось y элемента <code>g</code> с соответствующим <code>id="y-axis"</code> . User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий <code>class="tick"</code> . User Story # 5: Ваша диаграмма должна иметь <code>rect</code> элемент для каждой точки данных с соответствующим <code>class="bar"</code> отображающим данные. User Story # 6: В каждом баре должны быть <code>data-date</code> и <code>data-gdp</code> содержащие значения даты и ВВП. User Story # 7: свойства <code>data-date</code> бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства <code>data-gdp</code> элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут <code>data-date</code> и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут <code>data-gdp</code> и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство <code>data-date</code> , соответствующее <code>data-date</code> данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Вы можете создать свой проект, <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://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Visualize Data with a Bar Chart

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank">https://codepen.io/freeCodeCamp/full/bgpXyK</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Я вижу элемент заголовка, который имеет соответствующий <code>id="title"</code> . User Story # 2: Я вижу ось x, которая имеет соответствующий <code>id="x-axis"</code> . User Story # 3: Я вижу ось y, которая имеет соответствующий <code>id="y-axis"</code> . User Story # 4: Я вижу точки, каждая из которых имеет класс <code>dot</code> , которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства <code>data-xvalue</code> и <code>data-yvalue</code> содержащие их соответствующие значения x и y. User Story # 6: Значение <code>data-xvalue</code> <code>data-yvalue</code> и значение <code>data-xvalue</code> <code>data-yvalue</code> каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для <code>data-xvalue</code> целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для <code>data-yvalue</code> (минут) используйте объекты Date. User Story # 7: Значение <code>data-xvalue</code> и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение <code>data-yvalue</code> и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом <code>%M:%S</code> User Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с <code>id="legend"</code> . User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство <code>data-year</code> которое соответствует <code>data-xvalue</code> активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code> Вы можете создать свой проект, <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://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Visualize Data with a Scatterplot Graph

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта тепла должна иметь заголовок с соответствующим <code>id="title"</code> . User Story # 2: Моя карта тепла должна иметь описание с соответствующим <code>id="description"</code> . User Story # 3: Моя карта тепла должна иметь ось x с соответствующим <code>id="x-axis"</code> . User Story # 4: Моя карта тепла должна иметь ось y с соответствующим <code>id="y-axis"</code> . User Story # 5: Моя карта тепла должна иметь <code>rect</code> элементы с <code>class="cell"</code> которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> содержащие их соответствующие значения месяца, года и температуры. User Story # 8: <code>data-month</code> , <code>data-year</code> каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим <code>id="legend"</code> . User Story # 14: Моя легенда должна содержать <code>rect</code> элементы. User Story # 15: <code>rect</code> элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством <code>data-year</code> которое соответствует году <code>data-year</code> активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Вы можете создать свой проект, <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://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>