Построение грани данных на 2D неструктурированной четырехугольной сетке в Plotly

Question

Я пытаюсь нанести данные лица на двухмерную неструктурированную четырехугольную сетку в Plotly.Пока что все, что я могу понять, - это (работающий, но очень медленный при большом количестве данных) обходной путь.Минимальный рабочий пример моей попытки приведен ниже как в Python, так и в JavaScript.

Мои вопросы:

1. Есть ли лучший способ создать двухмерную четырехмерную сетку, похожую натреугольная mesh3d работает и быстрее, чем моя реализация Scatter-объекта?
2. Есть ли способ активировать наведение на заполненные области?Т.е., когда я наводю курсор мыши на заполненную область четырехугольника (а не на точку вершины), можно ли отобразить текст при наведении?
3. Можно ли добавить пользовательскую цветовую панель в график Plotly?

Я открыт для ответов либо на Python, либо на JavaScript, с предпочтением Python.

Код Python

(Может быть запущен в блокноте Jupyter)

# CREATE INPUT DATA FOR MWE
import numpy
vert_x = numpy.array([0.6, 0.5, 0. , 1. , 0.3, 0.5,
                      0.7, 0.8, 0.3, 0.5, 0.6])
vert_y = numpy.array([0. , 1. , 0.5, 0.6, 0.8, 0.5,
                      0.8, 0.3, 0.3, 0.7, 0.4])
cells = numpy.array([[ 1,  4,  9,  6],
                     [ 4,  2,  5,  9],
                     [ 6,  9,  5,  3],
                     [ 0,  7, 10,  8],
                     [ 7,  3,  5, 10],
                     [ 8, 10,  5,  2]])
z_data = numpy.array([0.1,0.2,0.3,0.4,0.5,0.6])

# make face colors from z_data
colors = []
for z in z_data:
    red = int((z/numpy.max(z_data))*255)
    colors.append('rgb({},0,0)'.format(red))

# MAKE PLOT
import plotly.offline as py
py.init_notebook_mode(connected=True)
import plotly.graph_objs as go

# create list of Scatter objects for quadrilaterals
quads = []
numCells = cells.shape[0]
for c in range(numCells):
    quads.append(
        go.Scatter(
            x = [vert_x[cells[c,0]],
                 vert_x[cells[c,1]],
                 vert_x[cells[c,2]],
                 vert_x[cells[c,3]],
                 vert_x[cells[c,0]]],
            y = [vert_y[cells[c,0]],
                 vert_y[cells[c,1]],
                 vert_y[cells[c,2]],
                 vert_y[cells[c,3]],
                 vert_y[cells[c,0]]],
            fill = 'tozeroy',
            mode = 'none',
            name = '',
            fillcolor=colors[c],
            hoveron = 'fill',
            text = "z = {}".format(z_data[c]),
        )
    )

layout = go.Layout(
    width=400,
    height=400,
    showlegend = False,
    hovermode = 'closest',
)

fig = go.Figure(data=quads, layout=layout)
py.iplot(fig)

Автоматически сгенерированный вывод графика

window.PLOTLYENV = window.PLOTLYENV || {};
window.PLOTLYENV.BASE_URL = "https://plot.ly";
Plotly.newPlot("quadMWE", [{
  "type": "scatter",
  "x": [0.5, 0.3, 0.5, 0.7, 0.5],
  "y": [1.0, 0.8, 0.7, 0.8, 1.0],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(42,0,0)",
  "hoveron": "fill",
  "text": "z = 0.1"
}, {
  "type": "scatter",
  "x": [0.3, 0.0, 0.5, 0.5, 0.3],
  "y": [0.8, 0.5, 0.5, 0.7, 0.8],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(85,0,0)",
  "hoveron": "fill",
  "text": "z = 0.2"
}, {
  "type": "scatter",
  "x": [0.7, 0.5, 0.5, 1.0, 0.7],
  "y": [0.8, 0.7, 0.5, 0.6, 0.8],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(127,0,0)",
  "hoveron": "fill",
  "text": "z = 0.3"
}, {
  "type": "scatter",
  "x": [0.6, 0.8, 0.6, 0.3, 0.6],
  "y": [0.0, 0.3, 0.4, 0.3, 0.0],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(170,0,0)",
  "hoveron": "fill",
  "text": "z = 0.4"
}, {
  "type": "scatter",
  "x": [0.8, 1.0, 0.5, 0.6, 0.8],
  "y": [0.3, 0.6, 0.5, 0.4, 0.3],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(212,0,0)",
  "hoveron": "fill",
  "text": "z = 0.5"
}, {
  "type": "scatter",
  "x": [0.3, 0.6, 0.5, 0.0, 0.3],
  "y": [0.3, 0.4, 0.5, 0.5, 0.3],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(255,0,0)",
  "hoveron": "fill",
  "text": "z = 0.6"
}], {
  "width": 400,
  "height": 400,
  "showlegend": false,
  "hovermode": "closest"
}, {
  "showLink": false,
  "linkText": "Export to plot.ly"
})

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="quadMWE" style="height: 400px; width: 400px;" class="plotly-graph-div"></div>