def CreateGauge(percentage, scaleInfo):
gaugeFig = Plot(x_range=Range1d(start=-1.25, end=1.25), y_range=Range1d(start=-1.25, end=1.25), plot_width=250, plot_height=250)
gaugeFig.title.text = "Scale " + str(scaleInfo.Num) + ": " + scaleInfo.Name
gaugeFig.title.align = 'center'
gaugeFig.toolbar_location = None
gaugeFig.border_fill_color = "#101010"
gaugeFig.background_fill_color = "#101010"
gaugeFig.title.text_color = "white"
gaugeFig.outline_line_color = None
glyph = AnnularWedge(x=0, y=0, inner_radius=.7, outer_radius=1, start_angle=math.pi / 2 - (2 * math.pi),
end_angle=math.pi / 2, fill_color="#444444", name="back")
glyph2 = AnnularWedge(x=0, y=0, inner_radius=.7, outer_radius=1, start_angle=math.pi / 2 - (2 * math.pi * percentage),
end_angle=math.pi / 2, fill_color=gaugeColors[(scaleInfo.Num - 1) % len(gaugeColors)], name="front")
PercentageText = Label(text_align='center', text=str(round((percentage * scaleInfo.MaxCapacity), 1)),text_color = 'white',
text_font_size="35px")
lowerText = Label(text_align='center', y=-0.25, text=scaleInfo.Units, text_color='white')
lowerText2 = Label(text_align='center', y=-0.48, text="Of " + str(scaleInfo.MaxCapacity), text_color='white')
gaugeFig.add_glyph(glyph)
gaugeFig.add_glyph(glyph2)
gaugeFig.add_layout(PercentageText)
gaugeFig.add_layout(lowerText)
gaugeFig.add_layout(lowerText2)
return gaugeFig
def render_minimal_graph():
print('rendering minimal graph')
N = 8
node_indices = list(range(N))
plot = Plot(
sizing_mode='stretch_both',
x_range=(-1.1, 1.1), y_range=(-1.1, 1.1),
tools="", toolbar_location=None)
graph_renderer = GraphRenderer()
graph_renderer.node_renderer.glyph = Oval(
height=0.1, width=0.2, fill_color="fill_color", )
graph_renderer.node_renderer.data_source.data = dict(
index=node_indices,
fill_color=Spectral8)
graph_renderer.edge_renderer.data_source.data = dict(
start=[0]*N,
end=node_indices)
# start of layout code (this is the part networkX helps to build!
# the layout...)
circ = [i*2*math.pi/8 for i in node_indices]
x = [math.cos(i) for i in circ]
y = [math.sin(i) for i in circ]
graph_layout = dict(zip(node_indices, zip(x, y)))
graph_renderer.layout_provider = StaticLayoutProvider(
graph_layout=graph_layout)
plot.axis.axis_line_width = 0
plot.grid.grid_line_width = 0
plot.xaxis.major_tick_line_color = None # turn off x-axis major ticks
plot.xaxis.minor_tick_line_color = None # turn off x-axis minor ticks
plot.yaxis.major_tick_line_color = None # turn off y-axis major ticks
plot.yaxis.minor_tick_line_color = None # turn off y-axis minor ticks
plot.xaxis.major_label_text_color = None # Remove label x axis
plot.yaxis.major_label_text_color = None # Remove label x axis
plot.border_fill_color = None
plot.outline_line_color = None
plot.renderers.append(graph_renderer)
return plot
def plotGauge(speedvalue, offset = 0,
name = '', unit = '', color = '', maxValue = 0,
major_step = 2, minor_step = .5):
'''
draw a gauge for show online data
:param speedvalue: data value for a especific channel
:param offset: offset is the minimum value of the channel
:param name: name of the channel
:param unit: units of the data value
:param color: color of the gauge
:param maxValue: max value of the chaneel
:param major_step: step for points inside the gauge
:param minor_step: step for points inside the gauge
:return: figure plot in bokeh engine
'''
maxValue = maxValue - offset
xdr = Range1d(start=-1.25, end=1.25)
ydr = Range1d(start=-1.25, end=1.25)
renderer = 'webgl'
plt = Plot(x_range=xdr, y_range=ydr, plot_width=300, plot_height=300, output_backend=renderer,)
plt.toolbar_location = None
plt.outline_line_color = None
plt.add_glyph(Circle(x=0, y=0, radius=1.00, fill_color="white", line_color="black"))
plt.add_glyph(Circle(x=0, y=0, radius=0.05, fill_color="gray", line_color="black"))
plt.add_glyph(Text(x=0, y=+0.15, text=[unit], text_color=color, text_align="center", text_baseline="bottom",
text_font_style="bold"))
plt.add_glyph(Text(x=0, y=-0.15, text=[name], text_color="black", text_align="center", text_baseline="top",
text_font_style="bold"))
add_gauge(plt, 0.75, maxValue, 0.05, +1, color, major_step, minor_step, offset = offset)
valueGliph = Text(x=0, y=-0.6, text=["0"], text_color=color, text_align="center", text_baseline="top")
plt.add_glyph(valueGliph)
a, b = add_needle(plt, speedvalue, offset = offset, max_value = maxValue)
return plt, a, b, valueGliph
def render_from_fb_combined():
print('rendering from facebook_combined.txt')
df = pd.read_csv('facebook_combined.txt', sep=" ", header=None)
G = nx.from_pandas_edgelist(df.head(1000), 0, 1)
print(nx.info(G))
plot = Plot(background_fill_color="white",
sizing_mode="stretch_both",
x_range=Range1d(-0.5, 0.5), y_range=Range1d(-0.5, 0.5))
graph_renderer = from_networkx(
G, nx.spring_layout, scale=1, center=(0, 0))
graph_renderer.node_renderer.glyph = Circle(
size=15, fill_color=Spectral4[0])
graph_renderer.edge_renderer.glyph = MultiLine(
line_alpha=0.8, line_width=1)
plot.add_tools(WheelZoomTool())
plot.add_tools(ResetTool())
plot.add_tools(PanTool())
plot.add_tools(HoverTool(
tooltips=[("user", "datracka"), ("url", "https://twitter.com/datracka")]))
plot.add_tools(PointDrawTool(
renderers=[], empty_value='black'))
plot.axis.axis_line_width = 0
plot.grid.grid_line_width = 0
plot.xaxis.major_tick_line_color = None # turn off x-axis major ticks
plot.xaxis.minor_tick_line_color = None # turn off x-axis minor ticks
plot.yaxis.major_tick_line_color = None # turn off y-axis major ticks
plot.yaxis.minor_tick_line_color = None # turn off y-axis minor ticks
plot.xaxis.major_label_text_color = None # Remove label x axis
plot.yaxis.major_label_text_color = None # Remove label x axis
plot.border_fill_color = None
plot.outline_line_color = None
plot.renderers.append(graph_renderer)
return plot
from typing import Any, Literal
from bokeh.core.properties import expr, value
from bokeh.document import Document
from bokeh.embed import file_html
from bokeh.models import (Arc, Circle, ColumnDataSource, Plot, PolarTransform,
Range1d, Ray, Text)
from bokeh.resources import INLINE
from bokeh.util.browser import view
xdr = Range1d(start=-1.25, end=1.25)
ydr = Range1d(start=-1.25, end=1.25)
plot = Plot(x_range=xdr, y_range=ydr, width=600, height=600)
plot.toolbar_location = None
plot.outline_line_color = None
start_angle = pi + pi / 4
end_angle = -pi / 4
max_kmh = 250
max_mph = max_kmh * 0.621371
major_step, minor_step = 25, 5
plot.add_glyph(
Circle(x=0, y=0, radius=1.00, fill_color="white", line_color="black"))
plot.add_glyph(
Circle(x=0, y=0, radius=0.05, fill_color="gray", line_color="black"))
plot.add_glyph(
from math import pi, sin, cos from bokeh.document import Document from bokeh.embed import file_html from bokeh.resources import INLINE from bokeh.util.browser import view from bokeh.models.glyphs import Circle, Arc, Ray, Text from bokeh.models import ColumnDataSource, Range1d, Plot xdr = Range1d(start=-1.25, end=1.25) ydr = Range1d(start=-1.25, end=1.25) plot = Plot(x_range=xdr, y_range=ydr, plot_width=600, plot_height=600) plot.toolbar_location = None plot.outline_line_color = None start_angle = pi + pi/4 end_angle = -pi/4 max_kmh = 250 max_mph = max_kmh*0.621371 major_step, minor_step = 25, 5 plot.add_glyph(Circle(x=0, y=0, radius=1.00, fill_color="white", line_color="black")) plot.add_glyph(Circle(x=0, y=0, radius=0.05, fill_color="gray", line_color="black")) plot.add_glyph(Text(x=0, y=+0.15, text=["km/h"], text_color="red", text_align="center", text_baseline="bottom", text_font_style="bold")) plot.add_glyph(Text(x=0, y=-0.15, text=["mph"], text_color="blue", text_align="center", text_baseline="top", text_font_style="bold"))
def plot_data(data_df, connections, year, geoSource_new):
data_df_countries = data_df #.drop_duplicates(subset=None, keep='first', inplace=True)
connections_df = connections
node_source = ColumnDataSource(
data_df_countries[["country_id", "Country", "Longitude", "Latitude"]])
edge_source = ColumnDataSource(connections_df[["start", "end"]])
node_renderer = GlyphRenderer(data_source=node_source,
glyph=node_glyph,
selection_glyph=node_selection,
nonselection_glyph=node_nonselection)
## Create edge_renderer
edge_renderer = GlyphRenderer(data_source=edge_source,
glyph=edge_glyph,
hover_glyph=edge_hover,
selection_glyph=edge_selection,
nonselection_glyph=edge_nonselection)
## Create layout_provider
graph_layout = dict(
zip(data_df_countries.country_id.astype(str),
zip(data_df_countries.Longitude, data_df_countries.Latitude)))
layout_provider = StaticLayoutProvider(graph_layout=graph_layout)
## Create graph renderer
graph = GraphRenderer(edge_renderer=edge_renderer,
node_renderer=node_renderer,
layout_provider=layout_provider,
inspection_policy=NodesAndLinkedEdges(),
selection_policy=NodesAndLinkedEdges())
plot = Plot(x_range=Range1d(-150, 150),
y_range=Range1d(15, 75),
plot_width=800,
plot_height=600,
background_fill_color=Set3_12[4],
background_fill_alpha=0.2)
plot.title.text = "Human Trafficing Visualization for " + str(year)
# plot.add_glyph( geoSource_data, Patches(xs='xs', ys='ys', line_color='grey'
# , line_width=.5, fill_color=Set3_12[6], fill_alpha=0.25))
plot.add_glyph(
geoSource_new,
Patches(xs='xs',
ys='ys',
line_color='grey',
line_width=.2,
fill_color={
'field': 'Tier',
'transform': mapper2
},
fill_alpha=0.25))
plot.renderers.append(graph)
plot.add_layout(LinearAxis(axis_label="Latitude"), "below")
plot.add_layout(LinearAxis(axis_label="Longitude"), "left")
hover = HoverTool(
show_arrow=True, # tooltips= # [("Country Involved: ", "@Country")],
tooltips="""
<div>
<div>
<span style="font-size: 15px;">Country Information </span>
<span style="font-size: 12px; color: #696;">@Destination_Country </span>
</div>
</div>
""",
renderers=[graph])
hover_no_tooltips = HoverTool(tooltips=None, renderers=[graph])
box_zoom = BoxZoomTool()
plot.add_tools(hover, hover_no_tooltips, box_zoom, TapTool(),
BoxSelectTool(), ResetTool(), WheelZoomTool())
plot.toolbar.active_inspect = [hover, hover_no_tooltips]
plot.toolbar.active_drag = box_zoom
plot.outline_line_color = "navy"
plot.outline_line_alpha = 0.3
plot.outline_line_width = 3
plot.add_tile(STAMEN_TONER_LABELS)
return plot
def visualize_graph_html(nx_graph,
output_dir=None,
title_text='',
layout='kamada_kawai',
should_show=False):
"""
This method visualizes a NetworkX graph using Bokeh.
:param nx_graph: NetworkX graph with node attributes containing image filenames.
:param output_dir: Optional output directory for saving html.
:param title_text: String to be displayed above the visualization.
:param layout: Which layout function to use.
:param should_show: Open the browser to look at the graph.
"""
from bokeh import palettes
from bokeh.io import output_file, show
from bokeh.models import Circle, HoverTool, MultiLine, Plot, Range1d, TapTool
# noinspection PyProtectedMember
from bokeh.models.graphs import from_networkx, NodesAndLinkedEdges, NodesOnly
pos = parse_layout(nx_graph, layout)
hover_tool = HoverTool(
tooltips='<img src="@imgs" height="200" alt="@imgs" width="200"></img>',
show_arrow=False)
plot = Plot(plot_width=800,
plot_height=800,
x_range=Range1d(-1.1, 1.1),
y_range=Range1d(-1.1, 1.1))
if title_text != '':
plot.title.text = title_text
plot.title.align = 'center'
plot.min_border = 0
plot.outline_line_color = None
plot.add_tools(hover_tool, TapTool())
plot.toolbar.logo = None
plot.toolbar_location = None
graph_renderer = from_networkx(nx_graph, pos)
graph_renderer.node_renderer.data_source.data['imgs'] = [
n[1]['img'] for n in nx_graph.nodes(data=True)
]
graph_renderer.node_renderer.glyph = Circle(
size=10, fill_color=palettes.Spectral4[0], line_color=None)
graph_renderer.node_renderer.selection_glyph = Circle(
size=10, fill_color=palettes.Spectral4[2], line_color=None)
graph_renderer.node_renderer.hover_glyph = Circle(
size=10, fill_color=palettes.Spectral4[1], line_color=None)
graph_renderer.edge_renderer.glyph = MultiLine(line_color='#CCCCCC',
line_alpha=0.8,
line_width=1.5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(
line_color=palettes.Spectral4[2], line_width=2)
graph_renderer.selection_policy = NodesAndLinkedEdges()
graph_renderer.inspection_policy = NodesOnly()
plot.renderers.append(graph_renderer)
if output_dir:
ensure_dir_exists(output_dir)
output_file(join(output_dir, 'visualize_graph.html'))
if should_show:
show(plot)
title = "Real Time Taxi Data and Location"
google_map = gmap(google_api_key,
google_map_options,
title=title,
width=1000,
height=800)
google_map.yaxis[0].axis_label = 'Latitude'
google_map.xaxis[0].axis_label = 'Longitude'
google_map.toolbar.logo = None
#Whitespace message plot
whitespace_plot = Plot(plot_width=40,
plot_height=75,
min_border=0,
toolbar_location=None)
whitespace_plot.outline_line_color = None
header_text = Div(text="""<h1>GINQO Real-time Kafka Dashboard</h1>
Data streamed using Confluent Cloud and ksqlDB.<br>
Dashboard webserver built using Python.
""",
width=1780,
height=100)
#Plot for KPIs
kpi_dimension_h = 200
kpi_dimension_w = 300
kpi_drivers_plot = Plot(plot_width=kpi_dimension_w,
plot_height=kpi_dimension_h,
min_border=0,
text_color='grey',
text_font_size='50pt',
text_align='center',
text_baseline='ideographic')
p = Plot(frame_height=500, frame_width=300)
p.add_glyph(source, glyphs)
p.add_glyph(source, glyphs_text)
p.title.align = 'center'
p.y_range.end = 115 # setting it above 100 prevents number from getting cut off
p.y_range.start = 0
p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None
p.xaxis.visible = False
p.yaxis.visible = True
p.outline_line_color = 'white'
# show(vform(radio_button_group))
# Defining layout
layout = row(
column(age_radio, sex_radio, country_dropdown, edu_dropdown,
column(sliders)), p)
# Calling layout
bokeh_script, bokeh_div = components(layout)
if __name__ == '__main__':
app.run(debug=True)
def plot_data(data_df, connections, year, geoSource_new, df):
d_yr = df[df['Years'] == year]
data_df_countries = d_yr.merge(data_df,
left_on='Origin_Country',
right_on='Country')
#data_df_countries = node_dt #.drop_duplicates(subset=None, keep='first', inplace=True)
connections_df = connections
# node_source = ColumnDataSource(data_df_countries[["country_id","Country", "Longitude", "Latitude"]])
node_source = ColumnDataSource(data_df_countries)
edge_source = ColumnDataSource(connections_df[["start", "end"]])
node_renderer = GlyphRenderer(data_source=node_source,
glyph=node_glyph,
selection_glyph=node_selection,
nonselection_glyph=node_nonselection)
## Create edge_renderer
edge_renderer = GlyphRenderer(data_source=edge_source,
glyph=edge_glyph,
hover_glyph=edge_hover,
selection_glyph=edge_selection,
nonselection_glyph=edge_nonselection)
## Create layout_provider
graph_layout = dict(
zip(data_df_countries.country_id.astype(str),
zip(data_df_countries.Longitude, data_df_countries.Latitude)))
layout_provider = StaticLayoutProvider(graph_layout=graph_layout)
## Create graph renderer
graph = GraphRenderer(edge_renderer=edge_renderer,
node_renderer=node_renderer,
layout_provider=layout_provider,
inspection_policy=NodesAndLinkedEdges(),
selection_policy=NodesAndLinkedEdges())
plot = Plot(x_range=Range1d(-150, 150),
y_range=Range1d(15, 75),
plot_width=800,
plot_height=600,
background_fill_color=Set3_12[4],
background_fill_alpha=0.2)
plot.title.text = "Human Trafficing Visualization for " + str(year)
plot.add_glyph(
geoSource_new,
Patches(xs='xs',
ys='ys',
line_color='grey',
line_width=.2,
fill_color={
'field': 'Tier',
'transform': mapper2
},
fill_alpha=0.40))
plot.renderers.append(graph)
plot.add_layout(LinearAxis(axis_label="Latitude"), "below")
plot.add_layout(LinearAxis(axis_label="Longitude"), "left")
# tooltips="""
# <div>
# <div>
# <span style="font-size: 17px; font-weight: bold;">@desc</span>
# <span style="font-size: 15px; color: #966;">[$index]</span>
# </div>
# <div>
# <span style="font-size: 15px;">Country Involved</span>
# <span style="font-size: 10px; color: #696;">@Country</span>
# </div>
# </div>
# """,
hover = HoverTool(
show_arrow=True, # tooltips= # [("Country Involved: ", "@Country")],
tooltips="""
<div>
<div>
<span style="font-size: 13px;">Country Info</span>
<span style="font-size: 12px; color: #696;">@Destination_Country, @Type_Of_Trafficking</span>
</div>
</div>
""",
renderers=[node_renderer],
name='Test')
hover_no_tooltips = HoverTool(tooltips=None, renderers=[graph])
box_zoom = BoxZoomTool()
plot.add_tools(hover, hover_no_tooltips, box_zoom, TapTool(),
BoxSelectTool(), ResetTool(), WheelZoomTool())
plot.toolbar.active_inspect = [hover, hover_no_tooltips]
plot.toolbar.active_drag = box_zoom
plot.outline_line_color = "navy"
plot.outline_line_alpha = 0.3
plot.outline_line_width = 1
select_overlay = plot.select_one(BoxSelectTool).overlay
select_overlay.fill_color = "firebrick"
select_overlay.line_color = None
zoom_overlay = plot.select_one(BoxZoomTool).overlay
zoom_overlay.line_color = "olive"
zoom_overlay.line_width = 3
zoom_overlay.line_dash = "solid"
zoom_overlay.fill_color = None
plot.add_tile(STAMEN_TONER_LABELS)
return plot
