Malline:Esimerkkikaaviot/Long lakes map example/graph


{{Esimerkkikaaviot/Long lakes map example}}
[ source data ]<graph>

{
  "version": 2,
  "width": 200,
  "height": 250,
  "padding": 12,
  "data": [
   {
      "name": "points",
      "url": "wikidatasparql:///?query={{{query}}}",
      "format": {
        "type": "json"
      },
      "transform": [
        {
          "type": "geo",
          "projection": "mercator",
          "scale": 450,
          "center": [5,70],
          "translate": [0,0],
          "lon": "gps[0]",
          "lat": "gps[1]"
        }
      ]
    },
    {
      "name": "countries",
      "url": "wikiraw://www.mediawiki.org/Extension:Graph/Demo/RawData:WorldMap-iso2-json",
      "format": {"type": "topojson","feature": "countries"},
      "transform": [
        {
          "type": "geopath",
          "value": "data",
          "scale": 450,
          "center": [5,70],
          "translate": [0,0],
          "projection": "mercator"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "size",
      "type": "linear",
      "domain": {"data": "points", "field": "size"},
      "range": [5, 5]
    },
    {
      "name": "fill",
      "type": "ordinal",
      "domain": {"data": "points", "field": "fill"},
      "range": "category20"
    },
  ],
  "marks": [
    {
      "name": "map",
      "type": "path",
      "from": {"data": "countries"},
      "properties": {
        "enter": {
          "fill": {"value": "silver"},
          "stroke": {"value":"black" },
          "path": {"field": "layout_path"}
        }
      }
    },
    {
      "name": "circle",
      "type": "symbol",
      "from": {"data": "points"},
      "properties": {
        "enter": {
          "size": {"scale": "size", "value": "5"},
          "fill": {"scale": "fill", "field": "fill" },
          "fillOpacity": {"value": 1},
          "stroke": {"scale": "fill", "field": "fill" },
          "strokeWidth": {"value": 1},
          "x": {"field": "layout_x"},
          "y": {"field": "layout_y"}
        }
      }
    }
  ]
}

</graph>

[ source data ]