I am trying to generate the plot of a function of two parameters, where one is used as x_axis and for the other I plot n curves, varying the parameter between a min and max value.
The following code works:
import numpy as np
import bokeh
from bokeh.plotting import figure
from bokeh.io import push_notebook, show, output_notebook
output_notebook()
x = np.linspace(0,10,100)
f = figure()
fmin=1
fmax=3
nfreq=4
freq=np.linspace(fmin,fmax,nfreq)
for i in freq:
y = np.sin(i*x)
f.line(x,y)
show(f)
Now I would like to have 3 sliders to interactively vary fmin, fmax and nfreq. I could not figure out how to do it...
Thanks for any help
This example works for Bokeh v1.0.4. Run as: bokeh serve --show app.py
The content of app.py:
import numpy as np
from bokeh.models import Slider, Row, Column
from bokeh.plotting import figure, show, curdoc
from bokeh.models.sources import ColumnDataSource
plot = figure()
layout = Column(plot)
sources, lines = {}, {}
def get_x(n): return [np.linspace(0, 10, 100) for i in range(n)]
def get_y(n): return [np.sin(i * np.linspace(0, 10, 100)) for i in n]
def update(attr, old, new):
update_sources(layout.children[-3].value, layout.children[-2].value, layout.children[-1].value)
def update_sources(fmin, fmax, nfreq):
freq = np.linspace(fmin, fmax, nfreq)
for f, x, y in zip(freq, get_x(len(freq)), get_y(freq)):
data = {'x': x, 'y': y}
if f not in sources:
sources[f] = ColumnDataSource(data)
line = plot.line('x', 'y', source = sources[f])
lines[f] = line
else:
sources[f].data = data
for line in lines:
lines[line].visible = (False if line not in freq else True)
for txt, max in zip(['fmin', 'fmax', 'nfreq'], [3, 4, 5]):
slider = Slider(start = 1, end = max, value = 1, title = txt)
slider.on_change('value', update)
layout.children.append(slider)
update_sources(layout.children[-3].value, layout.children[-2].value, layout.children[-1].value)
[plot.line('x', 'y', source = sources[idx]) for idx in sources]
curdoc().add_root(layout)
Related
I have been working with the excellent minisom package and want to plot interactively the hexagonal map that reflects the results of the self-organising maps training process. There's already a code example that does this statically using matplotlib but to do so interactively, I would like to use bokeh. This is where I am struggling.
This is the code to generate a simplified matplotlib example of what's already on the package page:
from minisom import MiniSom
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.patches import RegularPolygon
from matplotlib import cm
from bokeh.plotting import figure
from bokeh.io import save, show, output_file, output_notebook
output_notebook()
data = pd.read_csv('https://archive.ics.uci.edu/ml/machine-learning-databases/00236/seeds_dataset.txt',
names=['area', 'perimeter', 'compactness', 'length_kernel', 'width_kernel',
'asymmetry_coefficient', 'length_kernel_groove', 'target'], sep='\t+')
t = data['target'].values
data = data[data.columns[:-1]]
# data normalisation
data = (data - np.mean(data, axis=0)) / np.std(data, axis=0)
data = data.values
# initialisation and training
som = MiniSom(15, 15, data.shape[1], sigma=1.5, learning_rate=.7, activation_distance='euclidean',
topology='hexagonal', neighborhood_function='gaussian', random_seed=10)
som.train(data, 1000, verbose=True)
# plot hexagonal topology
f = plt.figure(figsize=(10,10))
ax = f.add_subplot(111)
ax.set_aspect('equal')
xx, yy = som.get_euclidean_coordinates()
umatrix = som.distance_map()
weights = som.get_weights()
for i in range(weights.shape[0]):
for j in range(weights.shape[1]):
wy = yy[(i, j)]*2/np.sqrt(3)*3/4
hex = RegularPolygon((xx[(i, j)], wy), numVertices=6, radius=.95/np.sqrt(3),
facecolor=cm.Blues(umatrix[i, j]), alpha=.4, edgecolor='gray')
ax.add_patch(hex)
for x in data:
w = som.winner(x)
# place a marker on the winning position for the sample xx
wx, wy = som.convert_map_to_euclidean(w)
wy = wy * 2 / np.sqrt(3) * 3 / 4
plt.plot(wx, wy, markerfacecolor='None',
markeredgecolor='black', markersize=12, markeredgewidth=2)
plt.show()
matplotlib hexagonal topology plot
I've tried to translate the code into bokeh but the resulting hex plot (to me, primitively) looks like it needs to be flipped vertically onto the points and for the skew to be straightened out.
tile_centres_column = []
tile_centres_row = []
colours = []
for i in range(weights.shape[0]):
for j in range(weights.shape[1]):
wy = yy[(i, j)] * 2 / np.sqrt(3) * 3 / 4
tile_centres_column.append(xx[(i, j)])
tile_centres_row.append(wy)
colours.append(cm.Blues(umatrix[i, j]))
weight_x = []
weight_y = []
for x in data:
w = som.winner(x)
wx, wy = som.convert_map_to_euclidean(xy=w)
wy = wy * 2 / np.sqrt(3) * 3/4
weight_x.append(wx)
weight_y.append(wy)
# plot hexagonal topology
plot = figure(plot_width=800, plot_height=800,
match_aspect=True)
plot.hex_tile(q=tile_centres_column, r=tile_centres_row,
size=.95 / np.sqrt(3),
color=colours,
fill_alpha=.4,
line_color='black')
plot.dot(x=weight_x, y=weight_y,
fill_color='black',
size=12)
show(plot)
bokeh hexagonal topology plot
How can I translate this into a bokeh plot?
Found out how to do it after reaching out to the minisom package author for help. Complete code available here.
from bokeh.colors import RGB
from bokeh.io import curdoc, show, output_notebook
from bokeh.transform import factor_mark, factor_cmap
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure, output_file
hex_centre_col, hex_centre_row = [], []
hex_colour = []
label = []
# define labels
SPECIES = ['Kama', 'Rosa', 'Canadian']
for i in range(weights.shape[0]):
for j in range(weights.shape[1]):
wy = yy[(i, j)] * 2 / np.sqrt(3) * 3 / 4
hex_centre_col.append(xx[(i, j)])
hex_centre_row.append(wy)
hex_colour.append(cm.Blues(umatrix[i, j]))
weight_x, weight_y = [], []
for cnt, i in enumerate(data):
w = som.winner(i)
wx, wy = som.convert_map_to_euclidean(xy=w)
wy = wy * 2 / np.sqrt(3) * 3 / 4
weight_x.append(wx)
weight_y.append(wy)
label.append(SPECIES[t[cnt]-1])
# convert matplotlib colour palette to bokeh colour palette
hex_plt = [(255 * np.array(i)).astype(int) for i in hex_colour]
hex_bokeh = [RGB(*tuple(rgb)).to_hex() for rgb in hex_plt]
output_file("resulting_images/som_seed_hex.html")
# initialise figure/plot
fig = figure(title="SOM: Hexagonal Topology",
plot_height=800, plot_width=800,
match_aspect=True,
tools="wheel_zoom,save,reset")
# create data stream for plotting
source_hex = ColumnDataSource(
data = dict(
x=hex_centre_col,
y=hex_centre_row,
c=hex_bokeh
)
)
source_pages = ColumnDataSource(
data=dict(
wx=weight_x,
wy=weight_y,
species=label
)
)
# define markers
MARKERS = ['diamond', 'cross', 'x']
# add shapes to plot
fig.hex(x='y', y='x', source=source_hex,
size=100 * (.95 / np.sqrt(3)),
alpha=.4,
line_color='gray',
fill_color='c')
fig.scatter(x='wy', y='wx', source=source_pages,
legend_field='species',
size=20,
marker=factor_mark(field_name='species', markers=MARKERS, factors=SPECIES),
color=factor_cmap(field_name='species', palette='Category10_3', factors=SPECIES))
# add hover-over tooltip
fig.add_tools(HoverTool(
tooltips=[
("label", '#species'),
("(x,y)", '($x, $y)')],
mode="mouse",
point_policy="follow_mouse"
))
show(fig)
Area charts in altair are automatically stacked when the x-axis is time. But when x belongs to a quantitative data type, areas are not stacked.
import pandas as pd
import numpy as np
import string
import altair as alt
np.random.seed(394378)
n_series = 3
series_names = list(string.ascii_lowercase)[:n_series]
x_range = range(0, 21)
df = pd.DataFrame({"Series": np.tile(series_names, len(x_range)),
"X": np.repeat(x_range, n_series),
"Y": np.random.poisson(lam = 10, size = len(x_range) * n_series)})
alt.Chart(df).\
mark_area().\
encode(
x = "X:Q",
y = "Y:Q",
color = "Series:N"
)
How can I stack areas?
You can do this by passing stack=True to the y encoding. For example:
alt.Chart(df).\
mark_area().\
encode(
x = "X:Q",
y = alt.Y("Y:Q", stack=True),
color = "Series:N"
)
I can plot a world map with geopandas with:
world = geopandas.read_file(geopandas.datasets.get_path('naturalearth_lowres'))
fig, ax = plt.subplots()
world.plot(ax=ax, color=(0.8,0.5,0.5))
and it works fine, but I would like to center the map on a different longitude than the Prime Meridian. How do I do this?
This is how you can do it:
from shapely.geometry import LineString
from shapely.ops import split
from shapely.affinity import translate
import geopandas
world = geopandas.read_file(geopandas.datasets.get_path('naturalearth_lowres'))
def shift_map(shift):
shift -= 180
moved_map = []
splitted_map = []
border = LineString([(shift,90),(shift,-90)])
for row in world["geometry"]:
splitted_map.append(split(row, border))
for element in splitted_map:
items = list(element)
for item in items:
minx, miny, maxx, maxy = item.bounds
if minx >= shift:
moved_map.append(translate(item, xoff=-180-shift))
else:
moved_map.append(translate(item, xoff=180-shift))
gdf = geopandas.GeoDataFrame({"geometry":moved_map})
fig, ax = plt.subplots()
gdf.plot(ax=ax)
plt.show()
In the first step, you create your world and split it on a pre defined border of yours.
Then you get the bounds of all elements and check if the bounds match your desired shift. Afterwards you translate every element bigger than your border to the left side of the map and move all other elements to the right side, so that they aling with +180°.
This gives you for example:
A map shifted by 120°
Like in this question I needed to reset the centre of the map, but I also needed to move scatter plot network node positions that where bound to (long,lat) coordinates too.
I am hoping to save someone some time, as it's probably not obvious initially that to solve this problem you will have to wrangle some unfamiliar types.
Here is a method for shifting both the underlying map and some additional points:
import geopandas
world =
geopandas.read_file(geopandas.datasets.get_path('naturalearth_lowres'))
import matplotlib.pyplot as plt
import geopandas as gpd
from shapely.geometry import LineString
from shapely.ops import split
from shapely.affinity import translate
def shift_geom(shift, gdataframe,pos_all, plotQ=True):
# this code is adapted from answer found in SO
# will be credited here: ???
shift -= 180
moved_geom = []
splitted_geom = []
border = LineString([(shift,90),(shift,-90)])
for row in gdataframe["geometry"]:
splitted_geom.append(split(row, border))
for element in splitted_geom:
items = list(element)
for item in items:
minx, miny, maxx, maxy = item.bounds
if minx >= shift:
moved_geom.append(translate(item, xoff=-180-shift))
else:
moved_geom.append(translate(item, xoff=180-shift))
# got `moved_geom` as the moved geometry
moved_geom_gdf = gpd.GeoDataFrame({"geometry": moved_geom})
# can change crs here
if plotQ:
fig1, ax1 = plt.subplots(figsize=[8,6])
moved_geom_gdf.plot(ax=ax1)
plt.show()
df = pd.DataFrame({'Latitude': [xy[1] for xy in pos_all.values()],
'Longitude': [xy[0] for xy in pos_all.values()]})
gdf = geopandas.GeoDataFrame(df, geometry=geopandas.points_from_xy(df.Longitude, df.Latitude))
border2 = LineString([(shift,90),(shift,-90)])
geom = gdf.geometry.values
moved_map_points = []
moved_map_dict = {}
for element,key in zip(geom,list(pos_all.keys())):
if float(element.x) >= shift:
moved_map_points.append(translate(element, xoff=-180-shift))
else:
moved_map_points.append(translate(element, xoff=180-shift))
moved_map_dict[key] = (moved_map_points[-1].x,moved_map_points[-1].y)
return moved_geom_gdf,moved_map_dict
In this context pos_all are networkx node positions made of [(lat,long)]
shifted_world,moved_map_points = shift_geom(300, world,pos_all,plotQ= False)
I've been struggling with 3D ploting some coordinates since a long ago and now I'm really frustrated, so your help will be really appreciated.
I'd like to plot the facade of a building from a CityGML file (which is originally simply an XML file). I have no problem with parsing the CityGML file using XML.etree and extracting the coordinates. But after extracting the coordinates, I cann't find a way to 3D plot them.
from xml.etree import ElementTree as ET
tree = ET.parse('3860_5819__.gml')
root = tree.getroot()
namespaces = {
'ns0': "http://www.opengis.net/citygml/1.0",
'ns1': "http://www.opengis.net/gml",
'ns2': "http://www.opengis.net/citygml/building/1.0"
}
c = 0
wallString = []
for wallSurface in root.findall('.//ns2:WallSurface', namespaces):
for posList in wallSurface.findall('.//ns1:posList', namespaces):
c += 1
wallCoordinates = posList.text
wallCoordinates = wallCoordinates.split()
wallString.append(wallCoordinates)
verts = []
for string in wallString:
X, Y, Z = [], [], []
c = 0
for value in string:
value = float(value)
if c % 3 == 0:
X.append(value)
elif c % 3 == 1:
Y.append(value)
else:
Z.append(value)
c += 1
if c > len(string) - 3:
break
vert = [list(zip(X, Y, Z))]
verts.append(vert)
from mpl_toolkits.mplot3d import Axes3D
from mpl_toolkits.mplot3d.art3d import Poly3DCollection
import matplotlib.pyplot as plt
fig = plt.figure()
ax = Axes3D(fig)
for vert in verts:
ax.add_collection3d(Poly3DCollection(vert))
ax.autoscale_view(tight=True, scalex=True, scaley=True, scalez=True)
plt.show()
plt.close()
Could the problem be that I can't make my plot "tight"? And if not, is there something I'm doing fundamentally wrong?
If relevant, the CityGML file in this case is related to TU Berlin center of entrepreneurship which can be taken from here.
Just realized that nothing was wrong with the main part of the code. The only issue was that the axis were not set. I change the plot part like this:
import matplotlib.pyplot as plt
import mpl_toolkits.mplot3d as mpl3
fig = plt.figure()
ax = mpl3.Axes3D(fig)
for vert in verts:
poly = mpl3.art3d.Poly3DCollection(vert)
ax.add_collection3d(poly)
ax.set_xlim3d(left=386284-50,right=386284+50)
ax.set_ylim3d(bottom=5819224-50, top=5819224+50)
ax.set_zlim3d(bottom=32-10,top=32+20)
plt.show()
plt.close()
Now it works perfectly fine.
Regards, I would like to ask about Python's FuncAnimation.
In the full code, I was trying to animate bar plots (for integral illustration). The animated output from
ani = FuncAnimation(fig, update, frames=Iter, init_func = init, blit=True);
plt.show(ani);
looks fine.
But the output video from
ani.save("example_new.mp4", fps = 5)
gives a slightly different version from the animation showed in Python. The output gives a video of 'superposition version' compared to the animation. Unlike the animation : in the video, at each frame, the previous plots kept showing together with the current one.
Here is the full code :
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.animation import FuncAnimation
fig, ax = plt.subplots()
Num = 20
p = plt.bar([0], [0], 1, color = 'b')
Iter = tuple(range(2, Num+1))
xx = list(np.linspace(0, 2, 200)); yy = list(map(lambda x : x**2,xx));
def init():
ax.set_xlim(0, 2)
ax.set_ylim(0, 4)
return (p)
def update(frame):
w = 2/frame;
X = list(np.linspace(0, 2-w, frame+1));
Y = list(map(lambda x: x**2, X));
X = list(map(lambda x: x + w/2,X));
C = (0, 0, frame/Num);
L = plt.plot(xx , yy, 'y', animated=True)[0]
p = plt.bar(X, Y, w, color = C, animated=True)
P = list(p[:]); P.append(L)
return P
ani = FuncAnimation(fig, update, frames=Iter, init_func = init, interval = 0.25, blit=True)
ani.save("examplenew.mp4", fps = 5)
plt.show(ani)
Any constructive inputs on this would be appreciated. Thanks. Regards, Arief.
When saving the animation, no blitting is used. You can turn off blitting, i.e. blit=False and see the animation the same way as it is saved.
What is happening is that in each iteration a new plot is added without the last one being removed. You basically have two options:
Clear the axes in between, ax.clear() (then remember to set the axes limits again)
update the data for the bars and the plot. Examples to do this:
For plot: Matplotlib Live Update Graph
For bar: Dynamically updating a bar plot in matplotlib