// TO-DO: Create the sp() function that generates a scatterplot
// with markCircle and x and y encodings
constsp=(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
constoverview=
// 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
constdetail=
return
// TO-DO: Add a concat of the overview and detail variables
// TO-DO: Add the data
// Remember to render()
}
{
// TO-DO: Create a selectInterval brush that limits selection to x-axis (year) values
constbrush=
// 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)
constyears=
// 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
constratings=
return
// TO-DO: Add a vconcat of the years and ratings variables
// Remember to 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.