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

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

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

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

dc.bubbleMixin
dc.coordinateGridMixin

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

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

elasticRadius ([радиус])

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

sortBubbleSize ([sortBubbleSize])

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

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

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

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

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

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

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

Шаг 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.

Шаг 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.
Визуализируйте горизонтальные и вертикальные линии сетки, затем сопоставьте с заголовком для ключей и значений пузырька.

Шаг 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>

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