Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Mar 17, 2021
chart = {
const brush = vl.selectInterval(); // .init({ x: [], y: [] }) .empty('none')
const sp = (xAttr, yAttr) =>
vl.markCircle({ tooltip: true }).encode(
vl
.x()
.fieldQ(xAttr)
.scale({ zero: false }),
vl
.y()
.fieldQ(yAttr)
.scale({ zero: false })
);
const overview = sp("distance", "delay")
.select(brush)
.encode(
vl
.color()
.value("steelblue")
.if(brush, vl.value("firebrick"))
)
.width((width * 0.8) / 3)
.height((width * 0.8) / 3),
detail = sp("distance", "delay")
.transform(vl.filter(brush))
.width((width * 0.8 * 2) / 3)
.height((width * 0.8 * 2) / 3);
return vl
.concat(overview, detail)
.data(flights)
.render();
}
{
const brush = vl.selectInterval().encodings('x'); // limit selection to x-axis (year) values
// dynamic query histogram
const years = vl
.markBar({ width: 4 })
.data(movies)
.transform(
vl.filter(
'year(datum.Release_Date) > 1949 && year(datum.Release_Date) < 2021'
)
)
.select(brush)
.encode(
vl
.x()
.year('Release_Date')
.title('Films by Release Year'),
vl
.y()
.count()
.title(null)
)
.width(600)
.height(75);
// ratings scatter plot
const ratings = vl
.markCircle()
.data(movies)
.transform(
vl.filter(
'year(datum.Release_Date) > 1949 && year(datum.Release_Date) < 2021'
),
vl.calculate('year(datum.Release_Date)').as('Release Year')
)
.encode(
vl
.x()
.fieldQ('Rotten_Tomatoes_Rating')
.title('Rotten Tomatoes Rating'),
vl
.y()
.fieldQ('IMDB_Rating')
.title('IMDB Rating'),
vl.tooltip(['Title', 'Release Year', 'Worldwide_Gross']),
vl
.opacity()
.if(brush, vl.value(0.75))
.value(0.05)
)
.width(600)
.height(400);
return vl
.vconcat(years, ratings)
.spacing(5)
.render();
}
movies = moviesRaw
.filter(m => dateParse(m.Release_Date) < new Date())
.map(m => ({
Title: m.Title,
US_Gross: roundCurrency(m.US_Gross),
Worldwide_Gross: roundCurrency(m.Worldwide_Gross),
Release_Date: dateFmt(dateParse(m.Release_Date)),
Rotten_Tomatoes_Rating: m.Rotten_Tomatoes_Rating,
IMDB_Rating: m.IMDB_Rating
//US_Gross: currencyFormatter.format(m.US_Gross),
//Worldwide_Gross: currencyFormatter.format(m.Worldwide_Gross)
}))
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.
