D3.js - Рисование диаграмм

D3.js используется для создания статической диаграммы SVG. Это помогает нарисовать следующие диаграммы -

  • Гистограмма
  • Круговая диаграмма
  • Круговая диаграмма
  • Пончиковая диаграмма
  • График
  • Пузырьковая диаграмма и т. Д.

В этой главе рассказывается о рисовании диаграмм в D3. Давайте разберемся с каждым из них подробно.

Гистограмма

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

Ось x (горизонтальная ось) представляет различные категории, у которых нет шкалы. Ось y (вертикальная ось) имеет шкалу, которая указывает единицы измерения. Полосы можно рисовать вертикально или горизонтально в зависимости от количества категорий и длины или сложности категории.

Нарисуйте гистограмму

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

Чтобы создать гистограмму в SVG с помощью D3, давайте сделаем шаги, указанные ниже.

Step 1 - Adding style in the rect element - Давайте добавим следующий стиль к прямоугольному элементу.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Добавьте следующий класс CSS для применения стилей к текстовым значениям. Добавьте этот стиль в текстовый элемент SVG. Это определено ниже -

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

Здесь заливка используется для применения цветов. Якорь текста используется для размещения текста ближе к правому концу полос.

Step 3 - Define variables- Добавим переменные в скрипт. Это объясняется ниже.

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

Вот,

  • Width - Ширина SVG.

  • Scalefactor - Масштабируется до значения в пикселях, которое отображается на экране.

  • Barheight - Это статическая высота горизонтальных полос.

Step 4 - Append SVG elements - Давайте добавим элементы SVG в D3, используя следующий код.

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Здесь мы сначала выберем тело документа, создадим новый элемент SVG, а затем добавим его. Мы построим нашу гистограмму внутри этого SVG-элемента. Затем установите ширину и высоту SVG. Высота рассчитывается как высота столбца * количество значений данных.

Мы взяли высоту полосы равной 30, а длину массива данных - 4. Затем высота SVG вычисляется как barheight * datalength, что составляет 120 пикселей.

Step 5 - Apply transformation - Давайте применим преобразование в bar, используя следующий код.

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

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

Step 6 - Append rect elements to the bar- На предыдущем шаге мы добавили элементы группы. Теперь добавьте прямоугольные элементы на панель, используя следующий код.

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

Здесь ширина (значение данных * масштабный коэффициент) и высота (высота полосы - поля).

Step 7 - Display data- Это последний шаг. Давайте отобразим данные на каждом баре, используя следующий код.

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Здесь ширина определяется как (значение данных * коэффициент масштабирования). Текстовые элементы не поддерживают отступы или поля. По этой причине нам нужно задать смещение «dy». Используется для выравнивания текста по вертикали.

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

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

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

Круговая диаграмма

Круговая диаграмма - это круговая статистическая диаграмма, которая разделена на части для иллюстрации числовой пропорции.

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

Давайте создадим круговую диаграмму в SVG с помощью D3. Для этого мы должны придерживаться следующих шагов -

Step 1 - Define variables- Добавим переменные в скрипт. Это показано в блоке кода ниже.

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

Вот,

  • Width - ширина SVG.

  • Height - высота SVG.

  • Data - массив элементов данных.

  • Colors - применить цвета к элементам круга.

Step 2 - Append SVG elements - Давайте добавим элементы SVG в D3, используя следующий код.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - Давайте применим преобразование в SVG, используя следующий код.

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

Вот,

var g = svg.selectAll(“g”) - Создает групповой элемент для хранения кругов.

.data(data) - Связывает наш массив данных с элементами группы.

.enter() - Создает заполнители для элементов нашей группы.

.append(“g”) - Добавляет элементы группы на нашу страницу.

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

Здесь translate используется для позиционирования ваших элементов относительно начала координат.

Step 4 - Append circle elements - Теперь добавьте элементы круга в группу, используя следующий код.

g.append("circle")

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

.attr("cx", function(d, i) {
   return i*75 + 50;
})

Здесь мы используем координату x центра каждого круга. Мы умножаем индекс круга на 75 и добавляем отступ 50 между кругами.

Затем мы устанавливаем y-координату центра каждого круга. Это используется для унификации всех кругов и определено ниже.

.attr("cy", function(d, i) {
   return 75;
})

Затем установите радиус каждого круга. Это определено ниже,

.attr("r", function(d) {
   return d*1.5;
})

Здесь радиус умножается на значение данных вместе с константой «1,5» для увеличения размера круга. Наконец, залейте цветом каждый круг, используя следующий код.

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- Это последний шаг. Давайте отобразим данные на каждом круге, используя следующий код.

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

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

circlecharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

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

Круговая диаграмма

Круговая диаграмма - это круговой статистический график. Он разделен на кусочки, чтобы показать числовую пропорцию. Давайте разберемся, как создать круговую диаграмму в D3.

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

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

  • Метод d3.arc () и
  • Метод d3.pie ().

Давайте разберемся с обоими этими методами подробно.

The d3.arc() Method- Метод d3.arc () генерирует дугу. Вам нужно установить внутренний радиус и внешний радиус дуги. Если внутренний радиус равен 0, результатом будет круговая диаграмма, в противном случае результатом будет кольцевая диаграмма, которая обсуждается в следующем разделе.

The d3.pie()Method- Метод d3.pie () используется для создания круговой диаграммы. Он берет данные из набора данных и вычисляет начальный и конечный угол для каждого сегмента круговой диаграммы.

Давайте нарисуем круговую диаграмму, выполнив следующие шаги.

Step 1 - Applying styles - Давайте применим следующий стиль к элементу дуги.

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

Здесь заливка используется для применения цветов. Якорь текста используется для размещения текста по направлению к центру дуги.

Step 2 - Define variables - Определите переменные в скрипте, как показано ниже.

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

Вот,

  • Width - Ширина SVG.

  • Height - Высота SVG.

  • Radius - Его можно рассчитать с помощью функции Math.min (ширина, высота) / 2;

Step 3 - Apply Transformation - Примените следующее преобразование в SVG, используя следующий код.

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Теперь добавьте цвета, используя d3.scaleOrdinal работают, как указано ниже.

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - Теперь сгенерируйте круговую диаграмму, используя приведенную ниже функцию.

var pie = d3.pie()
   .value(function(d) { return d.percent; });

Здесь вы можете построить процентные значения. Для возврата требуется анонимная функцияd.percent и установите его как значение пирога.

Step 5 - Define arcs for pie wedges - После создания круговой диаграммы определите дугу для каждого сектора круговой диаграммы, используя функцию, приведенную ниже.

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

Здесь эта дуга будет установлена ​​на элементы пути. Расчетный радиус установлен на внешний радиус, а внутренний радиус установлен на 0.

Step 6 - Add labels in wedges- Добавьте метки в секторные клинья, указав радиус. Это определяется следующим образом.

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- Это важный шаг. Мы можем читать данные, используя функцию, указанную ниже.

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

Вот, populations.csvсодержит файл данных. Вd3.csvфункция читает данные из набора данных. Если данных нет, выдается ошибка. Мы можем включить этот файл в ваш путь к D3.

Step 8 - Load data - Следующим шагом будет загрузка данных с помощью следующего кода.

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

Здесь мы можем назначить данные групповым элементам для каждого значения данных из набора данных.

Step 9 - Append path - Теперь добавьте путь и назначьте класс «дуга» группам, как показано ниже.

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

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

Step 10 - Append text - Для отображения текста в ярлыках используйте следующий код.

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

Здесь текстовый элемент SVG используется для отображения текста в ярлыках. Дуги меток, которые мы создали ранее, используяd3.arc()возвращает точку центра тяжести, которая является позицией для меток. Наконец, мы предоставляем данные, используяd.data.browser.

Step 11 - Append group elements - Добавьте атрибуты элементов группы и добавьте заголовок класса, чтобы раскрасить текст и сделать его курсивом, как указано в Шаге 1 и определяется ниже.

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- Чтобы нарисовать круговую диаграмму, мы можем взять набор данных о населении Индии. В этом наборе данных показано население фиктивного веб-сайта, которое определяется следующим образом.

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

Давайте создадим визуализацию круговой диаграммы для указанного выше набора данных. Создайте веб-страницу «piechart.html» и добавьте на нее следующий код.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>