Extension:Graph/Demo/Sparql/Largest cities

<graph mode=interactive>

{
  "version": 2,
  "width": 500,
  "height": 260,
  "padding": 12,
  "background": "#edf1f7",
  "data": [
    {
      "name": "map",
      "url": "geoshape:///?idcolumn=country&query=SELECT%20%3Fcountry%20%3FcountryLabel%20WHERE%20%7B%0A%20%20%7B%0A%20%20%20%20%20SELECT%20DISTINCT%20%3Fcountry%20%20WHERE%20%7B%0A%20%20%20%20%20%20%20%3Fplace%20wdt%3AP17%20%3Fcountry%20.%0A%20%20%20%20%20%7D%0A%20%20%7D%0A%20%20%3Fcountry%20wdt%3AP299%20%3Fcode%20.%0A%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22%20%7D%0A%7D%0A",
      "format": {"type": "topojson","feature": "data"},
      "transform": [
        {
          "type": "geopath",
          "value": "data",
          "scale": 80,
          "center": [-180,125],
          "translate": [0,0],
          "projection": "equirectangular"
        }
      ]
    },
    {
      "name": "points",
      "url": "wikidatasparql:///?query=PREFIX%20wd%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fentity%2F%3E%0APREFIX%20wdt%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fprop%2Fdirect%2F%3E%0APREFIX%20wikibase%3A%20%3Chttp%3A%2F%2Fwikiba.se%2Fontology%23%3E%0A%0ASELECT%20DISTINCT%20%3FcityLabel%20%3Fpopulation%20%3Fgps%0AWHERE%20%0A%7B%0A%20%20%3Fcity%20wdt%3AP31%2Fwdt%3AP279*%20wd%3AQ515%20.%0A%20%20%3Fcity%20wdt%3AP1082%20%3Fpopulation%20.%0A%20%20%3Fcity%20wdt%3AP625%20%3Fgps%20.%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%0A%20%20%20%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22%20.%0A%20%20%7D%0A%7D%0AORDER%20BY%20DESC(%3Fpopulation)%20LIMIT%2015",
      "format": {
        "type": "json"
      },
      "transform": [
        {"type": "sort", "by": "-population"},
        {
          "type": "geo",
          "projection": "equirectangular",
          "scale": 80,
          "center": [-180,125],
          "translate": [0,0],
          "lon": "gps[0]",
          "lat": "gps[1]"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "mouseoverSignal",
      "init": null,
      "streams": [
        {  
          "type": "@circle:mouseover",
          "expr": "eventItem().datum"
        },
        {
          "type": "@circle:mouseout",
          "expr": null
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "size",
      "type": "linear",
      "domain": {"data": "points", "field": "population"},
      "range": [10, 1000]
    }
  ],
  "marks": [
    {
      "type": "text",
      "properties": {
        "enter": {
          "text": {"value": "Largest cities"},
          "x": {"value": 0},
          "y": {"value": 25},
          "fontSize": {"value": 32},
          "fontWeight": {"value": "bold"},
          "fill": {"value": "steelblue"}
        }
      }
    },
    {
      "name": "map",
      "type": "path",
      "from": {"data": "map"},
      "properties": {
        "enter": {
          "fill": {"value": "grey"},
          "path": {"field": "layout_path"}
        }
      }
    },
    {
      "name": "circle",
      "type": "symbol",
      "from": {"data": "points"},
      "properties": {
        "enter": {
          "size": {"scale": "size", "field": "population"},
          "fill": {"value": "steelblue"},
          "fillOpacity": {"value": 0.8},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 1.5},
          "x": {"field": "layout_x"},
          "y": {"field": "layout_y"}
        }
      }
    },
    {
      "type": "text",
      "properties": {
        "enter": {
          "x": {"value": 500},
          "y": {"value": 10},
          "align": {"value": "right"},
          "fontSize": {"value": 17},
          "fill": {"value": "black"}
        },
        "update": {
          "text": [
            {
              "test": "mouseoverSignal !== null",
              "template": "\u007b{mouseoverSignal.cityLabel}\u007d \u007b{mouseoverSignal.population|number:'.2s'}\u007d"
            },
            { "value": "" } 
          ]
        }
      }
    }
  ]
}

</graph>