mattijn
2/7/2018 - 8:20 PM

vega3_dorling_diagram_waddenzee_no_zoompan.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 960,
  "height": 500,
  "autosize": "none",
  "signals": [
    {
      "name": "week",
      "value": "2017-W01",
      "bind": {
        "input": "week",
        "min": "2016-W44",
        "max": "2017-W33",
        "options": [
          "2017-W01",
          "2017-W15",
          "2017-W30"
        ]
      }
    },
    {
      "name": "activiteit",
      "value": "Taak",
      "bind": {
        "input": "select",
        "options": [
          "Taak",
          "Benoemd",
          "Raamact."
        ]
      }
    },
    {
      "name": "parameter",
      "value": "m3.minDepth.cut",
      "bind": {
        "input": "select",
        "options": [
          "pct.opp.minDepth.cut",
          "m3.minDepth.cut",
          "m2.minDepth.cut",
          "cm.avg.minDepth.cut"
        ]
      }
    }
  ],
  "data": [
    {
      "name": "baggervakken",
      "url": "https://rawgit.com/mattijn/datasets/master/prioritering_refined_wgs84.geojson",
      "format": {
        "type": "json",
        "property": "features"
      },
      "transform": []
    },
    {
      "name": "trendParameters_min_cut",
      "url": "https://rawgit.com/mattijn/datasets/master/trendParameters_min_cut_week.json",
      "format": {
        "type": "json",
        "parse": {
          "date": "string",
          "value": "number"
        }
      },
      "transform": [
        {
          "type": "filter",
          "expr": "datum.Activity===activiteit"
        },
        {
          "type": "filter",
          "expr": "datum.parameterId===parameter"
        },
        {
          "type": "filter",
          "expr": "datum.date===week"
        },
        {
          "type": "lookup",
          "from": "baggervakken",
          "key": "properties.Objectcode",
          "fields": [
            "locationId"
          ],
          "as": [
            "geo"
          ]
        },
        {
          "type": "filter",
          "expr": "datum.geo"
        },
        {
          "type": "formula",
          "expr": "geoCentroid('projection', datum.geo)",
          "as": "centroid"
        }
      ]
    },
    {
      "name": "NLoutline",
      "url": "https://rawgit.com/mattijn/datasets/master/NL_outline_geo.json",
      "format": {
        "type": "json",
        "property": "features"
      }
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "scale": 20000,
      "rotate": [
        0,
        0,
        0
      ],
      "center": [
        5.509454,
        53.203693
      ],
      "translate": [
        {
          "signal": "width / 2"
        },
        {
          "signal": "height / 2"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "size",
      "domain": {
        "data": "trendParameters_min_cut",
        "field": "value"
      },
      "range": [
        0,
        2000
      ]
    },
    {
      "name": "color",
      "type": "sequential",
      "nice": true,
      "domain": {
        "data": "trendParameters_min_cut",
        "field": "value"
      },
      "range": {
        "scheme": "RedYellowGreen"
      },
      "reverse": true
    }
  ],
  "legends": [
    {
      "title": "% requires dredging",
      "orient": "bottom-right",
      "type": "gradient",
      "fill": "color",
      "format": "c"
    }
  ],
  "title": {
    "text": "title-of-chart-where-are-u?",
    "orient": "bottom",
    "anchor": "start"
  },
  "marks": [
    {
      "type": "shape",
      "from": {
        "data": "NLoutline"
      },
      "encode": {
        "enter": {
          "strokeWidth": {
            "value": 0.1
          },
          "stroke": {
            "value": "#777"
          },
          "fill": {
            "value": "lightgray"
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    },
    {
      "type": "shape",
      "from": {
        "data": "baggervakken"
      },
      "encode": {
        "enter": {
          "strokeWidth": {
            "value": 2
          },
          "stroke": {
            "value": "#019FE9"
          },
          "fill": {
            "value": "lightblue"
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    },
    {
      "name": "circles",
      "type": "symbol",
      "from": {
        "data": "trendParameters_min_cut"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color",
            "field": "value"
          },
          "tooltip": {
            "signal": "format(datum.value, '.0f')+'% of `'+format(datum.locationId, 'c')+'` requires dredging according to Nautic Guaranteed Depth'"
          },
          "size": {
            "scale": "size",
            "field": "value"
          },
          "x": {
            "field": "centroid[0]"
          },
          "y": {
            "field": "centroid[1]"
          }
        },
        "update": {
          "strokeWidth": {
            "value": 1.5
          },
          "stroke": {
            "value": "white"
          },
          "zindex": {
            "value": 2
          }
        },
        "hover": {
          "strokeWidth": {
            "value": 1.5
          },
          "stroke": {
            "value": "black"
          },
          "zindex": {
            "value": 3
          }
        }
      },
      "transform": [
        {
          "type": "force",
          "static": true,
          "forces": [
            {
              "force": "collide",
              "radius": {
                "expr": "1 + sqrt(datum.size) / 2"
              }
            },
            {
              "force": "x",
              "x": "datum.centroid[0]"
            },
            {
              "force": "y",
              "y": "datum.centroid[1]"
            }
          ]
        }
      ]
    }
  ]
}