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 the 3W Dataset on the Organizations Involved in the Response to the Ebola Crisis dataset from the Humanitarian Data Exchange (HDE). To begin, simply 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/~jackp/18129.csv).
To visualize aid agencies during the Ebola outbreak, we'll create four individual charts: (1) a satellite map to illustrate aid agency location, (2) a pie chart indicating aid agency activity, (3) another pie chart looking at countries, and (4) a bar chart highlighting the total activity by relief organizations. 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 Satellite Maps from the Maps column.
Now to populate the graph with data, in the Latitude and Longitude dropdown select Lat and Lon, respectively. Additionally, add Region in the hover text dropdown to display region names on hover.
Now that the map is populated with scatter points, navigate to the Layout to fix the map positioning and map style to help focus in on the data points. First, open the Map Style box and select Light from the dropdown menu to change the map to a lighter style.
Next, click Map Positioning to adjust the center and zoom of the map. Set Center Latitude to 8.5, Center Longitude to -10, and Zoom Level to 5.4. The map now ought to display West Africa.
To make the map the full width and height, open Margins and Paddings and set all the values to 0.
With our layout styled, navigate to the Traces tab to style the data points. Here, set the color to #000000, Diameter to 16, and Select / Tick All Values in the Values Shown on Hover.
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 Pie Chart from the Business column.
Next, we can populate the graph by selecting Activity in the Labels dropdown. You ought to see a pie chart with a legend like below.
To style the pie chart, we can make changes to the text, colors, borders, and order. To do so, navigate to the Traces tab under Style. Here, select ** Label** and unselect ** %**, change the Typeface to Raleway, set the Slice Order to Clockwise, and the Rotation to 130 degrees. Additionally, to make the slices more defined set the Border Width to 1.
With the styling done and the option to use labels directly on the slices, the legend on the right-hand side is redundant. Thus, click Legend under Style and select Hide.
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 pie chart, select Graph on the left-hand side, then Create. Click Chart Type, and Pie Chart from the Business column.
Populate the graph by selecting Country in the Labels dropdown. You ought to see a pie chart with a legend like below.
To style the pie chart, we can make changes to the text, colors, borders, and order. To do so, navigate to the Traces tab under Style. Here, select Label, Value, and %, change the Typeface to Raleway, and the Rotation to 120 degrees. Additionally, to make the slices more defined set the Border Width to 1.
With the styling done and the option to use labels directly on the slices, the legend on the right-hand side is redundant. Thus, click Legend under Style and select Hide.
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 Bar Chart from the Business column.
Now, you ought to see y, x, and Hover Text dropdowns. Select Lat, Organisation, and Org type, respectively.
As we are wanting to display the total count for each organization, under Graph click Aggregate. Next, click the blue + Agreggate button. In the box that appears, select Organisation as the Group By Column. Set Trace to Lat, x to first, and aggregate y by count.
Now that our data displays the total count for each organization, we can style the layout. More specifically, the margins. Navigate to Layout, open Margins and Paddings and set the values to 0, 400, 20, 0, 0, respectively.
With the margins adjusted and the x axis tick labels visible, select Axes under Style to style the tick labels. First, however, open the Titles, select All and Remove All Titles.
To style the tick labels, open Tick Labels and set the Typeface to Raleway and Angle to 90 degrees. This is to ensure that the tick labels always stay at 90 degrees.
Lastly, at the bottom of Axes open the Zoom Interactivity box, select All and Disable.
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.
First, to add the Aid Agency Location Satellite 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 ** Aid Agency Location Satellite Map ** we made earlier.
Next, add the Activities Pie Chart following the same process. This time drag and drop the plot on the right half of the satellite map.
Again, follow the same process for the Countries Pie Chart. However, drag and drop Countries Pie Chart on the bottom half of the Activities Pie Chart. You ought to see something like below.
For the final plot, the Total Activity Bar Chart, simply add this to the bottom of the dashboard.
Now that we have added all the plots to the dashboard, for each plot where it says, "Enter a title..." insert plot titles: "Map (darker locations had more relief attention)", Activities. Countries, and Relief Organization Total Activity Count, 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 "UN Office for the Coordination of Humanitarian Affairs" to the Title text box. Next, let's add the OCHA ROWCA logo. We can do this by simply adding the URL for the logo PNG: http://www.elrha.org/wp-content/uploads/2015/01/ocha.jpg. As previously mentioned you can add links, in this tutorial we'll use this feature to link the original dataset. Thus, add the text "December 10, 2013 Data" with the URL: https://data.humdata.org/dataset/3w-dataset-on-the-organizations-involved-in-the-response-to-the-ebola-crisis.
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 #FFFFFF.
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.
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.
