Рубрики
Без рубрики

Учебник для новичка D3.js: изучить визуализацию данных с JS

D3.JS является мощной библиотекой JavaScript для визуализации данных. В отличие от многих инструментов визуализации данных t … Tagged с JavaScript, DataScience, Tuperial, Technology.

D3.JS – мощная библиотека JavaScript для Визуализация данных Анкет В отличие от многих инструментов визуализации данных, которые используют Python, D3.JS полностью контролируется с такими навыками интерфейса, как JavaScript, CSS и HTML. Благодаря JS-управляющему коду, встроенной функциональной программе для рендеринга и автоматической анимации D3 неизменно выделяется как лучший инструмент визуализации данных для разработчиков фронта.

Сегодня мы поможем вам начать работу с компонентами D3.JS и дадим вам практическую практику с созданием ваших первых визуализаций.

Вот что мы рассмотрим сегодня:

  • Что такое D3.JS?
  • D3.JS Установка среды
  • Фундаментальные компоненты d3.js
  • Примеры визуализации данных
  • Продвинутые концепции для изучения следующий

Мастер D3.JS быстро с практической практикой

Практикуйте создание десятков различных интерактивных графиков с пошаговыми уроками.

Введение в визуализацию с использованием d3.js

Что такое D3.JS?

D3.JS (управляемые данными-документами) Это библиотека JavaScript с открытым исходным кодом, которая позволяет создавать динамические визуализации данных в веб-браузерах с использованием SVC, Html 5 и CSS. Он был создан Майком Бостоком в 2011 году как духовный преемник Протовиса. D3.JS специализируется на представлении больших наборов данных в усваиваемых и интерактивных средствах.

В то время как большинство инструментов визуализации данных требуют Python, визуализации D3.JS создаются полностью с использованием JavaScript. Это позволяет разработчикам фронта добавлять расширенную визуализацию данных в свои интерфейсы без хлопот изучения нового языка.

Многие передовые функции манипуляции и визуализации данных встроены и реализованы, что означает, что новый пользователь D3.js может создавать эффекты, которые в противном случае потребовали бы многолетнего опыта.

Например, D3.JS имеет встроенные стили графика для всего от простой круговой диаграммы до интерактивного кругового барза.

Короче говоря, D3.JS предназначен для того, чтобы быстро забрать и мощный в руках современных фронтальных разработчиков.

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

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

Визуализация данных помогает:

  • Принимать быстрые решения на основе больших наборов данных
  • Понять всеобъемлющие тенденции рынка
  • С первого взгляда сообщать
  • Найти ошибки в записанных данных

Лучшие функции D3.js

  • Использует веб -стандарты : Использует установленные стандарты SVG, HTML и CSS, чтобы сделать его совместимым с существующими технологиями.

  • Управляемый данными : D3 может использовать статические данные или получать их с удаленных серверов в нескольких форматах, таких как массивы, объекты, CSV, JSON или XML.

  • DOM Манипуляция : D3 позволяет вам манипулировать моделью объекта документа (DOM), используя ваши данные.

  • Динамические свойства : D3 обеспечивает динамические свойства и элементы. Свойства могут быть указаны как функции данных, которые затем редактируют ваши элементы. Другими словами, ваши данные определяют стиль вашей визуализации.

  • Типы визуализации : D3 оснащены десятками встроенных форматов графика для общих приложений, таких как ранжирование, корреляция и распределение.

  • Пользовательские визуализации : D3 позволяет создавать пользовательские визуализации с нуля или настраивать форматы текущих графиков.

  • Переходы и анимация: D3 предоставляет встроенные функции анимации переход () , Продолжительность () , Задержка () и ext () Функции, которые автоматически оживляют функции вашего графика на основе взаимодействия пользователей, переходов времени или других событий.

D3.JS Environment Supp

Вам придется настроить среду D3.JS, прежде чем вы получите практику. Четыре компонента среды D3.JS являются D3 Библиотека , веб -сервер , текстовый редактор и веб -браузер Анкет

Вы можете использовать библиотеку D3, связав ее непосредственно на свою HTML -страницу из сети доставки контента (CDN). Использование CDN позволит вам работать с D3 без загрузки исходного кода.

Включите D3, введя URL CDN для D3 в вашем голова раздел:

Для веб -серверов большинство браузерных серверов локальные HTML -файлы непосредственно в браузер. Вы также можете такого веб -сервера, как Apache, если вам более удобно.

Ваш текстовый редактор должен иметь поддержку JavaScript. Некоторые великие Интегрированные среды разработки (Ides):

  • Visual Studio Code
  • Затмение
  • Возвышенный текст

D3 работает над всеми браузерами, кроме IE8 и ниже. Для этого урока я буду использовать Google Chrome. Как только у вас есть все эти вещи, вы готовы начать!

Фундаментальные компоненты d3.js

Теперь мы посмотрим на фундаментальные компоненты любого проекта D3. Важными компонентами являются:

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

D3 Выбор

Выбор – это начало большинства цепочек методов D3, так как он диктует, какие элементы будут влиять на более поздние методы. Есть два метода для отбора в D3.JS, select () а также selectall () Анкет

Выбирать()

select () Метод используется для выбора одного экземпляра заданного тега HTML. Если указанный тег отсутствует, он вернет пустой выбор. Если присутствуют несколько экземпляров выбранного тега, то он выберет только первый элемент.

Давайте запустим знаменитую программу «Hello World» для D3.js, используя select () метод

Первый фрагмент кода – наш HTML, а второй – наш файл JavaScript.


    


    
Welcome to Educative

    
Introduction to D3.js




d3.selectAll('div').style("color","green");

Выше мы выбираем все HTML div Теги с использованием selectall () Метод, чтобы изменить свой цвет на зеленый.

Сначала мы выбираем весь текст под div тег с использованием selectall () метод Затем мы используем style () Метод для добавления стиля к выбранному тексту.

DOM манипуляции с D3

Теперь мы посмотрим на наиболее распространенные методы манипуляции с DOM, Text () , append () , удалить () , style () и attr () Анкет

текст()

Text () Метод манипулирует элементами DOM и обычно используется для добавления или изменения текста внутри элементов DOM.


    


    




d3.select('div').text("I am adding text");

Сначала используем select () Метод для выбора div элементы. Тогда мы используем Text () Метод, чтобы добавить наш текст в div элемент.

append ()

append () Метод используется для добавления нового нового HTML -элемента в конце выбранного элемента. Давайте создадим новый div Элемент внутри тело Теги и добавьте текст в него, используя Text () метод


    


    
Introduction to Visualization using D3.js




d3.select("body").append("div").text("Appending new div tag")

Один div Тег уже присутствует внутри тега тела в файле HTML. В строке 1 мы используем append () Метод для добавления нового элемента DIV в файл HTML. Затем мы добавили текст «Добавление нового тега» с использованием метода Text ().

удалять()

удалить () Метод используется для удаления выбранного HTML -элемента.


    


    
1st div tag

    
2nd div tag




d3.select("div").remove()

select () Метод выбирает первый div элемент. Затем мы используем удалить () Метод для удаления выбранного элемента. К концу только второй div элемент показан.

стиль()

D3.JS предоставляет style () Метод для установки стиля выбранных элементов DOM. Стиль устанавливается в формате, аналогичном CSS, но может изменить только один атрибут за раз. Первый параметр стиль Всегда это атрибут, который вы хотите отредактировать, а второй параметр – это новое значение.

 
    


    
Showing effect of the style method




d3.select("div").style("color","blue").style("font-size","30px")

Как и прежде, мы начнем с выбора div Тег затем измените цвет на синий с первым style () Метод и измените шрифт со вторым. Каждый style () Метод может изменить только один атрибут.

attr ()

Вместо того, чтобы звонить style () дважды, мы можем позвонить attr () однажды. attr () Метод связывает ваш элемент на лист стиля CSS и применяет настройки листа к любым выбранным элементам.

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


    



    
Showing effect of the attr method




 d3.select("div").attr("class","error");

.error {
    color: blue;
    font-size: 30px
    }

Наш attr () Метод ссылается на выбранные div Элемент нашего листа CSS. Первый параметр определяет, какой тип листа, и второй параметр указывает имя класса для выбора.

Это позволяет D3 соответствовать выбранному элементу, чтобы свой цвет, а атрибуты размером с шрифта соответствуют листу CSS.

Продолжайте изучать D3.JS

Узнайте D3.JS, не протирая видео.

Текстовые курсы Educative делают обучение быстрым и эффективным с помощью смену уроков и практических сред.

Введение в визуализацию с использованием d3.js

Метод цепочка

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

Подобно композиции функции в Функциональное программирование , Method Chaining позволяет объединить простые методы для создания сложного поведения.

Вы уже использовали это на протяжении всего учебника, когда мы используем select () и другой метод на том же элементе.

Этот предыдущий пример является отличным примером.

d3.select("div").style("color","blue").style("font-size","30px")

Сначала мы проходим div как вход в select () метод Тогда select () Возвращает элемент выбора, который используется в качестве входных данных для style () метод Первый style () Затем применяет изменения в стиле к пропущенному элементу. Недавно стилизованный элемент затем передается в следующее style () для другого изменения. К концу мы применяем 3 метода с одним вызовом к исходному входу.

Вы также можете написать цепочки методов на отдельных строках, чтобы помочь читабельности:

d3.select("div")
.style("color","blue")
.style("font-size","30px")

Данные соединяются

Соединения данных позволяют нам связывать выбранные элементы с данными массива. Привязки – это основной инструмент, который вы используете для рисования визуализаций, поскольку они делают ваши манипуляции с DOM более реактивными на ваши данные.

Три основных метода соединений данных – datum () , data () и enter () Анкет

datum ()

datum () Метод соединяет точки данных с одним выбором D3.


    


    




d3.select("body")
  .select("p")
  .datum(["10"])
  .text(function(d) { return d; });

В приведенном выше примере мы хотим связать элемент данных с тегом HTML. В строка 1 , мы выбираем P тег с использованием select () метод В строка 3 , мы используем datum () связывать 10 с P ярлык. В строка 4 , мы используем Text () Чтобы вернуть данные, связанные с P ярлык.

данные()

Мы можем использовать data () Чтобы связать несколько точек данных с набором выбора D3. Это полезно при работе с большими наборами данных, поскольку это означает, что вам не нужно связывать каждую точку данных индивидуально.


    


    

   

   




d3.select("body").selectAll("p")
   .data([10, 20, 30])
   .text(function(d) { return d; });

Здесь мы выбираем три элемента в теле, используя selectall () Метод и свяжите каждый с точкой данных, используя data () Анкет Окончательная линия печатает данные из парного выбора.

войти()

enter () Метод используется для привязки элементов, когда есть больше выбранных элементов, чем в массиве есть элементы.


    


    

    

    




d3.select("body").selectAll("p")
   .data([10, 20, 30, 50, 70])
   .text(function(d) { return d; })
   .enter()
   .append("p")
   .text(function(d) { return d; });

Выше у нас есть три выбранных P Элементы, но 5 элементов в data () множество. Это связывает все возможные элементы в порядке, пока не будет несвязанного P Элементы остались. Затем мы используем добавление, чтобы добавить дополнительное P Элементы, пока все не могут быть связаны.

Примеры визуализации данных

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

SVG с D3.JS

Чтобы создать SVG с D3, нам нужно включить Svg Теги внутри нашего HTML -файла.


     content

D3 также имеет графический элемент «линии», который можно настроить с помощью attr () Анкет


    





var svg = d3.select("body") //create Svg element
   .append("svg")
   .attr("height",200 )
   .attr("width", 200)
   .style("border", "solid 8px red");

svg.append("line")
   .attr("x1", 50)
   .attr("y1", 30)
   .attr("x2", 150)
   .attr("y2", 100)
   .attr("stroke", "black")
   .attr("stroke-width","2px");

От строка 1 к строка 5 На странице Javascript мы создали SVG метка внутри тело ярлык. С помощью attr Метод, мы определяем атрибуты SVG Анкет

От строка 7 к строка 13 На странице Javascript мы создали строку внутри SVG Теги и инициализированные атрибуты линии с помощью attr метод

Следующая иллюстрация показывает, как линия расположена относительно происхождения, которое находится в верхнем левом углу холста SVG.

Круговая диаграмма с d3.js

Теперь мы будем использовать D3.ARC и D3.pie API, чтобы создать часть диаграммы «Языки программирования, используемые в 2020 году», которую мы видели в начале статьи.


    





var margin = {top: 20, right: 20, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var data = [
  {language:  "Python", value: 30},
  {language:  "Java", value: 20},
  {language:  "C/C++", value: 15},
  {language:  "Javascript", value: 35},
  {language:  "PHP", value: 15},];
colors=["#00A5E3","#FF96C5","#00CDAC","#FFA23A","#74737A"]  
var svg = d3.select("body") //create Svg element
   .append("svg")
   .attr('width', width + margin.right + margin.left)
   .attr('height', height + margin.top + margin.bottom)
   .style("border", "solid 1px red")
    .attr("transform","translate(200,0)");                 
var chart=svg.append('g')
   .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
   .attr('width', width)
   .attr('height', height)
var pie=d3.pie() 
        .value(d => d.value)
var color_scale=d3.scaleOrdinal()
              .domain(data.map(d=>d.language))
              .range(colors)
let arc=d3.arc()
       .outerRadius(150)
       .innerRadius(0)
var p_chart=chart.selectAll("pie")
     .data(pie(data))
     .enter()
     .append("g")
     .attr('transform', 'translate(170,230)') 
p_chart.append("path")
     .attr("d",arc) 
     .attr("fill",d=>{
       return color_scale(d.data.language);
     })     
p_chart.append("text")
      .text(function(d){ return d.data.language})
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";  }) 
      .style("text-anchor", "middle")

Строка 29-33 : Во -первых, мы определили P_Chart Анкет Мы выбрали пирог, которого не существует, поэтому он вернет пустой выбор. Теперь мы присоединяемся data () с нашим возвращением через Данные (PIE (DATA)) . Тогда мы добавили G тег для каждой точки данных.

Строка 34-38 это где круговая диаграмма нарисована с помощью дуги. С помощью ordinalscale () , мы назначили цвет каждой дуге.

Строка 39-42 : Мы добавили название языка в соответствующую дугу, используя Text () метод Это Text () будет размещен в центре каждой дуги с помощью arc.centroid () метод

Продвинутые концепции для изучения следующий

Как вы можете видеть, D3 позволяет вам создавать некоторые привлекательные визуальные эффекты даже с этими основными компонентами. По мере того, как вы продолжаете изучать D3.JS, вот несколько продвинутых концепций, которые помогут вам создать еще лучшие диаграммы и графики:

  • Масштаб и пересечение
  • Пользовательская интерактивность
  • Иерархическое картирование
  • Усовершенствованные формы диаграммы

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

В конце концов вы сможете использовать свои навыки JS Front-End для создания визуализаций данных наравне с самыми опытными учеными для данных.

Счастливого обучения!

Продолжить чтение о JavaScript и Data Science

Оригинал: “https://dev.to/educative/beginner-s-d3-js-tutorial-learn-data-visualization-with-js-29nn”

Читайте ещё по теме: