8.9 KiB
title | localeTitle |
---|---|
Bar Graph Project | Графический проект |
Наша цель - изучить основы данных
Визуализация с использованием D3 через этот проект.
Что такое D3.js?
Для тех, кто не знаком с D3, D3.js - это библиотека JavaScript для управления документами на основе данных. D3 помогает вам воплощать данные в жизнь с помощью HTML, SVG и CSS.
D3.js помогает вам прикрепить свои данные к элементам DOM (Document Object Model). Затем вы можете использовать CSS3, HTML и / или SVG для демонстрации этих данных. Наконец, вы можете сделать данные интерактивными с помощью преобразований и переходов, управляемых данными D3.js.
Объяснение проекта:
Сценарий:
Там есть класс студентов онлайн, взаимодействующих с различными темами темы, и дает викторину по этим темам.
Есть 15 тем, и по каждой теме у нас есть несколько учеников, которые прошли викторину и забили в трех категориях: Низкий, Средний и Высокий
Например (данные):
Тема: «1», низкая: 4, середина: 13, высокая: 18
Тема: «2», низкая: 11, середина: 12, высокая: 6
Тема: «3», низкая: 12, середина: 24, высокая: 6 и так далее.
Обратите внимание, что в теме 1 есть ученик 4 + 13 + 8 = 35
и тема 2 имеет 11+12+6 = 29
учеников, а тема 3 имеет 42 ученика и так далее.
Мы хотим сделать интерактивные диаграммы Bar и Pie. Например, наведите курсор мыши на один из столбцов, соответственно изменив круговую диаграмму и наоборот.
С интерактивной комбинацией гистограммы и круговой диаграммы, где на диаграмме отображается количество студентов, которые взаимодействовали с определенной темой (взята на викторине) и круговая диаграмма, показывающая классификацию результатов обучения студентов в категориях «низкий, средний, высокий», мы можем визуализировать наши данные и получить от них больше данных.
Советы и ресурсы:
Пошаговые инструкции:
D3 Введение. Здесь вы можете узнать о выборе, динамических свойствах и переходах в D3.js.
-
В основной функции javascript напишите функцию для обработки гистограммы (гистограмма). Гистограмма покажет общее количество студентов, которые выполнили викторину (взаимодействовали с этой темой) по 15 темам.
- (Вот учебник, в котором вы можете узнать, как сделать гистограмму с использованием библиотеки D3 JavaScript. В первом учебном пособии рассказывается, как сделать версию bare-bones в HTML, а затем более полную диаграмму в Scalable Vector Graphics (SVG) и, наконец, анимированные переходы между представлениями.)
-
Создайте функцию для сопоставления по оси x и добавьте ось x к гистограмме SVG
-
Создайте функцию для отображения оси Y и создайте полосы для гистограммы, чтобы содержать прямоугольники и метки тем.
-
Создайте прямоугольники и метки тем
-
Создайте функцию для обновления баров. Это будет использоваться круговой диаграммой
-
Напишите функцию для обработки pieChart. - круговая диаграмма будет иметь три среза - низкий, средний и высокий, чтобы представлять баллы.
- Учебник, в котором вы можете узнать, как сделать круговую диаграмму, а затем переходы между представлениями и как создать легенду.
-
Создайте svg для круговой диаграммы.
-
Создайте функцию, чтобы нарисовать дуги кусочков пирога - кусочки пирога будут низкими, средними и высокими
-
Создайте функцию для вычисления углов среза пирога.
-
Нарисуйте кусочки пирога.
-
Создайте функцию для обновления круговой диаграммы. Это будет использоваться гистограммой.
-
Рассчитайте общую частоту по сегментам для всей темы.
-
Вычислите общую частоту по состоянию для всего сегмента.
Результат анализа данных и что мы можем сделать из Визуализации:
-
Начальная круговая диаграмма показывает совокупную классификацию всех баллов студентов по всей теме в трех категориях: «низкий, средний, высокий»,
-
Начальная гистограмма, показывающая количество студентов, которые взаимодействовали по этой теме
-
Любая выбранная категория из круговой диаграммы обновит гистограмму, показывая количество студентов, которые взаимодействовали по различным темам, имеющим оценку, принадлежащую к этой конкретной категории.
-
Скриншоты ниже показывают наведение мыши на срез «Средний» и «Высокий» срез круговой диаграммы соответственно и для этого конкретного фрагмента, тематических гистограмм и количества учеников.
- На любой выбранной панели бар-диаграммы будет отображаться круговая диаграмма, показывающая классификацию всех учеников по этой конкретной теме на три категории: «Низкая», «Средняя» и «Высокая». Снимок экрана ниже показывает наведение мыши на тему 2 и для этой конкретной темы, сколько учеников находится в категории Низкий, Средний и Высокий
Ссылки: 1] Примеры из [https://d3js.org 2] D3.js Введение - [https://www.dashingd3js.com/why-build-with-d3js