Building an Interactive Line Chart with Plotly
Plotly is a web-based platform for user to visualize data and analysis results with graphs and charts. This platform is very easy to use and you can create a chart in a few minutes. If you are to this platform, follow the guideline below to create your free account.
First of all, visit their website (https://plot.ly/) and select “Try free edition” on their main page, or click this link (https://plot.ly/feed/) to the registration page directly.
Once you have created an account and signed in, the landing page will be shown as below. To create a chart, click “+ Create” button on the top right, and select “Chart”.
The screen above is the place where you manipulate your dataset and modify your chart. There are four sections.
- Feature (left): You can select chart types, create data filter, modify chart styles etc. Most importantly, you will save or export or chart in this section.
- Detail (middle): The setting/content of each feature.
- Data View (top right): A spreadsheet like Excel.
- Plot (bottom right): The chart (result).
A simple dataset have been prepared for this example, you may download the file here (https://github.com/datasciguru/Plotly/raw/master/PlotlySampleData.xlsx). It is also fine to use your own dataset and follow the guideline in the remaining section.
If you decide to work with the dataset provided, the screenshot below shows the dataset content. Copy this dataset and paste in the “Data View” section.
There are 6 columns in this dataset, three pairs in total (AB, CD and EF). In this example, we are going to plot a line chart. In the “Feature” section, choose “Create” under “Graph”, select “Line plot” in as the chart type, and fill X and Y with A and B respectively. X and Y are the two axes in the chart while A and B are the first two columns in the dataset.
As we have three pairs of data and would like to plot three lines in the line chart, we should click “+ Trace” to add an additional trace/line in the chart. Choose C and D for the second trace, and E and F for the third trace. Once everything is done, you should be able to see a chart in the “Plot” section, with three different lines.
Plotly generates interactive charts. Try to move your mouse over the line in the plot, and the value (X-Y pair) will be shown on screen. No coding is required. You may also perform some view change in this “Plot” section. For example, you may select a certain part of this plot and the plot view will then zoom into your selection and make necessary adjustments to axes accordingly. To reset to default view, simply double click the plot and the view will be back to default. A few more actions can be done here, which include zoom in, zoom out, pan, auto-scale, reset axes etc.
So the first chart is ready now, but the chart does not look like what you expected. The next step is to customize the line plot. In “Feature” section, inside the “Style” group, you may modify traces, layout, notes, axes, legend, images and mobile support. In “Traces”, there are a few options to choose from for each line, which include opacity, display (lines or points or both), line details (thickness, color, type, shape, connect gaps), display in legend or not and values shown on hover or not.
In this example, there are three lines, you may choose one with lines, one with points and one with both for display. Thickness and color of each line may also be modified.
In “Layout”, you should give this plot a title and with a larger font size.
In “Notes”, you may add some annotations into the plot. You may try to add three data annotations, one for each line.
In “Axes”, you should modify two axis titles to “Year” and “Amount” (X and Y axes).
In “Legend”, you may also modify the style at your own wish.
When it is completed, you may click the “Save” button at the bottom left corner, a pop-up screen will then be shown.
You will be prompted to input the name of this plot and the dataset, you may also set the privacy of these two items. In this example, let’s set both as “Public”.
You may then click the “Share” button to review the link of this plot (i.e. https://plot.ly/~XXXXXX/XXX/). You may also send an invitation to the others for collaboration, or to copy the code in the “Embed” section to have it embedded in your own website.
Here is the final version.
The advantage of Plotly is very easy to use, you can quickly create an interactive graphic in a short time. It is light-weighted, comparing to Tableau. For data users (non technical people), this is a very good starting point to visualize your data.
Original Link: http://datasciguru.com/2017/03/08/building-an-interactive-line-chart-with-plotly/