Interactive Data Visualization

GitHub Repository

Two examples of Data Visualization using Plotly and Bokeh. As shown below, plots obtained using these two Python library can be easily integrated in HTML format. If you are interested in a more in depth explanation about these libraries, check out my Python Data Visualization Libraries post in my blog section.

Plotly

import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
init_notebook_mode(connected=True)
import plotly.plotly as py
import plotly
import pandas as pd
import datetime
df = pd.read_csv("TSLA.csv")
df['date'] = df['date'].astype('str')
df['high'] = df['high'].astype('double')
df['low'] = df['low'].astype('double')
date2 = []
for i in df['date']:
new_date = datetime.datetime.strptime(i, "%d/%m/%Y").strftime("%Y-%m-%d")
date2.append(new_date)
df['date'] = df['date'].str.replace('/', '-')
df['date'] = date2
df.fillna(0)
trace_high = go.Scatter(
x=df.date,
y=df['high'],
name = "TSLA High",
line = dict(color = '#17BECF'),
opacity = 0.8)
trace_low = go.Scatter(
x=df.date,
y=df['low'],
name = "TSLA Low",
line = dict(color = '#7F7F7F'),
opacity = 0.8)
data = [trace_high,trace_low]
layout = dict(
title='Time Series with Rangeslider',
xaxis=dict(
rangeselector=dict(
buttons=list([
dict(count=1,
label='1m',
step='month',
stepmode='backward'),
dict(count=6,
label='6m',
step='month',
stepmode='backward'),
dict(step='all')
])
),
rangeslider=dict(
visible = True
),
type='date'
)
)
fig = dict(data=data, layout=layout)
iplot(fig, filename = "Time Series with Rangeslider")
plotly.offline.plot(fig, filename='Plotly_Stock.html')
view raw PlotlyFull.py hosted with ❤ by GitHub
2011201220132014201520162017201820190100200300400
TSLA HighTSLA Low1m6mallTime Series with Plotly

Bokeh

import pandas as pd
import numpy as np
from bokeh.plotting import figure
from bokeh.io import output_file, show, output_notebook
from bokeh.models import CustomJS
from bokeh.models.widgets import CheckboxGroup
from bokeh.layouts import row
from bokeh.palettes import Viridis4
from bokeh.models.annotations import Title, Legend
from bokeh import events
df = pd.read_csv("TSLA.csv")
df['date'] = pd.to_datetime(df['date'], format='%d/%m/%Y')
p = figure(x_axis_type='datetime', min_width=800)
aline = p.line(df['date'], df['high'], line_width=2, color=Viridis4[0])
bline = p.line(df['date'], df['low'], line_width=2, color=Viridis4[1])
cline = p.line(df['date'], df['open'], line_width=2, color=Viridis4[2])
dline = p.line(df['date'], df['close'], line_width=2, color=Viridis4[3])
p.yaxis.axis_label = 'Price'
p.xaxis.axis_label = 'Time Span'
legend = Legend(items=[
("High Price", [aline]),
("Low Price", [bline]),
("Open Price", [cline]),
("Close Price", [dline])
], location=(0, 450))
t = Title()
t.text = 'Tesla Stock Market Analysis'
p.title = t
p.add_layout(legend, 'center')
p.sizing_mode = "scale_both"
checkboxes = CheckboxGroup(labels=list(['High Price', 'Low Price', 'Open Price',
'Close Price']), active=[0, 1, 2, 3])
callback = CustomJS(code="""aline.visible = false; // aline and etc.. are
bline.visible = false; // passed in from args
cline.visible = false;
dline.visible = false;
// cb_obj is injected in thanks to the callback
if (cb_obj.active.includes(0)){aline.visible = true;}
// 0 index box is aline
if (cb_obj.active.includes(1)){bline.visible = true;}
// 1 index box is bline
if (cb_obj.active.includes(2)){cline.visible = true;}
// 2 index box is cline etc...
if (cb_obj.active.includes(3)){dline.visible = true;}""",
args={'aline': aline, 'bline': bline, 'cline': cline, 'dline': dline})
checkboxes.js_on_change("active", callback)
output_file('Tesla_Stock_Widget.html')
show(row(p, checkboxes))
view raw Bokeh.py hosted with ❤ by GitHub

Contacts

If you want to keep updated with my latest articles and projects follow me on Medium and subscribe to my mailing list. These are some of my contacts details:

Buy Me A Coffee

Subscribe to my mailing list to be updated about my new blog posts!

* indicates required