Show Sidebar Hide Sidebar

How to Create Plotly Dashboards with Crossfilter

Create dashboards with crossfilter functionality using the Plotly data visualization tool

Step 1

Introduction

Plotly dashboards are a stunning way to display and share your graphs. Your charts are fully interactive with publication-quality graphics, and there's nothing to download or install — it's 100% web-based.

Our dashboards are used by companies such as Netflix, Tesla, and Google for their customization options and features. If you too want to present your plots in a cool way, keep reading.

For this tutorial we've taken screenshots from our dashboard, which can be found here.

For this tutorial, to visualize World Happiness from 2015 to 2017, we'll create three individual charts: (1) a average happiness choropleth map, (2) GDP per capita scatter plot and (3) a table to visualise the data. In the section below, we'll look at how to make each of the charts.

Step 2

Add Data

To get started, head to Plotly’s Chart Studio and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. For this tutorial, we'll use the World Happiness Dataset from the Sustainable Development Solutions Network. To begin, simply view the dataset and click 'Fork & Edit'. The Chart Studio ought to open and you're all set to go.

Fork and Edit

Alternatively, navigate to the Chart Studio and click 'Import', 'By URL', and then paste in the URL (https://raw.githubusercontent.com/bcdunbar/datasets/master/worldhappiness.csv).

Add Data

Step 3

Average Happiness Choropleth

Now that we have the data added to the grid, we can select our chart type. To do so, select Graph on the left-hand side, then Create. Click Chart Type, and Choropleth from the Maps column.

Chart Type

Now to populate the graph with data, in the Locations and Values dropdown select Country and HappinessScore, respectively. Additionally, set Country Names in the Locations Format dropdown, World in the Map Regions, and set the Projections to Distance Preserving (Equirectangular). You ought to note that countries aren't defined yet as we need to aggregate the data.

Trace Values

Now, for this choropleth we want to plot the average number of confirmed cases. Therefore, we need to aggregate the data. To do so, open Aggregate, select Country as the Group By Column, and HappinessScore as the Trace. Then, set Z value to avg.

Aggregate

To style, under Style click Traces. Here, we can change the colorscale by clicking the yellow/blue palette (around the 3rd from the left).

Trace Styles

Now that we've finished styling the trace, click Layout to style the background, fonts, and margins. To complete the former, select Canvas and set #444444 as the Margin Color.

Canvas

Next, navigate to the Layout tab, open Margins and Paddings and set all the values to 0 to make it full width and height.

Margins

In choropleth maps, we have Geo Style and Geo Layout. To alter the former, select Geo Style and set Land to Show. Set Color to #444444. Next, set Oceans to Show and Color #444444; Country to Show and Color #444444. Lastly, Frame to Hide.

Geo Style

Next, in Geo Layout you can define attributes such as Map Scope, Projection, Rotation, Scale, and Map Resolution. In this tutorial, we'll leave it as-is.

Geo Layout

Finally, click Color Bars under Style and open Labels. Here, set the Typeface to Raleway and the Font Color to #FFFFFF.

Color Bar Size

Congrats, your chart is complete! Click Save on the left-hand side of the screen. In the pop-up, enter your filename and select either Public (visible to all) or Private Link (visible only to those who you share the link with) and hit Save. Since these plots are destined for a dashboard, they can't be set to private.

Save

Step 4

Average GDP Scatter Plot

Using the same grid as the previous plot, open the data in the Chart Studio.

Now that we have the data added to the grid, we can select our chart type. To do so, select Graph on the left-hand side, then Create. Click Chart Type, and Scatter from the Business column.

Chart Type

Now to populate the graph with data, in the Locations and Values dropdown select Country and Economy_GDP_per_Capita, respectively. Additionally, set HappinessScore in the Size and Color dropdowns.

Trace Values

Like previously, we need to aggregate the data. To do so, open Aggregate, select Country as the Group By Column, and Economy_GDP_per_Capita as the Trace. Then, set Y, Marker Size and Marker Color to avg.

Aggregate

To style, under Style click Traces. Here, we can change the colorscale by clicking the blue/yellow palette (around the 3rd from the left).

Trace Styles

Now that we've finished styling the trace, click Layout to style the background, fonts, and margins. To complete the former, select Canvas and set #444444 as the Margin Color.

Canvas

Below Canvas, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Font Color to #FFFFFF.

Global Font

Next, navigate to the Layout tab, open Margins and Paddings and set the values to 10, 120, 80 and 0, respectively.

Margins

Moving on to the Axes tab, select Title. Remove the X title, then click Y and set the title to GDP per Capita.

Axes Titles

Next, navigate to Lines, click All and select Hide for all options. This will remove all lines including grid, horizontal and zero line.

Lines

Lastly, because we want to use the crossfilter feature with our dashboard open Zoom and select Disable.

Zoom

Congrats, your chart is complete! Click Save on the left-hand side of the screen. In the pop-up, enter your filename and select either Public (visible to all) or Private Link (visible only to those who you share the link with) and hit Save. Since these plots are destined for a dashboard, they can't be set to private.

Save

Step 5

World Happiness Table

Using the same grid as the previous plot, open the data in the Chart Studio.

Now that we have the data added to the grid, we can select our chart type. To do so, select Graph on the left-hand side, then Create. Click Chart Type, and Table from the Statistics column.

Chart Type

For tables, you want to create your header names. To do so, in the 1dt spare column type in the header names: Year, Country, Happiness Rank, Happiness Score and GDP per Capita. Lastly, rename the column to Headers.

Add Headers

Now to populate the table with data, set the Headers dropwdown to Headers. Then, Year, Country, Happiness Rank, Happiness Score and Economy_GDP_per_Capita to the columns dropdown.

Trace Values

To begin styling the table, click Traces under Style. In Header, set the Fill Color to #444444, Font Color to #FFFFFF, and Border Color to #FFFFFF. In Cells, the Fill Color to #444444, Font Color to #FFFFFF, and Border Color to #FFFFFF.

Trace Styles

Next, navigate to the Layout tab, open Canvas and set the Plot and Margin Color to #000000 to keep with the dark theme of the previous plots.

Canvas

Next, open Margins and Paddings and set all the values to 10 to make the table just shy of full width and height.

Margins

Congrats, your chart is complete! Click Save on the left-hand side of the screen. In the pop-up, enter your filename and select either Public (visible to all) or Private Link (visible only to those who you share the link with) and hit Save. Since these plots are destined for a dashboard, they can't be set to private.

Save

Step 6

Create a Dashboard

With the charts completed and saved in your home folder, we can now create a dashboard by simply adding these charts, adjusting the layout, and styling the dashboard before sharing and interacting. To get started with creating a dashboard, hover over the +Create button and select Dashboard from the menu. Alternatively, open this link.

Step 7

Add Charts to Dashboard

First, to add the Maximum Cases per Month Map, click +Plot in the bottom left corner of the screen. A new box ought to appear with the option to 'Add a Plot'. Click, the 'Your Files' option and then in the pop-up select the Average Happiness by Country map we made earlier.

Add Choropleth

Next, add the Average GDP per Capita by Country scatter plot following the same process. As we are making a fairly simple and straight forward dashboard, we can just leave this plot immediate below the previous map.

Add Scatter

Again, immediately below, add the World Happiness Data Table.

Add Table

Now that we have added all the plots to the dashboard, for each plot where it says, 'Enter a title…'' insert plot titles: Average Happiness by Country, Average GDP per Capita by Country and World Happiness Data Table in the same order as we added the plots. Your result ought to look like below.

Add Plot Titles

Step 8

Style the Dashboard

Now that we have the structure of our dashboard, we can style it. To do so, navigate to the settings icon directly opposite the dashboard title. When hovering you ought to see the option settings from the menu.

Settings

After clicking settings, a panel ought to appear from the right-hand side of the screen. Here, we have the option of headers, colors, text, layout, and filter. First, in Headers, we can set the title, add a logo, and multiple links. For this tutorial, add World Happiness 2015-2017 to the Title text box. Next, let's add the Sustainable Development Solutions Network logo. We can do this by simply adding the URL for the logo PNG: http://unsdsn.org/wp- content/themes/sdsn/assets/ img/sdsn_logo_fc.png. Also, we can add an link to the data source by typing the text Data Source: World Happiness Report and then in the URL box, enter http://worldhappiness.report/.

Header

In the next tab, Colors, we can manipulate the background, borders, and text colors. As you can see, the dashboard has already added these by default. That said, keeping with our plot themes, we will set Header Background, Page Background, Box Background, Box Border, and Box Header Background to #444444. Then, set Header Font Color and Box Header Font Color to #FFFFFF.

Colors

Text, the third settings option, allows you to control all things text, including font color, family, and size, as well as header styles and text box styles. Again, like the Colors tab, some values are defined. However, here, we'll set the Font Family to Raleway. Make the header font larger by selecting 2.2em in the Header Font Size and, additionally, change the Header Font Weight to 300.

Text

In Layout, you have the option of setting the page layout as either a dashboard or a report. Here, we'll leave it as the default dashboard setting. The last settings category, Filter, provides you with the option to enable or disable the Search Bar or the Crossfilter feature. For this tutorial, leave the Search Bar as-is but let’s enable the Crossfilter feature by selecting Enable (for more information about this feature see the next section).

Filter

Congrats, your dashboard is complete! Click Save on in the bottom right-hand side of the screen. In the pop-up, enter your filename and select either Public (visible to all), or Private Link (visible only to those who you share the link with), or Private (visible only to you) and hit Save.

Save

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.