UNIT-4
Plotly and JSON
Syllabus:Plotly and JSON, Online and Offline plotting, Structure of Plotly Plot, Graph
Objectives VS Dictionaries, Plotly Express, updating plots- Adding and Updating Traces,
Creating Subplots, DropDown Menus, Dash Interactivity, Example Plots
Plotly and JSON
Plotly is a powerful open-source data visualization library used for creating interactive graphs
and dashboards in Python, R, and JavaScript. One of the most important aspects of Plotly is
that every visualization created by Plotly is internally represented using JSON (JavaScript
Object Notation).
JSON is a lightweight data-interchange format that organizes information as key–value pairs.
Plotly uses this structure to store all components of a graph such as data, layout, axes,
legends, colors, and animations.
A Plotly graph usually contains three main JSON components:
1. Data
This contains the graphical representation of the dataset such as bars, scatter points, or
lines. Each dataset in Plotly is called a trace.
2. Layout
This defines the design of the chart including titles, axis labels, legend position,
colors, margins, and background style.
3. Frames (Optional)
Frames are used when creating animations in Plotly.
Thus, when a Plotly graph is created, Python converts the graph into a JSON structure,
which the browser reads and renders as an interactive visualization.
Scatter Plot using JSON Structure
In this example, a scatter plot is created using a dictionary that resembles the JSON structure
used internally by Plotly.
1) import plotly.graph_objects as go
fig = {
"data":[
{"x":[1,2,3,4], "y":[10,15,13,17], "type":"scatter"}
],
"layout":{
"title":"Student Performance Scatter Plot"
}
, }
go.Figure(fig).show()
The data section contains x and y values for the scatter plot.
The layout section sets the graph title.
Plotly converts this dictionary into JSON before displaying the chart.
Bar Chart using JSON Format
fig = {
"data":[
{"x":["Math","Science","English"], "y":[85,90,78], "type":"bar"}
],
"layout":{
"title":"Student Subject Scores"
}
}
go.Figure(fig).show()
, This example displays the scores obtained by students in different subjects using a bar chart.
The graph is defined using a JSON-style dictionary.
Online and Offline Plotting
Plotly provides two different modes for displaying graphs:
1. Online Plotting
2. Offline Plotting
Online Plotting
In online plotting, graphs are stored on the Plotly cloud server. Users can share these
visualizations via links or embed them in websites. Online plotting requires a Plotly account
and an internet connection.
Offline Plotting
Plotly and JSON
Syllabus:Plotly and JSON, Online and Offline plotting, Structure of Plotly Plot, Graph
Objectives VS Dictionaries, Plotly Express, updating plots- Adding and Updating Traces,
Creating Subplots, DropDown Menus, Dash Interactivity, Example Plots
Plotly and JSON
Plotly is a powerful open-source data visualization library used for creating interactive graphs
and dashboards in Python, R, and JavaScript. One of the most important aspects of Plotly is
that every visualization created by Plotly is internally represented using JSON (JavaScript
Object Notation).
JSON is a lightweight data-interchange format that organizes information as key–value pairs.
Plotly uses this structure to store all components of a graph such as data, layout, axes,
legends, colors, and animations.
A Plotly graph usually contains three main JSON components:
1. Data
This contains the graphical representation of the dataset such as bars, scatter points, or
lines. Each dataset in Plotly is called a trace.
2. Layout
This defines the design of the chart including titles, axis labels, legend position,
colors, margins, and background style.
3. Frames (Optional)
Frames are used when creating animations in Plotly.
Thus, when a Plotly graph is created, Python converts the graph into a JSON structure,
which the browser reads and renders as an interactive visualization.
Scatter Plot using JSON Structure
In this example, a scatter plot is created using a dictionary that resembles the JSON structure
used internally by Plotly.
1) import plotly.graph_objects as go
fig = {
"data":[
{"x":[1,2,3,4], "y":[10,15,13,17], "type":"scatter"}
],
"layout":{
"title":"Student Performance Scatter Plot"
}
, }
go.Figure(fig).show()
The data section contains x and y values for the scatter plot.
The layout section sets the graph title.
Plotly converts this dictionary into JSON before displaying the chart.
Bar Chart using JSON Format
fig = {
"data":[
{"x":["Math","Science","English"], "y":[85,90,78], "type":"bar"}
],
"layout":{
"title":"Student Subject Scores"
}
}
go.Figure(fig).show()
, This example displays the scores obtained by students in different subjects using a bar chart.
The graph is defined using a JSON-style dictionary.
Online and Offline Plotting
Plotly provides two different modes for displaying graphs:
1. Online Plotting
2. Offline Plotting
Online Plotting
In online plotting, graphs are stored on the Plotly cloud server. Users can share these
visualizations via links or embed them in websites. Online plotting requires a Plotly account
and an internet connection.
Offline Plotting
