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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') |
Bokeh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)) |
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:
