plotly / dash-alternative-viz Goto Github PK

View Code? Open in Web Editor NEW

3.0 3.0 0.0 9.18 MB

Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps.

Home Page: https://dash.plotly.com

License: MIT License

Python 0.70% HTML 0.01% JavaScript 99.29%

altair bokeh highcharts holoviews matplotlib plotly-dash seaborn vega vega-lite

dash-alternative-viz's Introduction

An R package for creating interactive web graphics via the open source JavaScript graphing library plotly.js.

Installation

Install from CRAN:

install.packages("plotly")

Or install the latest development version (on GitHub) via {remotes}:

remotes::install_github("plotly/plotly")

Getting started

Web-based ggplot2 graphics

If you use ggplot2, ggplotly() converts your static plots to an interactive web-based version!

library(plotly)
g <- ggplot(faithful, aes(x = eruptions, y = waiting)) +
  stat_density_2d(aes(fill = ..level..), geom = "polygon") + 
  xlim(1, 6) + ylim(40, 100)
ggplotly(g)

By default, ggplotly() tries to replicate the static ggplot2 version exactly (before any interaction occurs), but sometimes you need greater control over the interactive behavior. The ggplotly() function itself has some convenient “high-level” arguments, such as dynamicTicks, which tells plotly.js to dynamically recompute axes, when appropriate. The style() function also comes in handy for modifying the underlying trace attributes (e.g. hoveron) used to generate the plot:

gg <- ggplotly(g, dynamicTicks = "y")
style(gg, hoveron = "points", hoverinfo = "x+y+text", hoverlabel = list(bgcolor = "white"))

Moreover, since ggplotly() returns a plotly object, you can apply essentially any function from the R package on that object. Some useful ones include layout() (for customizing the layout), add_traces() (and its higher-level add_*() siblings, for example add_polygons(), for adding new traces/data), subplot() (for combining multiple plotly objects), and plotly_json() (for inspecting the underlying JSON sent to plotly.js).

The ggplotly() function will also respect some “unofficial” ggplot2 aesthetics, namely text (for customizing the tooltip), frame (for creating animations), and ids (for ensuring sensible smooth transitions).

Using plotly without ggplot2

The plot_ly() function provides a more direct interface to plotly.js so you can leverage more specialized chart types (e.g., parallel coordinates or maps) or even some visualization that the ggplot2 API won’t ever support (e.g., surface, mesh, trisurf, etc).

plot_ly(z = ~volcano, type = "surface")

Learn more

To learn more about special features that the plotly R package provides (e.g., client-side linking, shiny integration, editing and generating static images, custom events in JavaScript, and more), see https://plotly-r.com. You may already be familiar with existing plotly documentation (e.g., https://plotly.com/r/), which is essentially a language-agnostic how-to guide for learning plotly.js, whereas https://plotly-r.com is meant to be more wholistic tutorial written by and for the R user. The package itself ships with a number of demos (list them by running demo(package = "plotly")) and shiny/rmarkdown examples (list them by running plotly_example("shiny") or plotly_example("rmd")). Carson also keeps numerous slide decks with useful examples and concepts.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, asking questions, contributing changes to plotly, and our code of conduct.

dash-alternative-viz's People

Contributors

Stargazers

Watchers

Forkers

plantly satyan-g dkapitan urig lenamax2355 hintron landry12138

dash-alternative-viz's Issues

installtion issue

No installation link provided tried installing by pip3 install dash-alternative-viz
but installation failed as
ERROR: Could not find a version that satisfies the requirement dash-alternative-viz (from versions: none)
ERROR: No matching distribution found for dash-alternative-viz

There is a typo in library yoooooo word gets printed along with library

at left top corner typo yooooooo is present , will you please help me regarding that

How can we convert this plotly graph into highcharts and also get the hover data?

import plotly.graph_objects as go
import numpy as np
import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=df["year"],
y=df["pop"],
name="line1",
hoverinfo="text+name",
line_shape="spline",
mode="markers+lines",
line=dict(
color="Blue",
width=4,
),
)
)
fig.add_trace(
go.Scatter(
x=df["year"],
y=df["lifeExp"],
name="line2",
hoverinfo="text+name",
line_shape="vh",
mode="markers",
line=dict(color="red", width=5),
)
)

fig.show()

Installation Error

pip3 install dash-alternative-viz
ERROR: Could not find a version that satisfies the requirement dash-alternative-viz (from versions: none)
ERROR: No matching distribution found for dash-alternative-viz

environment: Python 3.8.6

Can not create Bubble Chart using Dash-Alternative-Viz

I want to create a bubble chart using this library. This is the code

import dash
import dash_alternative_viz as dav
import pandas as pd
import plotly.express as px
from dash import html

app = dash.Dash(__name__, external_scripts=["high-charts-more.js", "high-charts.js"]) # Loaded more js


bubble_fig = {
    "chart": {"type": "bubble", "plotBorderWidth": 1, "zoomType": "xy"},
    "legend": {"enabled": False},
    "title": {"text": "Sugar and fat intake per country"},
    "subtitle": {
        "text": 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
    },
    "accessibility": {
        "point": {
            "valueDescriptionFormat": "{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%."
        }
    },
    "xAxis": {
        "gridLineWidth": 1,
        "title": {"text": "Daily fat intake"},
        "labels": {"format": "{value} gr"},
        "plotLines": [
            {
                "color": "black",
                "dashStyle": "dot",
                "width": 2,
                "value": 65,
                "label": {
                    "rotation": 0,
                    "y": 15,
                    "style": {"fontStyle": "italic"},
                    "text": "Safe fat intake 65g/day",
                },
                "zIndex": 3,
            }
        ],
        "accessibility": {"rangeDescription": "Range: 60 to 100 grams."},
    },
    "yAxis": {
        "startOnTick": False,
        "endOnTick": False,
        "title": {"text": "Daily sugar intake"},
        "labels": {"format": "{value} gr"},
        "maxPadding": 0.2,
        "plotLines": [
            {
                "color": "black",
                "dashStyle": "dot",
                "width": 2,
                "value": 50,
                "label": {
                    "align": "right",
                    "style": {"fontStyle": "italic"},
                    "text": "Safe sugar intake 50g/day",
                    "x": -10,
                },
                "zIndex": 3,
            }
        ],
        "accessibility": {"rangeDescription": "Range: 0 to 160 grams."},
    },
    "tooltip": {
        "useHTML": True,
        "headerFormat": "<table>",
        "pointFormat": '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>'
        + "<tr><th>Fat intake:</th><td>{point.x}g</td></tr>"
        + "<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>"
        + "<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>",
        "footerFormat": "</table>",
        "followPointer": True,
    },
    "plotOptions": {
        "series": {"dataLabels": {"enabled": True, "format": "{point.name}"}}
    },
    "series": [
        {
            "data": [
                {"x": 86.5, "y": 102.9, "z": 14.7, "name": "DE", "country": "Germany"},
                {"x": 80.8, "y": 91.5, "z": 15.8, "name": "FI", "country": "Finland"},
                {
                    "x": 80.4,
                    "y": 102.5,
                    "z": 12,
                    "name": "NL",
                    "country": "Netherlands",
                },
                {"x": 80.3, "y": 86.1, "z": 11.8, "name": "SE", "country": "Sweden"},
                {"x": 78.4, "y": 70.1, "z": 16.6, "name": "ES", "country": "Spain"},
                {"x": 74.2, "y": 68.5, "z": 14.5, "name": "FR", "country": "France"},
                {"x": 73.5, "y": 83.1, "z": 10, "name": "NO", "country": "Norway"},
                {"x": 69.2, "y": 57.6, "z": 10.4, "name": "IT", "country": "Italy"},
                {"x": 68.6, "y": 20, "z": 16, "name": "RU", "country": "Russia"},
                {
                    "x": 65.5,
                    "y": 126.4,
                    "z": 35.3,
                    "name": "US",
                    "country": "United States",
                },
                {"x": 65.4, "y": 50.8, "z": 28.5, "name": "HU", "country": "Hungary"},
                {"x": 63.4, "y": 51.8, "z": 15.4, "name": "PT", "country": "Portugal"},
            ]
        }
    ],
}

highchart_barplot = html.Div(dav.HighChart(id="bar-plot", options=bubble_fig))
app.layout = html.Div([highchart_barplot])
app.run(port=8001, debug=True)

I get this error

Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=bubble
 - missingModuleFor: bubble

Candlestick charts are not working

I see the following warning in Chrome DeveloperTools console:

'The "constructorType" property is incorrect or some required module is not imported.'

Sample code to reproduce the issue:

import dash
import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output
import requests

data = requests.get('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/new-intraday.json').json()
print(data)
candlestick = {
      'series': [{
            'name': 'AAPL',
            'type': 'candlestick',
            'data': data,
            'tooltip': {
                'valueDecimals': 2
            }
        }]
    }

print(data[:5])
app = dash.Dash(__name__)
app.layout = html.Div([
  html.Button(id="my_button", children="More data!"),
  dav.HighChart(id="my_highchart",  constructorType='stockChart', options=candlestick)
])

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

HighCharts : No callbacks triggered on User interaction.

The options property doesn't trigger the callback when the user interacts with HighCharts.

Is it because the HighChart.react.js only has a render( ) event and no onChange() event?
This onchange() event should in some way implement a setProps in order to trigger the callcack?

Thanks for looking into this.

This issue + example code is mentioned on the plotly forum.

Example with a Gantt Chart

import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output, State
import datetime, time


external_scripts = [  
    "https://code.highcharts.com/gantt/highcharts-gantt.js",
    "https://code.highcharts.com/gantt/modules/gantt.js", 
    "https://code.highcharts.com/modules/draggable-points.js"
]
app = dash.Dash(
    __name__,
    external_scripts=external_scripts
    )

def epoch_js(date_time):
    return int(time.mktime(date_time.timetuple())) * 1000


app.layout = html.Div(
    [
        html.Div("Drag the task or it's extremities to update OPTIONS PROPERTY (does not work)"),
        dav.HighChart(
            id="my_highchart",
            constructorType = 'ganttChart', 
            options = {
                'title': {
                    'text': 'Interactive Gantt Chart',
                    'align': 'left'
                    },
                'xAxis': {
                    'min': epoch_js(datetime.datetime(2023, 8, 17)),
                    'max': epoch_js(datetime.datetime(2023, 10, 30)),
                    },
                'plotOptions': {
                    'series': {
                        'animation': False, # Do not animate dependency connectors
                        'dragDrop': {
                            'draggableX': True,
                            'draggableY': True,
                            'dragMinY': 0,
                            'dragMaxY': 2,
                            'dragPrecisionX': 86400000, # 1day = 1000 * 60 * 60 * 24 (millis)
                            },
                        'dataLabels': {
                            'enabled': True,
                            'format': '{point.name}',
                            'style': {
                                'cursor': 'default',
                                'pointerEvents': 'none'
                                }
                            },
                        'allowPointSelect': True,
                        }
                    },
                'series': [
                    {
                        'name': 'Project',
                        'data': [
                            {
                                'name': 'Start prototype',
                                'start': epoch_js(datetime.datetime(2023, 9, 10)),
                                'end'  : epoch_js(datetime.datetime(2023, 10, 10)),
                                'completed': {
                                    'amount': 0.5
                                    }
                                }
                            ]
                        }
                    ],
                }
            ),
        html.Div('This should update the options property data whenever the user interacts with the Gantt Chart'),
        html.Div(id='output'),
        ]
    )


# GETTING THE OPTIONS AFTER USER INTERACTION
# DOES NOT WORK
@app.callback(  # THIS DOES NOT TIGGER AS EXPECTED !!!
    Output("output", "children"),
    Input("my_highchart", "options"),
    prevent_initial_callback = True,
    ) 
def get_options(options):
    print(options)
    return f'{options}'

if __name__ == "__main__":
   app.run_server( port = 8050, debug=False)```

Unable to reproduce the output of usage.py

I run the usage.py file but the bokeh graphics is missing from the output.
There is also an import error in the downloaded script it tries to import plotly_express instead of plotly.express. Once this is solved it runs without errors but doesn't show the bokeh figure (I'm interested in this to have bokeh dealing with graphics inside a dash app).
The only output at terminal is:

dash-alternative-viz-master/usage.py:122: UserWarning: Starting a Matplotlib GUI outside of the main thread will likely fail.
  fig, ax = plt.subplots()
WARNING: QApplication was not created in the main() thread.

I'm using dash 1.14.0, bokeh 2.2.3, holoviews 1.13.5.

There is typo in package, after adding your package i got yoooo printed on my screen plz fix this typo asap, your code is working perfect

yooooo word is getting printed on dashboard,

Installation issue

dash-vega-components for Vega-Altair charts

For anyone landing on this repository and looking for a way to show Vega-Altair charts in your Dash application, see dash-vega-components.