Статьи

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

Октябрь 13, 2018

На моем рабочем месте мне было поручено визуализировать некоторые данные. Именно тогда я столкнулся с D3.js , библиотекой JavaScript для интерактивного управления документами на основе данных. Он использует HTML5, JavaScript, SVG и CSS3. В этом уроке мы будем использовать D3 для визуализации наших данных в виде графиков Abubble.

Прежде чем начать, загрузите исходный код D3 .

Создание осей X и Y

Давайте начнем с рисования некоторых осей, используя D3. Для начала нам понадобится SVG на нашей HTML-странице. SVG — это векторный формат изображения на основе XML, предлагающий поддержку взаимодействия и анимации. Следующий пример кода показывает, как должна выглядеть наша HTML-страница. Обратите внимание на ссылку на D3 и тег svg 

 <html>
  <head>
    <script src="jquery.js"></script>
    <script src="d3.v3.js"></script>
    <script>
      $(function() {
        InitChart();
      });

      function InitChart() {
        // Chart creation code goes here
      }
    </script>
  </head>
  <body>
    <svg id="svgVisualize" width="500" height="500"></svg>
  </body>
</html>
Смотреть визуализировать данные с D3.js
Проиллюстрируйте свои данные с помощью JavaScript
Смотреть этот курс Смотреть этот курс

D3.js имеет набор API, которые мы будем использовать для рисования наших осей. Один из API, который мы будем использовать, это d3.scale.linear() , который используется для создания количественной шкалы. Используя этот API, мы можем определить диапазон и домен каждой оси. Домен определяет минимальное и максимальное значения, отображаемые на графике, а диапазон — это количество SVG, которое мы будем покрывать. Наш svg составляет 500 × 500, поэтому давайте определим наш диапазон как 40 × 400. 

 var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);

Далее нам нужно масштабировать до двух осей. Для этого мы будем использовать axis.scale() : 

 var xAxis = d3.svg.axis().scale(xRange);
var yAxis = d3.svg.axis().scale(yRange);

Затем добавьте оси X и Y к элементу SVG с помощью JavaScript: 

 vis.append("svg:g").call(xAxis);
vis.append("svg:g").call(yAxis);

На данный момент наша InitChart() 

 function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange);
  vis.append("svg:g").call(xAxis);
  vis.append("svg:g").call(yAxis);
}

Вы можете просмотреть демонстрацию кода до этого момента. Вы должны увидеть жирную черную линию. На самом деле две линии перекрывают друг друга. Чтобы разделить оси, измените код, к которому мы добавили ось Y, как показано ниже: 

 vis.append("svg:g").call(yAxis).attr("transform", "translate(0,40)");

Обновленный код доступен здесь . Теперь вы можете видеть обе оси, потому что мы переместили нашу ось Y на 40 единиц.

Далее нам нужно сделать две вещи: 1.) переместить ось y на 40 единиц от оси x и 0 единиц от оси y и 2.) изменить ее ориентацию влево. Обновленная InitChart()здесь . 

 function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange).orient("left");
  vis.append("svg:g").call(xAxis);
  vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");
}

Теперь наша ось Y выглядит хорошо, но ось X должна быть смещена вниз. Давайте использовать transform 

 vis.append("svg:g").call(xAxis).attr("transform", "translate(0,400)");

Теперь, если мы посмотрим на график, мы увидим, что масштаб оси Y переходит от 100 до 0. Нам нужно инвертировать его следующим образом: 

 var yRange = d3.scale.linear().range([400, 40]).domain([0,100]);

Модифицированная InitChart() 

 function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([400, 40]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange).orient("left");
  vis.append("svg:g").call(xAxis).attr("transform", "translate(0,400)");
  vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");
}

А вот и обновленная демка.

Пузырьковая диаграмма

Теперь, когда оси настроены, пришло время создать пузырьковую диаграмму. Первое, что нам понадобится, это некоторые данные: 

 var sampleData = [{
  "x": 1,
  "y": 5
}, {
  "x": 20,
  "y": 20
}, {
  "x": 40,
  "y": 10
}, {
  "x": 60,
  "y": 40
}, {
  "x": 80,
  "y": 5
}, {
  "x": 100,
  "y": 60
}];

Ранее мы жестко кодировали наш домен для каждой оси от 0 до 100. Теперь, когда у нас есть данные, мы можем установить домен динамически. D3 имеет функции min()max() Просто измените переменные xRangeyRange 

 var xRange = d3.scale.linear()
                .range([40, 400])
                .domain([d3.min(sampleData, function(d) {
                  return (d.x);
                }), d3.max(sampleData, function(d) {
                  return d.x;
                })]);
var yRange = d3.scale.linear()
                .range([400, 40])
                .domain([d3.min(sampleData, function(d) {
                  return d.y;
                }), d3.max(sampleData, function(d) {
                  return d.y;
                })]);

Создание кругов

Теперь нам нужно построить круги на основе значений x и y из sampleData Сначала нам нужно привязать sampleData 

 var circles = vis.selectAll("circle").data(sampleData);

circles.enter();

Приведенный выше код выбирает circle Теперь нам нужно применить xRangeyRange 

 var circles = vis.selectAll("circle").data(sampleData);

circles
    .enter()
    .insert("circle")
    .attr("cx", function(d) { return xRange (d.x); })
    .attr("cy", function(d) { return yRange (d.y); })
    .attr("r", 10)
    .style("fill", "red");

Вывод

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

33
Share: