freeCodeCamp/guide/russian/miscellaneous/bar-graph-project/index.md

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) и, наконец, анимированные переходы между представлениями.)

• Создание SVG для гистограммы

• Создайте функцию для сопоставления по оси x и добавьте ось x к гистограмме SVG

• Создайте функцию для отображения оси Y и создайте полосы для гистограммы, чтобы содержать прямоугольники и метки тем.

• Создайте прямоугольники и метки тем

• Создайте функцию для обновления баров. Это будет использоваться круговой диаграммой

• Напишите функцию для обработки pieChart. - круговая диаграмма будет иметь три среза - низкий, средний и высокий, чтобы представлять баллы.

  • Учебник, в котором вы можете узнать, как сделать круговую диаграмму, а затем переходы между представлениями и как создать легенду.

• Создайте svg для круговой диаграммы.

• Создайте функцию, чтобы нарисовать дуги кусочков пирога - кусочки пирога будут низкими, средними и высокими

• Создайте функцию для вычисления углов среза пирога.

• Нарисуйте кусочки пирога.

• Создайте функцию для обновления круговой диаграммы. Это будет использоваться гистограммой.

• Рассчитайте общую частоту по сегментам для всей темы.

• Вычислите общую частоту по состоянию для всего сегмента.

Результат анализа данных и что мы можем сделать из Визуализации:

• Начальная круговая диаграмма показывает совокупную классификацию всех баллов студентов по всей теме в трех категориях: «низкий, средний, высокий»,

• Начальная гистограмма, показывающая количество студентов, которые взаимодействовали по этой теме

• Любая выбранная категория из круговой диаграммы обновит гистограмму, показывая количество студентов, которые взаимодействовали по различным темам, имеющим оценку, принадлежащую к этой конкретной категории.

• Скриншоты ниже показывают наведение мыши на срез «Средний» и «Высокий» срез круговой диаграммы соответственно и для этого конкретного фрагмента, тематических гистограмм и количества учеников.

• На любой выбранной панели бар-диаграммы будет отображаться круговая диаграмма, показывающая классификацию всех учеников по этой конкретной теме на три категории: «Низкая», «Средняя» и «Высокая». Снимок экрана ниже показывает наведение мыши на тему 2 и для этой конкретной темы, сколько учеников находится в категории Низкий, Средний и Высокий

Ссылки: 1] Примеры из [https://d3js.org 2] D3.js Введение - [https://www.dashingd3js.com/why-build-with-d3js