Template:Graph:Country with regions and capitals

From MediaWiki.org
Jump to navigation Jump to search
Documentation icon Template documentation[view] [edit] [history] [purge]


This graph's main version resides at Template:Graph:Country_with_regions_and_capitals. Please make all the changes there and copy it everywhere else (until the copying is automated)

{{ Graph:Country with regions and capitals | id=Q30 | lat=45.96 | lon=-113.23 | scale=600 | height=500 | width=500 | title=United States of America | projection=albersUsa | hideNeighbours=1}} {{ Graph:Country with regions and capitals | id=Q55 | lat=52.34 | lon=5.34 | scale=4500 | height=500 | width=500 | title=Netherlands}}
{{ Graph:Country with regions and capitals | id=Q96 | lat=23.96 | lon=-102.9 | scale=913 | height=500 | width=500 | title=Mexico}} {{ Graph:Country with regions and capitals | id=Q155 | lat=-10.82 | lon=-52.83 | scale=491 | height=500 | width=500 | title=Brazil}}to all worldwide wikis (last 6 months)
{{ Graph:Country with regions and capitals | id=Q183 | lat=51.32 | lon=10.37 | scale=1516 | height=500 | width=500 | title=Germany}} {{ Graph:Country with regions and capitals | id=Q889 | lat=33.84 | lon=66.03 | scale=1551 | height=500 | width=500 | title=Afghanistan}}
{{ Graph:Country with regions and capitals | id=Q916 | lat=-11 | lon=17.41 | scale=1350 | height=500 | width=500 | title=Angola}} {{ Graph:Country with regions and capitals | id=Q958 | lat=7.37 | lon=30.17 | scale=1834 | height=500 | width=500 | title=South Sudan}}

Inserts a map of a country/region with a given Wikidata ID, plus capitals, plus neighbours, with popup infoboxes

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Wikidata ID of a countryid

no description

Default
Q414
Stringsuggested
Latitudelat

Latitude of the map's center

Default
-35.9
Numbersuggested
Longitudelon

Longitude of the map's center

Default
-65.1
Numbersuggested
Map scalescale

Map scaling factor (zoom)

Default
550
Numbersuggested
Show Wikidata IDsshowId

If set to any value, show region's Wikidata IDs

Stringoptional
Hide neighbourshideNeighbours

If set to any value, does not show neighbouring countries

Stringoptional
Remove from labelsremoveString

Modifies region's labels, removing this string (regex expression)

Default
region$
Stringoptional
Widthwidth

Width for the chart in pixels, if different from the default.

Default
200
Numberoptional
Heightheight

Height for the chart in pixels, if different from the default.

Default
450
Numberoptional
Map titleprojection

Title string to show at the top

Default
Argentina
Stringoptional
<graph mode=interactive>
{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Country_with_regions_and_capitals
  //            Please do not modify it anywhere else, as it may get copied and override your changes.
  //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Country_with_regions_and_capitals
  //            The graph uses geoshapes from map service and Wikidata query service
  //

  "version": 2,
  "width": 200,
  "height": 450,
  "padding": 12,
  "signals":[
    // These signals allow us to quickly move the map within the image, e.g. to leave space for the legend
    {"name": "mapWidth", "init": {"expr": "width"} },
    {"name": "mapHeight", "init": {"expr": "height"} },
    {"name": "mapXC", "init": {"expr": "mapWidth/2"} },
    {"name": "mapYC", "init": {"expr": "mapHeight/2"} },
    {"name": "mapScale", "init": {"expr": "550"} },
    {"name": "mapCenterLon", "init": {"expr": "-65.1"} },
    {"name": "mapCenterLat", "init": {"expr": "-35.9"} },
    {"name": "projection", "init": {"expr": "'mercator'"} },
    {"name": "bigShapeSize", "init": 700},
    {"name": "smallShapeSize", "init": 370},
    {"name": "popupWidth", "init": {"expr": "mapWidth"} },
    {"name": "popupGapY", "init": 30},
    {"name": "popupBoxHeight", "init": 36},
    {"name": "popupImgPadding", "init": 4},
    {"name": "maxImgWidth", "init": {"expr": "popupWidth-popupImgPadding*2"} },
    {"name": "maxImgHeight", "init": {"expr": "mapHeight/2-popupImgPadding*2-popupBoxHeight-popupGapY"} },
    {"name": "popupImgPosCY", "init": {"expr": "popupBoxHeight+popupImgPadding+maxImgHeight/2"} },
    {"name": "popupIconPadding", "init": 4},
    {"name": "maxIconHeight", "init": {"expr": "popupBoxHeight-popupIconPadding*2"} },
    {"name": "maxIconWidth", "init": {"expr": "maxIconHeight*3/2"} },
    {
      "name": "popupSignal",
      "init": {"expr": "null"}, 
      "streams": [
        { "type": "@markSubregion:mouseover", "expr": "{y: eventY(), id:eventItem().datum.id, obj: eventItem().datum.properties}" },
        { "type": "@markNeighbour:mouseover", "expr": "{y: eventY(), id:eventItem().datum.id, obj: eventItem().datum.properties}" },
        { "type": "@markSubregionCapital:mouseover", "expr": "{y: eventY(), id:eventItem().datum.id, obj: eventItem().datum}" },
        { "type": "@markNeighbourCapital:mouseover", "expr": "{y: eventY(), id:eventItem().datum.id, obj: eventItem().datum}" },
        { "type": "mouseout", "expr": "null" }
      ]
    },
    {
      "name": "openLink",
      "init": {"expr": "null"}, 
      "streams": [{
        "type": "click[popupSignal && popupSignal.obj && popupSignal.obj.page]",
        "expr": "open(popupSignal.obj.page)"
      }]
    }
  ],
  "data": [{
    "name": "dataSubregions",
    "url": "geoshape:///?arg1=0.001&query=SELECT%20REDUCED%20%3Fid%20%3FidLabel%20%0A%09%20%20%20%28SAMPLE%28%3FflagImg%29%20as%20%3FflagImg%29%0A%09%20%20%20%28SAMPLE%28%3Fpage%29%20as%20%3Fpage%29%0AWHERE%20%7B%0A%20%20%23%20Configurable%20parameters%3A%20%0A%20%20%23%20%3Fcountry%20is%20a%20country%0A%20%20BIND%28wd%3AQ414%20as%20%3Fcountry%29%0A%20%20%23%20%3Ftypes%20is%20administrative%20subdivisions%20we%20seek%20for%20this%20country%0A%20%20VALUES%20%3Ftypes%20%7B%20wd%3AQ34876%20wd%3AQ7275%20%7D%0A%20%20%23%20No%20serviceable%20parts%20beyond%20this%20point%0A%20%20%23%20Located%20in%20the%20administrative%20territorial%20entity%20of%20the%20whole%20country%2C%20but%20not%20sub-entity%0A%20%20%3Fid%20wdt%3AP131%20%3Fcountry%20.%0A%20%20%23%20We%20want%20it%20to%20be%20of%20this%20type%20in%20a%20country%2C%20and%20have%20a%20capital%0A%20%20FILTER%20EXISTS%20%7B%20%3Fid%20%28wdt%3AP31%2Fwdt%3AP279%2a%29%20%3Ftypes%20%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wdt%3AP17%20%3Fcountry%20.%20%7D%0A%20%20%23%20Excluding%20the%20country%20itself%0A%20%20FILTER%28%3Fid%20%21%3D%20%3Fcountry%29%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP41%20%3FflagImg%20%7D%0A%20%20OPTIONAL%20%7B%0A%20%20%20%20%20%20%3Fpage%20schema%3Aabout%20%3Fid%20.%0A%20%20%20%20%20%20%3Fpage%20schema%3AisPartOf%20%3Chttps%3A%2F%2Fen.wikipedia.org%2F%3E%20.%0A%20%20%7D%0A%7D%20GROUP%20BY%20%3Fid%20%3FidLabel",
    "format": {"type": "topojson","feature": "data"},
    "transform": [
      {
        "type": "geopath",
        "value": "data",
        "scale": {"expr": "mapScale"},
        "center": [{"expr": "mapCenterLon"}, {"expr": "mapCenterLat"}],
        "translate": [{"expr": "mapXC"}, {"expr": "mapYC"}],
        "projection": {"expr": "projection"}
      },
      {"type": "formula", "field":"cursor", "expr": "if(datum.properties.page,'pointer',null)"}
    ]
  },{
    "name": "dataSubregionCapitals",
    "url": "wikidatasparql:///?query=SELECT%20REDUCED%20%3Fid%20%3FidLabel%0A%20%20%20%20%20%20%28SAMPLE%28%3Flocation%29%20as%20%3Flocation%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fimage%29%20as%20%3Fimage%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fpopulation%29%20as%20%3Fpopulation%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fpage%29%20as%20%3Fpage%29%0AWHERE%20%7B%0A%20%20%23%20Configurable%20parameters%3A%20%0A%20%20%23%20%3Fcountry%20is%20a%20country%0A%20%20BIND%28wd%3AQ414%20as%20%3Fcountry%29%0A%20%20%23%20%3Ftypes%20is%20administrative%20subdivisions%20we%20seek%20for%20this%20country%0A%20%20VALUES%20%3Ftypes%20%7B%20wd%3AQ34876%20wd%3AQ7275%20%7D%0A%20%20%23%20No%20serviceable%20parts%20beyond%20this%20point%0A%20%20%23%20Located%20in%20the%20administrative%20territorial%20entity%20of%20the%20whole%20country%2C%20but%20not%20sub-entity%0A%20%20%3Fregion%20wdt%3AP131%20%3Fcountry%20.%0A%20%20%23%20We%20want%20it%20to%20be%20of%20this%20type%20in%20a%20country%2C%20and%20have%20a%20capital%0A%20%20FILTER%20EXISTS%20%7B%20%3Fregion%20%28wdt%3AP31%2Fwdt%3AP279%2A%29%20%3Ftypes%20%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wdt%3AP17%20%3Fcountry%20.%20%7D%0A%20%20%23%20Excluding%20the%20country%20itself%0A%20%20FILTER%28%3Fregion%20%21%3D%20%3Fcountry%29%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22.%20%7D%0A%20%20%3Fregion%20wdt%3AP36%20%3Fid%20.%0A%20%20%3Fid%20wdt%3AP625%20%3Flocation%20.%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP18%20%3Fimage%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP1082%20%3Fpopulation%20%7D%0A%20%20OPTIONAL%20%7B%0A%20%20%20%20%20%20%3Fpage%20schema%3Aabout%20%3Fid%20.%0A%20%20%20%20%20%20%3Fpage%20schema%3AisPartOf%20%3Chttps%3A%2F%2Fen.wikipedia.org%2F%3E%20.%0A%20%20%7D%0A%7D%20GROUP%20BY%20%3Fid%20%3FidLabel",
    "format": {"type": "json"},
    "transform": [
      {"type": "filter", "test": "datum.location"},
      {
        // Must match the geopath transformation above
        "type": "geo",
        "lon": "location[0]",
        "lat": "location[1]",
        "scale": {"signal": "mapScale"},
        "center": [{"expr": "mapCenterLon"}, {"expr": "mapCenterLat"}],
        "translate": [{"expr": "mapXC"}, {"expr": "mapYC"}],
        "projection": {"expr": "projection"}
      },
      {"type": "formula", "field":"cursor", "expr": "if(datum.page,'pointer',null)"}
    ]
  },{
    "name": "dataNeighbours",
"url": "geoshape:///?arg1=0.001&query=SELECT%20REDUCED%20%3Fid%20%3FidLabel%20%0A%09%20%20%20%28SAMPLE%28%3FflagImg%29%20as%20%3FflagImg%29%0A%09%20%20%20%28SAMPLE%28%3Fpage%29%20as%20%3Fpage%29%0AWHERE%20%7B%0A%20%20%23%20Configurable%20parameters%3A%20%0A%20%20%23%20%3Fcountry%20is%20a%20country%0A%20%20BIND%28wd%3AQ414%20as%20%3Fcountry%29%0A%20%20%23%20No%20serviceable%20parts%20beyond%20this%20point%0A%20%20%3Fcountry%20wdt%3AP47%3F%20%3Fid%20.%0A%20%20%23%20exclude%20former%20countries%0A%20%20FILTER%20NOT%20EXISTS%20%7B%20%3Fid%20wdt%3AP31%20wd%3AQ3024240%20%7D%0A%20%20FILTER%20NOT%20EXISTS%20%7B%20%3Fid%20wdt%3AP576%20%3Fdate%20%7D%0A%20%20FILTER%20EXISTS%20%7B%20%3Fid%20wdt%3AP31%20wd%3AQ6256%20%7D%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP41%20%3FflagImg%20%7D%0A%20%20OPTIONAL%20%7B%0A%20%20%20%20%20%20%3Fpage%20schema%3Aabout%20%3Fid%20.%0A%20%20%20%20%20%20%3Fpage%20schema%3AisPartOf%20%3Chttps%3A%2F%2Fen.wikipedia.org%2F%3E%20.%0A%20%20%7D%0A%7D%20GROUP%20BY%20%3Fid%20%3FidLabel",
    "format": {"type": "topojson","feature": "data"},
    "transform": [
      {
        "type": "geopath",
        "value": "data",
        "scale": {"signal": "mapScale"},
        "center": [{"expr": "mapCenterLon"}, {"expr": "mapCenterLat"}],
        "translate": [{"expr": "mapXC"}, {"expr": "mapYC"}],
        "projection": {"expr": "projection"}
      },
      {"type": "formula", "field":"cursor", "expr": "if(datum.page,'pointer',null)"}
    ]
  },{
    "name": "dataNeighboursCapitals",
"url": "wikidatasparql:///?query=SELECT%20REDUCED%20%3Fid%20%3FidLabel%0A%20%20%20%20%20%20%28SAMPLE%28%3Flocation%29%20as%20%3Flocation%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fimage%29%20as%20%3Fimage%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fpopulation%29%20as%20%3Fpopulation%29%0A%20%20%20%20%20%20%20%28SAMPLE%28%3Fpage%29%20as%20%3Fpage%29%0AWHERE%20%7B%0A%20%20%23%20Configurable%20parameters%3A%20%0A%20%20%23%20%3Fcountry%20is%20a%20country%0A%20%20BIND%28wd%3AQ414%20as%20%3Fcountry%29%0A%20%20%23%20No%20serviceable%20parts%20beyond%20this%20point%0A%20%20%3Fcountry%20wdt%3AP47%3F%20%3FidObj%20.%0A%20%20%23%20exclude%20former%20countries%0A%20%20FILTER%20NOT%20EXISTS%20%7B%20%3FidObj%20wdt%3AP31%20wd%3AQ3024240%20%7D%0A%20%20FILTER%20NOT%20EXISTS%20%7B%20%3FidObj%20wdt%3AP576%20%3Fdate%20%7D%0A%20%20FILTER%20EXISTS%20%7B%20%3FidObj%20wdt%3AP31%20wd%3AQ6256%20%7D%0A%20%20%3FidObj%20wdt%3AP36%20%3Fid%20.%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22.%20%7D%0A%20%20%3Fid%20wdt%3AP625%20%3Flocation%20.%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP18%20%3Fimage%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP1082%20%3Fpopulation%20%7D%0A%20%20OPTIONAL%20%7B%0A%20%20%20%20%20%20%3Fpage%20schema%3Aabout%20%3Fid%20.%0A%20%20%20%20%20%20%3Fpage%20schema%3AisPartOf%20%3Chttps%3A%2F%2Fen.wikipedia.org%2F%3E%20.%0A%20%20%7D%0A%7D%20GROUP%20BY%20%3Fid%20%3FidLabel",
    "format": {"type": "json"},
    "transform": [
      {"type": "filter", "test": "datum.location"},
      {
        // Must match the geopath transformation above
        "type": "geo",
        "lon": "location[0]",
        "lat": "location[1]",
        "scale": {"signal": "mapScale"},
        "center": [{"expr": "mapCenterLon"}, {"expr": "mapCenterLat"}],
        "translate": [{"expr": "mapXC"}, {"expr": "mapYC"}],
        "projection": {"expr": "projection"}
      },
      {"type": "formula", "field":"cursor", "expr": "if(datum.page,'pointer',null)"}
    ]
  },{
    "name": "legendData",
    "values": [
      {"shape":"star", "size":"bigShapeSize", "label": "Country capital"},
      {"shape":"star", "size":"smallShapeSize", "label": "State/Province capital"},
      {"shape":"square", "size":30, "label": "Bordering country"},
      {"shape":"square", "size":30, "label": "Bordering country"},
    ]
  },{
    "name": "emptyData",
    "values": [{}]
  }],
  "marks": [{
    "name": "markNeighbour",
    "type": "path",
    "from": {
      "data": "dataNeighbours",
      "transform": [
        {"type": "formula", "field":"isCurrent", "expr": "datum.id === 'Q414'"},
        {"type": "formula", "field":"color", "expr": "if(datum.isCurrent, '#ADDCE5', '#eee')"}
      ]
    },
    "properties": {
      "enter": {"path": {"field": "layout_path"} },
      "update": {
        "path": {"field": "layout_path"},
        "fill": {"field": "color"},
        "stroke": {"value": "grey"},
        "cursor": {"field": "cursor"}
      },
      "hover": {"fill": {"value": "#989898"} }
    }
  },{
    "name": "markSubregion",
    "type": "path",
    "from": {"data": "dataSubregions"},
    "properties": {
      "enter": {"path": {"field": "layout_path"} },
      "update": {
        "path": {"field": "layout_path"},
        "fill": {"value": "lightgray"},
        "stroke": {"value": "grey"},
        "cursor": {"field": "cursor"}
      },
      "hover": {"fill": {"value": "#989898"} }
    }
  },{
    "name": "markSubregionCapital",
    "type": "symbol",
    "from": {"data": "dataSubregionCapitals"},
    "properties": {
      "enter": {
        "x": {"field": "layout_x"},
        "y": {"field": "layout_y"},
        "size": {"signal": "smallShapeSize"},
        "shape": {"value": "M0,0.2L0.2351,0.3236 0.1902,0.0618 0.3804,-0.1236 0.1175,-0.1618 0,-0.4 -0.1175,-0.1618 -0.3804,-0.1236 -0.1902,0.0618 -0.2351,0.3236 0,0.2Z"},
        "stroke": {"value": "#7177C7"},
        "fill": {"value": "#7177C7"},
        "cursor": {"field": "cursor"}
      },
      "update": { "strokeWidth": {"value": 0} },
      "hover": { "strokeWidth": {"value": 5} }
    }
  },{
    "name": "markNeighbourCapital",
    "type": "symbol",
    "from": {"data": "dataNeighboursCapitals"},
    "properties": {
      "enter": {
        "x": {"field": "layout_x"},
        "y": {"field": "layout_y"},
        "size": {"signal": "bigShapeSize"},
        "shape": {"value": "M0,0.2L0.2351,0.3236 0.1902,0.0618 0.3804,-0.1236 0.1175,-0.1618 0,-0.4 -0.1175,-0.1618 -0.3804,-0.1236 -0.1902,0.0618 -0.2351,0.3236 0,0.2Z"},
        "fill": {"value": "#0412CC"},
        "stroke": {"value": "#0412CC"},
        "cursor": {"field": "cursor"}
      },
      "update": { "strokeWidth": {"value": 0} },
      "hover": { "strokeWidth": {"value": 5} }
    }
  },{
  	// Show country name and, if showId param is set, shows ID of the country
    "name": "title",
    "type": "text",
    "properties": {
      "update": {
        "x": {"value": 0},
        "y": {"value": 14},
        "fontSize": {"value": 20},
        "fontWeight": {"value": "bold"},
        "fill": {"value": "steelblue"},
        "text": {"value": "Argentina"}
      }
    }
  },{
    // Popup drawing group to show a semi-transparent box with some text and an optional image
    "name": "popupFrame",
    "type": "group",
    "from": {
      // uses a dummy data array with a single empty object
      // If popup is not enabled, filters that value out, otherwise copies useful values from popup into it.
      "data": "emptyData",
      "transform": [
        {"type": "filter", "test": "popupSignal && popupSignal.obj"},
        {"type": "formula", "field": "showAbove", "expr": "popupSignal.y > mapYC"},
        {"type": "formula", "field": "hasImage", "expr": "popupSignal.obj.image"},
        // Vega bug - cannot do this in one expression
        {"type": "formula", "field": "popupHeight", "expr": "if(datum.hasImage, maxImgHeight + popupImgPadding*2, 0)"},
        {"type": "formula", "field": "popupHeight", "expr": "popupBoxHeight + datum.popupHeight"},
        {"type": "formula", "field": "popupY", "expr": "if(datum.showAbove, -popupGapY-datum.popupHeight, popupGapY)"},
        {"type": "formula", "field": "popupY", "expr": "popupSignal.y + datum.popupY"},
        {"type": "formula", "field": "id", "expr": "popupSignal.id"},
        {"type": "formula", "field": "title", "expr": "if(popupSignal.capital,popupSignal.obj.idLabel,replace(popupSignal.obj.idLabel, / Province$/, ''))"}
      ]
    },
    "properties": {
      "update": {
        "xc": {"signal": "mapXC"},
        "y": {"field": "popupY"},
        "width": {"signal": "popupWidth"},
        "height": {"field": "popupHeight"},
        "fill": {"value": "#fff"},
        "fillOpacity": {"value": 0.85},
        "stroke": {"value": "#aaa"},
        "strokeWidth": {"value": 0.5}
      }
    },
    "marks": [{
      "name": "popupIcon",
      "type": "group",
      "from": {
        "data": "emptyData",
        "transform": [
          {"type": "filter", "test": "popupSignal && popupSignal.obj && popupSignal.obj.flagImg"},
          {"type": "formula", "field": "url", "expr": "popupSignal.obj.flagImg"},
          {"type": "formula", "field": "url", "expr": "replace(datum.url,'http://commons.wikimedia.org/wiki/Special:FilePath/','wikifile:///') + '?width='+maxIconWidth+'&height='+maxIconHeight"},
          {"type": "formula", "field": "x2", "expr": "popupWidth - popupIconPadding"},
          {"type": "formula", "field": "yc", "expr": "popupBoxHeight/2"}
        ]
      },
      "marks": [{
        "type": "image",
        "properties": {
          "update": {
            "x2": {"field": {"parent":"x2"} },
            "yc": {"field": {"parent":"yc"} },
            "url": {"field": {"parent":"url"} },
            "align": {"value": "right"},
            "baseline": {"value": "middle"}
          }
        }
      }]
      // end of popupIcon group
    },{
      "name": "popupImage",
      "type": "group",
      "from": {
        "data": "emptyData",
        "transform": [
          {"type": "filter", "test": "popupSignal && popupSignal.obj && popupSignal.obj.image"},
          {"type": "formula", "field": "url", "expr": "replace(popupSignal.obj.image,'http://commons.wikimedia.org/wiki/Special:FilePath/','wikifile:///') + '?width='+maxImgWidth+'&height='+maxImgHeight"},
        ]
      },
      "marks": [{
        "name": "hourglassIcon",
        "type": "text",
        "properties": {
          "update": {
            "xc": {"signal": "mapXC" },
            "yc": {"signal": "popupImgPosCY" },
            "text": {"value": "\u231b"},
            "fill": {"value": "black"},
            "fontSize": {"value": "45"},
            "align": {"value": "center"}
          }
        }
      },{
        "type": "image",
        "properties": {
          "update": {
            "xc": {"signal": "mapXC" },
            "yc": {"signal": "popupImgPosCY" },
            "url": {"field": {"parent":"url"} },
            "align": {"value": "center"},
            "baseline": {"value": "middle"},
          }
        }
      }]
    // end of popupImage group
    },{
      "name": "textTitle",
      "type": "text",
      "properties": {
        "update": {
          "x": {"value": 6},
          "y": {"value": 14},
          "text": {"field": {"parent": "title"} },
          "fill": {"value": "black"},
          "fontWeight": {"value": "bold"}
        }
      }
    },{
      // Show description text
      "name": "textInfo",
      "type": "text",
      "properties": {
        "update": {
          "x": {"value": 6},
          "y": {"value": 29},
          "text": [
            {
              "test": "popupSignal && popupSignal.obj && popupSignal.obj.population && false",
              "template": "Population: \u007b{popupSignal.obj.population|number:'.2s'}\u007d \t (\u007b{parent.id}\u007d)"
            },
            {
              "test": "popupSignal && popupSignal.obj && popupSignal.obj.population && true",
              "template": "Population: \u007b{popupSignal.obj.population|number:'.2s'}\u007d"
            },
            {
              "test": "false",
              "template": "(\u007b{parent.id}\u007d)"
            },
            { "value": "" }
          ],
          "fill": {"value": "black"}
        }
      }
    }]
    // end of popupFrame
  }]
}
</graph>