Extension:Graph/Demo/HistoricalFertilityRates

{

 "version": 2,
 "width": 500,
 "height": 260,
 "padding": 12,
 "background": "#edf1f7",
 "signals": [
   {
     "name": "isDragging",
     "init": false,
     "streams": [
       {"type": "@handle:mousedown","expr": "true"},
       {"type": "mouseup","expr": "false"}
     ]
   },
   {
     "name": "scaledHandlePosition",
     "streams": [
       {
         "type": "mousemove[isDragging]",
         "expr": "eventX()",
         "scale": {"name": "yearsScale","invert": true}
       }
     ]
   },
   {
     "name": "currentYear",
     "init": 2000,
     "expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
   },
   {
     "name": "tooltipSignal",
     "init": {"expr": "{x: 0, y: 0, datum: {} }"}, 
     "streams": [
       {  
         "type": "@map:mouseover",    
         "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.zipped}"
       },
       {  
         "type": "@map:mouseout",
         "expr": "{x: 0, y: 0, datum: {} }"
       }
     ] 
   }
 ],
 "data": [
   {
     "name": "highlights",
     "url": "wikiraw:///Extension:Graph/Demo/RawData:FertilityByCountryHistoric-csv",
     "format": {"type": "csv"},
     "transform": [
       {
         "type": "formula",
         "field": "v",
         "expr": "parseFloat(datum[+currentYear])"
       }
     ]
   },
   {
     "name": "countries",
     "url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-iso3-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": "highlights",
         "onKey": "id",
         "as": ["zipped"],
         "default": {"v": null, "country":"No data"}
       }
     ]
   }
 ],
 "scales": [
   {
     "name": "yearsScale",
     "type": "linear",
     "zero": false,
     "domain": [1960,2013],
     "range": "width"
   },
   {
     "name": "color",
     "type": "linear",
     "domain": {"data": "countries","field": "zipped.v"},
     "domainMin": 1,
     "zero": false,
     "range":  ["#FFEDBC", "#f83600"]
   }
 ],
 "marks": [
   {
     "name": "yearLabel",
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 25},
         "fontSize": {"value": 32},
         "fontWeight": {"value": "bold"},
         "fill": {"value": "steelblue"}
       },
       "update": {"text": {"signal": "currentYear"} }
     }
   },
   {
     "name": "scrollLine",
     "type": "rule",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 40},
         "x2": {"value": 500},
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 2}
       }
     }
   },
   {
     "name": "handle",
     "type": "path",
     "properties": {
       "enter": {
         "y": {"value": 40},
         "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
         "stroke": {"value": "#880"},
         "strokeWidth": {"value": 2.5}
       },
       "update": {
         "x": {"scale": "yearsScale","signal": "currentYear"},
         "fill": {"value": "#fff"}
       },
       "hover": {"fill": {"value": "#f00"} }
     }
   },
   {
     "name": "map",
     "type": "path",
     "from": {"data": "countries"},
     "properties": {
       "enter": {"path": {"field": "layout_path"} },
       "update": {
         "fill": [
           {
             "test": "datum.zipped.v !== null",
             "scale": "color",
             "field": "zipped.v"
           },
           {"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.country}\u007d \u007b{tooltipSignal.datum.v}\u007d"}
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "Fertility",
     "offset": -300,
     "properties": {
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180}
       }
     }
   }
 ]

}