In this tutorial, we'll create and style multiple individual plots in the Chart Studio, add them to a dashboard, and utilize the crossfilter feature to interact and explore these data further.
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 a Google Flu Trends dataset from Google Flu Trends. To begin, view the dataset and click Fork & Edit. The Chart Studio ought to have opened and you're all set to go.
Alternatively, navigate to the Chart Studio and click Import, By URL, and then paste in the URL (https://plot.ly/~Dreamshot/9040.csv).
To visualize Google flu trends, we'll create five individual charts: (1) Oklahoma bar chart, (2) New York bar chart, (3) US bar chart, (4) a boxplot of Google searches, and (5) a boxplot of searches by region. In the section below, we'll look at how to make each of the charts.
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 Bar Chart from the Business column.
Now, you ought to see the y and x dropdowns. Select Oklahoma and Date, respectively.
To style the bars, navigate to Traces under Style and set Fill to #00CC96.
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 #F3F6FA as both Plot and Margin Color.
Below that, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Color to #506784.
To set the margins, select the Margins and Padding box and enter the values 0, 30, 50, 150, 0, respectively.
To edit the axis titles, grid lines, and tick labels, navigate to the Axes tab. First, in the Titles remove the x title and then set the y axis title to Google Flu trends search volume index.
Next, open Range, click y and select Custom Range. Set the Min to 0 and Max to 25880.
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.
Using the same grid as the previous plot, open the data in the Chart Studio.
Again, now that we have the data in the grid, we can select our chart type. To do so, select Graph on the left-hand side, then Create. Click Chart Type, and Bar Chart from the Business column.
Now, you ought to see the y and x dropdowns. Select New York and Date, respectively.
Like the previous bar chart, navigate to Traces under Style and set Fill to #09FFFF.
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 #F3F6FA as both Plot and Margin Color.
Below that, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Color to #506784.
To set the margins, select the Margins and Padding box and enter the values 0, 30, 50, 150, 0, respectively.
To edit the axis titles, grid lines, and tick labels, navigate to the Axes tab. First, in the Titles remove the x title and then set the y axis title to Google Flu trends search volume index.
Next, open Range, click y and select Custom Range. Set the Min to 0 and Max to 13300.
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.
Using the same grid as the previous plot, open the data in the Chart Studio.
Like the previous bar chart, select Graph on the left-hand side, then Create. Click Chart Type, and Bar Chart from the Business column.
Now, you ought to see the y and x dropdowns. Select United States and Date, respectively.
In Traces, set Fill to #119DFF.
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 #F3F6FA as bothPlot and Margin Color.
Below that, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Color to #506784.
To set the margins, select the Margins and Padding box and enter the values 0, 30, 50, 150, 0, respectively.
To edit the axis titles, grid lines, and tick labels, navigate to the Axes tab. First, in the Titles remove the x title and then set the y axis title to Google Flu trends search volume index.
Next, open Range, click y and select Custom Range. Set the Min to 0 and Max to 25880.
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.
Using the same grid as the previous plot, open the data in the Chart Studio.
After loading the data, select Graph on the left-hand side, then Create. Click Chart Type, and select Box Plot from the Statistics column.
Like previous plots we want to populate the graph with data, thus in the Values and select United States. Additionally, add a second trace by clicking the blue + Trace button and in the new trace box that appears alter the Values dropdown to Oklahoma.
With the traces added you can see that before styling the traces the y axis scale needs to be set. Thus, navigate to Axes, open Range, y, and set Custom Range. Additionally, set the Min value to 2.652244785695194 and the Max to 4.498865575013528.
Staying in the Axes tab, open Titles remove the x title and then set the y axis title to Google Flu trends search volume index.
Now that we've finished making changes to the axes, click Layout to style the background, fonts, and margins. To complete the former, select Canvas and set #F3F6FA as both plot and margin color.
Below that, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Color to #506784.
To set the margins, select the Margins and Padding box and enter the values 0, 30, 50, 150, 0, respectively.
With the axes and layout set, navigate to the Traces tab to style the traces. At the top, select Individual and open the first trace. Here, change the Fill and Line Color to #222222, but set the alpha to 50 for the fill and 100 for the line. Immediately below, set the Whisker Width to 40%, Display Points dropdown to All, and Jitter to 30%. Next, to minimize points and boxes set the Diameter to 2, Box Width to 30, and Padding to 30. Lastly, with regards to trace styling, in Display in Legend select No. Now, you ought to see a similar styled trace as below.
Repeat the process above on the second trace. The only difference, set Fill and Line Color to #00CC96.
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.
Using the same grid as the previous plot, open the data in the Chart Studio.
After loading the data, select Graph on the left-hand side, then Create. Click Chart Type, and select Box Plot from the Statistics column.
Like previous plots we want to populate the graph with data, thus in the Values and select HHS Region 1.
As we want to add all HHS regions we need to add multiple traces. To do so, click the blue + Trace button and in the new trace box that appears alter the Values dropdown to HHS Region [n]. Repeat this process until you've added all 10 regions. You ought to something like below.
Set Fill and Line Color to #00009B, Whisker Width to 40%, Display Points to None, Show Statistics to Mean + Standard Deviation, and Display in Legend to No.
For the other traces only alter the Fill and Line Color to #0041D7, #1489E9, #4EE2A8, #A1D458, #FF9300, #FF5700, #F72600, #E00900, and #D80000, respectively.
Now that we've finished styling the traces, click Layout to style the background, fonts, and margins. To complete the former, select Canvas and set #F3F6FA as both Plot and Margin Color.
Below that, open the Title and Fonts box and under Global Font, set Typeface to Raleway, Font Size to 12, and Color to #506784.
To set the margins, select the Margins and Padding box and enter the values 0, 30, 50, 150, 0, respectively.
Next, navigate to the Axes tab, open Titles remove the x title and then set the y axis title to Google Flu trends search volume index.
Staying in the Axes tab, open Tick Labels, x and set Font Size to 10.
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.
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.
Before adding a chart, we'll add a text box to describe the dashboard and its uses. Simply, click the Text button, where a text editor ought to appear. In the text editor, add the text you wish to display in the dashboard.
Now to add the Oklahoma Bar Plot, 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 Oklahoma Bar Plot we made earlier.
Repeat this process to add all the charts in the order they were made.
Now that we have added all the plots to the dashboard, for each plot where it says, "Enter a title..." insert plot titles: Flu Search Volume in Oklahoma, Flu Search Volume in New York, and Flu Search Volume in United States, Flu Search Boxplot twice, in the same order as we added the plots. Your result ought to look like below.
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.
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 Flu Trends to the Title text box. Next, let's add the Google logo. We can do this by simply adding the URL for the logo PNG: http://diylogodesigns.com/blog/wp-content/uploads/2016/04/new-google-logo-png.png.
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, for this dashboard we will set Header Background, Page Background, Box Background, Box Border, and Box Header Background to #F3F6FA. Leave Header Font Color as-is.
Text, the third 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. Lastly, to separate the text box, set the Text Box Background Color to #F3F6FA.
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).
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. .
Finally, we'll briefly demonstrate crossfilter.
Crossfilter is a visual analysis technique for multidimensional data. It is used to clarify relationships between dimensions. As discussed in the previous section, crossfilter functionality is invoked by setting Enable in Settings > Filter.
To use crossfilter, simply click-and-drag on a chart. 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.
