D3 library: D3.js — Data-Driven Documents

Разное 

Введение в d3.js в 10 основных примерах

Введение в d3.js в 10 основных примерах

D3.js — это Библиотека JavaScript для управления документами на основе данных. Это позволяет построить абсолютно любой вид визуализации данных. Этот документ отображает 10 интерактивных примеров, иллюстрирующих ключевые концепции d3, что приводит к первой базовой диаграмме рассеяния. Обратите внимание, что это онлайн курс — отличный ресурс для начала работы с d3.js.

→ Объяснение:

  • HTML означает Язык гипертекстовой разметки . В основном это язык за любым сайтом . Веб-браузеры, такие как Mozilla или Safari, читают такой файл и перевести его на веб-страницу.
  • В файле HTML создаются элементы, составляющие веб-страницу, очерчены
    тегами     . Например, титул 1-го уровня представлены тег h2 , абзац с p тег , изображение по тегу img и так далее.
  • Невозможно создать визуализацию d3.js без базовых знание html. Этот учебник На мой взгляд, W3School может стать хорошей отправной точкой.

→ Пример:

→ Попробуйте:

  • Скопируйте и вставьте приведенный выше код в локальный файл. Назовите это как-нибудь нравится test.html
    . Откройте его в браузере. Вы создали ваш первый сайт!

→ Объяснение:

  • CSS означает Каскадная таблица стилей . позволяет применять определенные стили к элементам, созданным с использованием html ранее.
  • Что касается html, то визуализацию d3.js создать невозможно без базовых знаний на CSS
    . Если для вас это ново, Проверь это руководство.

→ Пример:

→ Попробуйте:

  • Дайте класс inGreen одному из абзацев р
  • Создайте новый класс для первого предложения документа. Изменять его размер шрифта с размером шрифта : 20px в css.

→ Объяснение:

  • SVG означает
    Масштабируемая векторная графика     . это векторное изображение формат. По сути, это язык, который позволяет строить фигуры с код.
  • Диаграмма d3.js на самом деле представляет собой набор из svg фигур, помещенных вместе. Например, диаграмма рассеяния состоит из нескольких круги, как показано ниже.
  • Этот документ галереи графов d3 демонстрирует различные формы, предлагаемые Svg.

→ Пример:

← Измени меня!

 
 Это мое первое предложение

→ Попробуйте:

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

Пример источника

→ Объяснение:

  • JavaScript это одна из трех основных технологий Всемирной паутины.
    Это позволяет интерактивность на веб-страницах.
  • D3.js — это библиотека javascript, особенно полезная для визуализация данных. Он позволяет создавать, выбирать и изменять элементы.
  • В приведенном ниже примере d3 используется для выбора круга с классом цель и изменить его ширина штриха .
  • Это пока не очень впечатляет. Но мы будем использовать тот же тип процесс, чтобы установить положение сотни круга и получить диаграмма рассеяния.

→ Пример:

← Измени меня!

 
 Это мое первое предложение

→ Попробуйте:

  • Измените непрозрачность круга с помощью стиля opacity , который идет от 0 до 1.

→ Объяснение:

  • Таким образом, браузер запускает Html , Css и Код Javascript и показывает результат в виде веб-страницы.
  • Если что-то не так, он даст уведомление в консоль .
  • Обычно вы можете открыть консоль с помощью , щелкнув правой кнопкой мыши -> проверить элемент
  • Вы можете вывести данные в консоль с помощью команды console.log("sometext") в вашем коде javascript
  • Это очевидно для людей, пришедших из веб-разработки. Но не для людей, пришедших из другой области (R?). Важно уметь для отладки вашего кода.

→ Объяснение:

  • Создание диаграммы d3. js начинается с создания svg элемент. Этот элемент имеет ширину и a высота , указанная в пикселях.
  • Важно понимать, что верхний левый угол имеет координата
    x=0     и y=0 . Внизу слева угол имеет координату х=0 и у=высота . В правом верхнем углу есть координата x=ширина и высота=0

→ Пример:

← Измени меня!

→ Попробуйте:

  • Измените координаты 3 кругов, чтобы убедиться, что вы поняли как это работает

→ Объяснение:

  • Позиция элемента задается в пикселях . Но входной набор данных а не .
  • Таким образом, нам нужна функция, которая преобразует числовую переменную в положение в пикселях. Это называется шкала
  • Если мои данные в процентах, а моя область svg составляет 400 пикселей ширина. 0% → 0 пикселей. 100% → 400 пикселей. 50% → 200 пикселей.
  • Масштаб всегда имеет домен
    (здесь от 0 до 100%) и диапазон (здесь от 0 до 400 пикселей)
  • Обычно масштаб по оси X называется x . Если вы run x(10) , d3 возвращает позицию в px для этого значения

→ Пример:

← Измени меня!

→ Попробуйте:

  • Измените значения домена и диапазона на понять, как это работает.
  • Добавьте шкалу Y, чтобы перемещать круги вверх или вниз. Помните, что 0px включен вершина!

→ Объяснение:

  • D3 предлагает несколько функций для автоматического рисования оси .
  • Эти оси всегда рисуются поверх шкала . Этот масштаб указывает , где должна быть размещена ось, и какой диапазон он должен указывать.
  • Функция axisBottom() создает горизонтальную ось, с галочками и метками внизу. axisLeft() будет используется позже для оси Y

→ Пример:

← Измени меня!

→ Попробуйте:

  • Измените значения домена и диапазона на понять, как это работает.

→ Объяснение:

  • Положение оси часто необходимо регулировать . Например, ось X обычно располагается в нижней части диаграммы.
  • Это стало возможным благодаря перевод . По сути, применение .attr("transform", "translate(20,50)") к элемент с перемещением его на 20 пикселей вправо и на 50 пикселей вниз.
  • Очень распространенная стратегия заключается в применении перевода к общему svg область, создающая небольшое поле вокруг графика без необходимости думать об этом в остальной части кода. Это важно понять, как это работает, так как почти все диаграммы d3.js начни так.

→ Пример:

← Измени меня!

→ Попробуйте:

  • Поиграйте со значениями поля, чтобы еще раз проверить, как это работает.
  • Удалите несколько строк при создании переменной svg .

→ Объяснение:

  • Привязка данных к элементам svg — это последний шаг, который нам нужно сделать. завершить диаграмму рассеяния. это тоже самая сложная часть понять по-моему.
  • Всегда следует одним и тем же шагам:
    • svg : выберите область svg, в которой диаграмма занимает место
    • .selectAll("независимо") : выбрать все элементы, которые еще не были созданы, я знаю, что это странно.
    • .данные(данные) : указать данные для использования.
    • .enter() : запустить цикл для данных. Следующий код будет применяться к data[0] , data[1] и скоро.
    • .append("circle") : для каждой итерации добавлять круг.
    • .attr("cx", function(d){ return x(d.x) }) : дает x положение круга. Здесь д будет data[0] , затем data[1] и так далее. Таким образом d.x — это значение x , и x(d.x) — найденная позиция в пикселях благодаря масштабу x .

→ Пример:

← Измени меня!

→ Примечание:

Это, пожалуй, самая сложная концепция в d3. js. И это используется почти на каждом графике. На самом деле это сила d3: связывание данные в элементы

Вероятно, стоит прочитать больше на эту тему. Проверять d3 в глубину и Лихой d3.js.


Этот документ представляет собой очень короткое введение в d3.js. Однако это описывает основные понятия, которые используются почти в каждой диаграмме.

Теперь вы, вероятно, готовы исследовать галерею. Для каждого графика разделе есть очень простой пример, с которого можно начать.

Все диаграммы | Галерея графиков D3

Самый простой

Самая простая диаграмма с областями, которую вы можете сделать в d3.js. Только сохранение основной код.

2D гистограмма

Сгруппируйте двумерные точки в прямоугольные ячейки. Возможный благодаря 9Плагин 0009 d3-rectbin .

Контур участка

Представление контурных полигонов, вычисленных с помощью маршевого квадраты

Самый простой

Самая простая кольцевая диаграмма, которую вы можете сделать в d3.js. Только сохранение основной код.

Самый простой

Самая простая тепловая карта, которую вы можете сделать в d3.js. Сохранение только основной код.

Добавить всплывающую подсказку к тепловой карте

Добавьте всплывающую подсказку, которая отображает точное значение ячейки и любой другой текст.

Тепловая карта готова к работе

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

Визуализация Отверженные

Интерактивная тепловая карта с возможностью переключения в групповом порядке

Самый простой

Самая простая диаграмма с областями, которую вы можете сделать в d3. js. Только сохранение основной код.

Самый простой

Самая простая гистограмма, которую вы можете сделать в d3.js. Сохранение только основной код.

Цвет определенной детали

Используйте простую инструкцию if-else , чтобы раскрасить часть. гистограммы.

Также покажите, как добавить вертикальный аннотация бара.

Двойная гистограмма

Двойная гистограмма может быть удобна для сравнения распределения 2 переменные.

Приятно видеть, как функция filter() работает.

Кнопка управления размером корзины

Добавьте кнопку, которая управляет размером корзины. Хороший пример, чтобы узнать, как для создания функции обновления, которая также обновляет ось.

Добавить всплывающую подсказку

Полезно для получения порога диапазона каждого бара. Должно быть хотя улучшилось.

Самый простой

Самая простая всплывающая подсказка, которую вы можете сделать в d3.js.
Это просто создать одну всплывающую подсказку для одного круга

HTML во всплывающей подсказке

Узнайте, как настроить всплывающую подсказку: вы можете применить любой HTML код к нему!

Подсказка связана с данными

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

Щетка

Как применять браширование на графике для выделения точек.

Типы кнопок HTML

HTML изначально предлагает различные типы кнопок: вот их описание с соответствующим кодом.

Самый простой

Самый простой переход, который вы можете сделать в d3.js.
Это просто измените атрибут ширины div с помощью d3.js, сохранив только основной код.

Труба несколько переходная

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

Самый простой

Самая простая линейная диаграмма, которую вы можете сделать в d3.js. Только сохранение основной код.

Несколько групп

Узнайте, как представить несколько групп на линейном графике. Этот требует группировки данных с помощью функции d3.nest.

Переход между входными данными

Добавьте кнопку, которая позволяет перейти от одного набора данных к другому с плавным переходом. Полезно, чтобы понять, как построить функция обновления() .

Самый простой

Самая простая диаграмма леденцов, которую вы можете сделать в d3.js. Хранение только основной код.

Повернуть горизонтально

Сюжет леденца часто выглядит лучше горизонтально: он делает ярлык легче читать. Найдите, как это сделать!

Группы заказов

Дайте больше информации о своей диаграмме: переупорядочьте группы, используя всего 3 больше строк кода.

Точечный график Кливленда

Вариант леденца, в котором доступны 2 ряда данных. для каждой группы.

Базовая анимация при загрузке

Точки начинаются с x=0, а затем занимают свое реальное положение.

Самый простой

Самый простой сетевой график, который вы можете сделать в d3.js. Только сохранение основной код.

Формат ввода: JSON

Самый простой

Самая простая диаграмма параллельных координат, которую вы можете сделать в d3.js. Сохранение только основного кода.

Самый простой

Самая простая круговая диаграмма, которую вы можете сделать в d3. js. Сохранение только основной код.

Самый простой

Самая простая диаграмма хребта, которую вы можете сделать в d3.js. Хранение только основной код.

Выбор времени суток для занятий спортом

Красивый график хребта Эндрю Моллики, показывающий количество участников для нескольких видов спорта в течение дня.

Линия хребта или участок Радости

Реализация Майка Бостока.

Используйте d3.v5. Это наблюдаемые ноутбуки -> еще лучше.

Самый простой

Самая простая диаграмма Санки, которую вы можете сделать в d3.js. Хранение только основной код.

Формат входных данных: Json

Поток производства энергии

Производство и потребление энергии в Великобритании в 2050 году: энергоснабжение слева, а требования справа

Самый простой

Самая простая диаграмма рассеяния, которую вы можете сделать в d3. js. Только сохранение основной код.

Добавить всплывающие подсказки

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

Самый простой

Базовая сгруппированная диаграмма рассеяния: каждая группа имеет свой цвет.

Выделить группу

Выделите группу точек, когда наведен курсор на один из ее членов

Анимация при запуске

Сделайте так, чтобы точки появлялись одна за другой, используя разные задержка для каждого.

Щетка

Узнайте, как разрешить очистку и как изменить точки в область кисти

Обновить пределы оси X

Кнопка управляет верхним пределом оси X и запускает плавный переход на новый лимит

Функция начальной радиолокационной карты

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

Нажмите, чтобы посетить репозиторий github и найти мало примеров.

Изменение дизайна радиолокационной карты

Нади Бремер пересмотрела предыдущую диаграмму с более простой код и другой вид.

Основной из длинного ввода

Самая простая диаграмма с областями с накоплением, которую вы можете сделать в d3.js. Хранение только основной код.

Формат ввода: длинный (аккуратный)

Basic с широким входом

Еще одна базовая диаграмма с областями с накоплением, созданная в d3.js.

Примечание что здесь формат ввода широкий (неопрятный): каждая группа предоставляется в специальной колонке.

Самый простой

Самый простой потоковый граф, который вы можете сделать в d3. js. Только сохранение основной код.

Формат ввода: широкий (неаккуратный)

Самый простой

Самая простая древовидная карта, которую вы можете сделать в d3.js. Только один уровень представлена ​​иерархия.

Ввод: формат csv

Диаграмма для скрипки

Здесь функция сглаживания используется для преобразования зеркала гистограмма в скрипичном сюжете.

Вариант: без сглаживания

Вариант предыдущего графика без какого-либо сглаживания

Вариант: показать шаги

Здесь функция curveStep используется для интерполяции значений: раскрывает основную структуру гистограммы.

Самый простой

Самая простая скрипичная диаграмма, которую вы можете сделать в d3. js. Только сохранение основной код.

Скрипка с дрожанием

Половина скрипки удалена, чтобы показать отдельные наблюдения. Дрожание используется, чтобы избежать перекрытия точек.

Таблица для скрипки

Короткий код для построения диаграммы скрипки из трех фиктивных массивов.

Скрипка + коробка

Реализация Эндрю Силена, с кнопкой, чтобы понять, как настроить каждую часть символа.

Самый простой

Самое простое облако слов, которое вы можете сделать в d3.js. Он называет Плагин d3-cloud без аргументов.

Вход данные: вектор, записанный в коде

Общая настройка

Примените базовые настройки к облаку слов: цвет, углы, шрифт, размер и многое другое.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *