Визуализация данных с помощью карты Choropleth
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title" . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description" . User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county" которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips и data-education имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend" . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education которое соответствует data-education данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта:
- Данные об образовании в США:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json - Данные графства США:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.