Skip to content

Commit e95051c

Browse files
Hao TranFabien Lelaquais
authored andcommitted
Add mapbox density charts
1 parent cd1cc85 commit e95051c

File tree

5 files changed

+99
-0
lines changed

5 files changed

+99
-0
lines changed
149 KB
Loading
146 KB
Loading
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
## Mapbox density charts
2+
3+
This type of chart creates maps where density can be displayed.
4+
5+
6+
### Basic Mapbox Density Chart - Air Quality Index
7+
8+
In this example, we will visualize the air quality index at 3 locations on map. Bigger circle will have worse air quality.
9+
10+
```py
11+
data = {
12+
"lon": [10, 20, 30],
13+
"lat": [15, 25, 35],
14+
"air_index": [7, 20, 10]
15+
}
16+
17+
layout = {
18+
"mapbox": {
19+
"style": "open-street-map"
20+
}
21+
}
22+
```
23+
!!! example "Page content"
24+
25+
=== "Markdown"
26+
27+
```
28+
<|{data}|chart|lon=lon|lat=lat|z=air_index|type=densitymapbox|layout={layout}|>
29+
```
30+
31+
=== "HTML"
32+
33+
```html
34+
<taipy:chart type="densitymapbox" lon="lon" lat="lat" z="air_index" layout="layout">{data}</taipy:chart>
35+
```
36+
37+
<figure>
38+
<img src="mapbox-air-index-dark.png" class="visible-dark" />
39+
<img src="mapbox-air-index.png" class="visible-light" />
40+
<figcaption>Air Quality Index</figcaption>
41+
</figure>
42+
43+
### World Map with Earthquake Magnitude
44+
45+
46+
```py
47+
df = pandas.read_csv(
48+
'https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv')
49+
50+
opts = {
51+
"coloraxis": 'coloraxis',
52+
"hoverinfo": 'skip',
53+
"radius": 5
54+
}
55+
56+
layout = {
57+
'mapbox': {
58+
'style': 'stamen-terrain'
59+
},
60+
"coloraxis": {
61+
"colorscale": "Viridis"
62+
},
63+
"title": {
64+
"text": "Earthquake Magnitude"
65+
}
66+
}
67+
```
68+
!!! example "Page content"
69+
70+
=== "Markdown"
71+
72+
```
73+
<|{df}|chart|type=densitymapbox|lat=Latitude|lon=Longitude|z=Magnitude|options={opts}|layout={layout}|>
74+
```
75+
76+
=== "HTML"
77+
78+
```html
79+
<taipy:chart type="densitymapbox" lat="Latitude" lon="Longitude" z="Magnitude" options="opts" layout="layout">{df}</taipy:chart>
80+
```
81+
82+
<figure>
83+
<img src="mapbox-earthquake-magnitude-dark.png" class="visible-dark" />
84+
<img src="mapbox-earthquake-magnitude.png" class="visible-light" />
85+
<figcaption>World Map with Earthquake Magnitude</figcaption>
86+
</figure>
87+
88+
Explanation of parameters and options relevant to Mapbox density charts can be found [here](https://plotly.com/javascript/reference/densitymapbox/). Full details for the Taipy Chart control can be found in the Chart Control section of the [Taipy GUI User Manual](https://docs.taipy.io/en/latest/manuals/gui/viselements/chart/)
89+
90+
### Key parameters
91+
| Parameter | Value Options | Location |
92+
| --------------- | ------------------------- | ------------------ |
93+
| type | "densitymapbox" | Control definition |
94+
| lon | Column name for longitudes | Control definition |
95+
| lat | Column name for latitudes | Control definition |
96+
| z | Column name for density | Control definition |
97+
| mapbox | Dictionary of parameters for maps (style). [More details](https://plotly.com/javascript/mapbox-layers/) | Layout |
98+
| radius | int | Options |
99+
| coloraxis | Dictionary (colorscale) | Layout+Options |
459 KB
Loading
457 KB
Loading

0 commit comments

Comments
 (0)