

In [1]:

    
import pandas as pd
from bokeh.plotting import show, output_notebook
output_notebook()









    




    
        
        
        
    
        
        BokehJS successfully loaded.

Make our dataframe

Note that we can also make it from a django queryset and this can be seen in the washmap folder. But we just use a csv here for convenience.



In [2]:

    
data = pd.read_csv('line_chart_data.csv', index_col='year')
data.head()

Make simple chart



In [3]:

    
from bokeh.charts import Line
show(Line(data))

Configure with some basic options



In [4]:

    
chart_options = dict(
    tools="", palette=["#6aa6bd"],
    height=250, width=250,
    xlabel=None, ylabel=None, 
    xgrid=None, ygrid=None,
)
chart = Line(data, **chart_options)
show(chart)

Configure a bit more



In [5]:

    
from bokeh.charts import Line
from bokeh.models import Range1d
    
chart = Line(data, **chart_options)

# Specify ranges
chart.x_range = Range1d(1990, 2015)
chart.y_range = Range1d(0, 100)

# Remove the toolbar and outline
chart.toolbar_location = None
chart.outline_line_color = None

# Prettify the line
chart.renderers[2].glyph.line_width = 5
chart.renderers[2].glyph.line_cap = 'round'

show(chart)

Configure all the way



In [6]:

    
from bokeh.models import Range1d

FONT = "News Cycle"  # I installed news cycle from here: http://www.fontsquirrel.com/fonts/news-cycle
GRAY = "#CCCCCC"


chart = Line(data, **chart_options)

# CUSTOMIZE - ALL THE THINGS!!!!

chart.x_range = Range1d(1990, 2015)
chart.y_range = Range1d(0, 100)

# Remove the toolbar and lines
chart.toolbar_location = None
chart.outline_line_color = None

# Prettify the line
chart.renderers[2].glyph.line_width = 5
chart.renderers[2].glyph.line_cap = 'round'

# Grab the axes
xaxis = chart.below[0]
yaxis = chart.left[0]

# Update the fonts
xaxis.axis_label_text_font = FONT
xaxis.axis_label_text_font_style = "bold"
yaxis.axis_label_text_font = FONT
yaxis.axis_label_text_font_style = "bold"

# Axes lines & ticks
xaxis.axis_line_width = 3
yaxis.axis_line_width = 3
xaxis.major_tick_line_width = 3
yaxis.major_tick_line_width = 3

xaxis.axis_line_color = GRAY
yaxis.axis_line_color = GRAY
xaxis.major_tick_line_color = GRAY
yaxis.major_tick_line_color = GRAY

xaxis.ticker.num_minor_ticks = 0
yaxis.ticker.num_minor_ticks = 0   

xaxis.major_tick_in = False
yaxis.major_tick_in = False

xaxis.ticker.min_interval = 10
yaxis.ticker.min_interval = 50

show(chart)

	value
year
1990	81.3
1991	81.5
1992	81.7
1993	81.8
1994	82.0