User:Timbaaa/sandbox/6

 { "version": 2, "width": 500, "height": 500, "padding": 8, "background": "#edf1f7", "data": [ {     "name": "highlights", "url": "wikiraw://en.wikipedia.org/User:Timbaaa/sandbox/6/India_cases_by_region", "format": { "type": "csv", "parse": { "date": "date" }     },      "transform": [ {         "type": "formula", "field": "v", "expr": "parseFloat(datum[''+dateStamp])" }     ]    },    {      "name": "totalByDate", "url": "wikiraw://en.wikipedia.org/User:Timbaaa/sandbox/6/India_confirmed_cases", "format": { "type": "csv", "parse": { "date": "date", "cases": "number" }     }    },    {      "name": "regions", "url": "wikiraw://en.wikipedia.org/User:Timbaaa/sandbox/6/India Map Data.json", "format": {"type": "topojson","feature": "IND_adm_div_1"}, "transform": [ {         "type": "geopath", "value": "data", "scale": 820, "center": [65,40], "translate": [0,0], "projection": "equirectangular" },       {          "type": "lookup", "on": "highlights", "keys": ["id"], "onKey": "id", "as": ["zipped"], "default": {"v": null, "Regions":"No data"} }     ]    }    ],  "signals": [ {     "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"}, {"type": "#interactive-covid-india-map:mouseout","expr":"false"}, {"type": "@scrollArea:touchstart", "expr": "true"}, {"type": "touchend", "expr": "false"} ]   },    {      "name": "handlePosition", "init": 0, "streams": [ {         "type": "mousemove[isDragging]", "expr": "clamp(eventX,0,width)" },       {          "type": "touchmove[isDragging]", "expr": "clamp(eventX,0,width)" }     ]    },    {      "name": "scaledHandlePosition", "expr": "handlePosition", "scale": {"name": "dateScale","invert": true} },   {      "name": "currentDate", "init": "08 Mar 2020", "expr": "timeFormat('%d %b %Y',scaledHandlePosition)" },   {      "name": "dateStamp", "init": "2020-03-08", "expr": "timeFormat('%Y-%m-%d',scaledHandlePosition)" },   {      "name": "mousePosition", "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: {} }" }     ]    }  ],  "scales": [ {     "name": "dateScale", "type": "time", "clamp": true, "domain": { "data": "totalByDate", "field":"date" },     "range": "width" },   {      "name": "color", "type": "sqrt", "domain": [1,5e5], "domainMin": 1, "zero": false, "range": ["#FFEDBC", "#f83600"] } ],  "marks": [ {   "name": "hoverOverToolTipName", "type": "text", "properties": { "enter": { "x": {"value": 10}, "y": {"value": 10}, "fontSize": {"value": 16}, "fill": {"value": "black"} },     "update": {"text": {"template": "\u007b{mousePosition.datum.Region}\u007d"}} } 	},  	{    "name": "hoverOverToolTipNumber", "type": "text", "properties": { "enter": { "x": {"value": 10}, "y": {"value": 30}, "fontSize": {"value": 16}, "fill": {"value": "black"} },     "update": {"text": {"template": "\u007b{mousePosition.datum.v}\u007d"}} } 	},    {      "name": "map", "type": "path", "from": {"data": "regions"}, "properties": { "enter": { "path": {"field": "layout_path"} },       "update": { "fill": [ {             "test": "datum.zipped.v !== 0", "scale": "color", "field": "zipped.v"           }, {"value": "white"} ]       },      "hover": {"fill": {"value": "#989898"} } }   },    {      "name": "scrollArea", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 500}, "stroke": {"value": "#edf1f7"}, "strokeWidth": {"value": 16} }     }    },    {      "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 500}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      "name": "handle", "type": "symbol", "properties": { "enter": { "x": {"value": 200}, "y": {"value": 40}, "size": {"value": 154}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": { "fill": {"value": "#fff"}, "x": {"signal": "handlePosition"} },       "hover": {"fill": {"value": "#f00"} } }   },    {      "name": "dateLabel", "type": "text", "properties": { "enter": { "x": {"value": 300}, "y": {"value": 30}, "fontSize": {"value": 24}, "fontWeight": {"value": "bold"}, "fill": {"value": "steelblue"} },       "update": {"text": {"signal": "currentDate"} } }   }  ],  "legends": [ {     "fill": "color", "title": "Cases", "properties": { "gradient": { "stroke": {"value": "transparent"} },       "title": { "fontSize": {"value": 14} },       "legend": { "x": {"value": 350}, "y": {"value": 50 } }     }    }  ] }