D3: отображение изображений в оттенках серого, управляемое данными 2D-массива

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

Ответ 1

Если вам просто нужно отобразить изображение, используйте элемент изображения и атрибут "xlink: href". Например:

svg.append("image")
    .attr("xlink:href", "my.png")
    .attr("width", 960)
    .attr("height", 500);

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

colorized heightmap

Если у вас есть данные в другом представлении, эти примеры могут быть полезными:

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