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