Isotype Grid

Inspired by this D3 example by Alan Smith. Drag region to select. This example was created by @jwoLondon.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": ""}},
  "width": 400,
  "height": 400,
  "data": {
    "values": [
      {"id": 1},
      {"id": 2},
      {"id": 3},
      {"id": 4},
      {"id": 5},
      {"id": 6},
      {"id": 7},
      {"id": 8},
      {"id": 9},
      {"id": 10},
      {"id": 11},
      {"id": 12},
      {"id": 13},
      {"id": 14},
      {"id": 15},
      {"id": 16},
      {"id": 17},
      {"id": 18},
      {"id": 19},
      {"id": 20},
      {"id": 21},
      {"id": 22},
      {"id": 23},
      {"id": 24},
      {"id": 25},
      {"id": 26},
      {"id": 27},
      {"id": 28},
      {"id": 29},
      {"id": 30},
      {"id": 31},
      {"id": 32},
      {"id": 33},
      {"id": 34},
      {"id": 35},
      {"id": 36},
      {"id": 37},
      {"id": 38},
      {"id": 39},
      {"id": 40},
      {"id": 41},
      {"id": 42},
      {"id": 43},
      {"id": 44},
      {"id": 45},
      {"id": 46},
      {"id": 47},
      {"id": 48},
      {"id": 49},
      {"id": 50},
      {"id": 51},
      {"id": 52},
      {"id": 53},
      {"id": 54},
      {"id": 55},
      {"id": 56},
      {"id": 57},
      {"id": 58},
      {"id": 59},
      {"id": 60},
      {"id": 61},
      {"id": 62},
      {"id": 63},
      {"id": 64},
      {"id": 65},
      {"id": 66},
      {"id": 67},
      {"id": 68},
      {"id": 69},
      {"id": 70},
      {"id": 71},
      {"id": 72},
      {"id": 73},
      {"id": 74},
      {"id": 75},
      {"id": 76},
      {"id": 77},
      {"id": 78},
      {"id": 79},
      {"id": 80},
      {"id": 81},
      {"id": 82},
      {"id": 83},
      {"id": 84},
      {"id": 85},
      {"id": 86},
      {"id": 87},
      {"id": 88},
      {"id": 89},
      {"id": 90},
      {"id": 91},
      {"id": 92},
      {"id": 93},
      {"id": 94},
      {"id": 95},
      {"id": 96},
      {"id": 97},
      {"id": 98},
      {"id": 99},
      {"id": 100}
    ]
  },
  "transform": [
    {"calculate": "ceil (datum.id/10)", "as": "col"},
    {"calculate": "datum.id - datum.col*10", "as": "row"}
  ],
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "col", "type": "ordinal", "axis": null},
    "y": {"field": "row", "type": "ordinal", "axis": null},
    "shape": {
      "value": "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z"
    },
    "color": {
      "condition": {"param": "highlight", "value": "rgb(194,81,64)"},
      "value": "rgb(167,165,156)"
    },
    "size": {"value": 90}
  },
  "params": [{"name": "highlight", "select": "interval"}]
}