Plotly Tutorial

Plotly is an interactive, open-source plotting library that supports over 40 unique chart types covering a wide range of statistical, financial, geographic, scientific, and 3-dimensional use-cases. There are three main elements of the visualizations that built with Plotly:

• Data: Specifies the type of visualization and the axes variables of it.
• Layout: Title, axis labels, font types, axes ranges, etc.
• Figure: Visualization may be completed by executing data and layout features in figure.

• Scatter plots allow the comparison of two variables for a set of data.
• Depending on the trend of scatter points, we could interpret a correlation.
• We can create scatter plots with <code>go.Scatter</code>
• Set the title of graph by using <code>title</code> in layout.
• The <code>x</code> and <code>y</code> parameters inside the title dictionary represent the position of the title.
• We can also specify the size of output with <code>width</code> and <code>height</code>
• We have to put the data and layout parts we filled in into the figure we created with <code>go.Figure</code>

• A bubble chart is a type of chart that displays three dimensions of data.
• Bubble charts can be considered a variation of the scatter plot, in which the data points are replaced with bubbles.
• Define the third variable with <code>size</code> in bubble charts.

• A line chart displays a series of data points (markers) connected by line segments.
• It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments.
• Often used to visualize a trend in data over intervals of time - known as a time series.
• To create a line chart, tune the <code>mode</code> parameter as “line”.
• Like scatter plots, you can edit marker qualities like line color,line width, etc. in <code>line</code> parameter.

• A bar chart presents categorical data with rectangular bars with heights (or lengths) proportional to the values that they represent.
• Built a bar chart with <code>go.Bar</code>
• Use <code>text</code> to display values on each bar.
• Bars can be edited with <code>marker</code>

• A grouped bar chart extends the bar chart, plotting numeric values for levels of two categorical variables instead of one.
• Bars are grouped by position for levels of one categorical variable, with color indicating the secondary category level within each group.
• Use <code>barmode</code> to define the type of the bar chart.

• A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.
• In a pie chart, the arc length of each slice, is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.
• Create a Pie Chart with <code>go.Pie</code>

• A donut chart is a pie chart with a hole in the center.
• Use <code>hole</code> to define a hole. In this parameter, larger values come up with bigger holes.

• A histogram displays an accurate representation of the overall distribution of a continuous feature.
• In graphical objects, <code>go.Histogram</code> can be used to create a histogram.
• To create a histogram, we divide the entire range of values of the continuous feature into a series of intervals.
• This series of intervals are known as “bins”.
• Change the bin size with <code>size</code> to get either more or lesss detail.
• Determine the starting, ending and interval size with <code>xbins</code>

• Distribution Plots, or Distplots, typically layer three plots on top of one another.
• The first is a histogram, where each data point is placed inside a bin of similar values.
• The second is a rug plot - marks are placed along the x-axis for every data point, which lets you see the distribution of values inside each bin.
• Lastly, Distribution plots often include a “kernel density estimate”, or KDE line that tries to describe the shape of the distribution.
• Use <code>create_distplot</code> to define a distplot.

• Heatmaps allow the visualization of 3 features.
• Categorical or continuous features along the x and y axis to make up a grid, and then a 3rd continuous feature displayed through color.
• X and Y axis are seperated into intervals to form a grid.
• Categorical features also can be defined on the x and y axis.
• Use <code>go.Heatmap</code> to define a heatmap.

• Box Plots visualize the variation of a feature by depicting the continuous numerical data through quartiles.
• Seperate the data based on a categorical feature to compare the continuous feature based on catergory.
• Create a Box Plot with <code>go.Box</code>
• The Box Plot is a way of visually displaying the data distribution through their quartiles.
• Quartiles seperate the data into four equal parts.
• Q1 represents the first quartile and is the 25th percentile.
• Q2 (the median) is the 50th percentile and shows that 50% of the scores.
• Finally, Q3, the 75th percentile, is the central point that lies between the median (Q2) and the highest number of the distribution.
• If we hover over the plot, we can display the median, max, min values and quartiles.

• Subplots method provides a way to plot multiple plots on a single figure.
• Use <code>make_subplots</code> to create a subplot, then define the size of the subplot with <code>rows</code> and <code>cols</code>
• Set the title of each plot with <code>subplot_titles</code>