D3.JS — ДЕМИСТИФИЦИРОВАННЫЙ

const yAccessor = (d) => d.InternetUsage;
  const dateParser = d3.timeParse("%d/%m/%Y");
  const xAccessor = (d) => dateParser(d["Bill Date"]);
  // Check the value of xAccessor function now
  // console.log(xAccessor(dataset[0]));

Примечание. В отличие от синтаксических анализаторов даты на "естественном языке" (включая встроенный синтаксический анализ JavaScript), этот метод является строгим. Если указанная строка не совсем соответствует соответствующему описателю формата, этот метод возвращает значение null. Например, если связанный формат представляет собой полную строку ISO 8601 «%Y-%m-%dT%H:%M:%SZ», то строка «2011–07–01T19:15:28Z» будет проанализирована правильно. , но «2011–07–01T19:15:28», «2011–07–01 19:15:28» и «2011–07–01» вернут значение null, несмотря на то, что они действительны для 8601 даты.

console.log(xAccessor(dataset[0]));

ШАГ 5: СОЗДАЙТЕ КОНТЕЙНЕРЫ ГРАФИК

При рисовании диаграммы есть два контейнера, размеры которых нам нужно определить: оболочка и границы.

Оболочка содержит всю диаграмму: элементы данных, оси, метки и т. д. Здесь будет содержаться каждый элемент SVG.

Границы содержат все наши элементы данных: в данном случае нашу строку.

Это различие поможет нам выделить пространство, необходимое для посторонних элементов (осей, меток), и позволит нам сосредоточиться на нашей основной задаче: построении наших данных. Одна из причин, по которой это так важно определить заранее, — непоследовательный и незнакомый способ определения размера элементов SVG».

Отрывок: Нейт Мюррей. «Полная визуализация данных с помощью D3»

// 2. Create a chart dimension by defining the size of the Wrapper and Margin
  let dimensions = {
    width: window.innerWidth * 0.6,
    height: 600,
    margin: {
      top: 115,
      right: 20,
      bottom: 40,
      left: 60,
    },
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
// 3. Draw Canvas
  const wrapper = d3
    .select("#wrapper")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height);
  //Log our new Wrapper Variable to the console to see what it looks like
  //console.log(wrapper);

Здесь мы выберем WrapperID, который мы передали в нашем файле Index.html. Как мы знаем, мы можем выбрать все элементы с идентификатором (#id)

ШАГ 6: СОЗДАТЬ ОГРАНИЧИВАЮЩИЙ КОНТЕЙНЕР?

Нам часто может понадобиться группировать элементы вместе, что позволяет нам применять преобразования или устанавливать атрибуты, которые наследуются всеми дочерними элементами этой группы. Один из способов добиться этого — использовать контейнер SVG-элемента ‹g›, что позволяет нам организовать наши элементы в группы. Затем мы добавим стиль с функцией transform.translate(), чтобы получить преобразование, перевод которого tx1 и ty1 равен tx0 + tk и ty0 + tk, где tx относится к перемещению по оси x и ty относится к перемещению по оси Y.

// 4. Create a Bounding Box
  const bounds = wrapper
    .append("g")
    .style("transform",
      `translate(${dimensions.margin.left}px,${dimensions.margin.top}px)`
    );

Если мы посмотрим на нашу панель «Элементы» в нашем браузере, мы увидим наш новый элемент со стилем ‹g›. Мы видим, что размер элемента составляет 0 пикселей на 0 пикселей — вместо того, чтобы принимать атрибут ширины или высоты, элемент будет расширяться, чтобы соответствовать своему содержимому. Когда мы начнем рисовать нашу диаграмму, мы увидим это в действии.

ШАГ 7: НАСТРОЙКА ОБЛАСТЕЙ И ДИАПАЗОНОВ ВЕСОВ

Чтобы отобразить максимальные значения использования Интернета в правильном месте, нам нужно преобразовать их в пространство пикселей. Итак, идея масштабирования состоит в том, чтобы взять имеющиеся у нас значения данных и поместить их в доступное пространство. В двух словах, цель состоит в том, чтобы убедиться, что данные, которые мы получаем, правильно вписываются в наш график. Поскольку у нас есть два разных типа данных (дата и числовые значения), их нужно обрабатывать отдельно. Чтобы правильно изучить всю эту концепцию масштабов, доменов и диапазонов, обратитесь к моему первому блогу D3.js -demistified
Прежде чем перейти к следующему разделу, я настоятельно рекомендую вам прочитать это (и многие другие замечательные работы Фила), поскольку он действительно точно описывает описание
https://observablehq.com/@d3/introduction-to-d3s-scales

Чтобы создать новую шкалу, нам нужно создать экземпляр конструкции d3.scaleLinear(). d3.scaleLinear создает шкалу с линейной зависимостью между входом и выходом. Затем мы будем использовать функцию .domain, чтобы сообщить D3, каков будет объем данных, а затем передать их функции масштабирования.

Модуль d3-array также имеет метод d3.extent() для захвата этих чисел. d3.extent() принимает два параметра:

• массив точек данных
• функция доступа, которая по умолчанию является функцией идентификации (d => d)

// 5. Define Domain and Range for Scales
  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(dataset, yAccessor))
    .range([dimensions.boundedHeight, 0]);

Здесь функция .extent находит максимальное и минимальное значения в массиве, а затем функция .domain возвращает эти максимальное и минимальное значения до D3 в качестве диапазона для оси x.

.range([dimensions.boundedHeight, 0])

Y-значения SVG отсчитываются сверху вниз, и в этом случае максимальное и минимальное количество пикселей, на которых наша точка будет располагаться по оси x.

ШАГ 8: СОЗДАЙТЕ ЭТАЛОННУЮ ПОЛОСУ

Создайте эталонную полосу, которая будет действовать как порог для наших данных. Я держу 100 ГБ в качестве цели. Давайте визуализируем этот порог, добавив прямоугольник. Нам просто нужно дать ему четыре атрибута: x, y, ширина и высота.

// console.log(yScale(100));
  const referenceBandPlacement = yScale(100);
  const referenceBand = bounds
    .append("rect")
    .attr("x", 0)
    .attr("width", dimensions.boundedWidth)
    .attr("y", referenceBandPlacement)
    .attr("height", dimensions.boundedHeight - referenceBandPlacement)
    .attr("fill", "#ffece6");

Точно так же создайте шкалы для оси X, как мы сделали для оси Y.

const xScale = d3
    .scaleTime()
    .domain(d3.extent(dataset, xAccessor))
    .range([0, dimensions.boundedWidth]);

ШАГ 9: ПРЕОБРАЗОВАТЬ ТОЧКУ ДАННЫХ В ЗНАЧЕНИЕ X И Y

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

//6. Convert a datapoints into X and Y value
  const lineGenerator = d3
    .line()
    .x((d) => xScale(xAccessor(d)))
    .y((d) => yScale(yAccessor(d)))
    .curve(d3.curveBasis);

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

ШАГ 10: ПРЕОБРАЗОВАТЬ X И Y В ПУТЬ

Этот метод используется для создания нового пути на основе точек данных X и Y. d3.path возвращает объект, который реализует те же методы пути, что и контекст Canvas 2D, но сериализует их в данные пути SVG.

// 7. Convert X and Y into Path
  const line = bounds
    .append("path")
    .attr("d", lineGenerator(dataset))

.attr("fill", "none")
    .attr("stroke", "Red")
    .attr("stroke-width", 2);

ШАГ 11: СОЗДАЙТЕ ОСИ X И Y

Оси можно рисовать с помощью встроенных функций D3. Он состоит из линий, делений и меток. Функция d3.axisLeft() в D3.js используется для создания левой вертикальной оси. Эта функция создаст новый генератор оси, ориентированный влево, для заданного масштаба с пустыми аргументами деления, размером деления 6 и отступом 3.

Когда мы вызовем наш генератор осей, он создаст множество элементов, поэтому лучше создать элемент g, чтобы содержать все эти элементы и поддерживать порядок в нашем DOM.

//8. Create X axis and Y axis
  // Generate Y Axis
  const yAxisGenerator = d3.axisLeft().scale(yScale);
  const yAxis = bounds.append("g").call(yAxisGenerator);
  // Generate X Axis
  const xAxisGenerator = d3.axisBottom().scale(xScale);
  const xAxis = bounds
    .append("g")
    .call(xAxisGenerator);

Почему d3.axisBottom() не нарисовал ось в нужном месте? Функции генератора осей d3 знают, где размещать деления и метки делений относительно линии оси, но они понятия не имеют, где разместить саму ось.

Чтобы переместить ось X вниз, мы можем сдвинуть группу оси X, подобно тому, как мы сдвинули границы диаграммы с помощью CSS-преобразования.

Отрывок: Нейт Мюррей. «Полная визуализация данных с помощью D3».

Есть еще две проблемы, связанные с осью X.

• Точка данных показывала «2020» вместо «Январь».
• Точка данных, соответствующая «декабрю», показывает усеченную версию декабря.

давайте исправим этот код XAxisGenerator,

// Generate X Axis
  const xAxisGenerator = d3.axisBottom().scale(xScale);
  const xAxis = bounds
    .append("g")
    .call(xAxisGenerator.tickFormat(d3.timeFormat("%b,%y")))
    .style("transform", `translateY(${dimensions.boundedHeight}px)`);

ШАГ 12: ДОБАВЬТЕ НАЗВАНИЕ ГРАФИКА

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

wrapper
    .append("g")
    .style("transform", `translate(${50}px,${15}px)`)
    .append("text")
    .attr("class", "title")
    .attr("x", dimensions.width / 2)
    .attr("y", dimensions.margin.top / 2)
    .attr("text-anchor", "middle")
    .text("My 2020 Internet Usage(in GB) ")
    .style("font-size", "36px")
    .style("text-decoration", "underline");

ВЫВОД:

Миссия по объяснению линейной диаграммы завершена. Поздравляем! Мы успешно создали линейную диаграмму с помощью D3.js. Из простой цели создания линейной диаграммы мы изучили многие основные концепции D3:

• Выборы
• Напольные весы
• Оси
• Трансформация

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

Вот полный код, который я использовал.

async function drawLineChart() {
  //1. Load your Dataset
  const dataset = await d3.csv("./../../Internet Usage.csv");
  //Check the sample values available in the dataset
  //console.table(dataset[0]);
  const yAccessor = (d) => d.InternetUsage;
  const dateParser = d3.timeParse("%d/%m/%Y");
  const xAccessor = (d) => dateParser(d["Bill Date"]);
  //Check the value of xAccessor function now
  //console.log(xAccessor(dataset[0]));
  // 2. Create a chart dimension by defining the size of the Wrapper and Margin
  let dimensions = {
    width: window.innerWidth * 0.6,
    height: 600,
    margin: {
      top: 115,
      right: 20,
      bottom: 40,
      left: 60,
    },
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
  // 3. Draw Canvas
  const wrapper = d3
    .select("#wrapper")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height);
  //Log our new Wrapper Variable to the console to see what it looks like
  //console.log(wrapper);
  // 4. Create a Bounding Box
  const bounds = wrapper
    .append("g")
    .style(
      "transform",
      `translate(${dimensions.margin.left}px,${dimensions.margin.top}px)`
    );
  // 5. Define Domain and Range for Scales
  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(dataset, yAccessor))
    .range([dimensions.boundedHeight, 0]);
  // console.log(yScale(100));
  const referenceBandPlacement = yScale(100);
  const referenceBand = bounds
    .append("rect")
    .attr("x", 0)
    .attr("width", dimensions.boundedWidth)
    .attr("y", referenceBandPlacement)
    .attr("height", dimensions.boundedHeight - referenceBandPlacement)
    .attr("fill", "#ffece6");
  const xScale = d3
    .scaleTime()
    .domain(d3.extent(dataset, xAccessor))
    .range([0, dimensions.boundedWidth]);
  //6. Convert a datapoints into X and Y value
  const lineGenerator = d3
    .line()
    .x((d) => xScale(xAccessor(d)))
    .y((d) => yScale(yAccessor(d)))
    .curve(d3.curveBasis);
  // 7. Convert X and Y into Path
  const line = bounds
    .append("path")
    .attr("d", lineGenerator(dataset))
    .attr("fill", "none")
    .attr("stroke", "Red")
    .attr("stroke-width", 2);
  //8. Create X axis and Y axis
  // Generate Y Axis
  const yAxisGenerator = d3.axisLeft().scale(yScale);
  const yAxis = bounds.append("g").call(yAxisGenerator);
  // Generate X Axis
  const xAxisGenerator = d3.axisBottom().scale(xScale);
  const xAxis = bounds
    .append("g")
    .call(xAxisGenerator.tickFormat(d3.timeFormat("%b,%y")))
    .style("transform", `translateY(${dimensions.boundedHeight}px)`);
  //9. Add a Chart Header
  wrapper
    .append("g")
    .style("transform", `translate(${50}px,${15}px)`)
    .append("text")
    .attr("class", "title")
    .attr("x", dimensions.width / 2)
    .attr("y", dimensions.margin.top / 2)
    .attr("text-anchor", "middle")
    .text("My 2020 Internet Usage(in GB) ")
    .style("font-size", "36px")
    .style("text-decoration", "underline");
}
drawLineChart();

Если вам интересно узнать больше о D3.js, обязательно ознакомьтесь с курсом Fullstack D3 от Амелии Ваттенбергер.

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

Мы постарались охватить как можно больше, чтобы новичок мог начать работу с D3.js. Надеюсь, вам понравится. Как всегда, мы приветствуем обратную связь и конструктивную критику. Если вам понравился этот блог, мы будем рады, если вы нажмете кнопку Поделиться, чтобы другие могли наткнуться на него. Пожалуйста, нажмите кнопку подписки, если вы хотите, чтобы вас добавляли в мой еженедельный список рассылки, и не забудьте подписаться на Vizartpandey в Instagram!