Code Monkey home page Code Monkey logo

wiz's Introduction

Wiz

Wiz is a web-based app for interactive data visualisation. As part of our original publication, we host a version of Wiz available at anytime at https://wiz.shef.ac.uk/. This repository contains all of the structure needed for users to create their own web apps.

Contributing

We welcome any suggestions or contributions from the community. If we see enough value in community contributions, we will add them here or to the Wiz app as well.

Basic Usage

To run an individual instance on a local machine, ensure that you have installed the necessary python packages,

pip3 install -r requirements.txt

Then simply run the executable index.py.

python3 index.py

By default, the app will then be hosted locally at port 5115. For example, that means that once the command window is running the code, then go to http://127.0.0.1:5115 to see the result.

Folder Descriptions

datasets

Datasets that can be used with Wiz or that can be used to develop your own app.

src

All of the necessary source code for Wiz. The documentation for the structure of the Wiz code is shown below.

Source Code File Organization

Wiz is built modularly. That means that each page has its own folders for layout and a file for callbacks. Going through the folder ...

src/
     assets/
     callbacks/
     functions/
     layouts/

    app.py
    index.py
    requirements.txt

assets

This folder holds all of the external files (styling, etc.) for the app. Dash automatically looks for this folder on the initial load. The only time you have to reference any of the content in here is if you are uploading an image or video.

callbacks

This folder has all of the callbacks. Every callback file is imported in the index.py function. Notice that the names of components in the callbacks correspond to the file/page name that they serve.

functions

Many of the callbacks require lengthy calculations. All of those have been moved to this folder. Each page has its own set of functions. Where possible, commonly used functions are defined separately for conveinience.

layouts

This folder holds all of the layouts. There is a high-level file for each layout that is intuitive to read. For example, the home page layouts/lines.py. It imports the layout features from the other layout folders then assembles the layout to send back to index.py.

import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

from layouts.global_layout import data_table
from layouts.lines_layout import app_navbar, top_row, graph, axis_select, sheet_slider, help_dialog
from functions.global_functions import genSession

##==================================
## Assemble layout
##==================================
out = [
    app_navbar.get(),
    top_row.get(),
    graph.get(),
    axis_select.get(),
    sheet_slider.get(),
    help_dialog.get(),
    data_table.get('lines'),
    html.Div(id='lines-session-id', style=dict(display='none')),
    html.Div(id='lines-graph-timestamp', style=dict(display='none')),
    html.Div(id='lines-table-timestamp', style=dict(display='none')),
    html.Div(id='lines-table-filter', style=dict(display='none')),
    html.Div(id='lines-table-selected-rows', style=dict(display='none')),
]

def layout():
    return out

app.py

This is the app instance that is actually being seen in the browser.

index.py

Entry point and the gatekeeper for all callbacks/layouts.

requirements.txt

Python package requirements used to initialize the app.

wiz's People

Contributors

chrisbalzer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.