Initial commit

Author: broeder-j

README.md

@@ -1,2 +1,53 @@
-# survey_dashboard
-A dashboard build with bokeh to provide interative data visualization and exploration of survey results.
+# Survey dashboard
+
+A dashboard to display survey data in an interactive way.
+
+## Overview
+
+A dashboard using bokeh sever, developed to display data from HMC surveys in an interactive explorer way.
+
+## Installation
+
+
+## Usage
+
+
+* Navigate to `http://localhost:8000/` in your browser.
+
+
+## Development
+
+To embed the dashboard into any website, first you have to host a bokeh server with this application somewhere and then you can embed it with bokehs `sever_document` function [see](https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#app-documents)
+
+Do steps under `usage` above, but for a public exposed URL.
+
+Add the code from 'script' to you website:
+
+```python
+from bokeh.embed import server_document
+script = server_document("url_to_running_server")
+script
+```
+
+## Copyright and Licence
+
+See [LICENSE](./LICENSE).
+
+### Main used libraries and dependencies
+
+The following libraries are used directly (i.e. not only transitively) in this project:
+
+
+## Acknowledgements
+
+<div>
+<img style="vertical-align: middle;" alt="HMC Logo" src="https://github.com/Materials-Data-Science-and-Informatics/Logos/raw/main/HMC/HMC_Logo_M.png" width=50% height=50% />
+&nbsp;&nbsp;
+<img style="vertical-align: middle;" alt="FZJ Logo" src="https://github.com/Materials-Data-Science-and-Informatics/Logos/raw/main/FZJ/FZJ.png" width=30% height=30% />
+</div>
+<br />
+
+This project was developed at the Institute for Materials Data Science and Informatics
+(IAS-9) of the Jülich Research Center and funded by the Helmholtz Metadata Collaboration
+(HMC), an incubator-platform of the Helmholtz Association within the framework of the
+Information and Data Science strategic initiative.

dashboard/__init__.py

@@ -0,0 +1,7 @@
+All
+AST
+Earth & Environment
+Energy
+Health
+Information
+Matter

dashboard/data/HMC_community_survey2021_merged_all_replies.csv

@@ -0,0 +1,5 @@
+Question 1
+Question 2
+Question 3, this is longer
+Question 4, this is longer still, Why did I do this?
+Question 5, this is way to long and should probly be shortened, or it is not displayed well I guess. But anyway it should be confirmed anyhow. Thanks!

dashboard/data/filters.txt

@@ -0,0 +1,41 @@
+
+<style>
+    h1 {
+        margin: 1em 0 0 0;
+        color: #2e484c;
+        font-family: 'Julius Sans One', sans-serif;
+        font-size: 1.8em;
+        text-transform: uppercase;
+    }
+    a:link {
+        font-weight: bold;
+        text-decoration: none;
+        color: #0d8ba1;
+    }
+    a:visited {
+        font-weight: bold;
+        text-decoration: none;
+        color: #1a5952;
+    }
+    a:hover, a:focus, a:active {
+        text-decoration: underline;
+        color: #9685BA;
+    }
+    p {
+        font: "Libre Baskerville", sans-serif;
+        text-align: justify;
+        text-justify: inter-word;
+        width: 80%;
+        max-width: 800;
+    }
+    
+    </style>
+    
+    <h1>The HMC Survey explorer</h1>
+    
+    <p>
+    Explorer interactively the HMC 2021 Survey results.
+    Interact with the visualizations and widgets on the left to explorer the data.
+    </p>
+    <p>
+    <br />

dashboard/data/questions.txt

@@ -0,0 +1,128 @@
+# myapp.py
+
+import random
+
+import os
+from random import randint
+from os.path import dirname, join
+
+from bokeh.layouts import column, row
+from bokeh.models import Button
+from bokeh.palettes import RdYlBu3
+from bokeh.plotting import curdoc
+from bokeh.models import ColumnDataSource, Div, Select
+from bokeh.plotting import figure as bokeh_figure
+from bokeh.models import CheckboxButtonGroup, CustomJS
+from masci_tools.vis.bokeh_plots import bokeh_scatter, bokeh_multi_scatter
+from .plots import bokeh_barchart, bokeh_piechart
+
+desc = Div(text=open(join(dirname(__file__), "description.html")).read(), sizing_mode="stretch_width")
+
+pwd = os.getcwd()
+questions = open(join(pwd, 'dashboard/data/questions.txt')).read().split('\n')
+QUESTION_MAP = {question : i for i, question in enumerate(questions)}
+
+question_select = Select(title="Question", value="Question 1",
+               options=questions)
+filter_select = Select(title="Data Filter", value="All",
+               options=open(join(pwd, 'dashboard/data/filters.txt')).read().split('\n'))
+
+#LABELS = open(join(pwd, 'dashboard/data/filters.txt')).read().split('\n')
+
+#filter_select = CheckboxButtonGroup(labels=LABELS, active=[0, 1])
+#filter_select.js_on_click(CustomJS(code="""
+#    console.log('checkbox_button_group: active=' + this.active, this.toString())
+#"""))
+chart_select = Select(title="Chart type", value="bar",
+               options=['bar', 'pie'])
+
+# Controls 2
+question_select2 = Select(title="Question X-Axis", value="Question 1",
+               options=questions)
+question_select3 = Select(title="Question Y-Axis", value="Question 2",
+               options=questions)
+
+TOOLTIPS=[
+    ("Title", "@title"),
+    ("Answer", "@x"),
+    ("Number of Answers", "@y")
+]
+
+
+x = [str(i) for i in range(7)]
+xs = [x,x,x,x,x]
+#xs = [[f'1 pli bla blub {i}' for i in x], [f'2 pli bla blub {i}' for i in x], [f'3 pli bla blub {i}' for i in x], [f'4 pli bla blub {i}' for i in x], [f'5 pli bla blub {i}' for i in x]]
+ys = [[randint(0, 1200) for i in x], [randint(0, 1200) for i in x], [randint(0, 1200) for i in x],[randint(0, 1200) for i in x], [randint(0, 1200) for i in x]]
+
+
+
+#fig = bokeh_figure(height=600, width=700, title="", toolbar_location='right', tooltips=TOOLTIPS, sizing_mode="scale_both")
+source = ColumnDataSource(data=dict(value=xs[0], counts=ys[0]))
+source2 = ColumnDataSource(data=dict(value=xs[1], counts=ys[1]))
+
+fig = bokeh_barchart(source, factors=xs[0])
+fig2 = bokeh_barchart(source2, factors=xs[1])
+
+#fig2 = bokeh_multi_scatter(source2, marker_size=[int(x)+6 for x in xs[1])
+
+
+def select_data():
+    """Select the data to display"""
+    question = question_select.value
+    index = QUESTION_MAP[question]
+    selected = ColumnDataSource(data=dict(value=xs[index], counts=ys[index], factors=xs[index]))#, title=question))
+    return selected
+
+def select_data2():
+    """Select the data to display"""
+    question = question_select2.value
+    question2 = question_select3.value
+    index = QUESTION_MAP[question]
+    selected = ColumnDataSource(data=dict(value=xs[index], counts=ys[index], factors=xs[index]))#, title=question))
+    return selected
+
+
+
+def select_chart():
+    """Select how the data should be displayed"""
+    charttype = chart_select.value.strip()
+    return charttype
+
+def update():
+    """Update the charts"""
+    df = select_data()
+    charttype = select_chart()
+    
+    source.data = dict(value=df.data['value'], counts=df.data['counts'])
+    
+    if charttype == 'pie':
+        fig = bokeh_piechart(source)#, figure=figure)
+        row1.children[1] = fig
+    else:
+        fig = bokeh_barchart(source, factors=df.data['factors'])#, figure=figure)
+        row1.children[1] = fig
+    #show(fig)
+
+def update2():
+    """Update the charts"""
+    df = select_data2()    
+    source2.data = dict(value=df.data['value'], counts=df.data['counts'])
+    fig2 = bokeh_barchart(source2, factors=df.data['factors'])
+
+controls = [question_select, filter_select, chart_select]
+
+inputs = column(*controls, width=200)
+row1 = row(inputs, fig)
+for control in controls:
+    control.on_change('value', lambda attr, old, new: update())
+first = column(desc, row1 , sizing_mode="scale_both")
+
+
+controls2 = [question_select2, question_select3]
+for control in controls2:
+    control.on_change('value', lambda attr, old, new: update2())
+inputs2 = column(*controls2, width=200)
+layout = column(first, row(inputs2, fig2), sizing_mode="scale_both")
+
+curdoc().add_root(layout)
+curdoc().title = "HMC Survey Dashboard"

dashboard/description.html

@@ -0,0 +1,128 @@
+
+import numpy as np
+from bokeh.models import ColumnDataSource
+from bokeh.plotting import figure as bokeh_figure
+from bokeh.palettes import Category20c
+from bokeh.transform import factor_cmap
+from bokeh.transform import cumsum
+from bokeh.models import FactorRange
+
+
+# for tests
+#import pandas as pd
+#import random
+#from bokeh.io import output_notebook, show, push_notebook
+
+#x = [str(i) for i in range(7)]
+#xs = [x,x,x,x,x]
+#xlabels = [[f'1 pli bla blub {i}' for i in x], [f'2 pli bla blub {i}' for i in x], [f'3 pli bla blub {i}' for i in x], [f'4 pli bla blub {i}' for i in x], [f'5 pli bla blub {i}' for i in x]]
+#ys = [[random.randint(0, 1200) for i in x], [random.randint(0, 1200) for i in x], [random.randint(0, 1200) for i in x],[random.randint(0, 1200) for i in x], [random.randint(0, 1200) for i in x]]
+
+# bokeh bar plot
+def bokeh_barchart(df, x='value', y='counts', factors=None, figure=None, title='', width=0.9,  xlabel='Answers', ylabel='Number of answers', palette=Category20c, fill_color='color'):
+    """Plot an interactive bar chart with bokeh"""
+    
+    if isinstance(df, ColumnDataSource):
+        xdata = df.data[x]
+        if not 'color' in df.column_names:
+            if not len(xdata) > 20:
+                df.data['color'] = Category20c[len(xdata)] # ! if len(xdata)>20 this fails
+    else:
+        xdata = df[x]
+        if not 'color' in df.columns:
+            df['color'] = Category20c[len(xdata)] # ! if len(xdata)>20 this fails
+
+    if figure is None:
+        if factors is not None:
+            fig = bokeh_figure(plot_height=600, plot_width=600,
+               title=title,
+               toolbar_location='right',
+               x_range=FactorRange(factors=factors),
+               tools='',#'hover',
+               tooltips=[('Data', f'@{x}'), ('Count', f'@{y}')])
+        else:
+            fig = bokeh_figure(plot_height=600, plot_width=600,
+               title=title,
+               toolbar_location='right',
+               tools='',#'hover',
+               tooltips=[('Data', f'@{x}'), ('Count', f'@{y}')])
+    else:
+        fig = figure
+    #if factors is not None:
+    #    fig.x_range=FactorRange(factors=factors)
+    
+    fig.vbar(x=x, top=y, width=width, source=df, line_color="white", fill_color=fill_color)#factor_cmap('x', palette=palette, factors=factors, start=1, end=2))
+    fig.y_range.start = 0
+    fig.x_range.range_padding = 0.1
+    fig.xaxis.major_label_orientation = 1
+    fig.xgrid.grid_line_color = None
+    fig.yaxis.axis_label = ylabel
+    fig.xaxis.axis_label = xlabel
+
+    return fig
+
+
+# test
+#df_test = pd.DataFrame(data=dict(value=xs[0], counts=ys[0]))
+#fig = bokeh_barchart(df_test, factors=xs[0])
+#show(fig)
+
+# test2
+#counts2 = sum(zip(*ys), ())
+#factors = [(str(ques), ans) for ques in range(len(xs)) for ans in xs[0]] # factors have to be unique, and strings
+#df_test3 = ColumnDataSource(data=dict(value=factors, counts=counts2))
+#palette = Category20c[len(ys[0])]
+#fig = bokeh_barchart(df_test3, factors=factors, fill_color=factor_cmap('value', palette=palette, factors=xs[0], start=1, end=2))
+#show(fig)
+
+
+# bokeh piechart    
+def bokeh_piechart(df, x='value', y='counts', figure=None, radius=0.8, title=''):
+    """Draw an interactive piechart with bokeh"""
+    
+    from math import pi
+
+    if isinstance(df, ColumnDataSource):
+        ydata = df.data[y]
+        if not 'color' in df.column_names:
+            if not len(ydata) > 20:
+                df.data['color'] = Category20c[len(ydata)] # ! if len(xdata)>20 this fails
+    else:
+        ydata = df[y]
+        if not 'color' in df.columns:
+            df['color'] = Category20c[len(ydata)] # ! if len(xdata)>20 this fails
+
+    ydata = np.array(ydata)
+    df.data['percent'] = ydata / sum(ydata)
+    df.data['angle'] = ydata / sum(list(ydata)) * 2 * pi
+
+    if figure is None:
+        fig = bokeh_figure(plot_height=600, plot_width=600,
+               title=title,
+               toolbar_location='right',
+               tools='',#hover',
+               tooltips=[('Data', f'@{x}'),
+                         ('Percent', '@percent{0.00%}'), 
+                         ('Count', f'@{y}')])
+    else:
+        fig = figure
+    #fig.add_layout(Legend(), 'right')
+    fig.wedge(x=0,
+            y=1,
+            radius=radius,
+            start_angle=cumsum('angle', include_zero=True),
+            end_angle=cumsum('angle'),
+            line_color='white',
+            fill_color='color',
+            legend_field='xlabel',
+            source=df)
+    
+    fig.axis.axis_label = None
+    fig.axis.visible = False
+    fig.grid.grid_line_color = None
+    return fig
+
+# test
+#df_test = pd.DataFrame(data=dict(value=xs[0], counts=ys[0], xlabel=xs[0]))
+#fig = bokeh_piechart(df_test)
+#show(fig)