Визуализация данных с помощью карты тепла
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/JEXgeY . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта тепла должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя карта тепла должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта тепла должна иметь ось x с соответствующим id="x-axis" . User Story # 4: Моя карта тепла должна иметь ось y с соответствующим id="y-axis" . User Story # 5: Моя карта тепла должна иметь rect элементы с class="cell" которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства data-month , data-year , data-temp содержащие их соответствующие значения месяца, года и температуры. User Story # 8: data-month , data-year каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим id="legend" . User Story # 14: Моя легенда должна содержать rect элементы. User Story # 15: rect элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством data-year которое соответствует году data-year активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.