Here is an example cytoscape graph that I created using this site as reference here
I was wondering if its possible to show the tooltips when hovering on each node in a graph in the same way that plotly can do to its graphs (like this)
Dash Cytoscape does not have a built-in tooltip. It's possible to use hover callbacks (documented in the event callback guide) to update the content of a separate component (such as a html.P on the side). However that will not behave the same way as a tooltip.
You might also be able to build a custom component (using the component boilerplate) that follows your cursor and display custom information (given by the hoverData prop) whenever it is updated by a hover callback. However, that would require knowledge of JavaScript and React, which can be learned from the React for Python developers primer.
Related
If an EXCEL chart is pasted into a PowerPoint presentation as an EXCEL object, it is possible to hover the mouse over the line and see it's value. My boss likes this feature. I don't like having to do charts in EXCEL.
It is possible to get the same effect with bokeh or plotly, but as far as I am aware, that either relies on a stand-alone html file or a server instance.
Is it possible to paste a bokeh chart into a PowerPoint presentation preserving the feature that when you hover your mouse over a point, the value (and some other information) pops up?
Or is there another python solution that would allow this feature in PowerPoint (ppt is essential) while also allowing plots to be generated via code?
An available option is to create powerpoints with Plotly: https://towardsdatascience.com/embed-interactive-plots-in-your-slides-with-plotly-fde92a5865a and https://evidencen.com/how-to-embed-plotly-graphs-in-powerpoint/
Also it seems this question has been asked before and you can hyperlink the HTML source in the .pptx file: Output of Plotly in PowerPoint
yes. it's a hover tool. here is an example
I have an interactive graph generated by Plotly in Python that I saved to an html file using plotly.offline.plot(fig, filename='/tmp/interactiveGraph.html')
I am now trying to embed this interactive graph into some kind of webpage, using either Dash or Django. I'm leaning toward Django at the moment, given that I have an html version of the graph. Which would be better?
My code for the webpage is in a separate file from the code where I am creating the graph.
A lot of the tutorials I've found online just say to add a few lines to the template, but I don't know how to get those lines that they've described.
tl;dr: I'm looking for guidance as how to integrate an html file-for a Plotly interactive graph-with a web python script using Django or Dash
Side Question:
what is the difference between
plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
and what I have above?
Reference:
https://github.com/ricleal/DjangoPlotLy
https://www.pythonsetup.com/how-implement-data-visualization-django-and-plotly/
I would highly reccomend Django, its a great framework. As for this, the best option is to generate the data via JavaScript and Plotly has a great library for this. If you must use python, then Django can be used. Assuming you are familiar with Django, inside of your view you can collect your data and build your graph ( I would reccomend a celery task for something long running like this unless they are small graphs), and you can then collect the return from creating the graph in div format. This will return a string that holds all the needed html and css for the graphs. Put this inside of you get_context_data() method in your view and place it into the dictionary. You can the use that object inside of a template. I have done this before, if you are having a hard time feel free to DM me. Hope this helps some!
In regards to your side question, I believe having False for including JS will make the graph a bit smaller assuming you have an include for the plotly JS library. They might have done this in a newer release to make the graphs faster as they were significantly slower in the browser from python that the JS rendered one.
I've been using Bokeh's datatable, but there are a few things I'd like to do that I don't know how to accomplish using the DataTable class. For example, I don't think it's possible add icons (or any images) to different rows, or setting the table to single selection only. So, I've been thinking about implementing just a HTML table, and writing it with the DIV widget.
However, I'd still like to add interactive features to the table, like buttons, or the icons mentioned above. Then, when an event is generated (e.g. onClick), that event is captured by the Bokeh server, and I can write the handlers in Python to do things such as modifying the data in ColumnDataSource, for example.
Is this possible? Or is there a better way to accomplish this?
Thanks!
I think the approprate way to achieve what you want is to create a custom widget:
Extending Bokeh Documentation
Custom Widget Example
I do not paste here the complete example because it is too long.
I recently discovered plotly and I think it's a great tool to share interactive plots over the internet. Since my research is in audio signal processing, I'd like to use it to convert my matlab/python plots into interactive plots allowing the user to play the different audio signals used to generate the plot.
For instance, if a bar plot shows a bunch of bars corresponding to as many different speech enhancement strategies, I'd like to find a way to play the different audio signals when hovering on the different lines.
I found this example (or here, to open it with codePen) to add custom hover effects to a plotly plot; specifically, the example deals with showing an image when hovering over a bar of the plot. I'd like to have something similar, but triggering an audio playback instead of an image visualization.
How could the code be edited to do this? (e.g. to play a given sound when hovering over one of the bars)
I see following approaches which can work for such visualization:
There is an ability to build own components with dash. Here is a tutorial: react-for-python-developers and cookiecutter generator. As an example here you can find a component with wrapped react-sound: dash_audio_components.
It can be installed and used in "dash"-generated web interface for plotly by the following way:
import dash
import dash_audio_components
import dash_core_components
app = dash.Dash('app-name')
...Set serving locally because this component isn't placed to cdn
app.scripts.config.serve_locally = True
app.layout = html.Div(
children=[
dcc.Graph(
id='chart-id',
figure=<FigureObj>
),
dash_audio_components.DashAudioComponents(
id='audio-player',
url=None,
playStatus='STOPPED'
)
]
)
#app.callback(dash.dependencies.Output('audio-player', 'playStatus'),
[dash.dependencies.Input('chart-id', 'clickData')])
def set_status(click_data):
...Preserve somewhere status of audio-player and return changed state
...hover or unhover events can be handled as well
#app.callback(dash.dependencies.Output('audio-player', 'url'),
[dash.dependencies.Input('chart-id', 'clickData')])
def set_status(click_data):
...Return url from textual information received from click_data
This article describes good practices of sharing some state: Sharing data between callbacks
Another way which can be more applicable for those who
experienced with web development is implementing a separate SPA with react-plotly and passing data to it from service endpoints, here is how you can bind sounds to existing "plotly" click event binding to click events, it can be done on componentDidMount method call or in JSX as callback with "plotly_click" or "plotly_hover" property. There are plenties of React components to play audios. Application blueprint can be generated by 'yeoman' as well for simplicity sake. Codepen example with plotly.js library to handle 'clicks' and 'unhover' events and play sound: codepen plotly
using Bokeh 0.12.6 / Python 3.6:
Is there a way to add a hover tool (similar to bokeh.models.HoverTool for plots) on a bokeh.widgets.DataTable widget? It doesn't look like it's an api feature yet, so I'm looking for some guidance on the best way of achieving this?
Perhaps I can tinker with the final HTML document with Bokeh embedded inline and add a HoverTool javascript object associated with the SlickGrid table?