Bokeh return empty map

Question

I am trying to create a map with bokeh to show the population in US_cities, but as soon as I run the code, it returns empty map, frame is there but map is not. I am trying to do something like this but for all US Cities.

Here is my code using "us_cities.json" file in bokeh data:

import pandas as pd

from bokeh.io import show
from bokeh.models import (
    ColumnDataSource,
    HoverTool,
    LogColorMapper
)
from bokeh.palettes import Viridis6 as palette
from bokeh.plotting import figure

palette.reverse()

new_data = pd.read_json("/home/alvin/.bokeh/data/us_cities.json")

#Creating random data that I want to show on map
new_data['pop'] = ((new_data['lat'] * 100) - new_data["lon"])/ 800

#Converting pd series to array 
xs = new_data['lat'].tolist()
ys = new_data['lon'].tolist()
pops = new_data['pop'].tolist()

#creating ColumnDataSource
source = ColumnDataSource(data=dict(
    x=xs,
    y=ys,
    pop = pops,
))

TOOLS = "pan,wheel_zoom,reset,hover,save"

p = figure(
    title="Just a US Map", tools=TOOLS,
    x_axis_location=None, y_axis_location=None
)

color_mapper = LogColorMapper(palette=palette)
p.grid.grid_line_color = None

p.patches('x', 'y', source=source,
          fill_color={'field': 'pop', 'transform': color_mapper},
          fill_alpha=0.7, line_color="white", line_width=0.5)

hover = p.select_one(HoverTool)
hover.point_policy = "follow_mouse"
hover.tooltips = [
    ("population)", "@pop%"),
    ("(Long, Lat)", "($x, $y)"),
]

show(p)

What could be the problem here?

I am running python3 and bokeh 0.12.6

If I check my data it looks like this: enter image description here

Answer 1

I assume you are using a jupyter notebook... As i have faced the same problem recently, I would suggest you try following steps;

1. open your browser's JavaScript console and check for errors.
2. read the discussion in link It seems to be a cronical problem.

It might be caused by many reasons like internet connetction issues, API problems etc. You can find and solve the problem by following above steps.

Once you detect and solve your problem, restarting the kernel will not help since the bokehjs is still loaded in the page. You will need to reload the page.

Answer 2

The US cities data does not contain glyphs, like the counties data. You can show the counties data, and overlay the cities data as a scatter plot on top:

import pandas as pd

from bokeh.io import show
from bokeh.models import (
    ColumnDataSource,
    HoverTool,
    LogColorMapper
)
from bokeh.palettes import Viridis6 as palette
from bokeh.plotting import figure



from bokeh.sampledata.us_counties import data as counties

palette.reverse()

counties = {
    code: county for code, county in counties.items() if county["state"] == "tx"
}

county_xs = [county["lons"] for county in counties.values()]
county_ys = [county["lats"] for county in counties.values()]


csource = ColumnDataSource(data=dict(
    x=county_xs,
    y=county_ys,
))


new_data = pd.read_json("/home/tc427/.bokeh/data/us_cities.json")[::100]

#Creating random data that I want to show on map
new_data['pop'] = ((new_data['lat'] * 100) - new_data["lon"])/ 800

#Converting pd series to array 
xs = new_data['lon'].tolist()
ys = new_data['lat'].tolist()
pops = new_data['pop'].tolist()

#creating ColumnDataSource
source = ColumnDataSource(data=dict(
    x=xs,
    y=ys,
    pop = pops,
))

TOOLS = "pan,wheel_zoom,reset,hover,save"

p = figure(
    title="Just a US Map", tools=TOOLS,
)

color_mapper = LogColorMapper(palette=palette, low=0, high=10)

p.patches('x', 'y', source=csource)
#p.patches('x', 'y', source=csource,
#          fill_color={'field': 'pop', 'transform': color_mapper},
#          fill_alpha=0.7, color="red", line_width=0.5)
p.scatter('x', 'y', source=source, color={'field': 'pop', 'transform': color_mapper})

hover = p.select_one(HoverTool)
hover.point_policy = "follow_mouse"
hover.tooltips = [
    ("population)", "@pop%"),
    ("(Long, Lat)", "($x, $y)"),
]

show(p)