Git Product home page Git Product logo

mydcc's Introduction

Mydcc

My Dash Core Components

Installing :

pip install mydcc

Requirements:

  • dash -- The core dash backend
  • dash-renderer -- The dash front-end
  • dash-html-components -- HTML components
  • dash-core-components -- Supercharged components
  • plotly -- Plotly graphing library used in examples

Usage :

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event, State
import mydcc

app = dash.Dash()
app.layout = html.Div(...)

@app.callback(...)
def myfun(...):
    ...
    return ...

if __name__ == '__main__':
    app.run_server()

1. mydcc.Listener :

Get mouse position of plotly graph

Usage :

app.layout = html.Div([
    mydcc.Listener( id = "uuu", aim = 'graph' ),
    dcc.Graph( id = 'graph',
               figure = { 'data': [  {'x': [1, 2, 3], 'y': [4, 1, 2]}  ]  }
              ),
    html.Div( id = 'text' )
])

@app.callback(
    Output('text', 'children'),
    [Input('uuu', 'data')])
def myfun(ddd):
    if ddd is None : return('')
    return str(ddd['x']) + ' and ' + str(ddd['y']) 

2. mydcc.Listener_mapbox :

Get mouse position for plotly mapbox graph

Usage :

app.layout = html.Div([
    mydcc.Listener_mapbox( id = "uuu", aim = 'graph'  ),
    dcc.Graph( id = 'ggg', figure = figgure_with_mapbox ),
    html.Div( id = 'text' )
])
  
@app.callback(
    Output('text', 'children'),
    [Input('uuu', 'data')])
def myfun(ddd):
    if ddd is None : return('')
    return str(ddd['x']) + ' and ' + str(ddd['y']) 

3. mydcc.Relayout :

Relayout plotly graph

Usage :

app.layout = html.Div([
    mydcc.Relayout( id = "rrr", aim = 'graph' ),
    dcc.Graph( id = 'graph',
               figure = { 'data': [  {'x': [1, 2, 3], 'y': [4, 1, 2]}  ]  }
              ),
    dcc.Input(id = 'in',
              placeholder = 'Enter a title ...',
              type = 'text',
              value = ''  
              )
])

@app.callback(
    Output('rrr', 'layout'),
    [Input('in', 'value')])
def myfun(x):
    return {'title':x}

4. mydcc.Change_trace :

Change plotly graph trace (only for graph with one trace )

Usage :

app.layout = html.Div([
    dcc.Graph(
        id = 'graph',    
        figure = {
            'data': [
                { 'x': [1, 2, 3], 'y': [4, 1, 2] },
            ],
            'layout': {
                'title': 'Dash Data Visualization',
                'xaxis': { 'range': [0,50] },
                'yaxis': { 'range': [0,50] }
            }
        }
    ),
    mydcc.Listener(id = "uuu", aim = 'graph'),
    mydcc.Change_trace(id = 'ii', aim = 'graph')
])

@app.callback(
    Output('ii', 'data'),
    [Input('uuu', 'data')])
def myfun(ddd):
    data = {'disable':'y'}
    if type(ddd['x']) != str and ddd['x'] < 30:
        data = dict(x = [ddd['x']],
                    y = [ddd['y']],
                    opacity = 1
                    )
    return data

5. mydcc.Change_trace_mapbox :

Change plotly mapbox graph trace (only for graph with one trace )

Usage :

app.layout = html.Div([
    dcc.Graph( id = 'graph', figure = figgure_with_mapbox ),
    mydcc.Listener_mapbox(id = "uuu", aim = 'graph'),
    mydcc.Change_trace_mapbox(id = 'ii', aim = 'graph')
])

@app.callback(
    Output('ii', 'data'),
    [Input('uuu', 'data')])
def myfun(ddd):
    data = {'lon':[1], 'lat':[1], 'type': 'scattermapbox'}
    if type(ddd['x']) != str :
        data = dict(lon = [ ddd['x'] ],
                    lat = [ ddd['y'] ],
                    type = 'scattermapbox',
                    opacity = 1
                    )
    return data

Dash

Go to this link to learn about Dash.

mydcc's People

Contributors

jimmybow 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.