-
-
Save Wikunia/427c8d1421ac4370d1e4304a9cca2d34 to your computer and use it in GitHub Desktop.
Covid 19 vega
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$schema": "https://vega.github.io/schema/vega/v5.json", | |
"description": "An interactive world map supporting pan and zoom.", | |
"width": {"signal": "width"}, | |
"height": {"signal": "height"}, | |
"autosize": "none", | |
"padding": { | |
"top": 25, | |
"left": 0, | |
"right": 0, | |
"bottom": 0 | |
}, | |
"signals": [ | |
{ | |
"name": "width", | |
"value": 100 | |
}, | |
{ | |
"name": "height", | |
"value": 100 | |
}, | |
{ | |
"name": "last_date", | |
"value": "2020-01-22" | |
}, | |
{ | |
"name": "sld_date", | |
"value": 48, | |
"bind": { | |
"name": "Days after 22.01", | |
"input": "range", | |
"max": 48, | |
"min": 0, | |
"step": 1 | |
} | |
}, | |
{ | |
"name": "case_scale", | |
"value": "population", | |
"bind": { | |
"input": "select", | |
"options": [ | |
"population", | |
"daily_change", | |
"none" | |
], | |
"name": "Scaling by " | |
} | |
}, | |
{ | |
"name": "scl_exponent", | |
"value": 1, | |
"on": [ | |
{ | |
"events": { | |
"signal": "case_scale" | |
}, | |
"update": "case_scale == 'none' ? 0.1 : 1" | |
} | |
] | |
}, | |
{ | |
"name": "scl_domain", | |
"value": [ | |
0, | |
20 | |
], | |
"on": [ | |
{ | |
"events": [{ | |
"signal": "case_scale" | |
},{ | |
"signal": "type" | |
}], | |
"update": "case_scale == 'daily_change' ? [0.8, 2.5] : (type == 'deaths' ? (case_scale == 'population' ? [0,1] : [1, 10000]) : (case_scale == 'population' ? [0,20] : [1, 100000]))" | |
} | |
] | |
}, | |
{ | |
"name": "scale_title", | |
"value": "Cases per 100,000 people", | |
"on": [ | |
{ | |
"events": { | |
"signal": "case_scale" | |
}, | |
"update": "case_scale == 'population' ? ['Cases per','100,000 people'] : (case_scale == 'daily_change' ? ['X increase from','prev day'] : 'Number of cases')" | |
} | |
] | |
}, | |
{ | |
"name": "type", | |
"value": "active", | |
"bind": { | |
"input": "select", | |
"options": [ | |
"active", | |
"confirmed", | |
"deaths", | |
"recovered" | |
], | |
"name": "Cases " | |
} | |
}, | |
{ | |
"name": "scheme", | |
"value": "inferno", | |
"bind": { | |
"input": "select", | |
"options": [ | |
"inferno", | |
"reds", | |
"viridis" | |
], | |
"name": "Colorscheme " | |
} | |
}, | |
{ | |
"name": "reverse_scheme", | |
"value": true, | |
"on": [ | |
{ | |
"events": { | |
"signal": "scheme" | |
}, | |
"update": "scheme == 'inferno' || scheme == 'viridis' ? true : false" | |
} | |
] | |
}, | |
{ | |
"name": "tx", | |
"update": "width / 2" | |
}, | |
{ | |
"name": "ty", | |
"update": "height / 2" | |
}, | |
{ | |
"name": "scale", | |
"value": 150, | |
"on": [ | |
{ | |
"events": { | |
"type": "wheel", | |
"consume": true | |
}, | |
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)" | |
}, | |
{ | |
"events": { | |
"type": "touchstart", | |
"filter": "event.touches.length===2", | |
"consume": true | |
}, | |
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)" | |
} | |
] | |
}, | |
{ | |
"name": "angles", | |
"value": [ | |
0, | |
0 | |
], | |
"on": [ | |
{ | |
"events": "mousedown", | |
"update": "[rotateX, centerY]" | |
} | |
] | |
}, | |
{ | |
"name": "cloned", | |
"value": null, | |
"on": [ | |
{ | |
"events": "mousedown", | |
"update": "copy('projection')" | |
} | |
] | |
}, | |
{ | |
"name": "start", | |
"value": null, | |
"on": [ | |
{ | |
"events": "mousedown", | |
"update": "invert(cloned, xy())" | |
} | |
] | |
}, | |
{ | |
"name": "drag", | |
"value": null, | |
"on": [ | |
{ | |
"events": "[mousedown, window:mouseup] > window:mousemove", | |
"update": "invert(cloned, xy())" | |
} | |
] | |
}, | |
{ | |
"name": "delta", | |
"value": null, | |
"on": [ | |
{ | |
"events": { | |
"signal": "drag" | |
}, | |
"update": "[drag[0] - start[0], start[1] - drag[1]]" | |
} | |
] | |
}, | |
{ | |
"name": "rotateX", | |
"value": 0, | |
"on": [ | |
{ | |
"events": { | |
"signal": "delta" | |
}, | |
"update": "angles[0] + delta[0]" | |
} | |
] | |
}, | |
{ | |
"name": "centerY", | |
"value": 0, | |
"on": [ | |
{ | |
"events": { | |
"signal": "delta" | |
}, | |
"update": "clamp(angles[1] + delta[1], -60, 60)" | |
} | |
] | |
} | |
], | |
"scales": [ | |
{ | |
"name": "scl_cases", | |
"type": "pow", | |
"exponent": { | |
"signal": "scl_exponent" | |
}, | |
"domain": { | |
"signal": "scl_domain" | |
}, | |
"scheme": {"signal": "scheme"}, | |
"reverse": {"signal": "reverse_scheme"}, | |
"clamp": true | |
} | |
], | |
"projections": [ | |
{ | |
"name": "projection", | |
"type": "mercator", | |
"scale": { | |
"signal": "scale" | |
}, | |
"rotate": [ | |
{ | |
"signal": "rotateX" | |
}, | |
0, | |
0 | |
], | |
"center": [ | |
0, | |
{ | |
"signal": "centerY" | |
} | |
], | |
"translate": [ | |
{ | |
"signal": "tx" | |
}, | |
{ | |
"signal": "ty" | |
} | |
] | |
} | |
], | |
"data": [ | |
{ | |
"name": "world", | |
"url": "./data/provinces-and-countries.geojson", | |
"format": { | |
"property":"features" | |
} | |
}, | |
{ | |
"name": "graticule", | |
"transform": [ | |
{ | |
"type": "graticule", | |
"step": [ | |
15, | |
15 | |
] | |
} | |
] | |
}, | |
{ | |
"name": "cases", | |
"url": "./data/summarized.csv", | |
"format": { | |
"type": "csv", | |
"parse": "auto", | |
"delimiter": "," | |
}, | |
"transform": [ | |
{ | |
"type": "lookup", | |
"from": "world", | |
"key": "properties.name", | |
"fields": [ | |
"Country" | |
], | |
"as": [ | |
"country_outline" | |
] | |
}, | |
{ | |
"type": "filter", | |
"expr": "datum[last_date+'_confirmed_scl_none'] > 0" | |
} | |
] | |
}, | |
{ | |
"name": "world_empty", | |
"url": "./data/summarized.csv", | |
"format": { | |
"type": "csv", | |
"parse": "auto", | |
"delimiter": "," | |
}, | |
"transform": [ | |
{ | |
"type": "lookup", | |
"from": "world", | |
"key": "properties.name", | |
"fields": [ | |
"Country" | |
], | |
"as": [ | |
"country_outline" | |
] | |
}, | |
{ | |
"type": "filter", | |
"expr": "datum[last_date+'_confirmed_scl_none'] == 0.0" | |
} | |
] | |
}, | |
{ | |
"name": "dates", | |
"url": "./data/dates.csv", | |
"format": { | |
"type": "csv", | |
"format": { | |
"parse": { | |
"date": "'%Y %m %d'" | |
}, | |
"delimiter": "," | |
} | |
} | |
} | |
], | |
"marks": [ | |
{ | |
"type": "shape", | |
"from": { | |
"data": "graticule" | |
}, | |
"encode": { | |
"enter": { | |
"strokeWidth": { | |
"value": 1 | |
}, | |
"stroke": { | |
"value": "#ddd" | |
}, | |
"fill": { | |
"value": null | |
} | |
} | |
}, | |
"transform": [ | |
{ | |
"type": "geoshape", | |
"projection": "projection" | |
} | |
] | |
}, | |
{ | |
"type": "shape", | |
"from": { | |
"data": "world_empty" | |
}, | |
"encode": { | |
"enter": { | |
"strokeWidth": { | |
"value": 0.5 | |
}, | |
"stroke": { | |
"value": "#bbb" | |
}, | |
"fill": { | |
"value": "#aaa" | |
} | |
} | |
}, | |
"transform": [ | |
{ | |
"type": "geoshape", | |
"field": "datum.country_outline", | |
"projection": "projection" | |
} | |
] | |
}, | |
{ | |
"type": "shape", | |
"from": { | |
"data": "cases" | |
}, | |
"encode": { | |
"enter": { | |
"strokeWidth": { | |
"value": 0.5 | |
}, | |
"stroke": { | |
"value": "#bbb" | |
}, | |
"fill": { | |
"field": "0", | |
"type": "quantitative", | |
"scale": "scl_cases" | |
}, | |
"tooltip": {"signal": "datum.Country"} | |
}, | |
"update": { | |
"fill": { | |
"field": { | |
"signal": "data('dates')[0][sld_date]+'_'+type+'_scl_'+case_scale" | |
}, | |
"type": "quantitative", | |
"scale": "scl_cases" | |
} | |
} | |
}, | |
"transform": [ | |
{ | |
"type": "geoshape", | |
"field": "datum.country_outline", | |
"projection": "projection" | |
} | |
] | |
}, | |
{ | |
"type": "text", | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"y": { | |
"value": 0 | |
}, | |
"fill": { | |
"value": "black" | |
}, | |
"fontSize": { | |
"value": 20 | |
}, | |
"align": { | |
"value": "right" | |
} | |
}, | |
"update": { | |
"x": { | |
"signal": "width", | |
"offset": -5 | |
}, | |
"text": { | |
"signal": "data('dates')[0][sld_date]" | |
} | |
} | |
} | |
} | |
], | |
"legends": [ | |
{ | |
"orient": "bottom-left", | |
"fill": "scl_cases", | |
"title": { | |
"signal": "scale_title" | |
} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment