Collection of Tableau-style public health dashboards and tutorials, hosted on plot.ly. Plot.ly is free for public data - create an account. All dashboards were created without coding using plotly's online chart and dashboard creator.
- Crossfilter Overview
- California Measles Outbreak
- Aid Agencies during Ebola Outbreak
- U.S. Police officer deaths by cause
- WHO Infant Mortality Index
- IHME Global Health Indicators
- Google Flu Trends
- Ebola Outbreaks 1976-2013
- Dashboard Pro Tips
- Crossfilter for Data Scientists and Programmers
- Roadmap
Crossfilter is a visual analysis technique for multidimensional data. It is used to clarify relationships between dimensions.
To use crossfilter, simply click-and-drag on a chart in one of the linked plot.ly dashboards below. Selected data that shares common rows with other charts will highlight and all other data will fade out. To reset the dashboard, click anywhere on a graph that doesn't have data.
To make crossfilter dashboards in plot.ly, make sure each dashboard chart is made from the same dataset. Once your dashboard is constructed, enable crossfilter under Settings > Filter. Follow one of the tutorials linked below for a full and illustrated guide to this workflow.
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/jackp:18123/present |
| Dataset on plot.ly | https://plot.ly/~jackp/18114/ |
| Original dataset | Project Tycho at U. Pittsburgh |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | 3d scatter chart, 2d scatter chart, box plot |
- You can see a share fall in measles cases after 1968 when the vaccinne was introduced.
- There were smaller outbreaks in 1988 and 1991.
- Weeks in the springtime had more outbreaks than any other season.
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/jackp:18133/present |
| Dataset on plot.ly | https://plot.ly/~jackp/18129/ |
| Original dataset | Humanitarian Data Exchange (HDE) |
| Dashboard inspiration | Simon B. Johnson |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Mapbox-gl scatter plot, pie charts, bar chart |
- Liberia had the most reported cases and most aid December 10, 2013
- Only 11 aid organizations were reported in Sierra Leone
- WHO provided 6 aid activities - Social mobilization, surveillance, coordination, safe burial, psychological support, and logistics
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/jackp:18052/present |
| Dataset on plot.ly | https://plot.ly/~public.health/17/ |
| Original dataset | FiveThirtyEight |
| Dashboard inspiration | FiveThirtyEight |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Pie chart, scatter plot, choropleth map |
- After gunfire, the 2nd highest cause of death for on-duty police officers in Alaska is aircraft incidents
- 14 states have reported on-duty police officer cause of death as "struck by train"
- Wyoming has the lowest police officer death rate by gunfire
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/jackp:18103/present |
| Dataset on plot.ly | https://plot.ly/~jackp/18100 |
| Original dataset | World Bank |
| Dashboard inspiration | World Bank |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Choropleth maps, scatter plot |
- IMI improved in every country except Dominca between 1990 and 2005
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/Dreamshot:8925/present |
| Dataset on plot.ly | https://plot.ly/~Dreamshot/8914/ |
| Original dataset | IHME Viz Hub |
| Dashboard inspiration | IHME Viz Hub |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Choropleth maps, bubble charts |
- This dashboard is mainly to show crossfilter with a variety of map projections.
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/Dreamshot:9045/present |
| Dataset on plot.ly | https://plot.ly/~Dreamshot/9040/ |
| Original dataset | US Google Flu Trends CSV |
| Dashboard inspiration | Flu Trends Public Data Explorer |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Time series, histograms, box plots |
- This dashboard is mainly to show crossfilter of distribution plots (box plots and histograms) together with time series.
| Dashboard Metadata | Link |
|---|---|
| Link to dashboard | https://plot.ly/dashboard/jackp:17876/present |
| Dataset on plot.ly | https://plot.ly/~public.health/8 |
| Original dataset | Nature: Science Direct |
| Dashboard inspiration | Nature: Science Direct |
| Tutorial to make this dashboard | Tutorial |
| Plotly.js charts in dashboard | Time series, D3 map with hover text, SVG table |
- This dashboard is mainly to show using crossfilter with tables.
Here are a few Pro Tips when creating crossfilter dashboards on Plot.ly:
- To enable crossfilter in Plot.ly dashboards, make sure that all graphs in the dashboard are made from the same dataset and that crossfilter is enabled in the Filter tab of Dashboard Settings. If dashboard plots are made from multiple datasets and crossfilter is enabled, Plotly will attempt to merge them if all datasets have the same number of rows. If you intend to build a crossfilter dashboard from multiple datasets and cannot merge them in a data preparation tool beforehand, make sure that the datasets are the same length and sorted in the same order.
- Right-click (or Ctrl-click) on the Plot.ly spreadsheet for a menu of data preparation tools including:
- Convert dates to Plotly date format
- E.g. December 10, 2016 -> 12-10-2016
- Find... Replace
- Merge 2 or more columns with a delimiter
- E.g. | December | 10 | → December-10
- Merge week of year and year columns into Plotly date format
- E.g. | 48 | 2016 | → 12-28-2016
- Convert state name to state abbreviation (for use in choropleth maps)
- E.g. Vermont → VT
- Cumulative sum
- Sometimes you will still have to prep datasets before plotting using a tool like Google Sheets, Python, or R
- Convert dates to Plotly date format
- Raw CSV links on GitHub such as https://gist.githubusercontent.com/.../mpg.csv can be imported directly into Plot.ly from the the "URL" tab of the Import tool.
- You can access the dataset behind a dashboard plot by:
- Selecting "View Plot" under the cog menu in the upper-right corner of the plot
- On the plot page, select the "Sources" tab. "Sources" is a tree view of the data sources that make up a plot. The data sources can be created by the author of the plot or a different Plot.ly user.
- In the tree view, the root nodes on the left side are the datasets that make up the plot. Click on them to go to the home page for the dataset.
- Use the Plotly modebar in the upper-right corner of dashboard plots to change the cursor mode between hover, zoom, and panning states. The modebar can also download a PNG image of plots.
- Disable default zoom in dashboard plots to prevent users from accidentally zooming as they scroll through your dashboard. You can disabled zoom for your plot under Axes → Zoom Interactivity inside Chart Studio.
- Minimize the ink-to-data ratio: Make plots minimalistic or they will be overwhelming when combined in a dashboard.
(Fantastic GIF via Dark Horse
If you know how to program in R, Python, or JavaScript, you likely do not need a crossfilter GUI such as Plotly Dashboards or Tableau. Instead, you can use Plotly graphics and a crossfilter engine written in R, Python, or JavaScript crossfilter engine. We recommend using Dash for Python, Shiny for R, and crossfilter.js for JavaScript. Here are 3 simple public health crossfilter examples in each language:
- Python/Dash: Zika Outbreak
- R/Shiny: Zika Outbreak
- JavaScript/crossfilter.js: World Bank Health Indicators
2018 work on Plotly and Plotly.js support for crossfilter will fall under 3 broad categories:
Not all of Plotly.js charts currently support interactive data selection via the mouse. Without a drilldown tool for selecting data, a chart cannot initiate crossfilter inside a dashboard. These charts are listed under "Charts without data selection" in the table below below.
Some charts have a data selection tool, but are not yet wired into the crossfilter program in Plot.ly dashboards. These charts, listed under "Charts not yet connected to crossfilter on Plot.ly", will not respond to crossfilter selection inside dashboard.
In 2018 we'll continue to add data selection and crossfilter responsivity across 💯 of Plotly.js charts.
| Charts with data selection | Charts without data selection | Charts not yet integrated with crossfilter on Plot.ly |
|---|---|---|
| Mapbox-gl maps | Heatmaps | Heatmaps |
| D3 maps | Lines | Contour plots |
| Scatter plots | Tables | Violin plots |
| Box plots | 3d plots | Sankey diagrams |
| Histograms | Contour plots | Parcoords ("parallel coordinate plots") |
| Choropleth maps | Multiple y-axis plots | |
| Bar charts | Line plots | |
| Bubble charts | ||
| Pie charts (by slice clicking) | ||
| Parcoords (by axis filter) | ||
| Sankey diagrams (by click event) | ||
| Violin plots |
Crossfilter on Plot.ly currently works by:
- Listening for a data selection event
- Sending the selected data to crossfilter.js for processing
- Updating all graphs on the dashboard with a combination of Plotly.restyle and Plotly.addTraces
In order to achieve subsecond dashboard updates with crossfilter, Plotly.restyle and Plotly.addTraces will need to be optimized.
The Plotly.js crossfilter wrapper written for Plot.ly dashboards (crosslink-plotly.js) will be documented and published on NPM so that Web developers can build Tableau-style dashboards without getting bogged down in the low level interfaces of crossfilter.js, Plotly.restyle, and Plotly.addTraces.