d3-contour

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

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

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

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

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

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

Установка

Если вы используете NPM, npm install d3-contour. В противном случае загрузите последнюю версию. Вы также можете загрузить её напрямую с d3js.org, как отдельную библиотеку или как часть D3. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla-среде экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-contour.v2.min.js"></script>
<script>

// Populate a grid of n×m values where -2 ≤ x ≤ 2 and -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);
  }
}

// Compute the contour polygons at log-spaced intervals; returns an array of MultiPolygon.
var 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 типа Многоугольник. Каждый объект геометрии представляет область, где входные 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 типа Многоугольник, представляющий область, где входные values больше или равны заданному значению threshold; значение порога для каждого объекта геометрии доступно как geometry.value.

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

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

Если size указан, задаёт ожидаемый размер сетки входных данных values для генератора контуров и возвращает генератор контуров. Размер задаётся массивом [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 типа Многоугольник. Каждый объект геометрии представляет область, где предполагаемое количество точек на квадратный пиксель больше или равно соответствующему значению порога; значение порога для каждого объекта геометрии доступно как 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]) · Исходный код, Примеры

Если указано размер, устанавливает размер оценщика плотности до указанных границ и возвращает оценщик. Размер задаётся как массив [ширина, высота], где ширина — максимальное значение x, а высота — максимальное значение y. Если размер не указан, возвращает текущий размер, который по умолчанию равен [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 в настоящее время округляется до ближайшего поддерживаемого значения этой реализацией, и должна быть неотрицательной.