DEV Community: Isabella

Bar plots in Bokeh & How to Embed Them

Isabella — Wed, 17 Jun 2020 20:02:24 +0000

This is my second post about exploring the Los Angeles Times' database of police killings in L.A. County. My first one was about mapping where each Black person who was killed by police in L.A. County died. In my main blog post I wanted to learn more about the Black and Latino communities that have been disproportionately affected by police violence and made a simple graphic about it.

To try out a simple chart for my first experience with Bokeh, I decided to recreate this horizontal bar chart I made for the graphic of my main post:

Interactive version
Live plot

Creating this required one step before making the plot itself. Since this is a horizontal bar chart, we need to make a list of factors to pass into the categorical x-axis with the argument y_range in figure(). This DataFrame is my source for the plot:

top_neighborhoods = killings_data[killings_data.race == 'black'].neighborhood.value_counts().head(7).to_frame().sort_values(by='neighborhood', ascending=True)

To make the list of categorical factors we use ColumnDataSource() from bokeh.models and tolist():

from bokeh.models import ColumnDataSource
source = ColumnDataSource(data=top_neighborhoods)
neighborhoods = source.data['index'].tolist()

Now we can make the plot. Here are the necessary imports and comments describing them:

from bokeh.plotting import figure, show, output_file # output_file = output as HTML
from bokeh.models.tools import HoverTool # for hover tooltip
from bokeh.models import Axis            # for axis settings
from bokeh.io import output_notebook     # optional: to output in notebook

Create the figure with figure() and set the plot dimensions, the y categorical values using the created list, and optionally remove the toolbar:

output_notebook() # optional: show the output in the notebook
p = figure(plot_width=750, plot_height=400, 
            y_range = neighborhoods, # use the list as the range of y values
            toolbar_location=None)   # remove the toolbar since it isn't needed for this plot

Create the plot by defining the following:

source - the source object we made with ColumnDataSource()

y - the categorical y variable

right - the numeric x variable

height - height of the bars, a value between 0 and 1

line_color - color of the outline of the bars

color - color of the bars

# create the horizontal bar chart
p.hbar(y='index', right='neighborhood', source=source, height=0.95, line_color='white', color ="#DF8F44")

The following are the optional hover and style settings for this plot with their purposes commented:

p.x_range.start = 0  # start value of the x-axis
hover = HoverTool()  # initiate hover tool
hover.tooltips = [("Neighborhood","@index"),   ## define the content of the hover tooltip
                   ("Number of killnings","@neighborhood")]
hover.mode = 'hline' # set the mode of the hover tool
p.add_tools(hover)   # add the hover tooltip to the plot
# style the plot
p.xaxis.major_label_text_font = 'IBM Plex Mono'
p.xaxis.major_label_text_font_size = '12pt'
p.yaxis.major_label_text_font = 'IBM Plex Mono'
p.yaxis.major_label_text_font_size = '13pt'
# output the HTML file
output_file("neighborhoods.html", title='Neighborhoods with the most Black police killings')
show(p) # show in notebook

The output neighborhoods.html that was created should pop up in your browser and be saved in your directory. This is the file we'll use to embed the plot.

Embed the plot

I believe there are different ways you can embed Bokeh plots to websites, but the approach I took since I found it the simplest was to host the created neighborhoods.html on my site (you can visit it here), then use that as the source of the <iframe> to embed the plot.

Steps:

Host the HTML file somewhere like GitHub pages (free) or your another site of yours.
Copy its path and plug it into the src of an <iframe> tag:

<iframe src="/today-i-learned-posts/bokeh-plots-embed/neighborhoods.html"
    sandbox="allow-same-origin allow-scripts"
    width="100%"
    height="500"
    scrolling="no"
    seamless="seamless"
    frameborder="0">
</iframe>

Now you can use the <iframe> to embed your interactive Bokeh visualization on any website!

I hope you found this helpful. If you have any questions, feel free to comment below or tweet/DM me.

Original blog post.

Scatter Plots on Mapbox with Plotly Express in Python & How to Embed Them

Isabella — Wed, 17 Jun 2020 19:50:12 +0000

Last week I was exploring the Los Angeles Times' database of police killings in L.A. County, trying to learn more about the Black and Latino communities that have been disproportionately affected by police violence based on data since 2000. I made a simple graphic about it that you can find in my blog post.

I also used that data to practice some EDA and data visualization in python. The data includes the latitude and longitude of where each person killed by police died, so one of the things I tried was mapping them with Mapbox and plotly Express. This map shows the places of death of the people killed who were Black.

Live map

To make this Mapbox map with Plotly you'll need a Mapbox account and a public Mapbox access token. This is easy to get, and the code to create the map is fairly simple. I will go through the whole process.

First, import plotly Express:

import plotly.express as px

Next, you'll have to set your Mapbox access token and call it from a file in your directory called .mapbox_token that contains your Mapbox access token.

If you don't have one yet, to get a token you have to create a Mapbox account, go to > Account > + Create a token, name your token, then Create token. Copy the token and paste it to your .mapbox_token file in your directory.

Now we'll set it:

px.set_mapbox_access_token(open(".mapbox_token").read())

To create the plot, use px.scatter_mapbox(), and input your data frame and latitude & longitude fields to be used:

fig = px.scatter_mapbox(data_frame=black_killings, lat='y', lon='x', 
  opacity=0.5, 
  hover_name="full_name", 
  hover_data=["year","neighborhood","cause"], 
  zoom=10)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0},  # remove the white gutter between the frame and map
        # hover appearance
        hoverlabel=dict( 
        bgcolor="white",     # white background
        font_size=16,        # label font size
        font_family="Inter") # label font
)
fig.show()

Optional settings:

opacity - the opacity of the dots

hover_name - controls which column is displayed in bold as the tooltip title

hover_data - list of columns whose values will be displayed in the body of the tooltip
zoom - set the map's initial zoom level

The details of update_layout are commented above.

Embed the plot

To embed a plotly plot on a website, the easiest way if your data source is small, is by hosting it in plotly's Chart Studio then embedding its <iframe>. Alternatively, you can generate an HTML file of the visualization, host it somewhere like GitHub pages (free) or your personal website, then call that page in the <iframe> to embed it. In this post I'll use the Chart Studio route, and it's applicable to any plotly visualization you create.

If you don't have the Chart Studio python package yet, you can install it using the package manager pip in your terminal with pip install chart_studio. You will need a plotly Chart Studio account and your API key.

To get your API key: Click your username in the top right > Profile > API Keys > Regenerate Key

Now import chart_studio and set your credentials:

import chart_studio
username = 'your-username' 
api_key = '' 
chart_studio.tools.set_credentials_file(username=username, api_key=api_key)

Save your plot to your Chart Studio cloud account with py.plot(). It creates a unique URL for your plot that plotly uses in the <iframe> it generates that you will use to embed your visualization on a website.

import chart_studio.plotly as py
py.plot(fig, filename = 'file-name', auto_open=True)

Running that should open the plot in Chart Studio in your browser. In the bottom right there is an icon where plotly provides the code to the <iframe> you can use.

Now you can use the <iframe> to embed your interactive plotly visualization on any website!

I hope you found this helpful. If you have any questions, feel free to comment below or tweet/DM me.