|
1 | | -## dash 2.0 - Deprecation Notice and Next Steps |
| 1 | +# Dash |
2 | 2 |
|
3 | | -April 20, 2016 |
| 3 | +### Reactive Web Apps for Python |
4 | 4 |
|
5 | | -tl;dr: We're no longer maintaining the code in this master branch. We're rethinking and rewriting `dash` to be an abstract web-application framework for technical computing. And we'd love your help. If you'd like to get involved, please reach out: [email protected] (@chriddyp). |
| 5 | +Dash is a Python library for creating reactive, Web-based applications. Dash started as a public proof-of-concept on GitHub 2 years ago. |
6 | 6 |
|
7 | | -Here's some more context: |
| 7 | +We kept a prototype online, but subsequent work on Dash occurred behind closed curtains. In June of 2017 we released a new version of Dash that is both enterprise-ready and a first-class member of Plotly's open-source tools. |
8 | 8 |
|
9 | | -#### dash in 2014 |
| 9 | +Dash is a user interface library for creating analytical web applications. Those who use Python for data analysis, data exploration, visualization, modelling, instrument control, and reporting will find immediate use for Dash. |
10 | 10 |
|
11 | | -`dash` started out with a really simple intent: provide some boiler plate code that shows python users how they can hook up their data analysis backends to some simple HTML controls like dropdowns to plotly.js graphs. The front-end is just jQuery, raw HTML controls, and the [skeleton CSS stylesheet](http://getskeleton.com). The back-end is just flask. |
| 11 | +Dash makes it dead-simple to build a GUI around your data analysis code. Here’s a 43-line example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just 43 lines of code ([view the source](https://gist.github.com/chriddyp/3d2454905d8f01886d651f207e2419f0)). |
12 | 12 |
|
13 | | -Writing data visualizations web-applications like this is actually a lot of work. You basically have to be a full-stack web-developer! It's inaccessible to the majority of scientists, statisticians, and analysts that might need to develop these data exploration applications in the first place. |
| 13 | + |
14 | 14 |
|
15 | | -#### Technical computing needs a better framework for creating user interfaces |
| 15 | +Dash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements. Here’s an example with 5 inputs, 3 outputs, and cross filtering. This app was composed in just 160 lines of code, all of which were Python. |
16 | 16 |
|
17 | | -There is a big gap in the technical computing and data science landscape when it comes to creating GUIs. |
| 17 | + |
18 | 18 |
|
19 | | -If you're a python user, you can assemble widgets like sliders and graphs together using the [Jupyter Notebook](http://moderndata.plot.ly/widgets-in-ipython-notebook-and-plotly/) interface or if you're really savvy you could use [Matplotlib and Qt Designer](http://blog.rcnelson.com/building-a-matplotlib-gui-with-qt-designer-part-1/). These applications are both hard to distribute, inflexible aesthetically, and challenging to scale to advanced interfaces. In MATLAB you can create [GUIs with GUIDE](http://www.mathworks.com/videos/creating-a-gui-with-guide-68979.html) but you'll be faced with the same shortcomings in terms of design and distribution (not to mention license costs!). The Julia community hasn't yet adopted a solution (although [Escher.jl](https://shashi.github.io/Escher.jl/) looks promising and similar to the framework that we're proposing here). The best framework out there is R's Shiny. It's web based and is supported by an incredible community. Unfortunately, it's not supported in other languages. |
| 19 | +To learn more about Dash, read the [extensive announcement letter](https://medium.com/@plotlygraphs/introducing-dash-reactive-web-apps-for-python-5ecf7191b503) |
20 | 20 |
|
21 | | -#### Web technologies in 2016 change everything |
| 21 | +### Documentation |
22 | 22 |
|
23 | | -The development [react.js](https://facebook.github.io/react/) and [plotly.js](https://github.com/plotly/plotly.js) over the last couple of years have made it possible for all of this to change. We can now build a technical computing GUI framework using open web technologies. |
| 23 | +View the [Dash User Guide](https://plot.ly/dash). It's chock-full of examples, pro tips, and guiding principles. |
24 | 24 |
|
25 | | -- React.js makes it easier than ever to create and distribute the types of modular components that a GUI framework needs (sliders, dropdowns, tables, buttons). There are [over 2000 react components registered on NPM](https://www.npmjs.com/browse/keyword/react-component?offset=2000)! |
26 | | -- [plotly.js](https://github.com/plotly/plotly.js) provides an interface for creating super sophisticated scientific visualizations that were previously only available in packages like Matplotlib or MATLAB. plotly.js graphs are natively interactive in the web browser and over [20 chart types](https://plot.ly/javascript/) are supported including 3D graphs, high-performance webgl scatter plots, and contour plots. |
27 | | -- CSS stylesheets and [inline CSS in React components](https://github.com/FormidableLabs/radium) provide a relatively portable way to customize these applications aesthetically. |
28 | | -- HTTP and JSON provide the interface between components to back-ends in different languages like Python, MATLAB, Julia, R. |
29 | | -- Simple server application frameworks like Flask in Python or Mux in Julia can connect the HTTP interface to the user's actual technical computing code. |
30 | | -- Services like heroku and AWS make these applications easy to deploy and share. |
| 25 | +### Licensing |
31 | 26 |
|
32 | | -#### Introducing `dash (2.0)` |
| 27 | +Dash is licensed under MIT. |
33 | 28 |
|
34 | | -The `dash` project intends to be the software ecosystem to support a fully web-based technical computing GUI framework. The core of the project is a HTTP and JSON API that describes the layout and composition of components on a web page and how these components depend on each other. [Scroll down for an example of this API](#JSON-example) or [check out some prototypes](http://plotly-dash.herokuapp.com). |
| 29 | +Plotly offers an enterprise-ready deployment and permissioning server teams that are working with Dash apps behind-the-firewall. [Learn more about Dash Enterprise](https://plot.ly/products/on-premise). |
35 | 30 |
|
36 | | -A web application written in `react.js`, `redux.js`, and an HTTP library like `xhr.js` will implement the front-end of these APIs. This application will render the components specified by the JSON spec. When a component's value changes (e.g. when a user drags a slider or clicks on a point in a graph), an HTTP request will be made with the component's updated value and the response of the request will update all of that component's dependents. A component registry will allow developers to plugin custom React components into their apps. |
| 31 | +### Contact and Support |
37 | 32 |
|
38 | | -Like MATLAB's GUIDE, [plotly's dashboards.ly](https://dashboards.ly), and [Qt Designer](https://wiki.python.org/moin/PyQt/Creating_GUI_Applications_with_PyQt_and_Qt_Designer), the front-end will have an "edit" mode that will allow the developer to drag components around, resize them, or edit the components' state directly (e.g. change the text of a header or paragraph). |
39 | | - |
40 | | -Separately, a Python framework will wrap the Flask server and provide a pythonic interface for describing the layout of app and responding to requests made from the front-end. Similar frameworks for MATLAB, Julia, and R will also be written on top of the JSON and HTTP spec. |
41 | | - |
42 | | -#### Prototype |
43 | | - |
44 | | -I've written a quick prototype of this stack in [this messy repo](https://github.com/chriddyp/messin) and you can check out [some examples and examine network requests online in these docs](https://plotly-dash.heroku.com) (itself built with dash!). The main ideas are there, but it needs to be re-written, tested, standardized, and less monolithic. |
45 | | - |
46 | | -#### Community |
47 | | - |
48 | | -If you'd like to get involved, please reach out! ( [email protected]). We're actively working on prototype and a beta release. |
49 | | - |
50 | | -##### [Quick Example](#JSON-example) |
51 | | - |
52 | | -Here's an example of what this might actually look like. [Check out full, working examples of a prototype in these docs](http://plotly-dash.herokuapp.com). |
53 | | - |
54 | | - |
55 | | -On page load, a JSON payload is served that describes the layout and composition of the components to be rendered in the web page: |
56 | | -```js |
57 | | -{ |
58 | | - "type": "div", // all HTML elements are supported |
59 | | - "props": { // optional properties of this element like IDs, class names, styles. Custom components have additional custom properties. |
60 | | - "style": {"color": "lightgrey"} |
61 | | - }, |
62 | | - "children": [ |
63 | | - { |
64 | | - "type": "Dropdown", // custom react dropdown component |
65 | | - "props": { |
66 | | - "id": "my-dropdown", |
67 | | - "options": ["time", "voltage", "current"] |
68 | | - } |
69 | | - }, |
70 | | - { |
71 | | - "type": "PlotlyGraph", // custom react component that renders a plotly graph |
72 | | - "props": { |
73 | | - "id": "my-graph", |
74 | | - "dependencies": ["my-dropdown"], // when the component with the ID "my-dropdown" changes, an HTTP call with the dropdown's new value will be made to the server requesting new properties for this plotly graph |
75 | | - "figure": { // custom property that describes the graph |
76 | | - "data": [ |
77 | | - {"x": [1, 2, 3], "y": [4, 1, 5], "type": "scatter"} |
78 | | - ] |
79 | | - } |
80 | | - } |
81 | | - } |
82 | | - ] |
83 | | -} |
84 | | -``` |
85 | | - |
86 | | -When the dropdown changes values, an HTTP call is made to the server with the new value of the dropdown: |
87 | | - |
88 | | -``` |
89 | | -POST /react |
90 | | -{ |
91 | | - "id": "my-dropdown", |
92 | | - "value": "voltage" |
93 | | -} |
94 | | -``` |
95 | | - |
96 | | -And the server responds with the new values of the component's that "depend" on the dropdown. The developer of this app has complete control over the values in the response. This is where they can inject their technical computing code that might run models or query data. Their HTTP response will update components in the UI. |
97 | | -``` |
98 | | -[ |
99 | | - { |
100 | | - "id": "my-graph", |
101 | | - "props": { |
102 | | - "figure": { |
103 | | - "data": [{"x": [3, 4, 5], "y": [5, 5, 42]}] |
104 | | - } |
105 | | - } |
106 | | - } |
107 | | -] |
108 | | -``` |
109 | | - |
110 | | -The Python framework will abstract away the HTTP and the JSON. Writing an app like this might look like: |
111 | | - |
112 | | -```python |
113 | | -import dash |
114 | | -from dash.components import div, Dropdown, PlotlyGraph |
115 | | -import plotly.graph_objs as go |
116 | | - |
117 | | -# define the layout of the graph |
118 | | -dash.layout = div([ |
119 | | - Dropdown(options=['time', 'voltage', 'current'], id='my-dropdown'), |
120 | | - PlotlyGraph( |
121 | | - figure=go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 1, 5])]), |
122 | | - id='my-graph' |
123 | | - ) |
124 | | -], style=dict(color='lightgrey')) |
125 | | - |
126 | | -# define how components get updated |
127 | | -@dash.react('my-graph', ['my-dropdown']) |
128 | | -def update_graph(dropdown_updates): |
129 | | - selected_value = dropdown_updates.value |
130 | | - |
131 | | - # run some data analysis code using selected_value |
132 | | - |
133 | | - return go.Figure(data=Scatter(x=[3, 4, 5], y=[5, 5, 42])) |
134 | | -``` |
135 | | - |
136 | | -[Check out full, working examples of a prototype in these docs](http://plotly-dash.herokuapp.com) |
137 | | - |
138 | | - |
139 | | - |
140 | | - |
141 | | -*** |
142 | | - |
143 | | -### Currently in this repo |
144 | | - |
145 | | -Dash is an assemblage of Flask, Socketio, Jinja, Plotly and boiler plate CSS and JS for easily creating data visualization web-apps with your Python data analysis backend. |
146 | | - |
147 | | -Getting Started |
148 | | -Check out the four examples: |
149 | | -- `$ python example-1-hello-world.py` |
150 | | -- `$ python example-2-etch-a-sketch.py` |
151 | | -- `$ python example-3-click-events.py` |
152 | | - |
153 | | - |
154 | | -- `$ python example-4-tickers.py` |
| 33 | +See [https://plot.ly/dash/support](https://plot.ly/dash/support) for ways to get in touch. |
0 commit comments