Marcelo Ponce
Visualization WG
September 19th , 2016
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
1 / 25
Outline
1
plot.ly
Features & Platforms
APIs
Installation & Usage
Examples...
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
2 / 25
plot.ly
Features & Platforms
è plot.ly
à generates very nice looking plots
à interactive plots
à generating an html-document (ie. will be opened in a browser)
à generates java-script code, and requires to use a java-script plotting library
è plot.ly
à based on plotly.js
à build on top of d3.js and stack.gl
à plotly.js is a high-level, declarative charting library
à plotly.js includes 20 chart types, including 3D charts, statistical graphs, and SVG maps
à open source: https://github.com/plotly/plotly.js
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
3 / 25
plot.ly
Features & Platforms
è plot.ly
à generates very nice looking plots
à interactive plots
à generating an html-document (ie. will be opened in a browser)
à generates java-script code, and requires to use a java-script plotting library
è plot.ly
à based on plotly.js
à build on top of d3.js and stack.gl
à plotly.js is a high-level, declarative charting library
à plotly.js includes 20 chart types, including 3D charts, statistical graphs, and SVG maps
à open source: https://github.com/plotly/plotly.js
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
3 / 25
plot.ly
plotly API Libraries
APIs
è platforms https://plot.ly/api/
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
4 / 25
plot.ly
Installation & Usage
è Python: plot.ly/python
$ pip install plotly
>>> import plotly
plotly Python Library is open
source, free, and self-hosted
2 plotting modes: online &
of ine
online mode ß web-hosting,
requires to create an account
https:
//plot.ly/python/
getting-started/
M.Ponce (SciNet HPC – UofT)
Installation & Usage
è R: plot.ly/r
> install.packages("plotl
> library("plotly")
Plotly for R is an interactive,
browser-based charting library
built on the open source
JavaScript graphing library,
plotly.js.
It works entirely locally,
through the HTML widgets
framework.
ploy.ly
September 19th , 2016
5 / 25
plot.ly
using plotly of ine
Installation & Usage
Initialization for Of ine Plotting
Plotly Of ine allows you to create graphs of ine and save them
locally.
There
are
also
two
methods
for
plotting
of ine:
plotly.offline.plot() and plotly.offline.iplot()
Use plotly.offline.plot() to create and standalone
HTML that is saved locally and opened inside your web browser.
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
6 / 25
plot.ly
Examples...
Examples...
Tons and tons of examples, are available on the website
https://plot.ly/python/getting-started/
https://plot.ly/r/getting-started/
D ISCLAIMER
All my examples have been taken from plot.ly and
slightly modi ed (specially the python ones) to work on
offline-mode.
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
7 / 25
plot.ly
Examples...
#######################
## FILLED AREAS PLOTS
#######################
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
trace1 = go.Scatter(
x=[1, 2, 3, 4],
y=[0, 2, 3, 5],
fill=’tozeroy’,
mode= ’none’
)
trace2 = go.Scatter(
x=[1, 2, 3, 4],
y=[3, 5, 1, 7],
fill=’tonexty’,
mode= ’none’
)
data = [trace1, trace2]
plotly.offline.plot(data)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
8 / 25
plot.ly
Examples...
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
trace0 = go.Scatter(
x=[1, 2, 3, 4],
y=[3, 4, 8, 3],
fill= None,
mode=’lines’,
line=dict(
color=’rgb(143, 19, 131)’,
)
)
trace1 = go.Scatter(
x=[1, 2, 3, 4],
y=[1, 6, 2, 6],
fill=’tonexty’,
mode=’lines’,
line=dict(
color=’rgb(143, 19, 131)’,
)
)
data = [trace0, trace1]
plotly.offline.plot(data)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
9 / 25
plot.ly
Examples...
####################
# SCATTER PLOTS
####################
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
# Create random data with numpy
import numpy as np
N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)
# Create a trace
trace = go.Scatter(
x = random_x,
y = random_y,
mode = ’markers’
)
data = [trace]
# Plot and embed in ipython
notebook!
plotly.offline.plot(data, filename=
’basic-scatter’)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
10 / 25
plot.ly
Examples...
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
# Create random data with numpy
import numpy as np
N = 100
random_x = np.linspace(0, 1, N)
random_y0 = np.random.randn(N)+5
random_y1 = np.random.randn(N)
random_y2 = np.random.randn(N)-5
data = [trace0, trace1, trace2]
plotly.offline.plot(data, filename=’scatter-mode’)
# Create traces
trace0 = go.Scatter(
x = random_x,
y = random_y0,
mode = ’markers’,
name = ’markers’
)
trace1 = go.Scatter(
x = random_x,
y = random_y1,
mode = ’lines+markers’,
name = ’lines+markers’
)
trace2 = go.Scatter(
x = random_x,
y = random_y2,
mode = ’lines’,
name = ’lines’
)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
11 / 25
plot.ly
Examples...
color = ’rgba(255, 182, 193, .9)’,
line = dict(
width = 2,
)
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
)
)
import numpy as np
data = [trace0, trace1]
N = 500
trace0 = go.Scatter(
x = np.random.randn(N),
y = np.random.randn(N)+2,
name = ’Above’,
mode = ’markers’,
marker = dict(
size = 10,
color = ’rgba(152, 0, 0,
.8)’,
line = dict(
width = 2,
color = ’rgb(0, 0, 0)’
)
)
)
layout = dict(title = ’Styled Scatter’,
yaxis = dict(zeroline = False),
xaxis = dict(zeroline = False)
)
fig = dict(data=data, layout=layout)
plotly.offline.plot(fig, filename=’styled-scatter’
)
trace1 = go.Scatter(
x = np.random.randn(N),
y = np.random.randn(N)-2,
name = ’Below’,
mode = ’markers’,
marker = dict(
size = 10,
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
12 / 25
plot.ly
Examples...
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
import plotly.plotly as py
import numpy as np
trace1 = go.Scatter(
y = np.random.randn(500),
mode=’markers’,
marker=dict(
size=’16’,
color = np.random.randn
(500), #set color
equal to a variable
colorscale=’Viridis’,
showscale=True
)
)
data = [trace1]
plotly.offline.plot(data, filename=
’scatter-plot-with-colorscale’
)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
13 / 25
plot.ly
Examples...
####################
## BUBBLE CHARTS
####################
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
trace0 = go.Scatter(
x=[1, 2, 3, 4],
y=[10, 11, 12, 13],
mode=’markers’,
marker=dict(
size=[40, 60, 80, 100],
)
)
data = [trace0]
plotly.offline.plot(data)
marker=dict(
color=[’rgb(93, 164, 214)’,
’rgb(255, 144, 14)’,
’rgb(44, 160, 101)’,
’rgb(255, 65,
54)’],
opacity=[1, 0.8, 0.6, 0.4],
size=[40, 60, 80, 100],
)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
14 / 25
plot.ly
Examples...
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
trace0 = go.Scatter(
x=[1, 2, 3, 4],
y=[10, 11, 12, 13],
text=[’A</br>size: 40</br>
default’, ’B</br>size:
60</br>default’, ’C</br>
size: 80</br>default’, ’D
</br>size: 100</br>default
’],
mode=’markers’,
marker=dict(
size=[400, 600, 800, 1000],
sizemode=’area’,
)
)
trace1 = go.Scatter(
x=[1, 2, 3, 4],
y=[14, 15, 16, 17],
text=[’A</br>size: 40</br>
sixeref: 0.2’, ’B</br>size
: 60</br>sixeref: 0.2’, ’C
</br>size: 80</br>sixeref:
0.2’, ’D</br>size: 100</
br>sixeref: 0.2’],
mode=’markers’,
marker=dict(
M.Ponce (SciNet HPC – UofT)
marker=dict(
size=[400, 600, 800, 1000],
sizeref=2,
sizemode=’area’,
)
)
trace2 = go.Scatter(
x=[1, 2, 3, 4],
y=[20, 21, 22, 23],
text=[’A</br>size: 40</br>sixeref: 2’, ’B</br>
size: 60</br>sixeref: 2’, ’C</br>size:
80</br>sixeref: 2’, ’D</br>size: 100</br>
sixeref: 2’],
mode=’markers’,
marker=dict(
size=[400, 600, 800, 1000],
sizeref=0.2,
sizemode=’area’,
)
)
data = [trace0, trace1, trace2]
plotly.offline.plot(data)
ploy.ly
September 19th , 2016
15 / 25
plot.ly
M.Ponce (SciNet HPC – UofT)
Examples...
ploy.ly
September 19th , 2016
16 / 25
plot.ly
Examples...
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
data = [
{
’x’: [1, 3.2, 5.4, 7.6,
9.8, 12.5],
’y’: [1, 3.2, 5.4, 7.6,
9.8, 12.5],
’mode’: ’markers’,
’marker’: {
’color’: [120, 125,
130, 135, 140,
145],
’size’: [15, 30, 55,
70, 90, 110],
’showscale’: True
}
}
]
plotly.offline.plot(data)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
17 / 25
plot.ly
3D-Surfaces... I
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
import pandas as pd
# Read data from a csv
z_data = pd.read_csv(’https://raw.
githubusercontent.com/plotly/
datasets/master/api_docs/
mt_bruno_elevation.csv’)
Examples...
fig = go.Figure(data=data, layout=layout)
#py.iplot(fig, filename=’elevations-3dsurface’)
plotly.offline.plot(fig, filename=’
elevations-3d-surface’)
data = [
go.Surface(
z=z_data.as_matrix()
)
]
layout = go.Layout(
title=’Mt Bruno Elevation’,
autosize=False,
width=500,
height=500,
margin=dict(
l=65,
r=50,
b=65,
t=90
)
)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
18 / 25
plot.ly
3D-Surfaces... II
Examples...
pOff.plot([
dict(z=z1, type=’surface’),
dict(z=z2, showscale=False, opacity
=0.9, type=’surface’),
dict(z=z3, showscale=False, opacity
=0.9, type=’surface’)],
filename=’multiple-surfaces’)
import plotly.offline as pOff
pOff.plot()
from plotly.graph_objs import Surface
z1 = [
[8.83,8.89,8.81,8.87,8.9,8.87],
[8.89,8.94,8.85,8.94,8.96,8.92],
[8.84,8.9,8.82,8.92,8.93,8.91],
[8.79,8.85,8.79,8.9,8.94,8.92],
[8.79,8.88,8.81,8.9,8.95,8.92],
[8.8,8.82,8.78,8.91,8.94,8.92],
[8.75,8.78,8.77,8.91,8.95,8.92],
[8.8,8.8,8.77,8.91,8.95,8.94],
[8.74,8.81,8.76,8.93,8.98,8.99],
[8.89,8.99,8.92,9.1,9.13,9.11],
[8.97,8.97,8.91,9.09,9.11,9.11],
[9.04,9.08,9.05,9.25,9.28,9.27],
[9,9.01,9,9.2,9.23,9.2],
[8.99,8.99,8.98,9.18,9.2,9.19],
[8.93,8.97,8.97,9.18,9.2,9.18]
]
z2 = [[zij+1 for zij in zi] for zi in z1]
z3 = [[zij-1 for zij in zi] for zi in z1]
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
19 / 25
plot.ly
Stats... I
import plotly
plotly.offline.plot()
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import colorlover as cl
from scipy.stats import gaussian_kde
df = pd.read_csv(’https://raw.
githubusercontent.com/plotly/
datasets/master/iris.csv’)
df.head()
scl = cl.scales[’9’][’seq’][’Blues’]
colorscale = [ [ float(i)/float(len(scl)
-1), scl[i] ] for i in range(len(scl
)) ]
colorscale
def kde_scipy(x, x_grid, bandwidth=0.2 ):
kde = gaussian_kde(x, bw_method=
bandwidth / x.std(ddof=1) )
return kde.evaluate(x_grid)
x_grid = np.linspace(df[’SepalWidth’].min
(), df[’SepalWidth’].max(), 100)
y_grid = np.linspace(df[’PetalLength’].
min(), df[’PetalLength’].max(), 100)
M.Ponce (SciNet HPC – UofT)
Examples...
trace1 = go.Histogram2dContour(
x=df[’SepalWidth’],
y=df[’PetalLength’],
name=’density’,
ncontours=20,
colorscale=colorscale,
showscale=False
)
trace2 = go.Histogram(
x=df[’SepalWidth’],
name=’x density’,
yaxis=’y2’,
histnorm=’probability density’,
marker=dict(color=’rgb(217, 217, 217)
’),
nbinsx=25
)
trace2s = go.Scatter(
x=x_grid,
y=kde_scipy( df[’SepalWidth’].
as_matrix(), x_grid ),
yaxis=’y2’,
line = dict( color=’rgb(31, 119, 180)
’ ),
fill=’tonexty’,
)
trace3 = go.Histogram(
y=df[’PetalLength’],
name=’y density’,
ploy.ly
September 19th , 2016
20 / 25
plot.ly
Stats... II
Examples...
xaxis=’x2’,
histnorm=’probability density’,
marker=dict(color=’rgb(217, 217, 217)
’),
nbinsy=50
showgrid=False, zeroline=
False, ticks=’’,
showline=True, mirror
=True),
yaxis=dict(domain=[0, 0.746],
linewidth=2,linecolor=’#444’,
title=’PetalLength’,
showgrid=False, zeroline=
False, ticks=’’,
showline=True, mirror
=True),
)
trace3s = go.Scatter(
y=y_grid,
x=kde_scipy( df[’PetalLength’].
as_matrix(), y_grid ),
xaxis=’x2’,
line = dict( color=’rgb(31, 119, 180)
’ ),
fill=’tonextx’,
)
xaxis2=dict(domain=[0.75, 1],
showgrid=False, zeroline=False,
ticks=’’,
showticklabels=False ),
yaxis2=dict(domain=[0.75, 1],
showgrid=False, zeroline=False,
ticks=’’,
showticklabels=False ),
data = [trace1, trace2, trace2s, trace3,
trace3s]
layout = go.Layout(
showlegend=False,
autosize=False,
width=700,
height=700,
hovermode=’closest’,
bargap=0,
)
fig = go.Figure(data=data, layout=layout)
# IPython notebook
# py.iplot(fig, filename=’pandas-2ddensity-plot’, height=700)
xaxis=dict(domain=[0, 0.746],
#url = py.plot(fig, filename=’pandas-2dlinewidth=2, linecolor=’#444’,
density-plot’)
title=’SepalWidth’,
plotly.offline.plot(fig, filename=’pandas
-2d-density-plot’)
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
21 / 25
plot.ly
Stats... III
M.Ponce (SciNet HPC – UofT)
Examples...
ploy.ly
September 19th , 2016
22 / 25
plot.ly
R examples... I
Examples...
library(plotly)
set.seed(100)
d <- diamonds[sample(nrow(diamonds)
, 1000), ]
p <- ggplot(data = d, aes(x = carat
, y = price)) +
geom_point(aes(text = paste("
Clarity:", clarity)), size =
4) +
geom_smooth(aes(colour = cut, fill
= cut)) + facet_wrap(~ cut)
(gg <- ggplotly(p))
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
23 / 25
plot.ly
R examples... II
Examples...
library(plyr)
library(reshape2)
library(plotly)
set.seed(1234)
x<- rnorm(100)
y.1<-rnorm(100)
y.2<-rnorm(100)
y.3<-rnorm(100)
y.4<-rnorm(100)
df<- (as.data.frame(cbind(x,y.1,y
.2,y.3,y.4)))
dfmelt<-melt(df, measure.vars =
2:5)
ggplot(dfmelt, aes(x=factor(round_
any(x,0.5)), y=value,fill=
variable))+
geom_boxplot()+
facet_grid(.~variable)+
labs(x="X (binned)")+
theme(axis.text.x=element_text(
angle=-90, vjust=0.4,hjust
=1))
ggplotly()
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
24 / 25
plot.ly
R examples... III
Examples...
library(foreign)
library(MASS)
library(Hmisc)
library(reshape2)
library(plotly)
dat <- read.dta("http://www.ats.
ucla.edu/stat/data/ologit.dta"
)
lapply(dat[, c("apply", "pared", "
public")], table)
ftable(xtabs(~ public + apply +
pared, data = dat))
ggplot(dat, aes(x = apply, y = gpa)
) +
geom_boxplot(size = .75) +
facet_grid(pared ~ public,
margins = TRUE)
ggplotly()
M.Ponce (SciNet HPC – UofT)
ploy.ly
September 19th , 2016
25 / 25