Template:USALocator

<graph mode="interactive"> {

 "width": 400,
 "height": 235,
 "padding": 0,
 "mark": {
   "strokeWidth":0.5,
   "strokeOpacity":0.5
 },   
 "signals": [
   {"name": "centerLat", "init": "37.1"},
   {"name": "centerLon", "init": "-105.8"},
   {"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": [
       {
         "id": "Template:ISO 3166/USA",
         "v": "royalblue"
       }
     ],
     "default": { "v":"#ccc" }
   },{
     "name": "world",
     "url": "wikiraw:///Template:Graph:Map/Inner/USA-states-json",
     "format": {"type": "topojson", "feature": "collection"},
     "transform": [{
       "type": "geopath",
       "projection": "albersUsa",
       "scale": 475,
       "rotate":[{"expr":"(centerLon * -1)"},{"expr":"(centerLat * -1)"},0],
       "translate": [{"expr":"(width/2)"}, {"expr":"(height/2)"}]
     },{
   	"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) > 20 ? 150 : (length(datum.properties.name)*7)+10"
     },{
         "type": "lookup",
         "keys": ["my_id"],
         "on": "highlights",
         "onKey": "id",
         "as": ["zipped"],
         "values": ["v"],
         "default": {"v":"#ccc","id":"AL"}
     }]
   },{
   "name": "dummyValue",
   "values": [{}]
 }],
 "marks": [
   {
     "name": "map",
     "type": "path",
     "from": {"data": "world"},
     "properties": {
       "enter": {
         "fill":{"value": "#ccc"},
         "stroke": {"value": "#eee"},
         "path": {"field": "layout_path"}
       },
       "update": {"fill": {"field": "zipped.v"} },
       "hover": {"fill": {"value": "lightsteelblue"} }
     }
   },{
   "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": "lookupState", "expr": "tooltip.datum.properties.code"},

{ "type": "lookup", "on": "world", "onKey": "my_id", "keys": ["lookupState"], "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.85},
         "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>