Учебники

DC.js — Scatter Plot

Август 4, 2018

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

Методы рассеяния

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

  • dc.coordinateGridMixin

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

Методы рассеяния

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

customSymbol ([символ])

Этот метод используется получить или установить генератор символов.

emptySize ([размер])

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

исключенный цвет ([цвет])

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

excOpacity ([непрозрачность])

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

исключенный размер ([размер])

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

selectedSize ([размер])

Используется для установки или получения радиуса для выделенных символов.

символ ([тип])

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

Нарисуйте точечный график

Давайте нарисуем точечный график в DC. В этом примере давайте возьмем набор данных с именем файла 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

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

Приведенный выше пример файла содержит много записей. Мы можем скачать файл, щелкнув следующую ссылку и сохранив его в нашем отделении DC.

howell1.csv

Теперь давайте следуем последующим шагам, чтобы нарисовать точечную диаграмму в DC.

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

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

var chart = dc.scatterPlot('#scatter');

Здесь функция scatterplot () сопоставляется с идентификатором scatter.

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

Прочитайте данные из файла howell1.csv, как показано ниже — 

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

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

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

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

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

Здесь мы проверили пол.

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

Вы можете установить размерность с помощью приведенной ниже кодировки — 

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

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

var hwGroup = hwDimension.group().reduceCount();

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

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

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

Вот,

  • Мы присвоили ширину графика 800 и высоту 600.
  • Применена функция d3.scale.linear () для осей x и y.
  • Включено значение brushOn как ложное.
  • Затем присваивается метка оси X в качестве высоты, а метка оси Y в качестве веса.
  • Установите размер символа как восемь и значение заполнения как 10.
  • Наконец, сгруппируйте данные и визуализируйте диаграмму.

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

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

<html>
   <head>
   <title>Scatter plot 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 = "scatter"></div>
      </div>

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

         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";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

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

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

41
Share: