d3-contour

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

Для каждого значения порога генератор контуров создаёт объект геометрии GeoJSON MultiPolygon, представляющий область, где входные значения больше или равны значению порога. Геометрия находится в плоских координатах, где ⟨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 4.0. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla, экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-contour.v1.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(d3.range(2, 21).map(p => Math.pow(2, p)))
    (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>

Попробуйте d3-contour в вашем браузере.

Справочник по 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]) Source

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

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

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

density.bandwidth([bandwidth]) Source

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