Click here to watch the Crowdcast Webinar
Take part in hands-on workshops for some the fastest growing data visualization libraries. Next workshops in Montréal, Canada:
Python Dash | February 17-18, 2018
This two-day workshop will go over the foundations and guiding principles of dash, starting with simple examples on the first day and more advanced use cases on the second day. Each section of the Dash workshop will be focused around complete examples that the attendees can run on their own computers. Attendees will learn the principles of Dash by customizing these examples through gentle, interactive “challenges”. This workshop is taught by the author of the Dash library itself, with help from other Dash solutions experts at Plotly.
SQL & Dashboards | February 24-25, 2018
Falcon is a free, open-source SQL editor that features inline data visualization, the ability to edit charts in Plotly's Chart Studio, setup persistent connections and connect to a plethora of databases including RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, and SQLite. In this workshop, Branden will walk you through how to use Falcon SQL Client to connect to databases, execute queries, create interactive and styled charts and embed them in dashboards and reports. By way of lectures, hands-on tutorials, and breakout sessions, attendees will learn best practices and modern data warehousing options.
R, Shiny & DashR | March 3-4, 2018
By the end of this workshop, you should be able to leverage interactive visualization techniques to perform/present data analysis tasks/findings using the R package plotly. Though it would be beneficial to have some prior knowledge of R and ggplot2, we do not require it, and as such, we avoid assuming pre-existing knowledge as much as possible. Furthermore, this workshop is not designed to make you an R programming expert – it’s designed to get you doing powerful things quickly regardless of your experience with R or programming in general.
Chart Studio is Plotly's point-and-click, no coding required, chart editor/maker.
Dashboards & Reports is the place to build your interactive reports and dashboards.
Plotly has numerous APIs, including:
Dash is Plotly's python framework for creating reactive and analytical web applications in pure python.
Falcon SQL Client is Plotly's free and open-source SQL client, which enables you to connecto numerous databases, preview schemas, write queries, perform inline data viz, or to unlock the full power of plotly perform queries in the Chart Studio. Furthermore, you can setup persistent connections, which means that you plots and dashboards will update automatically.
Spectacle Editor is Plotly's online drag-and-drop editor that facilitates the creation of slick and concise presentations.
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.
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).
To visualize World Hapiness 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.
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.
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.
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.
To style, under Style click Traces. Here, we can change the colorscale by clicking the yellow/blue palette (around the 3rd from the left).
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.
Next, navigate to the Layout tab, open Margins and Paddings and set all the values to 0 to make it full width and height.
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.
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.
Finally, click Color Bars under Style and open Labels. Here, set the Typeface to Raleway and the Font Color to #FFFFFF.
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.
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.
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.
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.
To style, under Style click Traces. Here, we can change the colorscale by clicking the blue/yellow palette (around the 3rd from the left).
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.
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.
Next, navigate to the Layout tab, open Margins and Paddings and set the values to 10, 120, 80 and 0, respectively.
Moving on to the Axes tab, select Title. Remove the X title, then click Y and set the title to GDP per Capita.
Next, navigate to Lines, click All and select Hide for all options. This will remove all lines including grid, horizontal and zero line.
Lastly, because we want to use the crossfilter feature with our dashboard open Zoom and select 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.
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.
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.
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.
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.
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.
Next, open Margins and Paddings and set all the values to 10 to make the table just shy of full width and height.
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 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.
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.
Again, immediately below, add the World Happiness Data 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.
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 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/.
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.
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. .
