Published
Edited
Mar 18, 2020
Insert cell
Insert cell
Insert cell
vl.layer(
vl.markRect().encode(
vl.y()
.fieldO('day')
.timeUnit('monthdate')
.title('')
.axis({ labelFontSize: 15 }),
vl.x()
.fieldN('country')
.title('')
.sort({ op: 'max', field: 'total', order: 'descending' })
.axis({ labelFontSize: 15 }),
vl.color()
.fieldQ('growthnorm')
.scale({
name: 'color',
type: 'linear',
range: ['#e7d9f7', '#7505ff'],
domain: [0, 1],
reverse: false,
zero: false
})
.legend(null),
vl.tooltip([
vl.tooltip().fieldT('day').title('Date'),
vl.tooltip().fieldQ('growthrate').title('Growth Rate').format('.0%'),
vl.tooltip().fieldO('country').title('Country'),
vl.tooltip().fieldQ('total').title('Total Cases')
])
)
)
.data(top20Data)
.width(width - 70)
.render()
Insert cell
Insert cell
Insert cell
table(
top20Data
.filter(entry => day ? entry.day === day : true)
.sort((a, b) => b.growthrate - a.growthrate)
)
Insert cell
Insert cell
Insert cell
viewof countries = table(
data.filter(entry => country
? entry['Country/Region'].toLowerCase().includes(country.toLowerCase())
: true),
{ fixedColumnsLeft: 2 }
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more