I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Evolución Coronavirus en ColombiaCoronavirus Colombia por ciudades (WIP)Coronavirus in AsiaCoronavirus LatinoaméricaCoronavirus in AfricaCoronavirus ColombiaCalifornia COVID-19 disparities bullet graphCalifornia COVID-19 disparities stacked barsUS Excess deaths Ridgeline plot vega-lite-apiMultimorbidity patterns for COVID-19 deaths in ColombiaExcess Deaths Associated with COVID-19 in the US19 Confirmed CasesPruebas Coronavirus ColombiaTiempo de procesamiento Pruebas Coronavirus ColombiaMapa Evolución Coronavirus Colombia
COVID-19 by US county
viewof view2 = vl
.data(filteredData)
.title(`COVID-19 in ${selectedState} by county (with at least 20 reported cases)`)
.facet({ "field": "county", type: 'nominal', title: 'County' })
.spec({
width: 80,
height: 80,
"encoding": {
"x": { "field": "date", "type": "temporal", title: 'Time' },
"y": {"field": "value", "type": "quantitative", title: 'Count'},
"color": { "field": "type", "scale": { range: ['#1abc9c', '#e74c3c']}, title: 'Type' },
},
layer: [{
"mark": {type: "line", tooltip: { content: 'data' }},
},{
"mark": {
type: "text", align: 'left', "dx": 8, dy: -6, fontSize: 12, fontWeight: 'bold',
},
"transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type === 'cases'`}],
"encoding": {
"text": {"field": "value", "type": "quantitative"},
}
}, {
"mark": {
type: "text", align: 'left', "dx": 8, dy: 6
},
"transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type === 'deaths'`}],
"encoding": {
"text": {"field": "value", "type": "quantitative", format: ',d'},
}
}, {
"mark": {type: "circle", size: 18},
"transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type !== 'new'`}],
}]
},
)
.toJSON()
// columns: 5,
// spacing: 0,
// spec: {
// width: 80,
// height: 80,
// "encoding": {
// "x": { "field": "date", "type": "temporal", title: 'Time' },
// "y": {"field": "value", "type": "quantitative", title: 'Count'},
// "color": { "field": "type", "scale": { range: ['#1abc9c', '#e74c3c']}, title: 'Type' },
// },
// layer: [{
// "mark": {type: "line", tooltip: { content: 'data' }},
// },{
// "mark": {
// type: "text", align: 'left', "dx": 8, dy: -6, fontSize: 12, fontWeight: 'bold',
// },
// "transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type === 'cases'`}],
// "encoding": {
// "text": {"field": "value", "type": "quantitative"},
// }
// }, {
// "mark": {
// type: "text", align: 'left', "dx": 8, dy: 6
// },
// "transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type === 'deaths'`}],
// "encoding": {
// "text": {"field": "value", "type": "quantitative", format: ',d'},
// }
// }, {
// "mark": {type: "circle", size: 18},
// "transform": [{"filter": `datum.rawTime == ${timeRange[1]} && datum.type !== 'new'`}],
// }]
// },
// config: {
// header: {
// titleFontSize: 16,
// labelFontSize: 14
// },
// axisBottom: { labelFlush: true, grid: false },
// title: {
// fontSize: 20,
// offset: 20
// },
// legend: {
// titleFontSize: 16,
// labelFontSize: 12
// },
// padding: { bottom : 20, top: 20 }
// }
// })
embed = require("vega-embed@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
