Начало работы с визуализацией данных с помощью D3.js
Вы когда-нибудь заходили на переполненный стадион или на музыкальное шоу и пытались угадать, сколько людей вас окружало? Вы были далеко? Анализ больших объемов данных может быть непосильной задачей. Но если вы возьмете абстрактные точки данных и преобразуете их в точную и крупную визуальную информацию, вы сможете увидеть вещи аналитически.
Это эпоха информации, когда данных более чем достаточно, но лишь немногие знают, что с ними делать. Люди полагаются на свое зрение гораздо больше, чем на что-либо еще. Поэтому данные, представленные наглядно, более убедительны, чем простые числа. Отличная визуализация способна привлечь внимание людей, а бесконечные столбцы и ряды цифр могут только смутить их. Чтобы сделать эти визуализации и аналитику возможными, нам нужны фреймворки или библиотеки для существующих языков, чтобы это стало возможным. Здесь на помощь приходит D3.js.
D3 означает документы на основе данных. Если вы планируете создавать собственные визуализации в Интернете, скорее всего, вы уже слышали о D3.js. Библиотека веб-визуализации, которая включает множество API-интерфейсов для выполнения тяжелой работы по созданию расширенного, динамического и красивого визуализационного контента в Интернете.
D3.js - это библиотека JavaScript для управления документами на основе данных. D3.js помогает оживить данные с помощью HTML, SVG и CSS. Акцент D3 на веб-стандартах дает вам все возможности современных браузеров, не привязывая себя к проприетарной платформе, сочетая мощные компоненты визуализации и управляемый данными подход к манипуляциям с DOM.
Основная задача, которую выполняет D3, заключается в том, что он позволяет привязать любые данные, которые вы хотите, к DOM, а затем выполнять в них управляемые данными преобразования, что позволяет легко создавать интерактивные визуализации данных в вашем приложении.
Репозиторий D3 на Github и документация по API, которая используется в D3, также являются хорошими источниками, если вы хотите погрузиться в подробности.
Давайте теперь начнем использовать D3.js. Вы можете открыть свою среду IDE или редактор и создать файл с именем index.html, просто чтобы поиграть с D3.js. Использовать эту библиотеку для нашего приложения так же просто, как добавить ссылку напрямую для получения последней версии, как показано ниже в index.html, который вы создали:
<script src="https://d3js.org/d3.v5.min.js"></script>Итак, теперь вы готовы использовать D3.js и все его функции в своем образце приложения.
Подбор элементов
Выбор означает выбор элемента html из его имени или селекторов CSS. (например: h2, p) Затем после выбора элементов мы можем использовать D3 для управления и преобразования этих элементов html так, как мы хотим. Выборки позволяют выполнять мощное преобразование объектной модели документа (DOM) на основе данных: устанавливать атрибуты, стили, свойства, HTML или текст и т. Д. Используя пункты вход и выход в объединении данных, вы также можете добавлять или удалять элементы, чтобы они соответствовали данным.
Представьте, что у нас есть простая HTML-страница, как показано ниже.
<html>
<head>
<title>My sample HTML page</title>
</head>
<body>
<h1>D3.js</h3>
<p>I'm using D3.js here !</p>
<p>We all are using D3.js here !</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.select('h1').style('color', 'green');
d3.selectAll('p').style('font-size', '30px');
</script>
</body>
</html>
Здесь следует обратить внимание на несколько важных моментов. Итак, здесь используются два ключевых слова. Оба они используют имя элемента в качестве параметра. Первый метод d3.select () возвращает первый выбор элемента DOM, соответствующий заданному параметру. В приведенном выше примере это будет ‹h1› D3.js ‹/h3›. Второй метод - это d3.selectAll (), который возвращает все элементы html, соответствующие заданному параметру. Если он не найдет никаких тегов ‹p›, он вернет пустой выбор. В данном примере ‹p› я использую здесь D3.js! ‹/P› и ‹p› Мы все здесь используем D3.js! ‹/P› оба будут возвращены.
Далее вы можете ознакомиться с манипуляциями, которые выполняются также после выбора элементов DOM. Мы можем изменить стиль или даже отображаемый текст. Итак, в нашем примере, когда это отображается, заголовок «D3.js» будет зеленого цвета.
Подробнее о выборе можно узнать здесь.
Динамические свойства и привязка данных
Другая основная концепция D3 - это динамическое отображение набора данных на элементы DOM. Здесь мы можем ввести наборы данных, а затем мы можем обновлять, добавлять и отображать элементы DOM, используя эти наборы данных, в реальном времени.
let dataset = [1,2,3,4,5] d3.selectAll(‘p’) //Select 'p' element .data(dataset) //data()puts data into waiting for processing .enter() //take data elements one by one .append(‘p’) //for each data item appending <p> .text(‘Sample text’); //add sample text to each
Это отобразит текст «образец текста» 5 раз во внешнем интерфейсе. Это всего лишь простой пример, показывающий, что мы можем использовать данные для управления элементами динамически и в реальном времени. Есть много вещей, которые можно сделать, используя ту же концепцию.
Визуализация данных
Поскольку теперь мы достаточно хорошо знакомы с основными концепциями D3, мы можем перейти к компонентам визуализации данных, которые состоят из различных типов графиков, таблиц данных и других визуализаций.
Масштабируемая векторная графика (SVG) - это способ визуализации графических элементов и изображений в модели DOM. Поскольку SVG является векторным, он легкий и масштабируемый. D3 использует SVG для создания всех визуальных элементов, например графиков. Самое замечательное в использовании SVG - это то, что нам не нужно беспокоиться об искажении при масштабировании визуальных элементов, в отличие от других форматов. По сути, D3 помогает нам преодолеть разрыв между данными и соответствующими визуализациями, чтобы предоставить пользователям значимую информацию.
Начнем с создания простой гистограммы с помощью D3.js. Чтобы попробовать это, вам понадобятся два файла с именами index.html, script.js и style.css, как показано ниже.
index.html
<html> <head> <link rel=”stylesheet” href=”style.css”> <title>My sample D3.js App</title> </head> <body> <h1>Bar Chart using D3.js</h1> <svg width=”500" height=”800" class=”bar-chart”></svg> <script src=”https://d3js.org/d3.v5.min.js"></script> <script src=”script.js”></script> </body> </html>
script.js
var dataset = [28, 40, 56, 50, 75, 90, 120, 120, 100];
var chartWidth = 500, chartHeight = 300, barPadding = 5;
var barWidth = (chartWidth / dataset.length);
var svg = d3.select(‘svg’)
.attr(“width”, chartWidth)
.attr(“height”, chartHeight);
var barChart = svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“y”, function(d) {
return chartHeight — d
})
.attr(“height”, function(d) {
return d;
})
.attr(“width”, barWidth — barPadding)
.attr(“fill”, ‘#F2BF23’)
.attr(“transform”, function (d, i) {
var translate = [barWidth * i, 0];
return “translate(“+ translate +”)”;
});
style.css
.bar-chart {
background-color: #071B52;
}
Получившаяся гистограмма должна выглядеть примерно так.
Это показывает визуализацию, но нет точной информации, кроме тенденции. Итак, наша следующая задача - добавить несколько меток, чтобы значения каждой полосы были видны, давая больше информации о визуальных эффектах.
Для этого вы можете добавить следующий фрагмент кода в конец файла script.js.
script.js
var text = svg.selectAll(“text”)
.data(dataset)
.enter()
.append(“text”)
.text(function(d) {
return d;
})
.attr(“y”, function(d, i) {
return chartHeight — d — 2;
})
.attr(“x”, function(d, i) {
return barWidth * i + 10;
})
.attr(“fill”, “#A64C38”);
Это приведет к тому, что показано ниже, показывая значения.
Теперь нам нужно добавить масштабирование к нашей диаграмме. Вы можете иметь различные значения в вашем наборе данных; некоторые могут быть очень маленькими, а некоторые - очень большими. Поэтому для лучшей визуализации и единообразия важно иметь масштабирование на диаграмме.
Если мы изменим наш набор данных, как показано ниже, вы увидите, как отображается гистограмма.
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
Таким образом, мы едва можем видеть столбцы на графике. Поэтому мы должны масштабировать его в соответствии с высотой диаграммы. Если у вас есть большие значения в вашем наборе данных, не будет отображаться точная высота в пределах заданной высоты диаграммы. Таким образом, решение для этого - соответствующее масштабирование. Для этого мы можем использовать такой масштабатор и изменить гистограмму.
script.js
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
var chartWidth = 500, chartHeight = 300, barPadding = 5;
var barWidth = (chartWidth / dataset.length);
var svg = d3.select(‘svg’)
.attr(“width”, chartWidth)
.attr(“height”, chartHeight);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, chartHeight])
var barChart = svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“y”, function(d) {
return chartHeight — yScale(d);})
.attr(“height”, function(d) {
return yScale(d);})
.attr(“width”, barWidth — barPadding)
.attr(“fill”, ‘#F2BF23’)
.attr(“transform”, function (d, i) {
var translate = [barWidth * i, 0];
return “translate(“+ translate +”)”;
});
var text = svg.selectAll(“text”)
.data(dataset)
.enter()
.append(“text”)
.text(function(d) {
return d;})
.attr(“y”, function(d, i) {
return chartHeight — yScale(d) — 2;})
.attr(“x”, function(d, i) {
return barWidth * i + 10;})
.attr(“fill”, “#A64C38”);
Итак, теперь совершенно очевидно, что на нашем графике отсутствуют оси. Так что добавить оси к нашему графику с помощью D3.js. очень просто. Вы можете создать ось x и ось y, используя шкалу x и y в D3.js. Вы можете создать масштабированный график с метками, используя следующий фрагмент кода.
script.js
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
var chartWidth = 500, chartHeight = 300, barPadding = 6;
var barWidth = (chartWidth / dataset.length -14);
var svg = d3.select(‘svg’)
.attr(“width”, chartWidth)
.attr(“height”, chartHeight);
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, chartWidth]);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0,chartHeight — 28]);
var yScaleChart = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([chartHeight — 28, 0]);
var barChart = svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“y”, function(d) {
return chartHeight — yScale(d) — 20;})
.attr(“height”, function(d) {
return yScale(d);})
.attr(“width”, barWidth — barPadding)
.attr(“fill”, ‘#F2BF23’)
.attr(“transform”, function (d, i) {
var translate = [barWidth * i +55, 0];
return “translate(“+ translate +”)”;});
var text = svg.selectAll(“text”)
.data(dataset)
.enter()
.append(“text”)
.text(function(d) {
return d;})
.attr(“y”, function(d, i) {
return chartHeight — yScale(d) — 20;})
.attr(“x”, function(d, i) {
return barWidth * i + 70;})
.attr(“fill”, “#A64C38”);
var x_axis = d3.axisBottom().scale(xScale);
var y_axis = d3.axisLeft().scale(yScaleChart);
svg.append(“g”)
.attr(“transform”, “translate(50, 10)”)
.call(y_axis);
var xAxisTranslate = chartHeight — 20;
svg.append(“g”)
.attr(“transform”, “translate(50, “ + xAxisTranslate +”)”)
.call(x_axis);
style.css
.bar-chart {
background-color: beige;
}
Таким образом, как и на простой гистограмме выше, мы можем создавать много типов графиков, которые нам нужны. Лучшее здесь - это контроль над тем, что мы создаем. В отличие от других готовых графиков, которые имеют ограниченную настройку, мы можем иметь свободу создания собственных графиков с использованием SVG в D3.js.
D3 решает причину проблемы: эффективное управление документами на основе данных. Это позволяет избежать закрытого представления и обеспечивает исключительную гибкость, раскрывая все возможности веб-стандартов, таких как HTML, SVG и CSS. С минимальными накладными расходами D3 работает чрезвычайно быстро, поддерживает большие наборы данных и динамическое поведение для взаимодействия и анимации.
Посмотреть уже созданные сложные и привлекательные графики можно в Галерее графиков D3.js.
В то время как большинство людей будут называть D3.js библиотекой визуализации данных, это не. D3 - это скорее структура, состоящая из различных частей, таких как части jQuery (которые помогают нам выбирать и управлять элементами DOM), части Lodash, части анимации, части анализа данных и части визуализации данных.
Попробуйте визуализацию данных с помощью D3.js и поделитесь со мной результатами!
