Наталия Степанова

Как сделать Treemap график на D3.js

2024-01-17T08:21:22.687Z

Сегодня я решила написать про создание графика Тримап — одного из самых мощных инструментов для визуализации иерархических данных.

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

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

По традиции сразу делюсь ссылками на результат:

Подготовка данных

Каждый отдельный элемент Тримапа — это объект со следующими параметрами:

{
  name: <string>,
  value: <integer>
}

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

{
  name: "treemap",
  children: [
    {
      name: "group1",
      children: [
        { name: "element1", value: 20 },
        { name: "element2", value: 50 },
        { name: "element3", value: 70 },
      ]
    },
    {
      name: "group2",
      children: [
        { name: "element4", value: 10 },
        { name: "element5", value: 60 },
      ]
    }
  ]
}

В этот раз я создам данные случайным образом. Пусть у меня будет как в примере выше два уровня вложенности: Тримап разбит на группы, группы — на элементы.

Следующий код создаёт случайное количество групп (от 3 до 5) и случайное количество элементов в каждой группе (от 5 до 10). При этом значения этих элементов могут варьироваться от 20 до 100.

const data = { name: "treemap", children: [] };
const groupsCount = Math.round(3 + Math.random() * 2);

for (let i = 0; i < groupsCount; i++) {
  const group = { name: `group_${i + 1}`, children: [] };
  const count = Math.round(5 + Math.random() * 5);

  for (let j = 0; j < count; j++) {
    group.children.push({
      name: `element_${j + 1}`,
      value: 20 + Math.random() * 80,
    });
  }

  data.children.push(group);
}

Подготовка графика

Я, как и всегда раньше, буду писать всё в одном файле. Cтруктурe этого файла, подключение библиотеки и настройки главного SVG элемента можно подсмотреть в первой статье моего цикла (Как сделать Line Chart) или в коде примера.

Я создала данные нужного D3 формата, но перед рисованием их ещё нужно обработать. Сделать это можно с помощью методов d3.hierarchy и d3.treemap:

const root = d3.hierarchy(data).sum((d) => d.value);

d3.treemap().size([width, height]).padding(2)(root);

Сначала hierarchy суммирует значения на каждом уровне, а потом treemap вычисляет размеры и позиции всех элементов. В итоге получается большой и сложный объект как на картинке ниже:

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

const color = d3.scaleOrdinal(d3.schemeCategory10);

Рисование прямоугольников и подписей

Теперь можно рисовать SVG элементы. Сначала прямоугольники:

svg
  .selectAll('rect')
  .data(root.leaves())
  .join('rect')
  .attr('x', (d) => d.x0)
  .attr('y', (d) => d.y0)
  .attr('width', (d) => d.x1 - d.x0)
  .attr('height', (d) => d.y1 - d.y0)
  .style('stroke', 'black')
  .style('fill', (d) => color(d.parent.data.name));

Это все элементарные частицы Тримапа, которые можно получить с помощью root.leaves(). Их позиции и размеры уже вычислены, а цвет мы берём из палитры по имени родителя-группы.

Получается подобное разноцветное разбиение

Второй шаг — отображение подписей. И тут сейчас будут нюансы, но сначала сделаем подписи простыми текстовыми элементами:

svg
  .selectAll('text')
  .data(root.leaves())
  .join('text')
  .attr('x', (d) => d.x0 + padding)
  .attr('y', (d) => d.y0 + fontSize)
  .style('font-size', `${fontSize}px`)
  .text((d) => d.data.name);

И результат чаще всего — вылезающие за пределы подписи, как на картинке.

Сейчас расскажу, как можно это исправить. Основных варианта три:

Прятать вылезающую часть подписи, имитируя свойство ellipsis.
Адаптировать подписи, например, менять их размер чтобы они полностью помещались.
Использовать DOM элементы и сделать любую более сложную логику.

Обрезание подписей

Это самый простой способ и я обычно пользуюсь именно им. Суть в том, чтобы вычислить ширину блока, длину текста и обрезать то, что не влезло, заменив на «...». Ширина блока нам всегда известна, это x1 - x0, а вот длину текста можно считать по-разному.

Я часто пользуюсь простым лайфхаком: среднюю ширину одной буквы можно привязать к размеру шрифта и через эту привязку вычислять длину текста как text.length * fontSize * ratio. Троеточие вместо последних букв тоже, конечно, займёт место, поэтому пусть его длина это примерно один fontSize.

  .text((d) => {
    const ratio = 0.5;
    const text = d.data.name;
    const width = d.x1 - d.x0 - padding * 2;
  
    if (width > text.length * ratio * fontSize) {
      return text;
    }
  
    const length = Math.max(width / (ratio * fontSize) - 1, 0);
    const result = d.data.name.substring(0, length);

    return `${result}...`;
  });

Это решение простое, но не вариативное. Что делать, если размер шрифта или сам шрифт меняется? Если подписи очень длинные? А если они не помещаются по высоте?

Адаптация подписей

Тогда на помощь могут прийти другие способы.

Например, можно точно вычислять длину текста. Это делается через невидимый вспомогательный canvas элемент и метод measureText его контекста.

Усложнением этого метода может быть и изменение размера подписей. Например, мой базовый размер — 16 пикселей. Я могу пытаться вписать текст в блок, постепенно уменьшая его размер, а уже потом обрезать непоместившееся:

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

const measureText = (text, fontSize) => {
  context.font = `${fontSize}px serif`;
  return context.measureText(text).width;
};

const calculateTextSize = (d) => {
  const text = d.data.name;
  const width = d.x1 - d.x0 - padding * 2;

  let size = fontSize;
  let textWidth = measureText(text, size);
  
  while (size > 10 && textWidth > width) {
    size--;
    textWidth = measureText(text, size);
  }

  return size;
};

/*
......
*/
  
.style('font-size', (d) => `${calculateTextSize(d)}px`)
.text((d) => {
  const text = d.data.name;
  const width = d.x1 - d.x0 - padding * 2;

  const size = calculateTextSize(d);

  if (measureText(text, size) <= width) return text;

  let truncatedText = text;
  textWidth = measureText(`${truncatedText}...`, size);

  while (textWidth > width && truncatedText.length > 0) {
    truncatedText = truncatedText.substring(0, truncatedText.length - 1);
    textWidth = measureText(`${truncatedText}...`, size)
  }

  return `${truncatedText}...`;
});

Пришлось обрезать гораздо меньше подписей, чем раньше.

Использование DOM элементов

В SVG есть специальный тег, <foreignObject>, который используется, если нужно вставить любой чужеродный элемент. Раньше у этого тега была не очень хорошая поддержка, но сейчас ситуация стала сильно лучше и методом, который я сейчас опишу, уже вполне можно пользоваться.

Идея в том, чтобы вместо нативных для SVG тегов text использовать обычные div:

svg
  .selectAll('foreignObject')
  .data(root.leaves())
  .join('foreignObject')
  .attr('x', (d) => d.x0 + padding)
  .attr('y', (d) => d.y0 + padding)
  .attr('width', (d) => d.x1 - d.x0 - padding * 2)
  .attr('height', (d) => d.y1 - d.y0 - padding * 2)
  .append('xhtml:div')
  .style('height', '100%')
  .style('font-size', `${fontSize}px`)
  .style('overflow', 'hidden')
  .style('word-wrap', 'break-word')
  .html((d) => d.data.name);

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

В своём примере я оставлю метод с вариативными размерами.

Ссылки

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

Вместо заключения

Когда-то давно я делала небольшой эксперимент на D3, генерируемый Тримап в стиле Пита Мондриана, и заметила, что он всегда имеет частично диагональную структуру.

Например, тут все элементы имеют одинаковые значения и диагональная
структура явно видна в правой «квадратной» части.

Мне стало интересно, почему так происходит.

Оказалось, что существует 15 первичных алгоритмов построения Тримапа. D3 по умолчанию использует один из них, Squarified. Он стремится минимизировать у каждого блока отношение его длины к ширине, чтобы блоки становились более квадратными.

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

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

Как сделать Sankey график на D3.js

2023-06-19T10:49:01.152Z

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

Скорее всего вы хорошо знаете первый знаменитый санкей график — это визуализация Чарльза Минарда наступления армии Наполеона на Россию в войне 1812 года.

Тогда у такого графика ещё не было своего названия. Оно появилось только в 1898 году в честь ирландского капитана Мэттью Санкея, который нарисовал схему работы парового двигателя.

В этой статье я собираюсь рассказать, как сделать санкей график с помощью D3.js и объяснить, как именно он работает. Чтобы пропустить все объяснения и сразу посмотреть код, кликайте на вот эти ссылки:

Подготовка данных

В предыдущих туториалах я генерировала случайные данные. В этот раз я решила найти что-то не очень объёмное, но вполне реальное. После небольших поисков в открытых источниках я наткнулась на визуализацию производства и потребления электроэнергии в США в 2021 году.

Скопировав значения, я собрала такой файл. В нём данные уже приведены к нужному D3 формату. Санкей показывает связи между элементами системы, поэтому в данных есть две части: nodes — сами элементы и links — связи этих элементов. У каждого элемента есть его номер (id) и название (name). У каждой связи есть сила (value) и ссылки на соответствующие ей элементы (target и source указывают на id).

{
  "nodes": [
    { "id": 0, "name": "coal" },
    { "id": 1, "name": "natural gas" },
    ...
    { "id": 8, "name": "fossil fuels" },
    { "id": 9, "name": "energy consumed to generate electricity" },
    ... 
  ],
  "links": [
    { "source": 0, "target": 8, "value": 9.48 },
    { "source": 1, "target": 8, "value": 11.94 },
    ...
    { "source": 8, "target": 9, "value": 21.69 },
    ...
  ]
}

Подготовка графика

Я не буду описывать, как я подготавливаю страницу и SVG элементы, потому что я всегда делаю это одинаково и это можно найти в старой статье «Как сделать LineChart».

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

Перейду сразу к основной части:

const sankey = d3.sankey()
  .nodeWidth(20)
  .nodePadding(20)
  .size([width, height]);

Функция d3.sankey создаёт и возвращает мне сложный метод, который будет отвечать за построение графа. Ему заранее, ещё до всех вычислений, нужно передать параметры. Здесь это ширина каждого элемента, расстояние между соседями и размер графика. Это не все возможные настройки, например, можно изменить функцию сортировки связей и вершин или тип выравнивания элементов.

Чтобы вычислить граф и положение его вершин и связей, я передаю в этот метод данные, прочитанные из json файла:

d3.json(filename).then(data => {
  const graph = sankey(data);
  ...
});

Здесь и происходит главная магия. Если распечатать вернувшийся объект graph, то мы увидим все элементы с вычисленными координатами и размерами:

Так выглядят вычисленные связи

А так — вычисленные вершины

Рисование связей

Теперь у меня есть все значения, и я могу рисовать элементы и их связи. Начну со связей:

const link = svg.append('g')
  .selectAll('.link')
  .data(graph.links)
  .enter()
  .append('g')
  .attr('class', 'link');

Можно было бы просто покрасить их в серый или в цвет, соответствующий одной из вершин, но я видела красивый пример с градиентами и решила сделать так же. Градиенты в SVG делаются непросто — в каждой группе нужно создать свой linearGradient:

  link.append('linearGradient')
    .attr('id', d => `link-${d.index}`)
    .attr('gradientUnits', 'userSpaceOnUse')
    .attr('x1', d => d.source.x1)
    .attr('x2', d => d.target.x0)
    .call(gradient => gradient.append('stop')
      .attr('offset', '0%')
      .attr('stop-color', ({ source }) => colorScale(source.name)))
    .call(gradient => gradient.append('stop')
      .attr('offset', '100%')
      .attr('stop-color', ({ target }) => colorScale(target.name)));

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

const colorScale = d3.scaleOrdinal(d3.schemeTableau10);

Завершаю рисование связей добавлением элементов path:

link.append('path')
  .attr('d', d3.sankeyLinkHorizontal())
  .attr('stroke', ({ index: i }) => `url(#link-${i})`)
  .attr('stroke-width', ({ width }) => Math.max(1, width));

Их цвет — созданный ранее градиент, размер — не меньше 1 пикселя, а геометрию я получаю из метода d3.sankeyLinkHorizontal всё того же скрипта d3-sankey.js.

Получаю вот такие разноцветные линии с дырками между ними

Рисование вершин и подписей

Осталось нарисовать и подписать вершины графа. Как и со связями добавляю группы и привязываю данные:

const node = svg.append('g')
  .selectAll('.node')
  .data(graph.nodes)
  .enter()
  .append('g')
  .attr('class', 'node');

В каждой группе рисую прямоугольник:

node.append('rect')
  .attr('x', d => d.x0)
  .attr('y', d => d.y0)
  .attr('height', d => d.y1 - d.y0)
  .attr('width', d => d.x1 - d.x0)
  .style('fill', d => colorScale(d.name));

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

Почти всё, осталось только подписать вершины. Я сделаю это с помощью элементов text (отступы и параметры шрифта я выбрала на глаз). Подписи слева от центра выровнены по правому краю соответствующего элемента, а подписи справа — по левому:

const text = node.append('text')
  .attr('x', d => d.x0 - 3)
  .attr('y', d => (d.y1 + d.y0) / 2)
  .attr('dy', '0.35em')
  .attr('text-anchor', 'end')
  .text(d => d.name)
  .filter(d => d.x0 < width / 2)
  .attr('x', d => d.x1 + 3)
  .attr('text-anchor', 'start');

И это всё, получился вот такой график:

Ссылки

Язык Piet: программы, выглядящие как абстрактные картины

2023-01-06T15:31:50.015Z

Существует отдельный класс языков программирования, называемых эзотерическими. Они придуманы не для решения реальных задач, а ради шутки, для исследования границ возможностей языков или для доказательства какой-то идеи.

Например, программы на языке Whitespace состоят только из пробелов и табуляций. Программы на Shakespeare выглядят как сонеты Шекспира, на Rockstar — как power metal баллады. А программу на Malbolge написать практически невозможно — язык специально сделан максимально сложным.

Piet — это один из эзотерических языков, придуманный физиком и автором комиксов Дэвидом Морган-Маром. Название отсылает к художнику Питу Мондриану и его абстрактным композициям.

Победа Буги-Вуги (Victory Boogie Woogie) — последняя
незаконченная картина Пита Мондриана. Начата в 1944 году.

Программы на Piet выглядят как разноцветные геометрические абстрактные картины. При этом существует много возможных способов написать одну и ту же программу. Например, картинка ниже — один из вариантов "Hello World".

Сущности языка

Простейшая сущность Piet — это кодель (codel) — один пиксель. Слово образовано из слияния слов «код» и «пиксель».

Несколько находящихся рядом пикселей одного цвета образуют цветовой блок (color block).

Piet работает только с целыми числами и символами юникода. Поэтому чаще всего количество пикселей одного цвета используют, чтобы задать конкретное целое число.

В основе языка лежит тип данных стек — это список, работающий по принципу LIFO («последним пришёл — первым вышел»).

Исполнение программы

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

Первый — указатель направления (direction pointer). Он может указывать направо, вниз, налево или вверх и нужен, чтобы интерпретатор понимал, какой кодель читать следующим.

Второй — переключатель коделей (codel chooser). Он может указывать направо или налево и помогает интерпретатору определить, в какую сторону двигаться, если возможных вариантов продолжения программы несколько.

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

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

Цветовое кодирование

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

Чёрные блоки нужны, чтобы задавать границы исполнения. Белые — просто пустое пространство, интерпретатор их игнорирует.

Остальные цвета кодируют команды языка. Команды определяются через изменения в оттенке и насыщенности двух соседних цветовых блоков.

Я не буду сейчас приводить описания каждой команды, их можно прочитать на сайте автора. Но часть команд я чуть позже подробно объясню на примере.

Интерпретаторы

Для написания и отладки кода я использовала программу Pietron. В сети также можно найти несколько онлайн интерпретаторов, например, вот этот. Сразу предупрежу, что разные интерпретаторы немного вольно трактуют некоторые правила, поэтому программа, написанная в одном редакторе, может сломаться в другом.

Как написать программу на Piet

Изначально идея освоить Piet у меня возникла, когда я решала задачи из Advent of Code этого года. Я хотела решить одну из них, но в итоге начала с чего-то более простого. Так я написала программу, которая вычисляет сумму любого количества переданных на вход положительных целых чисел.

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

1. Инициализация

Я буду суммировать входные значения и хранить в стеке промежуточное значение суммы. Изначально сумма равна нулю, поэтому мне нужно поместить в стек 0.

Это делают три коделя первого блока. Начальный кодель программы может быть любого цвета, это влияет только на цветовую гамму. Я выбрала тёмно-синий цвет. Идущий вторым кодель светло-синего цвета — команда push, она помещает в стек число, равное количеству коделей предыдущего блока. В результате в стеке окажется число 1. Чтобы превратить 1 в 0 я использовала команду not, она берёт значение из стека, инвертирует его и помещает обратно в стек.

На подобных картинках (они будут после описания)
я буду показывать, какие команды выполняются и как меняется стек

Как определяются команды

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

Для первого коделя я выбрала тёмно-синий цвет. В этом нет скрытого смысла, мне просто так захотелось. Чтобы получить следом команду push, как показано в таблице, мне нужно остаться в том же оттенке, но сдвинуть его насыщенность на один шаг темнее. Темнее тёмно-синего в палитре нет, поэтому идём в начало и берём светло-синий.

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

Кстати, можно не пугаться — по таблице вручную ничего определять не придётся. Во всех интерпретаторах языка есть подсказки и расшифровки команд.

Так из тёмно-синего получается светло-синий, а из светло-синего тёмно-красный

2. Суммирование

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

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

Вторая часть моей программы тоже состоит из всего трёх коделей. Первый из них — команда dup, дублирование последнего значения в стеке. Непосредственно для суммирования она мне не нужна, но очень поможет в будущем. Дело в том, что большинство команд Piet берут параметры из стека и меняют их. Поэтому единственный способ что-то сделать со значением, но не потерять его при этом — это скопировать его заранее.

Второй кодель — это команда in. Она читает число из входного потока данных и помещает его в стек.

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

3. Проверка

Это самый большой и наиболее сложный для понимания блок.

Так как количество суммируемых чисел у меня может быть любым, то я не могу бесконечно копировать последовательность команд in-add, мне нужен цикл. Циклы в Piet делаются визуальным разветвлением цветовых блоков. Исполняется тело цикла, потом делается проверка и если условие продолжения цикла выполняется, то с помощью специальных команд можно направить интерпретатор так, чтобы он вернулся в самое начало программы.

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

На этом этапе у меня в стеке как раз находятся два числа — предыдущее и текущее значения суммы. И есть команда great, которая может сказать мне, какое из чисел больше. Но не всё так просто: great, как и многие другие команды Piet, меняет стек. Я не могу сразу сравнить две суммы, потому что тогда я их потеряю — они исчезнут из стека и будут заменены на результат сравнения.

Поэтому первая команда у меня опять dup, я хочу продублировать текущее значение суммы, чтобы сохранить его после сравнения. Мой стек станет равен <0, N1, N1>. Но теперь я уже не могу ничего нормально сравнить. Я ведь хотела сравнивать 0 и N1, а 0 в самом низу.

Чтобы это исправить, мне нужно перемешать стек так, чтобы 0 оказался сверху. Перемешивание делается с помощью команды roll. Она берёт два последних значения стека <K, L>, где L — последнее, а K — предпоследнее, и циклично сдвигает следующие K позиций в стеке L раз. Например, если K — 4, L — 1, а оставшийся стек <1, 2, 3, 4, 5>, то после roll стек превратится в <1, 5, 4, 3, 2>.

Мне нужно из <0, N1, N1> получить <N1, N1, 0>, то есть вызвать roll(3, 2). Параметры 3 и 2 берутся из стека, и сначала их нужно туда записать двумя командами push. Чтобы записать 3, я делаю предыдущую команду dup блоком из трёх коделей, а чтобы записать 2, я делаю команду push блоком из двух.

Теперь можно сделать roll и получить нужный мне для сравнения стек. После я вызываю команду great, она берёт два последних значения из стека, сравнивает их и помещает в стек 1, если второе число больше первого и 0, если наоборот.

4. Цикл

У меня всё готово для цикла. Условие звучит так: если в стеке сверху лежит 1, то суммирование должно продолжиться, а если лежит 0, то нужно заканчивать.

Как я писала выше, циклы в Piet визуальные — нужно повернуть направление чтения коделей таким образом, чтобы в результате оказаться в самом начале.

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

Указатель направления можно поменять командой point. Она принимает один числовой параметр и поворачивает указатель нужное число раз. Например, point(1) изменит указатель со значения «направо» на значение «вниз», а point(2) — на значение «налево».

У меня всё подготовлено для блока point — наверху стека может лежать 0 или 1. Если там 0, то исполнение программы продолжится направо, а если 1, то повернёт вниз.

Казалось бы, всё отлично, но есть нюанс. Я хочу вернуться в начало цикла и чтобы первой командой там по-прежнему была команда dup. Но после блока цвета тёмной мадженты тёмно-красный блок станет командой add, а тёмно-синий — in. Если я просто поверну, не сбросив цвета, то я сломаю себе весь цикл.

Но я могу воспользоваться интересной особенностью языка. По таблице команд светло-голубые кодели после тёмной мадженты — команды roll. По идее они должны менять стек, но если перед ними оказываются блоки белого цвета, то они игнорируются и ничего не делают. Ещё я могу использовать чёрные блоки вокруг для ограничения рабочей области — через них интерпретатор пройти не сможет.

После команд roll у меня есть одна команда push, которая поместит в стек 1. И я сразу попадаю в тёмно-красный блок, который оказывается командой point, забирает единицу из стека и поворачивает указатель направления.

Я пришла в начало, следующим стал тёмно-синий блок, который как мне и нужно, представляет команду dup.

5. Выход из цикла

На последней итерации цикла я получу из входных данных 0. Прибавление нуля не изменит предыдущее значение, и команда roll ничего не перемешает, ведь в стеке окажутся три одинаковых значения. Условие цикла, команда great, вернёт 0, а команда point не поменяет указатель — исполнение программы продолжится в том же направлении, напечатав результат с помощью команды out. Интерпретатор окажется в белой области без каких-либо команд и завершит исполнение программы.

Вот, что происходит на последней итерации цикла. Nn — итоговое значение суммы.

Итог

Ничего из задач Advent of Code я так в итоге на Piet и не решила.

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

Возможно, в будущем я и другие эзотерические языки попробую. А вы пробовали?

Как сделать простой PieChart на D3.js

2021-11-29T10:02:59.438Z

Любите ли вы пайчарты? Я вот не очень, но они регулярно мне встречаются и иногда очень даже симпатичные и информативные. Поэтому сегодня я решила написать про них небольшую заметку и разобрать, как сделать простой пайчарт с помощью D3.

Немного истории

Первый пайчарт нарисовал Уильям Плейфэр в своей книге «Краткое изложение статистики» ("Statistical Breviary") ещё в 1801 году. Та визуализация показывала владения Османской империи в разных частях света.

Визуализация Плейфэра

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

Позже, в 1858 году Флоренс Найтингейл переиспользовала пайчарт, сделав визуализацию причин смерти солдат во время Крымской войны.

Визуализация Найтингейл

Чем плохи и хороши пайчарты

Если говорить честно, я не люблю пайчарты. Соглашусь тут с Тафти, что они используют избыточное количество чернил для отображения очень простых данных (хотя я и не всегда согласна с идеей Тафти о максимальном упрощении всего).

Одни и те же данные ([35, 25, 25, 15]) в разных представлениях

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

Например, эти прямоугольники разные (не все), но сложно быстро расположить их по убыванию их размера:

Похожая проблема возникает и с секторами круга: понять, какой сектор больше, можно, сравнив длины дуг окружности, а вот определить, насколько он больше, становится сложнее. Особенно это заметно, когда сектора по-разному повёрнуты.

Но не всё с пайчартами плохо. Их вполне можно эффективно использовать, когда хочется показать отношение небольшого количества величин друг к другу и к их сумме.

Как сделать простой пайчарт на D3

Сейчас расскажу, как сделать самый обычный пайчарт на D3.

В качестве данных я взяла площади континентов (в миллионах квадратных километров):

const data = {
  Asia: 44.6,
  Africa: 30,
  North America: 24.5,
  South America: 17.8,
  Antarctica: 14.2,
  Europe: 9.9,
  Australia: 7.7,
}

Сначала подготовим svg для рисования:

const size = 300;
const radius = size / 2;

const svg = d3.select('svg')
  .attr('width', size)
  .attr('height', size);

const g = svg.append('g')
  .attr('transform', `translate(${radius}, ${radius})`);

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

Теперь подготовим данные:

const pie = d3.pie();
const pieData = pie(Object.values(data));

d3.pie — это специальный метод, который по массиву значений вычисляет все параметры сегментов круга, в том числе их начальные и конечные углы. Его код можно посмотреть здесь — весь класс занимает всего 80 строчек.

В результате получаем данные такого вида:

[1]: {
  index: 1,
  data: 30,
  value: 30,
  padAngle: 0,
  startAngle: 1.8845330511110263,
  endAngle: 3.152156179661044,
}

Пайчарт состоит из сегментов, то есть закрашенных дуг окружности. Дуги это простые path элементы. Создадим их и привяжем к ним данные:

const arcs = g.selectAll('.arc')
  .data(pieData)
  .join(enter => enter
    .append('path')
    .attr('class', 'arc')
  );

Теперь можно рисовать. Сначала нам нужны палитра и функция для рисования дуг (arc). По смыслу и действию arc() похожа на line(): она умеет строить линию по элементу массива, подготовленного методом pie(). Для этого ей нужны 2 значения: внутренний и внешний радиус. Кстати, если внутренний радиус сделать не нулевым, то вместо пайчарта будет донат.

Когда всё готово, мы можем всем дугам (arcs) присвоить атрибуты формы (d) и цвета (fill):

const color = d3.scaleOrdinal(d3.schemeCategory10);
const arc = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);
  
arcs
  .attr('d', arc)
  .style('fill', (_, i) => color(i));

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

Чтобы определить, где расположить подписи, создадим ещё одну функцию arc. Так как сами дуги рисовать мы не будем, можно сделать одинаковые радиусы где-то около границ, но так, чтобы текст точно попадал внутрь:

const label = d3.arc()
  .outerRadius(radius - 25)
  .innerRadius(radius - 25);

И после уже добавим текстовые элементы, сдвинув их в нужные позиции. Сдвинуть можно с помощью метода centroid, который получает данные о дуге и возвращает массив из двух координат — её центр:

const texts = g.selectAll('text')
  .data(pieData)
  .join(enter => enter
    .append('text')
    .attr('transform', d => `translate(${label.centroid(d)})`)
    .text(d => `${Object.keys(data)[d.index]}: ${d.value}`));

Код примера можно рассмотреть здесь.

Карты в визуализациях

2021-02-15T15:09:43.581Z

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

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

Ссылки:

Проекции

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

Я буду говорить про карту в контексте географической карты. Это уменьшенная и упрощённая модель реального объекта, например, Земли. Но планета круглая, поэтому первая задача — представить её на плоской поверхности, с которой будет легче работать.

Для этого представления придуманы картографические проекции. Они помогают растянуть трёхмерную поверхность так, чтобы подменить её плоской, делая некоторые упрощения. Любая проекция не может сохранить все параметры изначального объекта, поэтому она всегда искажённая. В ней могут быть неправильные пропорции, размеры или углы. Самая привычная и стандартная проекция — проекция Меркатора, она сохраняет углы, но искажает размеры. Чем область дальше от экватора, тем её площадь будет больше.

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

Отдельно упомяну про координаты. Упрощённо Земля воспринимается как шар, поэтому её система координат сферическая, где любая точка задаётся расстоянием от центра сферы и двумя углами. В привычных терминах, расстояние до центра определяет высоту над уровнем моря, а углы — это широта и долгота. Чтобы удобнее было работать на плоскости, в географии принята гауссовская сетка — она превращает систему долгот и широт в ортогональные координаты. Долготы расставлены с одинаковым шагом, а широты с разным, увеличивающимся по мере удаления от экватора. Лично я эти оси вечно путаю, поэтому иногда вместо Москвы получаю Иран, но достаточно запомнить, что экватор — это нулевая широта.

Данные

Для работы с геоданными существуют географические информационные системы или ГИС. Они предоставляют средства для сбора, хранения и анализа данных, могут эти данные визуализировать и преобразовывать.

Данные в этих системах могут представляться в разных форматах. Самый простой — обычные растровые изображения (PNG или TIFF), это, например, снимки местности в определённом масштабе. Кроме них есть формат GeoTIFF, это расширенный TIFF формат с метаданными, геотегами и дополнительной информацией. Ещё есть векторные форматы, например Shapefile, он хранит геометрические объекты: точки, линии или полигоны.

Но с точки зрения программирования работать с этим всем тяжело. И на помощь приходит стандартный текстовый формат представления данных: JSON (JavaScript Object Notation). Он появился в рамках языка JavaScript, но сейчас уже не зависит от него и может использоваться везде. По структуре это либо набор пар «ключ: значение», либо просто перечисление значений.

Для географических данных в 2008 году придумали свой формат, основанный на JSON и назвали его GeoJSON. Этот формат описывает простые типы геоданных (точка, линия, полигон) и позволяет описывать какие-то их параметры. Выглядит он как-то так:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
      "properties": {"prop0": "value0"}
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
           [100.0, 1.0], [100.0, 0.0]]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": {"this": "that"}
      }
    }
  ]
}

Это пример из википедии. Там же хорошо и подробно описана схема всего формата.

Ещё есть формат TopoJSON, это расширение GeoJSON, которое позволяет определять и переиспользовать элементы. За счёт этого можно сильно уменьшить размер файла.

Сейчас GeoJSON — самый распространённый формат, который используется при программировании географических данных. Его полностью поддерживают большинство современных картографических сервисов и ГИС.

Как сделать простую карту с D3

Практическую часть этой статьи я начну с D3 и работы с GeoJSON. Я хочу сделать небольшую визуализацию, на которой будет видна карта мира и будут выделены отдельные города.

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

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

<script src="https://d3js.org/d3.v6.min.js"></script>

В другом скрипте я сначала создам svg элемент и укажу ему нужные размеры:

const width = 600;
const height = 400;

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

const mapGroup = svg.append('g');

А потом подготовлю проекцию:

const projection = d3.geoMercator()
  .scale([width / (3 * Math.PI)]);

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

Следующий шаг — создать функцию, рисующую path элементы, используя подготовленную проекцию:

const path = d3.geoPath().projection(projection);

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

Теперь можно загрузить данные и показать страны:

d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
  .then(data => {
    mapGroup.selectAll('path')
      .data(data.features)
      .enter()
      .append('path')
      .attr('d', path)
      .attr('fill', '#0aa0aa')
      .style('stroke', '#ffffff');
});

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

Кстати, тут очень наглядно видно искажение Меркатора — огромная Антарктида внизу.

Как показать дополнительные данные на простой D3 карте

Обычно недостаточно просто нарисовать области на карте, нужно ещё что-то закрасить или пометить маркерами. И сейчас я покажу, как это можно сделать.

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

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

d3.csv('https://raw.githubusercontent.com/datasets/population/master/data/population.csv')
  .then(population => {
    const ids = data.features.map(d => d.id);
    const populationData = population
      .filter(d => d['Year'] === '2018' &&
        ids.includes(d['Country Code']))
      .reduce((res, d) => {
        res[d['Country Code']] = +d['Value'];
        return res;
      }, {});
  });

Шкалу я сделаю линейную, где ноль или отсутствие данных будет белым цветом, а максимальное значение — сине-зелёным.

const colorDomain = [
  d3.min(Object.keys(populationData), d => populationData[d]),
  d3.max(Object.keys(populationData), d => populationData[d]),
];
const colorScale = d3.scaleLinear()
  .range(['#ffffff', '#0aa0aa'])
  .domain(colorDomain);

Теперь осталось только добавить цвет областям при рисовании. Если значение существует, то шкала его определит, если не существует (Антарктида, например), то я указываю белый цвет явно:

attr('fill', d => (populationData[d.id]
  ? colorScale(populationData[d.id])
  : '#ffffff'
))

Итоговый результат:

Кроме закрашивания областей иногда может быть нужно нарисовать что-то на карте. Для этого пригодится объект projection, работающий как шкала преобразования систем координат.

Например, следующий код добавляет маркер на место Москвы:

const moscow = projection([37.6173, 55.7558]);

svg.append('circle')
  .attr('cx', moscow[0])
  .attr('cy', moscow[1]);

Как сделать карту c Leaflet

Иногда схематических контуров оказывается недостаточно, и нужна полноценная карта со всеми странами, городами, дорогами и прочим. В этом случае на помощь приходят библиотеки для рисования карт. Их довольно много, но я буду рассказывать про Leaflet, потому что обычно использую именно её.

Сначала я подготовлю вёрстку и зависимости:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

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

Чтобы показать простую карту, нужно вызвать метод map:

const tilesUrl = 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png';
const map = L.map('map').setView([39.25, -48.16], 3);

L.tileLayer(tilesUrl).addTo(map);

L — это Leaflet, имя, по которому я могу обращаться к библиотеке. Методу map я передаю идентификатор контейнера. SetView устанавливает центр видимой области и уровень приближения. Он может быть целым положительным числом.

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

У Leaflet это отдельный слой данных, который мы в явном виде добавляем на карту. Определяются они шаблонной строкой как tilesUrl в коде выше. Кроме этого можно указать копирайт и какие-то дополнительные аттрибуты.

На OpenStreetMaps есть неплохой список открытых и доступных для использования тайлов.

Когда карта есть, можно легко добавить на неё маркеры:

const cities = [
  { name: 'Rome', coords: [41.89, 12.51] },
  { name: 'Chicago', coords: [41.74, -87.55] },
  { name: 'San Francisco', coords: [37.77, -122.42] },
  { name: 'Athens', coords: [37.98, 23.73] },
  { name: 'Toronto', coords: [43.67, -79.42] },
  { name: 'Toulouse', coords: [43.60, 1.44] },
];
const markers = cities.map(c => 
  L.marker(c.coords)
    .addTo(map)
    .bindPopup(`${c.name}: [${c.coords.join(', ')}]`)
);

Маркер добавляется с помощью функции L.marker, которой передаётся массив из двух координат. Здесь я никак не меняю внешний вид маркеров, но их можно сделать совершенно любыми. Ещё я добавила стандартный тултип, который будет появляться при клике и показывать название города и его координаты.

Выглядит всё это в результате так:

Это поверхностный обзор работы с картами. Если копнуть глубже, можно делать очень сложные вещи, интерактивные или динамические. Например, можно объединить Leaflet с D3 или добавить изометрию и рисовать трёхмерные визуализации на обычной карте.

Как сделать BarChart с несколькими сериями данных

2021-01-11T11:19:23.167Z

В этом туториале я разберу создание столбчатой диаграммы (bar chart) сначала для одной, а потом и для нескольких серий данных. Ещё немного расскажу про цветовые шкалы.

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

Ссылки к этому туториалу:

Подготовка данных

Подготовку проекта и создание svg элемента я уже описывала в предыдущем туториале, поэтому не буду повторяться. А вот данные я сгенерирую другие. Пусть у меня будут двенадцать месяцев и столбики значений от 0 до 1 (округлённые до 2 знаков после запятой) для каждого из них:

const months = [
  'янв', 'фев', 'март', 'апр', 'май', 'июнь',
  'июль', 'авг', 'сент', 'окт', 'ноя', 'дек'
];
const data = [];

months.forEach(month => {
  data.push({ month, value: Math.round(Math.random() * 100) / 100 });
});

Подготовка шкал

В прошлом туториале я уже объясняла, что такое линейная шкала и как её сделать. Здесь такая тоже есть — это ось y, она будет определять высоту столбиков. Height тут как и раньше — высота всего графика.

const yDomain = [d3.min(data, d => d.value), d3.max(data, d => d.value)];
const yScale = d3.scaleLinear()
  .domain(yDomain)
  .range([height, 0]);

Ось x же не линейная и делается по-другому:

const xScale = d3.scaleBand()
  .domain(months)
  .range([0, width])
  .padding(0.1);

Это ось групп или диапазонов (bands). В D3 для её создания есть специальный метод d3.scaleBand. Ему передаются диапазоны координат экрана (range, от 0 до ширины графика) и данных (domain, массив всех месяцев). Параметр padding необязательный, он отвечает за промежутки между столбиками.

В этой оси каждому значению из данных соответствует некоторый диапазон экранных координат.

Рисование столбиков

Рисование шкал я пропущу, потому что оно не зависит от типов этих шкал. Поэтому его можно просто скопировать из предыдущего туториала.

Рисование же самого графика похоже на scatter:

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', d => xScale(d.month))
  .attr('width', xScale.bandwidth())
  .attr('y', d => yScale(d.value))
  .attr('height', d => height - yScale(d.value))
  .attr('fill', 'orange');

Я создаю объект Selection, выделяя все rect элементы (изначально их нет), и передаю ему данные, используя методы data и enter. Затем, используя метод append, я для каждой записи данных добавляю свой rect элемент.

Координаты каждого элемента определяются созданными ранее шкалами xScale и yScale. Ширина находится с помощью специальной функции bandwidth — она вычисляет ширину каждого столбика, зная промежутки и ширину всего графика. Высота вычисляется с помощью шкалы yScale. Хак с height-yScale нужен, чтобы перевернуть стобики, в системе координат svg они по-умолчанию окажутся сверху вниз.

График получается такой:

Несколько серий данных

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

const count = 3;

months.forEach(month => {
  const values = [];
  
  for (let i = 0; i < count; i++) {
    values.push({
      key: i,
      value: Math.round(Math.random() * 100) / 100,
    });
  }
  data.push({ month, values });
});

Key – это название серии данных. Для простоты я использовала индексы.

Изменение в шкалах

Самые важные изменения происходят со шкалами. Раньше у меня по оси x была обычная band шкала, которая определяла, в каком месте и какой ширины рисовать конкретный столбик. Теперь у меня в этом же месте будут три столбика вместо одного. Поэтому появляется ещё одна дополнительная шкала:

const xInnerDomain = data[0].values.keys();
const xInnerScale = d3.scaleBand()
  .domain(xInnerDomain)
  .rangeRound([0, xScale.bandwidth()]);

Если областью определения (domain) первой шкалы были месяцы, то во второй шкале — это названия серий данных. Так получается, потому что данные вложенные: для каждого месяца есть набор из трёх разных значений. Дополнительная шкала существует в рамках основной и зависит от неё, поэтому её координаты экрана (range) равны диапазону от 0 до ширины любого элемента основной шкалы.

Тут я использую метод rangeRound, чтобы при отображении пиксели автоматически округлялись и итоговая картинка получалась чёткой (результат вызова bandwidth может быть нецелым числом).

Немного меняется и определение области определения оси y (добавляется вложенность значений):

const yDomain = [
  d3.min(data, d => d3.min(d.values.map(v => v.value))),
  d3.max(data, d => d3.max(d.values.map(v => v.value)))
];
const yScale = d3.scaleLinear().domain(yDomain).range([height, 0]);

Цветовая шкала

Так как у меня появилось несколько столбиков для каждого месяца, я хочу их как-то различать. Самое простое — это цвет. Я, конечно, могла бы красить их вручную, через css и nth-child, но это очень неуниверсальное решение. Поэтому я хочу сделать шкалу для определения цвета:

const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

Метод d3.scaleOrdinal создаёт дискретную шкалу. С её помощью можно определить соответствие одного набора элементов другому. Например, цвета и категории или категории и их последовательность. Отличие от линейной шкалы тут в том, что количество элементов в наборах фиксировано и исчислимо.

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

В D3 много вспомогательных методов и объектов, в том числе для создания шкал. Здесь d3.schemeCategory10 — это набор из десяти заготовленных цветов. Это цветовая схема, таких схем в D3 десять штук, вот тут их все можно посмотреть.

Изменения при рисовании

Я уже писала выше, что данные и шкалы тут можно назвать иерархически вложенными. Эта вложенность влияет и на элементы в html коде. Каждые три столбика для одного месяца я буду группировать с помощью элементов g с классом group:

const barGroup = svg.selectAll('.group')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'group')
  .attr('transform', d => `translate(${xScale(d.month)},0)`);

Каждый элемент сдвигается по оси x на своё место с помощью аттрибута transform.

Внутри каждой группы я буду рисовать по 3 столбика:

barGroup.selectAll('rect')
  .data(d => d.values)
  .enter()
  .append('rect')
  .attr('x', d => xInnerScale(d.key))
  .attr('width', xInnerScale.bandwidth())
  .attr('y', d => yScale(d.value))
  .attr('height', d => height - yScale(d.value))
  .style('fill', d => colorScale(d.key));

В методе data я передаю всей группе все данные, а столбикам — только данные, относящиеся к их группе. Каждый столбик использует дополнительную шкалу xInnerScale, чтобы определить свои положение и ширину. Цвет определяется из цветовой шкалы colorScale. Я передаю ей номер столбика и получаю его цвет.

И вот итоговый результат:

Ещё раз ссылки

Как сделать LineChart и ScatterChart и в чём разница между методами data() и datum()

2020-12-17T13:43:28.580Z

Недавно для одного проекта я собирала простые визуализации на D3.js и решила написать небольшой туториал по теме. Я хочу рассказать, как сделать два самых распространённых типа графиков (line и scatter), и объяснить, как работают методы, которые при этом используются.

По ссылкам можно найти код графиков:

Настройка проекта

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

Его структура выглядит так:

<html>
  <head>
    <style></style>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <svg></svg>
    <script></script>
  </body>
</html>

Здесь тег style — место для всех стилей (их практически не будет), тег svg — контейнер для графика, а пустой тег script — место для моего JS кода.

Я помещаю свой скрипт в конце документа (после скрипта D3 и svg элемента) потому что мне нужно, чтобы он загрузился самым последним. Тогда я смогу использовать глобальную переменную d3, которая станет доступна в JS коде, и все элементы вёрстки. Обычно скрипты и элементы в вёрстке грузятся синхронно и последовательно.

Подготовка данных

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

Внутри тега script я добавлю следующий код:

const N = 20;
const data = [];

for (let i = 0; i < N; i++) {
  data.push({ x: i, y: Math.round(Math.random() * N) });
}

Здесь константа N определяет размер массива данных или число точек будущих графиков. Я люблю задавать это число параметром, а не писать его явно в коде, потому что так проще будет что-то изменить, если потребуется. Data — это массив, который мы заполняем точками с координатами x (просто порядковый номер точки) и y (случайное целое число от 0 до N).

Подготовка SVG

Когда данные есть, можно начинать рисовать график. Сначала я определю параметры графика:

const width = 600;
const height = 400;
const margin = { top: 25, right: 25, bottom: 25, left: 25 };

Размеры необязательно указывать в явном виде значениями, можно вычислить их из вёрстки или css. Но чтобы сделать проще, я задам их явно. Margin — это внутренние отступы графика, они будут нужны для осей.

После я подготовлю svg контейнер. Как видно в html вёрстке выше, он пустой и не стилизованный. Я хочу указать ему выбранные размеры и создать внутри тег g, в котором уже буду что-то рисовать. Созданный элемент g я сдвину на величину отступов.

const svg = d3.select('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', `translate(${margin.left},${margin.top})`);

G используется для группировки элементов. Чаще всего он нужен для структурирования графики и для трансформаций — любая трансформация всей группы применяется ко всем её элементам.

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

Подготовка шкал

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

Чтобы лучше понимать задачу преобразования, можно представить, что у вас есть диапазон значений данных от 0 до 2 и диапазон экранных координат от 0 до 100. Если вы линейно проецируете один диапазон на другой, то нули будут соответствовать друг другу, 2 будет соответствовать 100, а 0.5 — 25.

Можно даже записать общую формулу перевода значения value из диапазона r1 в диапазон r2:

r2.min + ((value - r1.min) / (r1.max - r1.min)) * (r2.max - r2.min)

Для создания шкал я буду использовать метод d3.scaleLinear(). Ему нужно передать два диапазона (данных и координат экрана), а он будет потом выполнять все преобразования.

Но сначала я найду диапазоны значений из данных. Я использую методы d3.min и d3.max, чтобы найти минимальное и максимальное значение, но можно делать это любым другим способом.

const xDomain = [d3.min(data, d => d.x), d3.max(data, d => d.x)];
const yDomain = [d3.min(data, d => d.y), d3.max(data, d => d.y)];

Затем создам шкалы для осей x и y:

const xScale = d3.scaleLinear().domain(xDomain).range([0, width]);
const yScale = d3.scaleLinear().domain(yDomain).range([height, 0]);

У получившихся шкал domain — диапазон значений данных, а range — диапазон координат экрана. Координаты экрана мне известны — это размены графика. Ось y перевёрнута, потому что начало координат в системе svg находится в левом верхнем углу.

Рисование осей

Теперь, когда шкалы готовы, можно добавить оси:

svg.append('g')
  .attr('transform', `translate(0,${height})`)
  .call(d3.axisBottom(xScale));

svg.append('g')
  .call(d3.axisLeft(yScale));

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

Call обычно используется в JS, чтобы вызвать метод, подставив ему контекст выполнения. Здесь метод call — это метод объекта класса Selection. Он вызывает метод d3.axisBottom (или d3.axisLeft), передавая ему себя в качестве одного из параметров. А метод d3.axisBottom уже сам рисует внутри ось.

Рисование линии

Теперь всё готово для самой линии графика. Чтобы её нарисовать, мне нужна функция, которая будет конструировать строку команд для path элемента из значений данных, используя созданные ранее шкалы. Я создам её с помощью метода d3.line:

const line = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y));

И вот наконец можно добавить path элемент, который будет отображать сами данные:

svg.append('path')
  .datum(data)
  .attr('d', line);

Данные я передаю, вызвав метод datum (про него я ещё расскажу), а атрибуту d присвою созданную функцию line.

Теперь, казалось бы, всё готово. Но если открыть страницу, то графика на ней не окажется. Это потому что я не добавила стили. Оси меня устраивают как есть, а вот линия пусть будет чёрная и в 1 пиксель толщиной. Для этого внутри тега style я напишу:

path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

И вот сейчас если открыть страницу, то можно увидеть вот такой график:

Рисование кружочков

Допустим, что я хочу сделать не LineChart, а ScatterChart. То есть не соединять точки линией, а показать их как скопление кружочков. Для этого я могу переиспользовать весь код до последней части с рисованием линии.

Мне уже не нужна никакая d3.line, вместо неё я возьму свой массив точек и для каждой нарисую кружочек.

svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y));

И опять же добавлю в стили:

circle {
  r: 5;
  fill: black;
}

И получу такой график (я рисовала графики отдельно, поэтому данные сгенерировались другие):

Как передавать данные графикам

А теперь самое интересное — детали и нюансы реализации. Вы заметили, что когда я делала линию, я передавала данные с помощью метода datum, а когда делала кружочки — с помощью data и enter? При этом, если попробовать сделать по-другому, то либо ничего не нарисуется, либо возникнут ошибки.

Все эти три метода — методы класса Selection. Их код можно найти в репозитории d3-selection.

Вопрос «что такое Selection» — тема для отдельного рассказа. Если коротко, это специальная сущность, которая нужна D3 для работы с DOM элементами. Selection создаётся, когда мы делаем d3.select и модифицируется всеми остальными вызовами.

Метод datum очень простой и маленький. Он берёт выбранный через d3.select элемент и добавляет ему атрибут __data__ с переданными данными. Затем при добавлении любого следующего атрибута, если его значение — функция, она получит __data__ массив как один из своих параметров. Так и происходит с методом line: он берёт данные из этого атрибута, преобразовывает их в координаты и рисует по ним линию.

Метод data работает по-другому. Когда я передаю ему массив с данными, он анализирует их, определяет, сколько будет добавлено элементов и какая строка данных какому элементу должна соответствовать. Вызванный следом метод enter создаёт из этого новый объект Selection. Любой метод вызванный после этого уже будет работать с целым массивом элементов. Так работает указание атрибутов cx и cy — я пишу всего одну строчку, а вызывается она много раз, для каждого добавляемого кружочка на экране.

Ссылки

Алгоритмы для создания лабиринтов

2020-11-23T14:47:05.703Z

Это обзор алгоритмов, рассматриваемых в книге Mazes for Programmers.
Мой код алгоритмов на языке Ruby можно найти на Github.

Простые алгоритмы

Binary Tree

Для каждой ячейки сетки по очереди (с юга на север и с запада на восток) строится путь в соседнюю ячейку восточнее или севернее.

Характерна диагональная структура, тянущаяся из юго-запада в северо-восток. Крайние северная строка и восточная колонка всегда оказываются коридорами без стен.

Sidewinder

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

Получается вертикальная структура с коридором в северной строке.

Алгоритмы для максимально случайных лабиринтов

Aldous-Broder

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

Начало алгоритма быстрое, но в конце он может быть очень медленным. Какой-то особенной структуры или искажений нет, всегда получаются идеальные лабиринты.

Wilson’s

Выбираем произвольную ячейку и добавляем её в лабиринт. Потом из любой другой ячейки строим случайный путь. Когда путь упирается в ячейку, уже добавленную в лабиринт, весь путь добавляется в лабиринт. Создаём такие случайные пути пока все ячейки не окажутся в лабиринте.

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

Алгоритмы для лабиринтов с длинными путями

Hunt-and-Kill

Из произвольной ячейки случайным образом двигаемся по сетке, избегая уже посещённые ячейки. Если двигаться оказывается некуда, то находим любую новую непосещённую ячейку рядом с уже посещённой. Если такая нашлась, то соединяем их и продолжаем строить путь. Заканчиваем, когда непосещённых ячеек не остаётся.

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

Recursive Backtracker

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

В результате получаются длинные и извилистые пути с небольшим количеством тупиков. Этот алгоритм похож на Hunt-and-Kill, но потенциально работает быстрее, потому что проверяет каждую ячейку только два раза. Хотя ему нужно больше памяти, чтобы следить за уже посещёнными ячейками.

Дополнительные алгоритмы

Kruskal’s

Начинается с добавления каждой ячейки в отдельное множество. Потом случайным образом соединяются соседние ячейки, если они принадлежат разным множествам. Таким образом множества объединяются, пока не останется только одно.

В результате получаются очень аккуратные и регулярные лабиринты.

Prim’s (упрощённый)

Создаётся множество с произвольной ячейкой. Каждый раз из этого множества выбирается случайная ячейка. Если у неё нет непосещённых соседей, то она удаляется из множества. Иначе выбирается любой непосещённый сосед, ячейки соединяются, выбранный сосед добавляется в множество. Продолжаем, пока множество не станет пустым.

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

Prim's (настоящий)

Сначала каждой ячейке назначается случайный вес, затем создаётся множество со случайной ячейкой. На каждом шаге из множества выбирается ячейка наибольшего веса. Ячейка удаляется, если у неё нет непосещённых соседей. Иначе она соединяется с любым из соседей, а этот сосед добавляется в множество. Продолжаем, пока в множестве есть ячейки.

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

Growing Tree

Это обобщение алгоритма Прима (Prim's). Из сетки выбирается произвольная ячейка и добавляется в некоторое множество. Потом из множества выбирается любая ячейка (сначала она там одна, потом будет много). Если у выбранной ячейки нет непосещённых соседей, то она удаляется из множества. Иначе ячейка соединяется с любым из непосещённых соседей, этот сосед добавляется в множество. Шаги повторяются, пока в множестве остаются ячейки.

Сильно зависит от способа выбора следующей ячейки из множества. Можно выбирать случайно, можно брать последнюю, можно комбинировать подходы или вводить веса. Итоговые лабиринты могут получиться как ярко выраженной радиальной структуры, так и очень извилистой.

Eller's

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

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

Recursive Division

Это обратный алгоритм. Начинаем с сеткой без стен между ячейками. Делим сетку на две части стеной, добавляя проход в случайном месте. Повторяем такое разделение до тех пор, пока не останется пустых пространств.

В результате получается прямоугольная коробочная структура. Решение обычно легче находить через поиск узких горлышек — переходом между большими областями. Одно из преимуществ: можно создавать большие пустые комнаты.