d3-контур

Эта библиотека вычисляет контурные полигоны, применяя алгоритм марширующих квадратов к прямоугольной матрице числовых значений. Например, вот топология Maungawhau (классический volcano набор данных и terrain.colors из R):

Volcano Contours

Для каждого значения порога генератор контуров создаёт объект геометрии GeoJSON MultiPolygon, представляющий область, где входные значения больше или равны значению порога. Геометрия находится в декартовых координатах, где ⟨i + 0.5, j + 0.5⟩ соответствует элементу i + jn в массиве входных значений. Вот пример загрузки GeoTIFF с поверхностными температурами и другой пример, размывающий шумный монохромный PNG для получения плавных контуров доли облачности:

GeoTiff Contours Cloud Contours

Поскольку контурные полигоны являются GeoJSON, вы можете преобразовывать и отображать их с помощью стандартных инструментов; см., например, d3.geoPath, d3.geoProject и d3.geoStitch. Здесь вышеупомянутые контуры поверхностной температуры отображаются в проекции Natural Earth:

GeoTiff Contours II

Контурные диаграммы также могут визуализировать непрерывные функции путём выборки. Вот функция Goldstein–Price (функция-тест для глобальной оптимизации) и завораживающая анимация sin(x + y)sin(x - y):

Contours Animated Contours

Контуры также могут показывать оценённую плотность облаков точек, что особенно полезно для предотвращения перекрытия данных в больших наборах данных. Эта библиотека реализует быструю двумерную оценку плотности ядра; см. d3.contourDensity. Вот диаграмма рассеяния, показывающая связь между временем простоя и временем извержения Old Faithful:

Density Contours

А вот контурная диаграмма плотности, показывающая связь между весом и ценой 53 940 бриллиантов:

Density Contours

Установка

Если вы используете npm, npm install d3-contour. Вы также можете загрузить последнюю версию с GitHub. Для простого HTML в современных браузерах импортируйте d3-контур с jsDelivr:

<script type="module">

import {contours} from "https://cdn.jsdelivr.net/npm/d3-contour@4/+esm";

const c = contours(values);

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-контура; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-contour@4"></script>
<script>

// Populate a grid of n×m values where -2 ≤ x ≤ 2 and -2 ≤ y ≤ 1.
const n = 256, m = 256, values = new Array(n * m);
for (let j = 0.5, k = 0; j < m; ++j) {
  for (let i = 0.5; i < n; ++i, ++k) {
    values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
  }
}

// Compute the contour polygons at log-spaced intervals; returns an array of MultiPolygon.
const contours = d3.contours()
    .size([n, m])
    .thresholds(Array.from({ length: 19 }, (_, i) => Math.pow(2, i + 2)))
    (values);

// See https://en.wikipedia.org/wiki/Test_functions_for_optimization
function goldsteinPrice(x, y) {
  return (1 + Math.pow(x + y + 1, 2) * (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y))
      * (30 + Math.pow(2 * x - 3 * y, 2) * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y));
}

</script>

Справочник API

d3.contours() · Исходный код, Примеры

Создаёт новый генератор контуров с настройками по умолчанию.

contours(values) · Исходный код

Вычисляет контуры для данного массива values, возвращая массив объектов геометрии GeoJSON MultiPolygon геометрии. Каждый объект геометрии представляет область, где входные values больше или равны соответствующему значению порога; значение порога для каждого объекта геометрии доступно как geometry.value.

Входные values должны быть массивом длины n×m, где [n, m] — размер генератора контуров; кроме того, каждый values[i + jn] должен представлять значение в позиции ⟨i, j⟩. Например, чтобы построить сетку 256×256 для функции Goldstein–Price, где -2 ≤ x ≤ 2 и -2 ≤ y ≤ 1:

var n = 256, m = 256, values = new Array(n * m);
for (var j = 0.5, k = 0; j < m; ++j) {
  for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
  }
}

function goldsteinPrice(x, y) {
  return (1 + Math.pow(x + y + 1, 2) * (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y))
      * (30 + Math.pow(2 * x - 3 * y, 2) * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y));
}

Возвращаемые объекты геометрии обычно передаются в d3.geoPath для отображения, используя null или d3.geoIdentity в качестве связанной проекции.

contours.contour(values, threshold) · Исходный код, Примеры

Вычисляет один контур, возвращая GeoJSON MultiPolygon объект геометрии, представляющий область, где входные values больше или равны заданному значению threshold; значение порога для каждого объекта геометрии доступно как geometry.value.

Входные values должны быть массивом длины n×m, где [n, m] — размер генератора контуров; кроме того, каждый values[i + jn] должен представлять значение в позиции ⟨i, j⟩. См. contours для примера.

contours.size([size]) · Исходный код, Примеры

Если size задано, устанавливает ожидаемый размер входной сетки values для генератора контуров и возвращает генератор контуров. Size задаётся массивом [n, m], где n — количество столбцов в сетке, а m — количество строк; n и m должны быть положительными целыми числами. Если size не задано, возвращает текущий размер, который по умолчанию равен [1, 1].

contours.smooth([smooth]) · Исходный код, Примеры

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

contours.thresholds([thresholds]) · Исходный код, Примеры

Если thresholds задано, устанавливает генератор порогов в указанную функцию или массив и возвращает этот генератор контуров. Если thresholds не задано, возвращает текущий генератор порогов, который по умолчанию реализует формулу Стерджеса.

Пороги определяются как массив значений [x0, x1, …]. Первый сгенерированный контур соответствует области, где входные значения больше или равны x0; второй контур соответствует области, где входные значения больше или равны x1, и так далее. Таким образом, для каждого заданного значения порога генерируется ровно один объект геометрии MultiPolygon; значение порога доступно как geometry.value.

Если вместо массива thresholds задано число count, то диапазон входных значений будет равномерно разделен примерно на count бинов; см. d3.ticks.

Оценивание плотности

d3.contourDensity() · Исходный код, Примеры

Создаёт новый оценщик плотности с настройками по умолчанию.

density(data) · Исходный код

Оценивает контуры плотности для данного массива data, возвращая массив объектов геометрии GeoJSON MultiPolygon геометрии. Каждый объект геометрии представляет область, где приближённое число точек на квадратный пиксель больше или равно соответствующему значению порога; значение порога для каждого объекта геометрии доступно как geometry.value. Возвращаемые объекты геометрии обычно передаются в d3.geoPath для отображения, используя null или d3.geoIdentity в качестве связанной проекции. См. также d3.contours.

Координаты x и y для каждой точки данных вычисляются с помощью density.x и density.y. Кроме того, density.weight указывает относительный вклад каждой точки данных (по умолчанию 1). Сгенерированные контуры точны только в пределах определённого размера оценщика.

density.x([x]) · Исходный код, Примеры

Если x задано, устанавливает аксессор координаты x. Если x не задано, возвращает текущий аксессор координаты x, который по умолчанию:

function x(d) {
  return d[0];
}

density.y([y]) · Исходный код, Примеры

Если y задано, устанавливает аксессор координаты y. Если y не задано, возвращает текущий аксессор координаты y, который по умолчанию:

function y(d) {
  return d[1];
}

density.weight([weight]) · Источник

Если параметр weight указан, устанавливает обработчик весов точек. Если weight не указан, возвращает текущий обработчик весов точек, который по умолчанию:

function weight() {
  return 1;
}

density.size([size]) · Источник, Примеры

Если параметр size указан, устанавливает размер оценочной плотности до указанных границ и возвращает оценочную плотность. Параметр size указывается как массив [width, height], где width — максимальное значение x, а height — максимальное значение y. Если size не указан, возвращается текущий размер, который по умолчанию равен [960, 500]. Оценённые контуры плотности точны только в пределах заданного размера.

density.cellSize([cellSize]) · Источник

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

density.thresholds([thresholds]) · Источник, Примеры

Если параметр thresholds указан, устанавливает генератор пороговых значений на указанную функцию или массив и возвращает этот генератор контуров. Если thresholds не указан, возвращает текущий генератор пороговых значений, который по умолчанию генерирует около двадцати хорошо округленных пороговых значений плотности.

Пороговые значения определяются как массив значений [x0, x1, …]. Первый сгенерированный контур плотности соответствует области, где плотность больше или равна x0; второй контур соответствует области, где плотность больше или равна x1, и так далее. Таким образом, для каждого значения порога существует ровно один сгенерированный объект геометрии MultiPolygon; значение порога отображается как geometry.value. Первое значение x0 обычно должно быть больше нуля.

Если вместо массива thresholds указан count, то будет сгенерировано примерно count равномерно распределённых хорошо округленных пороговых значений; см. d3.ticks.

density.bandwidth([bandwidth]) · Источник, Примеры

Если параметр bandwidth указан, устанавливает ширину полосы (стандартное отклонение) гауссова ядра и возвращает оценку. Если bandwidth не указан, возвращается текущая ширина полосы, которая по умолчанию равна 20.4939…. Указанная bandwidth в настоящее время округляется до ближайшего поддерживаемого значения этой реализацией и должна быть неотрицательной.

density.contours(data) · Источник, Примеры

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