Skip to content

Interactive Filtering with Multiple Sources

This demo shows how to render visualizations from multiple sources in a single page. In addition, it illustrates how to implement interactive filtering by hand. Refer to the Interaction Manager component for robust automatic filtering across sources.

For the demo below, select a point in the trend line to filter all visualizations by year and world region. Observe the “Current Filters” panel update with the selected filters. Use the data zoom bar to focus on specific areas of the trend chart.

You can also add a filter for a specific country by selecting a bar for the bar chart widgets. Then, select a filter in the “Current Filters” panel to remove it.

If you'd like to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
1
{"action": "import", "url": "../cf-demos/multiple-source-fc/index.html"}

1
{"action": "import", "url": "../cf-demos/multiple-source-fc/index.js"}

1
{"action": "import", "url": "../cf-demos/multiple-source-fc/style.css"}

This demo uses data obtained from gapminder.org. The visualizations show life expectancy and population data from 1800 to 2013.