Визуализация данных с помощью диаграммы
Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/GrZVaM . Выполните приведенные ниже истории пользователей и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать 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" . История пользователя # 2: Ваша диаграмма должна иметь g элемент оси х с соответствующим id="x-axis" . User Story # 3: Ваша диаграмма должна иметь ось y элемента g с соответствующим id="y-axis" . User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick" . User Story # 5: Ваша диаграмма должна иметь rect элемент для каждой точки данных с соответствующим class="bar" отображающим данные. User Story # 6: В каждом баре должны быть data-date и data-gdp содержащие значения даты и ВВП. User Story # 7: свойства data-date бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date , соответствующее data-date данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json Вы можете создать свой проект, на CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.