Учебники

DC.js — пузырьковая диаграмма

Август 31, 2018

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

Методы пузырьковой диаграммы

Прежде чем приступить к рисованию пузырьковой диаграммы, мы должны понять класс dc.bubbleChart и его методы. В dc.bubbleChart используются миксины для получения основных функций рисования диаграммы, которые перечислены ниже:

  • dc.bubbleMixin
  • dc.coordinateGridMixin

Полная диаграмма классов dc.bubbleChart выглядит следующим образом:

Методы пузырьковой диаграммы

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

asticRadius ([радиус])

Этот метод используется для включения радиуса пузырька. Если мы отключим это, то радиус пузырька будет изменен автоматически.

sortBubbleSize ([sortBubbleSize])

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

Нарисуйте пузырьковую диаграмму

Давайте нарисуем пузырьковую диаграмму в Вашингтоне. Для этого нам нужно выполнить шаги, приведенные ниже —

Шаг 1: Определите переменную

Давайте определим переменную, как показано ниже — 

var chart = dc.bubbleChart('#bubble');

Здесь функция bubbleChart отображается с пузырем id.

Шаг 2: Считайте данные

Считайте данные из файла howell1.csv . 

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Если данных нет, то возвращается ошибка. Теперь присвойте данные перекрестному фильтру. Здесь мы уже скачали файл howell1.csv. Здесь будет использоваться тот же файл, и он будет похож на следующий блок кода. 

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

....................
.....................

Шаг 3: Получить записи

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

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
   x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
   x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});

Здесь мы проверили пол и установили диапазон высоты и ширины оси x, используя приведенную выше формулу.

Шаг 4: Установите размер

Мы можем установить размерность, используя приведенную ниже кодировку — 

var genderDimension = mycrossfilter.dimension(function(data) {
   return [ data.gender, data.heightRange, data.weightRange ];
});

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

var genderGroup = genderDimension.group().reduceCount();

Шаг 5: Генерация диаграммы

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

chart.width(1200)
   .height(400)
   .margins({top: 10, right: 50, bottom: 30, left: 60})
   .dimension(genderDimension)
   .group(genderGroup)
   .keyAccessor(function (p) {
      return p.key[1];
   })
   
   .valueAccessor(function (p) {
      return p.key[2];
   })
   
   .radiusValueAccessor(function (p) {
      return (Math.floor((p.value / 10)) + 1);
   })

Вот,

  • Мы присвоили ширину графика 1200 и высоту 400.

  • Далее мы указали маржинальные баллы.

  • Затем мы определили гендерное измерение и группу.

  • Метод доступа к ключу и значению возвращает ключ и значение из пузырьков.

  • Рассчитать функцию доступа к значению радиуса по формуле — Math.floor ((p.value / 10)) + 1 .

Мы присвоили ширину графика 1200 и высоту 400.

Далее мы указали маржинальные баллы.

Затем мы определили гендерное измерение и группу.

Метод доступа к ключу и значению возвращает ключ и значение из пузырьков.

Рассчитать функцию доступа к значению радиуса по формуле — Math.floor ((p.value / 10)) + 1 .

Шаг 6: Нарисуйте пузыри

Теперь нарисуйте пузыри, используя приведенную ниже кодировку — 

.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
   return p.key[0]
   + "\n"
   + "Height: " + p.key[1] + " cm\n"
   + "Weight: " + p.key[2] + " kg\n"
   + "Count: " + p.value;
});

Вот,

  • Функция d3.scale.linear используется для построения нового линейного масштаба с указанным диапазоном доменов [0,240] для оси X.

  • Аналогично, мы присвоили значения линейной шкалы y и радиуса.

  • Мы определили минимальное значение метки радиуса как 1000, значения заполнения по осям x и y как 200 и 100 соответственно.

  • Далее мы указали максимальное значение относительного размера пузырька 0,7.

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

Функция d3.scale.linear используется для построения нового линейного масштаба с указанным диапазоном доменов [0,240] для оси X.

Аналогично, мы присвоили значения линейной шкалы y и радиуса.

Мы определили минимальное значение метки радиуса как 1000, значения заполнения по осям x и y как 200 и 100 соответственно.

Далее мы указали максимальное значение относительного размера пузырька 0,7.

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

Шаг 7: Установите TickFormat

Установите форматы билетов для осей X и Y, используя кодировку, приведенную ниже — 

chart.yAxis().tickFormat(function (s) {
   return s + " cm";
});

chart.xAxis().tickFormat(function (s) {
   return s + " kg";
});

Наконец, визуализируйте диаграмму с помощью метода chart.render () .

Шаг 8: Рабочий пример

Полный список кодов показан в следующем блоке кода. Создайте веб-страницу bubble.html и добавьте в нее следующие изменения. 

<html>
   <head>
      <title>Bubble chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "bubble"></div>
      </div>

      <script language = "javascript">
         var chart = dc.bubbleChart('#bubble');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
               x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
               x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
            });

            var genderDimension = mycrossfilter.dimension(function(data) {
               return [ data.gender, data.heightRange, data.weightRange ];
            });
            var genderGroup = genderDimension.group().reduceCount();

            chart.width(1200)
               .height(400)
               .margins({top: 10, right: 50, bottom: 30, left: 60})
               .dimension(genderDimension)
               .group(genderGroup)
               .keyAccessor(function (p) {
                  return p.key[1];
               })
               
               .valueAccessor(function (p) {
                  return p.key[2];
               })
               
               .radiusValueAccessor(function (p) {
                  return (Math.floor((p.value / 10)) + 1);
               })
               
               .x(d3.scale.linear().domain([0, 240]))
               .y(d3.scale.linear().domain([-40, 120]))
               .r(d3.scale.linear().domain([0, 20]))
               .minRadiusWithLabel(1000)
               .yAxisPadding(100)
               .xAxisPadding(200)
               .maxBubbleRelativeSize(0.07)
               .renderHorizontalGridLines(true)
               .renderVerticalGridLines(true)
               .renderLabel(true)
               .renderTitle(true)
               .title(function (p) {
                  return p.key[0]
                  + "\n"
                  + "Height: " + p.key[1] + " cm\n"
                  + "Weight: " + p.key[2] + " kg\n"
                  + "Count: " + p.value;
               });
               
            chart.yAxis().tickFormat(function (s) {
               return s + " cm";
            });
               
            chart.xAxis().tickFormat(function (s) {
               return s + " kg";
            });

            chart.render();
         });
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий ответ.

50
Share: