Template:WorldLocator

<graph mode="interactive"> {

 "width": 400,
 "height": 200,
 "padding": 0,
 "idkey": "properties.code",
 "mark": {
   "strokeWidth":0.5,
   "strokeOpacity":0.5
 },
 "signals": [
   {"name":"tooltip",
     "init": {"expr": "{x: 0, y: 0, datum: false }"}, 
     "streams": [
       {"type": "@map:mouseout, @map:touchstart", "expr": "{x: 0, y: 0, datum: false }" },
       {"type": "@map:mouseover, @map:touchstart", "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum}" }
     ]
   }
 ],
 "data": [
   {
     "name": "highlights",
     "values": [
       {
         "code": "",
         "v": "royalblue"
       }
     ],
     "default": { "v":"#ccc" }
   },{
     "name": "world",
     "url": "wikiraw:///Template:Graph:Map/Inner/Worldmap2c-json",
     "format": {"type": "topojson", "feature": "collection"},
     "transform": [{
       "type": "geopath",
       "projection": "equirectangular",
       "scale": 63,
       "center":[0,0],
       "translate": [190, 100]
     },{
   	"type": "formula",
   	"field": "my_id",
   	"expr": "datum.properties.code"
     },{
   	"type": "formula",
   	"field": "my_name",
   	"expr": "datum.properties.name"
     },{
   	"type": "formula",
   	"field": "my_width",
   	"expr": "length(datum.properties.name)*7+10"
     },{
         "type": "lookup",
         "keys": ["my_id"],
         "on": "highlights",
         "onKey": "code",
         "as": ["zipped"],
         "values": ["v"],
         "default": {"v": "#ccc"}
     }]
   },{
   "name": "dummyValue",
   "values": [{}]
 }],
 "marks": [
   {
     "name": "map",
     "type": "path",
     "from": {"data": "world"},
     "properties": {
       "enter": {
         "fill":{"value": "#ccc"},
         "stroke": {"value": "#fff"},
         "strokeWidth": {"value": "0.35"},
         "path": {"field": "layout_path"}
       },
       "update": {"fill": {"field": "zipped.v"} }
     }
   },{
     "name": "tooltip",
     "type": "group",
     "from": {
       "data": "dummyValue",
       "transform": [
         {"type": "filter", "test": "tooltip.datum"},
         {"type": "formula", "field": "offsetX", "expr": "5"},
         {"type": "formula", "field": "offsetY", "expr": "15"},
         {"type": "formula", "field": "lookupCountry", "expr": "tooltip.datum.properties.code"},

{ "type": "lookup", "on": "world", "onKey": "my_id", "keys": ["lookupCountry"], "as": ["mapDataVal"], "default": null },

         {"type": "formula", "field": "tipWidth", "expr": "datum.mapDataVal ? datum.mapDataVal.my_width : '90'"},
         {"type": "formula", "field": "tipHeight", "expr": "20"},

         {"type": "formula", "field": "alignLeft", "expr": "tooltip.x > width - datum.offsetX - datum.tipWidth"},
         {"type": "formula", "field": "alignTop", "expr": "tooltip.y > height - datum.offsetY - datum.tipHeight"},
         {"type": "formula", "field": "x", "expr": "max(0, tooltip.x + (datum.alignLeft ? -datum.offsetX-datum.tipWidth : datum.offsetX ))"},
         {"type": "formula", "field": "y", "expr": "tooltip.y + (datum.alignTop ? -1 : 1) * datum.offsetY"},
         {"type": "formula", "field": "name", "expr": "datum.mapDataVal ? datum.mapDataVal.my_name : '?xyz?'"},
     ]},
     "properties": {
       "update": {
         "x": {"field": "x" }, "y": {"field": "y" },
         "width": {"field": "tipWidth" },
         "height": {"field": "tipHeight" },
         "fill": {"value": "#fff"},
         "fillOpacity": {"value": 0.90},
         "stroke": {"value": "#aaa"},
         "strokeWidth": {"value": 0.5}
     } },
     "marks": [
       {
         "type": "text",
         "properties": {
           "update": {
             "x": {"value": 6}, "y": {"value": 14},
             "width": {"field": "tipWidth" },
             "text": {"template": "{{parent.name}}"},
             "font": {"value":"Lucida Console, Monaco, monospace"},
             "limit": {"value": "60"},
             "fill": {"value": "#666"}
       } } },
   ]}
 ]

} </graph>