Extension:Graph/Demo/Sparql

From Linux Web Expert

Number of museums per country

This graph pulls data from three wikidata queries

  1. Number of museums by country
  2. Country names - note that labels are localized using a list "ru,en", meaning first it will try to find a label in Russian, followed by English if Russian is not available.
  3. Country populations

This graph draws a map based on topojson map data, keyed by Wikidata ID. For each region, it looks up the number of museums, population, and region name from the 3 above queries. The color is determined by logarithmicly scaling museums/population. On mouseover, the country's name and museum count is shown.

code <graph mode="interactive"> {

 "version": 2,
 "width": 500,
 "height": 260,
 "padding": 12,
 "background": "#edf1f7",
 "data": [
   {
     "name": "countryNames",
     "url": "wikidatasparql:///?query=PREFIX%20wikibase%3A%20%3Chttp%3A%2F%2Fwikiba.se%2Fontology%23%3E%0APREFIX%20wd%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fentity%2F%3E%20%0APREFIX%20wdt%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fprop%2Fdirect%2F%3E%0A%0ASELECT%20%3Fid%20%3Fvalue%20WHERE%20%7B%0A%20%20%20%7B%20SELECT%20DISTINCT%20%3Fid%20%20WHERE%20%7B%0A%20%20%20%20%20%3Fplace%20wdt%3AP17%20%3Fid%20.%0A%20%20%20%7D%20%7D%0A%20%20%20%3Fid%20wdt%3AP299%20%3Fcode%20.%0A%20%20%20SERVICE%20wikibase%3Alabel%20%7B%0A%20%20%20%20%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%2Cen%22%20.%0A%20%20%20%20%20%3Fid%20rdfs%3Alabel%20%3Fvalue%0A%20%20%20%7D%0A%7D%0A",
     "format": { "type": "json" }
   },
   {
     "name": "countryPopulation",
     "url": "wikidatasparql:///?query=PREFIX%20wikibase%3A%20%3Chttp%3A%2F%2Fwikiba.se%2Fontology%23%3E%0APREFIX%20wd%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fentity%2F%3E%20%0APREFIX%20wdt%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fprop%2Fdirect%2F%3E%0A%0ASELECT%20%3Fid%20%3Fvalue%20WHERE%20%7B%0A%20%20%20%7B%20SELECT%20DISTINCT%20%3Fid%20%20WHERE%20%7B%0A%20%20%20%20%20%3Fplace%20wdt%3AP17%20%3Fid%20.%0A%20%20%20%7D%20%7D%0A%20%20%20%3Fid%20wdt%3AP299%20%3Fcode%20.%0A%20%20%20%3Fid%20wdt%3AP1082%20%3Fvalue%20.%0A%7D%0A",
     "format": { "type": "json" }
   },
   {
     "name": "museumCounts",
     "url":"wikidatasparql:///?query=PREFIX%20wikibase%3A%20%3Chttp%3A%2F%2Fwikiba.se%2Fontology%23%3E%0APREFIX%20wd%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fentity%2F%3E%20%0APREFIX%20wdt%3A%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fprop%2Fdirect%2F%3E%0A%0ASELECT%20DISTINCT%20%3Fid%20(count(*)%20as%20%3Fvalue)%20WHERE%20%7B%0A%20%20%20%3Fplace%20wdt%3AP31%2Fwdt%3AP279*%20wd%3AQ33506%20.%0A%20%20%20%3Fplace%20wdt%3AP17%20%3Fid%20.%0A%7D%0A%0AGROUP%20BY%20%3Fid",
     "format": { "type": "json" }
   },
   {
     "name": "map",
     "url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-json",
     "format": {"type": "topojson","feature": "countries"},
     "transform": [
       {
         "type": "geopath",
         "value": "data",
         "scale": 80,
         "center": [-180,125],
         "translate": [0,0],
         "projection": "equirectangular"
       },
       {
         "type": "lookup",
         "keys": ["id"],
         "on": "countryNames",
         "onKey": "id",
         "as": ["name"],
         "default": {"value": {"value": "???"} }
       },
       { "type": "formula", "field": "name", "expr": "datum.name.value" },
       {
         "type": "lookup",
         "keys": ["id"],
         "on": "countryPopulation",
         "onKey": "id",
         "as": ["population"],
         "default": {"value": {"value": 0} }
       },
       { "type": "formula", "field": "population", "expr": "datum.population.value" },
       {
         "type": "lookup",
         "keys": ["id"],
         "on": "museumCounts",
         "onKey": "id",
         "as": ["museums"],
         "default": {"value": {"value": 0} }
       },
       { "type": "formula", "field": "museums", "expr": "datum.museums.value" },
       {
         "type": "formula",
         "field": "rate",
         "expr": "datum.population > 0 && datum.museums > 0 ? (datum.museums / datum.population) : 0.000000001"
       }
     ]
   }
 ],
 "signals": [
   {
     "name": "tooltipSignal",
     "init": {"expr": "{x: 0, y: 0, datum: {name:, population:, museums:} }"}, 
     "streams": [
       {  
         "type": "@map:mouseover",    
         "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum}"
       },
       {  
         "type": "@map:mouseout",
         "expr": "{x: 0, y: 0, datum: {name:, population:, museums:} }"
       }
     ] 
   }
 ],
 "scales": [
   {
     "name": "color",
     "type": "log",
     "domain": {"data": "map","field": "rate"},
     "zero": false,
     "range":  ["#FFEDBC", "#f83600"]
   }
 ],
 "marks": [
   {
     "type": "text",
     "properties": {
       "enter": {
         "text": {"value": "Museums"},
         "x": {"value": 0},
         "y": {"value": 25},
         "fontSize": {"value": 32},
         "fontWeight": {"value": "bold"},
         "fill": {"value": "steelblue"}
       }
     }
   },
   {
     "name": "map",
     "type": "path",
     "from": {"data": "map"},
     "properties": {
       "enter": {"path": {"field": "layout_path"} },
       "update": {
         "fill": [
           {
             "test": "datum.rate !== null",
             "scale": "color",
             "field": "rate"
           },
           {"value": "grey"}
         ]
       },
       "hover": {"fill": {"value": "#989898"} }
     }
   },
   {
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 500},
         "y": {"value": 10},
         "align": {"value": "right"},
         "fontSize": {"value": 17},
         "fill": {"value": "black"}
       },
       "update": {
         "text": {"template": "\u007b{tooltipSignal.datum.name}\u007d \u007b{tooltipSignal.datum.museums}\u007d"}
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "Per Capita",
     "offset": -300,
      "properties": {
      "labels": {
        "text": {"value": ""}
       },
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180}
       }
     }
   }
 ]

} </graph>

Largest cities

Uses sparql query with cityLabel, population, and gps columns.

code <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>

Largest disasters

Uses sparql query with event, class, number of people affected, and the gps coordinates columns.

code <graph mode="interactive"> {

 "version": 2, "width": 650, "height": 270, "padding": 12, "background": "#edf1f7",
 "data": [{
     "name": "map",
     "url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-json",
     "format": {"type": "topojson","feature": "countries"},
     "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%0APREFIX%20xsd%3A%20%3Chttp%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema%23%3E%0A%0ASELECT%20%3Fevent%20(MIN(%3FrowAffected)%20as%20%3Faffected)%20(SAMPLE(%3FclassName)%20as%20%3Fclass)%20%3Fgps%0AWHERE%20%0A%7B%0A%20%20%7B%0A%20%20%20%20%3Fevt%20wdt%3AP31%20%3Fclass%20.%0A%20%20%20%20%3Fclass%20wdt%3AP279*%20wd%3AQ3839081%20.%0A%20%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fevt%20wdt%3AP1590%20%3Fcasualties%20%7D%20.%0A%20%20OPTIONAL%20%7B%20%3Fevt%20wdt%3AP1120%20%3Fdeaths%20%7D%20.%0A%20%20OPTIONAL%20%7B%20%3Fevt%20wdt%3AP1446%20%3Fmissing%20%7D%20.%0A%20%20OPTIONAL%20%7B%20%3Fevt%20wdt%3AP1339%20%3Finjured%20%7D%20.%0A%20%20BIND(COALESCE(%3Fcasualties%2C0)%20%2B%20COALESCE(%3Fdeaths%2C0)%20%2B%20COALESCE(%3Fmissing%2C0)%20%2B%20COALESCE(%3Finjured%2C0)%20as%20%3FrowAffected)%0A%20%20FILTER%20(%3FrowAffected%20%3E%200)%20%0A%20%20%3Fevt%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%20%20%3Fclass%20rdfs%3Alabel%20%3FclassName%20.%0A%20%20%20%20%3Fevt%20rdfs%3Alabel%20%3Fevent%20.%0A%20%20%7D%0A%7D%0AGROUP%20BY%20%3Fevent%20%3Fgps%20%0AORDER%20BY%20DESC(%3Faffected)%0ALIMIT%201000%0A",
     "format": {
       "type": "json"
     },
     "transform": [
     	{"type": "sort", "by": "-affected"},
       {
         "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": "affected"},
     "range": [16, 1000]
   },
   {
     "name": "class",
     "type": "ordinal",
     "domain": {"data": "points", "field": "class"},
     "range": "category20"
   }
 ],
 "marks": [
   {
     "type": "text",
     "properties": {
       "enter": {
         "text": {"value": "Disasters"},
         "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": "affected"},
         "fill": {"scale": "class", "field": "class"},
         "fillOpacity": {"value": 0.8},
         "stroke": {"value": "white"},
         "strokeWidth": {"value": 0.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.event}\u007d: \u007b{mouseoverSignal.affected|number:'.2s'}\u007d"
           },
           { "value": "" } 
         ]
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "class",
     "properties": {
       "labels": {
         "fontSize": {"value": 12}
       },
       "symbols": {
         "stroke": {"value": "transparent"}
       },
       "legend": {
         "x": {"value": 530},
         "y": {"value": -5}
       }
     }
   }
 ]

} </graph>