Визуализация данных с диаграммой карт
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта деревьев должна иметь rect элементы с соответствующим class="tile" которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name , data-category и data-value содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend" . User Story # 8: Моя легенда должна иметь rect элементы с соответствующим class="legend-item" . User Story # 9: rect элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value , соответствующее data-value данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных:
- Kickstarter Pledges:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json - Продажа фильмов:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json - Продажа видеоигр:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.