I like teaching, computing, and teaching computing
Unlisted
Edited
Apr 12
cars.view(10)
scatterplot1 = FileAttachment("scatterplot@1.png").image({ width: 300 })
// Our code goes here: JSON version.
{
const chartSpec = {
data: {
values: cars.objects()
},
mark: 'circle',
encoding: {
x: {
field: 'Miles_per_Gallon',
type: 'quantitative'
},
y: {
field: 'Horsepower',
type: 'quantitative'
}
}
}
return vl.spec(chartSpec).render()
}
// Our code goes here: JavaScript version.
vl.mark({ type: 'circle' })
.encode(
vl.x().fieldQ('Miles_per_Gallon'),
vl.y().fieldQ('Horsepower')
)
.data(cars)
.render()
// Code: Plot with responsive dimensions
vl.mark({ type: 'circle' })
.data(cars)
.encode(
vl.x().fieldQ('Miles_per_Gallon'),
vl.y().fieldQ('Horsepower')
)
.width(0.3 * width)
.height(0.3 * width)
.render()
// Code: plot with Origin
vl.mark({ type: 'circle' })
.data(cars)
.encode(
vl.x().fieldQ('Miles_per_Gallon')
.axis({ title: 'Miles per Gallon (mpg)' }),
vl.y().fieldQ('Horsepower'),
vl.color().fieldN('Origin'),
)
.width(0.3 * width)
.height(0.3 * width)
.render()
// Code: can we separate origin further? We've already "used up" the x and y coordinates.
vl.mark({ type: 'circle' })
.data(cars)
.encode(
vl.x().fieldQ('Miles_per_Gallon')
.axis({ title: 'Miles per Gallon (mpg)' }),
vl.y().fieldQ('Horsepower'),
vl.color().fieldN('Origin'),
vl.facet({ columns: 3 }).fieldN('Origin')
)
.width(0.25 * width)
.height(0.25 * width)
.render()
cars.sample(5).view()
cars.groupby('Cylinders').count().view()
// Number of cars of different cylinders
vl.markBar()
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().count()
)
.render()
// Average acceleration of cars with different numbers of cylinders
vl.markBar()
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().mean('Acceleration')
)
.render()
// Turning quantitative fields into Ordinal fields through binning
// What are the data?
// What are the channels?
// What's the mark?
vl.markBar()
.data(cars)
.encode(
vl.x().fieldQ('Miles_per_Gallon').bin(true),
vl.y().fieldQ('Horsepower').bin(true),
vl.color().count()
)
.render()
surveydata
.sample(5)
.view()
// People's birthdays
// What should do with the y-axis?
// Other time units
// Where do we hail from?
datasets = (await import('https://cdn.jsdelivr.net/npm/vega-datasets@3.1.0/+esm')).default;
cars = aq.from(await datasets['cars.json']())
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.
