dash-GIS715/README.html at master · kellynm/dash-GIS715 · GitHub

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <title>Dash by Plotly</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
        <link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <style>
.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
</style>
        <style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>

        <script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
    </head>
    <body>
        <h1 id="dash-by-plotly">Dash by Plotly</h1>
<h3 id="gis-714-geovisualization-spring-2019---student-led-lab">GIS 714 Geovisualization Spring 2019 - Student-led lab</h3>
<p>Dash is a Python framework for building interactive web applications for data visualization. Dash is rendered in a browser and uses CSS, so it is highly customizable and easy to share via URLs. Dash uses purely Python with html components and <a href="http://Plot.ly">Plot.ly</a> graph objects.</p>
<p>This tutorial will demonstrate how to create a basic dashboard application showing a bubble chart, map, and interactive filtering with a range slider. The tutorial will add elements step-by-step to demonstrate how to iteratively add functionality to a dashboard.</p>
<p>This tutorial uses data on California wildfires larger than 1,000 acres from 1992-2015. The original data <a href="https://github.com/BuzzFeedNews/2018-07-wildfire-trends">linked here</a> was posted by Buzz Feed News.</p>
<h2 id="1-install-dash-and-plotly">1. Install Dash and Plotly</h2>
<ul>
<li>Open <i>Visual Studio Code</i></li>
<li>Click <b>Terminal</b> from the top menu and select <b>New Terminal</b>.</li>
<li>In terminal, run:</li>
</ul>
<pre><code><div>pip install dash
pip install plotly --upgrade
pip install --upgrade pandas
</div></code></pre>
<h2 id="2-install-python-extension-for-vs-code">2. Install Python Extension for VS Code</h2>
<ul>
<li>In <i>Visual Studio Code</i>, press <b> Crtl + Shift + X</b> to open the list of available Extensions.</li>
<li>Search for Python and click <b>Install</b>.</li>
</ul>
<h2 id="3-download-data-and-scripts">3. Download data and scripts</h2>
<ol>
<li>If you haven't already done so, go to <a href="https://github.com/kellynm/dash-GIS715">https://github.com/kellynm/dash-GIS715</a> and download the tutorial repository. (Select <b>Clone or Download</b> from the main repo page and download zip.) Alternatively, if you have Git set up on you computer and would prefer to use the command line, follow the bulleted steps below instead of downloading the zip:</li>
</ol>
<ul>
<li>Select <b>Clone or Download</b> and copy the repository web URL (<a href="https://github.com/kellynm/dash-GIS715.git">https://github.com/kellynm/dash-GIS715.git</a>).</li>
<li>In a terminal, navigate to the directory where you'd like to save the repository.</li>
<li>In terminal, run:</li>
</ul>
<pre><code><div>git clone https://github.com/kellynm/dash-GIS715.git
</div></code></pre>
<ol start="2">
<li>In <i>Visual Studio Code</i>, select <b>File</b>, <b>Open folder</b>, and browse to the <b>dash-715</b> folder.</li>
</ol>
<h2 id="4-run-first-dash-script-to-create-bubble-chart">4. Run first Dash script to create bubble chart</h2>
<ol>
<li>Select <b>step1_bubble.py</b> in the Explorer panel to view the first script.</li>
</ol>
<p>This script will create and run a Dash application containing a bubble chart of the California wildfire similar to the one we created in ggplotly. Read the comments for more details about the code structure. <br></p>
<p>Notice there is only one main Dash layout object in this script. It sets the layout and specifies what data visualizations will be included. It is made up of dash html components and dash core components. You can include as many core components (graphs, tables, interactive elements) as you want, but each must have a unique id name.</p>
<ol start="2">
<li>Double check you are in the <b>dash-715</b> folder in the terminal. Right click anywhere in the script or on the script file name in the Explorer panel and select <b>Run Python File in Terminal</b>.</li>
</ol>
<p>This will execute the code and run the app on localhost server.</p>
<ol start="3">
<li>In the terminal output, an IP address will be listed (<a href="http://127.0.0.1:8050/">http://127.0.0.1:8050/</a>). <b>Ctrl + click</b> the address to open the app in a browser. Use <b>Crtl + C</b> to terminate the server if needed.</li>
</ol>
<h2 id="5-run-second-dash-script-to-add-range-slider">5. Run second Dash script to add range slider</h2>
<ol>
<li>Select <b>step2_rangeSlider.py</b> in the Explorer panel to view the second script.</li>
</ol>
<p>This script will add an interactive range slider to filter the data by years. Read the comments for more details about the code structure. <br></p>
<p>To add interactive elements, like check boxes, drop down selection, or sliders, you have to add a callback which takes an input core component (a range slider in this case) and outputs another core component (a graph using the filtered data in this case).</p>
<p>When the interactive event fires (moving the slider in this case), the callback is triggered, which executes a function that will execute the desired response action (updating graph in this case).</p>
<p>Whenever you add a callback that will result in an updated graph, you must remove the code for the original, static graph in the main Dash layout (app.layout).</p>
<ol>
<li>Right click anywhere in the script or on the script file name in the Explorer panel and select <b>Run Python File in Terminal</b>.</li>
</ol>
<p>This will execute the code and run the app on localhost server.</p>
<ol start="3">
<li>In the terminal output, an IP address will be listed (<a href="http://127.0.0.1:8050/">http://127.0.0.1:8050/</a>). <b>Ctrl + click</b> the address to open the app in a browser. Use <b>Crtl + C</b> to terminate the server if needed.</li>
</ol>
<h2 id="6-run-third-dash-script-to-add-a-map">6. Run third Dash script to add a map</h2>
<ol>
<li>Select <b>step3_map.py</b> in the Explorer panel to view the third script.</li>
</ol>
<p>This script will add a map of the fire locations colored by cause. Read the comments for more details about the code structure.</p>
<p>Now we will add a second component to the Dash layout. We can use the scattermapbox plotly object to create a map of fire point locations. For now the map is not interactive (beyond the out of the box functionality). We will use a style sheet (CSS) to place the components within the layout into rows and columns.</p>
<ol start="2">
<li>
<p>On line 28 of the script, insert your Mapbox token.</p>
</li>
<li>
<p>Right click anywhere in the script or on the script file name in the Explorer panel and select <b>Run Python File in Terminal</b>.</p>
</li>
</ol>
<p>This will execute the code and run the app on localhost server.</p>
<ol start="3">
<li>In the terminal output, an IP address will be listed (<a href="http://127.0.0.1:8050/">http://127.0.0.1:8050/</a>). <b>Ctrl + click</b> the address to open the app in a browser. Use <b>Crtl + C</b> to terminate the server if needed.</li>
</ol>
<h2 id="7-run-final-dash-script-to-use-the-range-slider-to-filter-the-map">7. Run final Dash script to use the range slider to filter the map</h2>
<ol>
<li>Select <b>step4_linkGraphs.py</b> in the Explorer panel to view the fourth script.</li>
</ol>
<p>This script will add another callback to use the range slider to filter the map data as well. Read the comments for more details about the code structure.</p>
<p>Just like before, we will add a callback that takes the range slider years as input and outputs an updated map. Again, we need to remove the map graph element from the main Dash layout.</p>
<ol start="2">
<li>
<p>On line 27 of the script, insert your Mapbox token.</p>
</li>
<li>
<p>Right click anywhere in the script or on the script file name in the Explorer panel and select <b>Run Python File in Terminal</b>.</p>
</li>
</ol>
<p>This will execute the code and run the app on localhost server.</p>
<ol start="3">
<li>In the terminal output, an IP address will be listed (<a href="http://127.0.0.1:8050/">http://127.0.0.1:8050/</a>). <b>Ctrl + click</b> the address to open the app in a browser. Use <b>Crtl + C</b> to terminate the server if needed.</li>
</ol>
<h2 id="8-add-a-data-table-component">8. Add a data table component</h2>
<ol>
<li>Try adding a data table component below the map and bubble plot. You'll need to import the dash_table library.</li>
</ol>
<pre><code class="language-python"><div><span class="hljs-keyword">import</span> dash_table <span class="hljs-keyword">as</span> dt

html.Div(
    [
        dt.DataTable(
            id=<span class="hljs-string">'table'</span>,
            columns=[{<span class="hljs-string">"name"</span>: i, <span class="hljs-string">"id"</span>: i} <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> df.columns],
            data=df.to_dict(<span class="hljs-string">"rows"</span>),
            style_table={<span class="hljs-string">'overflowX'</span>: <span class="hljs-string">'scroll'</span>}
        )]
</div></code></pre>
<ol start="2">
<li>Try another approach for adding data table using a function instead of dash_table library</li>
</ol>
<pre><code class="language-python"><div><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">generate_table</span><span class="hljs-params">(dataframe, max_rows=<span class="hljs-number">10</span>)</span>:</span>
    <span class="hljs-keyword">return</span> html.Table(
        <span class="hljs-comment"># Header</span>
        [html.Tr([html.Th(col) <span class="hljs-keyword">for</span> col <span class="hljs-keyword">in</span> dataframe.columns])] +

        <span class="hljs-comment"># Body</span>
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) <span class="hljs-keyword">for</span> col <span class="hljs-keyword">in</span> dataframe.columns
        ]) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(min(len(dataframe), max_rows))]
    )

html.H4(children=<span class="hljs-string">'California Wildfires'</span>),
generate_table(df)
</div></code></pre>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503">Announcement of Dash release with high level description.</a></li>
<li><a href="https://dash.plot.ly/getting-started">Dash Getting Started tutorial.</a></li>
<li><a href="https://github.com/amyoshino/Dash_Tutorial_Series">Helpful tutorial by Adriano Yoshino with videos.</a>
<i>Note that some functionality shown in this tutorial is now deprecated, but updates can easily be found in Dash documentation.</i></li>
<li><a href="https://plot.ly/python/reference/">Plot.ly documentation.</a></li>
<li><a href="https://github.com/ucg8j/awesome-dash">Collection of Dash resources including tutorials.</a></li>
</ul>

    </body>
    </html>