mattijn
11/23/2017 - 10:12 PM

vega3_init_group_matrix_chart_EU.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "pad",
  "padding": 5,
  "signals": [
    {
      "name": "kaart_width",
      "value": 450
    },
    {
      "name": "kaart_height",
      "value": 400
    },
    {
      "name": "matrix_location_x",
      "value": 460
    },
    {
      "name": "matrix_location_y",
      "value": 0
    },
    {
      "name": "matrix_x_step",
      "value": 5
    },
    {
      "name": "matrix_y_step",
      "value": 5
    },
    {
      "name": "matrix_width",
      "update": "bandspace(domain('x').length, 0, -0.05) * matrix_x_step"
    },
    {
      "name": "matrix_height",
      "update": "bandspace(domain('y').length, 0, -0.05) * matrix_y_step"
    },    
    {
      "name": "WSO1_ID_key",
      "value": [
        324225,
        358063
      ],
      "bind": {
        "input": "select",
        "options": [
          [
            324225,
            358063
          ],
          [
            712080,
            712122,
            717062,
            722244
          ],
          [
            246838,
            249259,
            406541,
            415472,
            415883,
            418315,
            419896,
            420039,
            420834,
            422115,
            423441,
            426972,
            426996,
            428470,
            509086,
            516560,
            534160
          ]
        ]
      }
    },
    {
      "name": "parameter",
      "value": "aa",
      "bind": {
        "input": "select",
        "options": [
          "aa",
          "ac",
          "ap",
          "au",
          "bd",
          "bh",
          "bi"
        ]
      }
    }

  ],
  "data": [
    {
      "name": "matrix_data",
      "url": "https://rawgit.com/mattijn/datasets/master/codebook.json",
      "format": {
        "type": "json"
      }
    },
    {
      "name": "kaart_data",
      "url": "https://rawgit.com/mattijn/datasets/master/locations.json",
      "format": {
        "type": "json",
        "property": "features"
      },
      "transform": [
        {
          "type": "filter",
          "expr": "indexof(WSO1_ID_key, datum.properties.WSO1_ID) > -1"
        },
        {
          "type": "formula",
          "expr": "geoCentroid('projection', datum)",
          "as": "centroid"
        }
      ]
    },
    {
      "name": "kaart_outline",
      "url": "https://rawgit.com/mattijn/datasets/master/europe.topojson",
      "format": {
        "type": "topojson",
        "feature": "europe"
      }
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "scale": 350,
      "rotate": [
        0,
        0,
        0
      ],
      "center": [
        7,
        53
      ],
      "translate": [
        {
          "signal": "kaart_width / 2"
        },
        {
          "signal": "kaart_height / 2"
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "group",
      "name": "kaart",
      "encode": {
        "enter": {
          "height": {
            "signal": "kaart_height"
          },
          "width": {
            "signal": "kaart_width"
          },
          "fill": {
            "value": "#DAE3F4"
          }
        }
      },
      "marks": [
        {
          "type": "group",
          "encode": {
            "enter": {
              "height": {
                "field": {
                  "group": "height"
                }
              },
              "width": {
                "field": {
                  "group": "width"
                }
              },
              "clip": {
                "value": true
              }
            }
          },
          "marks": [
            {
              "type": "shape",
              "from": {
                "data": "kaart_outline"
              },
              "encode": {
                "enter": {
                  "strokeWidth": {
                    "value": 0.2
                  },
                  "stroke": {
                    "value": "#CFDAF6"
                  },
                  "fill": {
                    "value": "#203864"
                  }
                }
              },
              "transform": [
                {
                  "type": "geoshape",
                  "projection": "projection"
                }
              ]
            },
            {
              "name": "circles",
              "type": "symbol",
              "from": {
                "data": "kaart_data"
              },
              "encode": {
                "enter": {
                  "fill": {
                    "value": "green"
                  },
                  "tooltip": {
                    "signal": "format(datum.properties.station, 'c')+' '+format(datum.properties.WSO1_ID, 'c')"
                  }
                },
                "update": {
                  "size": {
                    "value": 150
                  },
                  "stroke": {
                    "value": "white"
                  },
                  "strokeWidth": {
                    "value": 1.5
                  },
                  "x": {
                    "field": "centroid[0]"
                  },
                  "y": {
                    "field": "centroid[1]"
                  },
                  "zindex": {
                    "value": 2
                  }
                },
                "hover": {
                  "strokeWidth": {
                    "value": 1.5
                  },
                  "stroke": {
                    "value": "black"
                  },
                  "zindex": {
                    "value": 3
                  }
                }
              }
            }
          ]
        }
      ]
    },
    {
      "type": "group",
      "name": "matrix",
      "encode": {
        "enter": {
          "x": {
            "signal": "matrix_location_x"
          },
          "y": {
            "signal": "matrix_location_y"
          },
          "height": {
            "signal": "matrix_height"
          },
          "width": {
            "signal": "matrix_width"
          },
          "fill": {
            "value": "red"
          }
        }
      },
      "scales": [
        {
          "name": "matrix_x_scale",
          "type": "band",
          "domain": {
            "data": "matrix_data",
            "field": "X",
            "sort": true
          },
          "range": {
            "step": {
              "signal": "matrix_x_step"
            }
          }
        },
        {
          "name": "matrix_y_scale",
          "type": "band",
          "domain": {
            "data": "matrix_data",
            "field": "Y",
            "sort": true
          },
          "range": {
            "step": {
              "signal": "matrix_y_step"
            }
          }
        },
        {
          "name": "color",
          "type": "sequential",
          "domain": {
            "data": "matrix_data",
            "field": {
              "signal": "parameter"
            }
          },
          "range": {
            "scheme": "yellowgreenblue"
          },
          "reverse": false
        }
      ],
      "axes": [
        {
          "scale": "matrix_x_scale",
          "orient": "bottom",
          "labels": false,
          "tickCount": 5,
          "offset": 0,
          "zindex": 1,
          "encode": {
            "domain": {
              "update": {
                "strokeWidth": {
                  "value": 0
                }
              }
            },
            "ticks": {
              "update": {
                "strokeWidth": {
                  "value": 0
                }
              }
            }
          }
        },
        {
          "scale": "matrix_y_scale",
          "offset": 0,
          "orient": "left",
          "zindex": 1,
          "labels": false,
          "encode": {
            "domain": {
              "update": {
                "strokeWidth": {
                  "value": 0
                }
              }
            },
            "ticks": {
              "update": {
                "strokeWidth": {
                  "value": 0
                }
              }
            }
          }
        }
      ],
      "legends": [
        {
          "fill": "color",
          "encode": {
            "labels": {
              "update": {
                "limit": {
                  "value": 256
                }
              }
            }
          },
          "orient": "right",
          "title": {
            "signal": "parameter"
          },
          "type": "symbol"
        }
      ],
      "marks": [
        {
          "name": "matrix",
          "type": "rect",
          "from": {
            "data": "matrix_data"
          },
          "encode": {
            "update": {
              "x": {
                "scale": "matrix_x_scale",
                "field": "X"
              },
              "y": {
                "scale": "matrix_y_scale",
                "field": "Y"
              },
              "width": {
                "scale": "matrix_x_scale",
                "band": 1,
                "offset": 0
              },
              "height": {
                "scale": "matrix_y_scale",
                "band": 1,
                "offset": 0
              },
              "fill": {
                "scale": "color",
                "field": {
                  "signal": "parameter"
                }
              },
              "tooltip": {
                "signal": "'XY coord:'+format(datum.XY, 'c')+' list:['+format(datum.locs, 'c')+']'"
              },
              "stroke": {
                "value": "#000"
              },
              "strokeWidth": {
                "value": 0.075
              }
            },
            "hover": {
              "stroke": {
                "value": "#000"
              },
              "strokeWidth": {
                "value": 0.75
              }
            }
          }
        }
      ]
    }
  ]
}