I like teaching, computing, and teaching computing
Unlisted
Edited
May 14
2 forks
vl.markPoint()
.data(ufoSightings)
.encode(
vl.x().year('sightingTime') // <--- Also using Vega-Lite's facilities for Time Units
)
.width(800)
.render()
vl.markBar()
.data(ufoSightings)
.encode(
vl.x().year('sightingTime'),
vl.y().count() // <-- The count aggregation is applied per x-axis value.
)
.height(250)
.width(700)
.render()
highOutlierThreshold = {
const encounterLengths = ufoSightings.array('encounterDuration');
const firstQuartile = d3.quantile(encounterLengths, 0.25);
const thirdQuartile = d3.quantile(encounterLengths, 0.75);
return thirdQuartile + (1.5 * (thirdQuartile - firstQuartile));
}
vl.markCircle()
.data(shorterEncounters)
.encode(
vl.x().fieldQ('encounterDuration'),
vl.y().count()
)
.width(400)
.render()
vl.markBar()
.data(shorterEncounters)
.encode(
vl.x().fieldQ('encounterDuration')
.bin(true), // <-- Automatically create equal-length bins of data. Defaults to "close to 10" bins.
vl.y().count()
)
.width(400)
.render()
vl.markBar()
.data(shorterEncounters)
.encode(
vl.x().fieldQ('encounterDuration')
.bin({ maxbins: 20 }),
vl.y().count()
)
.width(400)
.render()
vl.markBar()
.data(shorterEncounters)
.encode(
vl.x().year('sightingTime'),
vl.y().sum('encounterDuration'),
)
.width(800)
.render()
// Your code here
vl.markBar()
.data(ufoSightings)
.transform(
vl.calculate('datum.encounterDuration < 30 ? "short" : datum.encounterDuration < 600 ? "medium" : "long"')
.as('encounterOrdinal')
)
.encode(
vl.y().fieldO('encounterOrdinal')
.sort(['short', 'medium', 'long']), // Specifying a sort order for an ordinal field
vl.x().count()
)
.render()
// Code: Add a filter to the previous chart to only keep encounters shorter than 1470 seconds
vl.markBar()
.data(ufoSightings)
.transform(
vl.filter(`datum.encounterDuration <= ${highOutlierThreshold}`),
vl.calculate('datum.encounterDuration < 30 ? "short" : datum.encounterDuration < 600 ? "medium" : "long"')
.as('encounterOrdinal')
)
.encode(
vl.y().fieldO('encounterOrdinal')
.sort(['short', 'medium', 'long']), // Specifying a sort order for an ordinal field
vl.x().count()
)
.render()
vl.mark({ type: /* What type of mark is the heatmap using? */ })
.title('UFO sightings in California')
.data(ufoSightings)
.transform(
// Add your transforms here
// You'll filter down to sightings in CA
// You'll transform the time of each sighting to an hour, and then
// transform that hour into an ordinal value
)
.encode(
// What are the encodings used here?
)
.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.
