Что такое D3.js и как его использовать

D3.js (Data-Driven Documents) — это библиотека JavaScript, которая позволяет вам манипулировать данными, создавая динамические и интерактивные визуализации в веб-браузере. В отличие от других библиотек, D3.js позволяет связывать данные с DOM-элементами, а затем применять изменения к этим элементам на основе данных.

Установка и подключение D3.js

Чтобы начать использовать D3.js, вам сначала нужно подключить его к вашему проекту. Вы можете сделать это, загрузив библиотеку с официального сайта d3js.org или подключив его через CDN (например, cdnjs.com). Вот пример подключения через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

Теперь вы готовы начать использовать D3.js в вашем коде.

Основы работы с D3.js

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

// Создание массива данных
const data = [
  { x: 10, y: 20 },
  { x: 40, y: 60 },
  { x: 30, y: 80 },
  { x: 50, y: 50 },
];

// Создание SVG-элемента
const svg = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

// Создание кругов для каждого элемента данных
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", 5)
  .attr("fill", "blue");

В этом примере мы создаем SVG-элемент с размерами 200×200 пикселей, а затем добавляем круги на основе данных. Координаты кругов и их радиус определяются атрибутами cx, cy и r.

Курс «Аналитик данных» с нуля

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

Подробнее

Интерактивность и анимация

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

svg.selectAll("circle")
  .on("mouseover", function (event, d) {
    d3.select(this)
      .transition()
      .duration(500)
      .attr("r", 10);
  })
  .on("mouseout", function (event, d) {
    d3.select(this)
      .transition()
      .duration(500)
      .attr("r", 5);
  });

Здесь мы используем методы on, transition и duration для создания анимаций при наведении мыши на круги и при уходе курсора.

📚 D3.js — мощная и гибкая библиотека, которая позволяет создавать сложные и красочные визуализации данных. Примеры, представленные здесь, — это только начало, и существует множество других возможностей для изучения и использования D3.js в ваших проектах. Удачного обучения и экспериментирования!

Бесплатные курсы по аналитике

Специалист с опытом работы до трех лет, зарабатывает около 140 000 ₽

Подробнее