Facettage.js < 07 | Examples list | 09 >

08 - Dynamic facets

TOP 10 MOVIES BY TIME RANGE

Loading...

Select a time range...

Explanations

1. We create a facet that loads the top 1000 movies file.

2. We create a facet counting movies from the top 1000 each year with a d3.js nest() and we display it as a "brushable" curve (it allows selecting a time range).

3. We create a facet generator that creates a specific facet for a given time range. This facet computes the top 10 movies over the period.

4. Interactions lead to resolving facets and their dependencies in order to display data.

NOTE

Dynamic facets and their data are stored in memory. Here it is worth it since data are small and we avoid unnecessary recalculations.

However sometimes dynamic facets generate lots of data which may overflow memory. You can avoid keeping them in memory by setting them to ephemeral: true