|
| 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 | |
0 commit comments