CODEWITHSUNDEEP
pythonwebvisualizationdata-visualizationbokeh
sharkmas
sharkmas

Reputation: 285

Embed simple interactive data visualisation in website (Bokeh? Other platforms?)

I've built quite a few data visualisation tools using Python before, relying on the desktop-based GUI tools for user interaction (e.g. Qt), but am now trying to make something more widely accessible in the form of a website.

I'm afraid I have limited web development experience however, and wonder if anyone could recommend platforms / techniques to consider for this project please?

My target is a simple website with a drop-down menu. When the user makes a selection from the drop-down, the relevant data is loaded from a .txt file on the web server and plotted within the website. Having access to tools to zoom and a cursor to indicate the data at mouse position are valuable.

In the future I'd like to extend this to add more complicated features (e.g. user input box, with plotting code executed depending on the input), but for now, achieving the simple case above would be great.

I've found positive comments about Bokeh online, which looks good and seems to support Python code. However, while the examples show me how to plot a single case, I can't work out how to make a drop-down menu in a website that dynamically updates the plotted data.

I aim for the code to be fast, and potentially accesses by numerous web users. If other better options than Bokeh are available, I'm very open to any suggestions or thoughts.

Many thanks

Upvotes: 1

Views: 2027

Answers (2)

Louc
Louc

Reputation: 342

From what I know, this is exactly what bokeh is for : visualize data in web browser and have easy user interactivity.

This is a small example to show you how simple this could be done with bokeh :

Let's say you have two csv file with your data :

# a.csv :
Time;myData
1;-2,926
2;-2,892
3;-2,89
...

#b.csv : 
Datation;myData
0,000000;18,432;
10,000000;17,785;
20,000000;17,242;
...

And with a single python script, named 'my_script' :

from bokeh.layouts import row
from bokeh.plotting import figure
from bokeh.models.widgets import Dropdown
from bokeh.models import ColumnDataSource
from bokeh.io import curdoc
import pandas as pd

# callback to load file
def load_file(attr, old, new):
    file = dropdown.value
    print(file)
    df = pd.read_csv(file, sep = ';', header = 0, index_col = 0, decimal = ",")
    print(df)
    source.data = dict(x=df.index.values, y=df['myData'].values)


# configuring dropdow widget
choices = [ ("a.csv", "C:/Test/a.csv"), ("b.csv", "C:/Test/b.csv")]
dropdown = Dropdown(label="Add condition", menu=choices)
dropdown.on_change('value', load_file)

# configuring plot
plot = figure(tools="box_zoom, hover, reset")
source = ColumnDataSource(dict(x = [], y=[]))
plot.scatter(x="x", y="y", source=source)

# add widget to bokeh root document
curdoc().add_root(row(dropdown, plot))

And now you have to launch bokeh server, for example with the command

bokeh server --show my_script.py

--show launch directly a web browser to the url http://localhost:5006/stackoverflow

You can also have other possibilities to embedded bokeh html code into your html code. But, to get the file loading working with this method, you still need the bokeh server running. There are some example where you can upload data directly from web browser, but it is another story

Please not that I choose to load data with pandas, but there are others methods. You also certainly need to adapt the code to load the data with the parameters in pd.read_csv()

Upvotes: 1

deadbug
deadbug

Reputation: 444

There are number of tools available out there. You could consider below:

Zero coding required :

For Developers: JavaScript libraries

If you prefer Python, consider :

For R:

Upvotes: 3

Related Questions