Skip to content

Instantly share code, notes, and snippets.

@Wikunia
Created March 16, 2020 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Wikunia/427c8d1421ac4370d1e4304a9cca2d34 to your computer and use it in GitHub Desktop.
Save Wikunia/427c8d1421ac4370d1e4304a9cca2d34 to your computer and use it in GitHub Desktop.
Covid 19 vega
{
"$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