Skip to main content

Simple widgets to add plotly express style plotting to dash

Project description

Dash Express Components

Publish release PyPI npm Documentation Test codecov

Components to bring Plotly Express style plots to Dash:

A typical data flow looks like this:

First, the metadata is extracted from the dataframe df with dxc.get_meta(df). This meta json is needed for dxc.Filter, dxc.Transform or dxc.Plotter to show all options without additional queries to the dataframe. As a result, the components react quite quickly.

Since the metadata can be changed by filter or transform operations, and we don't want additional server calls, the changes are directly computed in the web components. You can access the metadata after transformations via the meta_out property of dxc.Filter and dxc.Transform.

A combined config is needed to compute the final plot with dxc.get_plot(df, config). You can combine the configurations of each component yourself or use the dxc.Configurator to get a combined configuration like:

{
    "filter": [
        {
            "col": "continent",
            "type": "isnotin",
            "value": ["Oceania"]
        }
    ],    
    "transform": [
        {
            "type": "aggr",
            "groupby": [
                "country",
                "continent"
            ],
            "cols": ["gdpPercap"],
            "types": ["median"]
        }
    ],
    "plot": {
        "type": "box",
        "params": {
            "x": "continent",
            "y": "gdpPercap_median",
            "color": "continent",
            "aggr": ["mean"],
            "reversed_x": True
        }
    }
}

An example with the gapminder dataset and dash-lumino-components for the MDI layout. example

Try it

Install dependencies

$ pip install dash-express-components

and start with quickly editable graphs:

import dash_express_components as dxc
app.layout = html.Div([

    # add a plot dxc.Configurator
    html.Div([
        dxc.Configurator(
            id="plotConfig",
            meta=meta,
        ),
    ], style={"width": "500px", "float": "left"}),

    # add an editable dxc.Graph 
    html.Div([
        dxc.Graph(id="fig",
                  meta=meta,
                  style={"height": "100%", "width": "100%"}
                 )],
        style={"width": "calc(100% - 500px)", "height": "calc(100vh - 30px)",
               "display": "inline-block", "float": "left"}
    )
])

Develop

  1. Install npm packages

    $ npm install
    
  2. Create a virtual env and activate.

    $ virtualenv venv
    $ . venv/bin/activate
    

    Note: venv\Scripts\activate for windows

  3. Install python packages required to build components.

    $ pip install -r requirements.txt
    
  4. Build your code

    $ npm run build
    
  5. Run the example

    $ python usage.py
    

Project details


Release history Release notifications | RSS feed

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_express_components-0.0.108.tar.gz (476.7 kB view details)

Uploaded Source

File details

Details for the file dash_express_components-0.0.108.tar.gz.

File metadata

File hashes

Hashes for dash_express_components-0.0.108.tar.gz
Algorithm Hash digest
SHA256 19556d5c45f51412b1b84c5bb9129f2aa2bdd7df7dc0a7bf7be2d61f6629217a
MD5 64929fc6ede344aea0a141d65707b229
BLAKE2b-256 f3908c7d04f7ce486ed9cc89251fe353a2c0a99b9f92791b58d90835e4ba1295

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page