Визуализировать данные с помощью диаграммы Scatterplot
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/bgpXyK . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать 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: Я вижу ось x, которая имеет соответствующий id="x-axis" . User Story # 3: Я вижу ось y, которая имеет соответствующий id="y-axis" . User Story # 4: Я вижу точки, каждая из которых имеет класс dot , которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства data-xvalue и data-yvalue содержащие их соответствующие значения x и y. User Story # 6: Значение data-xvalue data-yvalue и значение data-xvalue data-yvalue каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для data-xvalue целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для data-yvalue (минут) используйте объекты Date. User Story # 7: Значение data-xvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение data-yvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом %M:%S User Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с id="legend" . User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство data-year которое соответствует data-xvalue активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.