Public
Edited
Jul 14, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
// TO-DO: Create a selectInterval brush
const brush =

// TO-DO: Create the sp() function that generates a scatterplot
// with markCircle and x and y encodings
const sp = (xAttr, yAttr) =>
// TO-DO: Add an overview scatterplot chart with the sp() function
// TO-DO: Add a select (brush)
// TO-DO: Add a color encoding that uses an if statement
// to use one color for selected points and another color for unselected points
// TO-DO: Add a width and height, each equal to 1/3 of width
const overview =
// TO-DO: Add a detail scatterplot chart with the sp() function
// TO-DO: Add a transform --> filter (brush)
// TO-DO: Add a width and height, each twice as large as the overview chart
const detail =
return
// TO-DO: Add a concat of the overview and detail variables
// TO-DO: Add the data
// Remember to render()

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// TO-DO: Create a selectInterval brush that limits selection to x-axis (year) values
const brush =


// TO-DO: Add a years histogram chart with markBar
// TO-DO: Add a select (brush)
// TO-DO: Add a x encoding that is the year of Release_Date
// TO-DO: Add a y encoding that is a count
// TO-DO: Add a width and height (height less than 100 so it's not too tall)
const years =

// TO-DO: Add a ratings scatterplot chart with markCircle
// TO-DO: Add a x encoding that is the Rotten_Tomatoes_Rating
// TO-DO: Add a y encoding that is the IMDB_Rating
// TO-DO: Add an opacity encoding that uses an if statement
// to use more opacity (e.g. .75) for selected points and less opacity (e.g. 0.05) for unselected points
// TO-DO: Add a tooltip with at least the film 'Title'
// TO-DO: Add a width and height
const ratings =

return
// TO-DO: Add a vconcat of the years and ratings variables
// Remember to render()
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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