I want to create this type of hexagonal heatmap, but can’t seem to find this anywhere.
I tried to make it but no luck.
here’s my vega spec :
`{
“$schema”: “https://vega.github.io/schema/vega/v5.json”,
“width”: 500,
“height”: 300,
“padding”: {“left”: 10, “top”: 10, “right”: 10, “bottom”: 10},
“signals”: [
{
“name”: “hexRadius”,
“value”: 35
},
{
“name”: “hexWidth”,
“update”: “sqrt(0) * hexRadius”
},
{
“name”: “hexHeight”,
“update”: “0 * hexRadius”
}
],
“data”: [
{
“name”: “heatmapData”,
“values”: [
{“row”: 1, “column”: 1, “metric”: 0.01},
{“row”: 2, “column”: 1, “metric”: 0.02},
{“row”: 3, “column”: 1, “metric”: 0.03},
{“row”: 1, “column”: 2, “metric”: 0.04},
{“row”: 2, “column”: 2, “metric”: 0.05},
{“row”: 3, “column”: 2, “metric”: 0.06},
{“row”: 1, “column”: 3, “metric”: 0.07},
{“row”: 2, “column”: 3, “metric”: 0.08},
{“row”: 3, “column”: 3, “metric”: 0.09}
]
}
],
“scales”: [
{
“name”: “x”,
“type”: “point”,
“domain”: {“data”: “heatmapData”, “field”: “column”},
“range”: “width”,
“padding”: 0.5
},
{
“name”: “y”,
“type”: “point”,
“domain”: {“data”: “heatmapData”, “field”: “row”},
“range”: “height”,
“padding”: 1
},
{
“name”: “color”,
“type”: “linear”,
“domain”: [0.01, 0.09],
“range”: {“scheme”: “purples”}
}
],
“axes”: [
{
“orient”: “left”,
“scale”: “y”,
“title”: “Row”,
“tickCount”: 3
},
{
“orient”: “bottom”,
“scale”: “x”,
“title”: “Column”,
“tickCount”: 3
}
],
“marks”: [
{
“type”: “path”,
“from”: {“data”: “heatmapData”},
“encode”: {
“enter”: {
“path”: {
“signal”: “‘M’ + (0) + ‘,’ + (-hexRadius) + ‘ L’ + (hexRadius * sin(60)) + ‘,’ + (-hexRadius/2) + ‘ L’ + (hexRadius * sin(60)) + ‘,’ + (hexRadius/2) + ‘ L’ + (0) + ‘,’ + (hexRadius) + ‘ L’ + (-hexRadius * sin(60)) + ‘,’ + (hexRadius/2) + ‘ L’ + (-hexRadius * sin(60)) + ‘,’ + (-hexRadius/2) + ‘ Z'”
},
“x”: {
“scale”: “x”,
“field”: “column”,
“offset”: {“signal”: “datum.column % 2 === 0 ? hexWidth / 2 : 0”}
},
“y”: {
“scale”: “y”,
“field”: “row”,
“offset”: {“signal”: “datum.row % 2 === 0 ? hexHeight / 2 : 0”}
},
“fill”: {“scale”: “color”, “field”: “metric”},
“stroke”: {“value”: “white”},
“strokeWidth”: {“value”: 1}
}
}
},
{
“type”: “text”,
“from”: {“data”: “heatmapData”},
“encode”: {
“enter”: {
“x”: {
“scale”: “x”,
“field”: “column”,
“offset”: {“signal”: “datum.column % 2 === 0 ? hexWidth / 2 : 0”}
},
“y”: {
“scale”: “y”,
“field”: “row”,
“offset”: {“signal”: “datum.row % 2 === 0 ? hexHeight / 2 : 0”}
},
“text”: {“field”: “metric”},
“align”: {“value”: “center”},
“baseline”: {“value”: “middle”},
“fill”: {“value”: “black”}
}
}
}
]
}
`