Skip to content

Interactive Filtering with Multiple Source

This demo shows how to render visualizations from multiple sources in a single page. In addition, it illustrates how to implement interactive filtering across sources.

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.

Add a filter for a specific country by selecting a bar for the bar chart widgets. Select a filter in the “Current Filters” panel to remove it.

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"}

If you want to see the demo in full screen click here

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