forked from radovankavicky/dash-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgraphing.py
More file actions
132 lines (103 loc) · 4.87 KB
/
Copy pathgraphing.py
File metadata and controls
132 lines (103 loc) · 4.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
from textwrap import dedent as s
import dash_core_components as dcc
import dash_html_components as html
from tools import load_example
from components import Example, Syntax
examples = {
'simple-graph-events': load_example(
'tutorial/examples/graph_callbacks_simple.py'),
'world-indicators': load_example(
'tutorial/examples/getting_started_crossfilter.py'
),
'crossfilter-recipe': load_example(
'tutorial/examples/crossfilter_recipe.py'
)
}
layout = html.Div([
dcc.Markdown('''
# Interactive Visualizations
The `dash_core_components` library includes a component called `Graph`.
`Graph` renders interactive data visualizations using the open source
[plotly.js](https://github.com/plotly/plotly.js) JavaScript graphing
library. Plotly.js supports over 35 chart types and renders charts in
both vector-quality SVG and high-performance WebGL.
The `figure` argument in the `dash_core_components.Graph` component is
the same `figure` argument that is used by `plotly.py`, Plotly's
open source Python graphing library.
Check out the [plotly.py documentation and gallery](https://plot.ly/python)
to learn more.
Dash components are described declaratively by a set of attributes.
All of these attributes can be updated by callback functions but only
a subset of these attributes are updated through user interaction.
For example, when you click on an option in a `dcc.Dropdown` component, the
`value` property of that component changes.
The `dcc.Graph` component has four attributes that can change
through user-interaction: `hoverData`, `clickData`, `selectedData`,
`relayoutData`.
These properties update when you hover over points, click on points, or
select regions of points in a graph.
'''.replace(' ', '')),
Syntax(
examples['simple-graph-events'][0],
summary="""
Here's an simple example that
prints these attributes in the screen.
"""),
Example(examples['simple-graph-events'][1]),
html.Hr(),
html.H3('Update Graphs on Hover'),
Syntax(examples['world-indicators'][0], summary="""
Let's update our world indicators example from the previous chapter
by updating time series when we hover over points in our scatter plot.
"""),
Example(examples['world-indicators'][1]),
dcc.Markdown(s('''
Try mousing over the points in the scatter plot on the left.
Notice how the line graphs on the right update based off of the point that
you are hovering over.
''')),
html.Hr(),
html.H3('Generic Crossfilter Recipe'),
Syntax(examples['crossfilter-recipe'][0], summary="""
Here's a slightly more generic example for crossfiltering across
a six column data set. Each scatter plot's selection filters the
underlying dataset.
"""),
html.Img(
src='https://github.com/plotly/dash-docs/raw/master/images/select.gif',
alt='Dash Data Selection Example',
style={
'width': '100%', 'border': 'thin lightgrey solid',
'border-radius': '4px'
}),
dcc.Markdown(s('''
Try clicking and dragging in any of the plots to filter different regions.
On every selection, the three graph callbacks are fired with the latest
selected regions of each plot. A pandas dataframe is filtered based off
of the selected points and the graphs are replotted with the selected
points highlighted and the selected region drawn as a dashed rectangle.
> As an aside, if you find yourself filtering and visualizing
highly-dimensional datasets, you should consider checking out the
[parallel coordinates](https://plot.ly/python/parallel-coordinates-plot/)
chart type.
''')),
dcc.Markdown(s('''
### Current Limitations
There are a few limitations in graph interactions right now.
- Clicking points does not accumulate: you cannot accumulate the number
of points that you have clicked on nor is there the concept of
"unselecting" a point. This issue is being worked on in [https://github.com/plotly/plotly.js/issues/1848](https://github.com/plotly/plotly.js/issues/1848).
- It is not currently possible to customize the style of the hover
interactions or the select box.
This issue is being worked on in [https://github.com/plotly/plotly.js/issues/1847](https://github.com/plotly/plotly.js/issues/1847).
***
There's a lot that you can do with these interactive plotting features.
If you need help exploring your use case, open up a thread in the
[Dash Community Forum](https://community.plot.ly/c/dash).
***
The final chapter of the Dash tutorial explains one last concept of dash:
Callbacks with `dash.dependencies.State`.
`State` is useful for UIs that contain forms or buttons.
''')),
dcc.Link('Dash Tutorial Part 4. Callbacks With State', href='/state')
])