Unlisted
Edited
Apr 19
function generateData(numEntries) {
return Array.from({ length: numEntries }, () => ({
time: new Date(2025, 0, 1, Math.floor(Math.random() * 24), Math.floor(Math.random() * 60)), // Random time
symptom: `Symptom ${Math.floor(Math.random() * 5) + 1}` // Random symptom label
}));
}
RandomData = generateData(100)
{
const arcLayer = vl.markArc({ innerRadius: 60, stroke: null })
.data(RandomData)
.transform([
{calculate: "hours(datum.time)", as: "hour"}
])
.encode(
vl.theta().fieldO('hour').sort('ascending'),
vl.radius().count('symptom'),
vl.color().fieldN('symptom')
)
const dash = arcLayer
return dash.render()
}
{
const arcLayer = vl.markArc({ innerRadius: 60, stroke: null })
.data(RandomData)
.transform([
{calculate: "hours(datum.time)", as: "hour"}
])
.encode(
vl.theta().fieldO('hour').sort('ascending'),
vl.radius().count('symptom'),
vl.color().fieldN('symptom')
)
const dash = vl.vconcat(arcLayer)
return dash.render()
}
{
const arcLayer = vl.markArc({ innerRadius: 60, stroke: null })
.data(RandomData)
.transform([
{calculate: "hours(datum.time)", as: "hour"}
])
.encode(
vl.theta().fieldO('hour').sort('ascending'),
vl.radius().count('symptom')
//vl.color().fieldN('symptom')
)
const dash = vl.vconcat(arcLayer)
return dash.render()
}
{
const barLayer = vl.markBar()
.data(RandomData)
.transform([
{calculate: "hours(datum.time)", as: "hour"}
])
.encode(
vl.x().fieldO('hour').sort('ascending'),
vl.y().count('symptom'),
vl.color().fieldN('symptom')
)
const dash = vl.vconcat(barLayer)
return dash.render()
}
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.
