Skip to content

Commit b57c1a4

Browse files
Mahdis-zMahdis-z
authored
Merge pull request #1464 from plotly/density-mapbox
js density mapbox
2 parents 63d1472 + faa369f commit b57c1a4

10 files changed

+121
-8
lines changed

‎_posts/plotly_js/maps/2019-08-12-plotly_js-map-index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
permalink: javascript/maps/
3+
title: Plotly.js Mapbox Charts
4+
description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make mapbox charts.
5+
name: More Mapbox Charts
6+
layout: langindex
7+
language: plotly_js
8+
display_as: maps
9+
has_thumbnail: true
10+
thumbnail: thumbnail/mixed.jpg
11+
page_type: example_index
12+
order: 5
13+
---
14+
15+
16+
<header class="--welcome">
17+
<div class="--welcome-body">
18+
<!--div.--wrap-inner-->
19+
<div class="--title">
20+
<div class="--category-img"><img src="https://images.plot.ly/language-icons/api-home/js-logo.png" alt=""></div>
21+
<div class="--body">
22+
<h1>Plotly.js Financial Charts</h1>
23+
<p>{{page.description}}</p>
24+
</div>
25+
</div>
26+
</div>
27+
</header>
28+
29+
{% assign languagelistimg = site.posts | where:"language","plotly_js" | where:"display_as","maps" | where:"has_thumbnail",true | where: "layout","user-guide" | sort: "order" %}
30+
{% include documentation_eg.html %}

‎_posts/plotly_js/maps/bubble-maps/2015-07-11-bubble_maps_plotlyjs_index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
name: Bubble Maps
44
permalink: javascript/bubble-maps/
55
description: How to make a D3.js-based bubble map in JavaScript. A bubble map overlays a bubble chart on a map.
6-
layout: base
6+
layout: user-guide
77
thumbnail: thumbnail/bubble-map.jpg
88
language: plotly_js
99
page_type: example_index
1010
has_thumbnail: true
1111
display_as: maps
12-
order: 2
12+
order: 4
1313
redirect_from: javascript-graphing-library/bubble-maps/
1414
---
1515
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","bubble-maps" | sort: "order" %}

‎_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth_plotly_js_index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
layout: user-guide
77
thumbnail: thumbnail/choropleth.jpg
88
language: plotly_js
9-
page_type: example_index
109
has_thumbnail: true
1110
display_as: maps
1211
order: 0

‎_posts/plotly_js/maps/density-mapbox/2019-08-16-basic_density_mapbox.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
name: Stamen Terrain Tile that Needs no Token
3+
plot_url: https://codepen.io/plotly/embed/QWLKpZW/?height=505&theme-id=15263&default-tab=result\
4+
language: plotly_js
5+
suite: density-maps
6+
order: 1
7+
sitemap: false
8+
layout: user-guide
9+
arrangement: horizontal
10+
markdown_content: |
11+
12+
To plot on Mapbox maps with Plotly you may need a Mapbox account and a public [Mapbox Access Token](https://studio.mapbox.com). See our [Mapbox Map Layers](https://plot.ly/javascript/mapbox-layers/) documentation for more information.
13+
---
14+
var data = [{type: 'densitymapbox', lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2]}];
15+
16+
var layout = {width: 600, height: 400, mapbox: {style: 'stamen-terrain'}};
17+
18+
Plotly.newPlot('graph', data, layout);

‎_posts/plotly_js/maps/density-mapbox/2019-08-16-density_plotly_js_index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: JavaScript Graphing Library D3.js-based Density Mapbox | Examples | Plotly
3+
name: Density Mapbox
4+
permalink: javascript/density-maps/
5+
description: How to make a D3.js-based density mapbox in JavaScript. A density mapbox uses a variable binding expression to display population density.
6+
layout: user-guide
7+
thumbnail: thumbnail/mapbox-density.png
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: true
11+
display_as: maps
12+
order: 0
13+
redirect_from: javascript-graphing-library/density-maps/
14+
---
15+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","density-maps" | sort: "order" %}
16+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/maps/density-mapbox/2019-08-16-earthquack_density.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
name: Outdoors Tile that Requires Token
3+
plot_url: https://codepen.io/plotly/embed/xxKEqyL/?height=514&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
layout: user-guide
6+
suite: density-maps
7+
order: 3
8+
sitemap: false
9+
arrangement: horizontal
10+
11+
---
12+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',
13+
function(err, rows){function unpack(rows, key) {return rows.map(function(row){ return row[key];
14+
})};
15+
16+
var data = [{
17+
lon: unpack(rows, 'Longitude'), lat: unpack(rows, 'Latitude'), radius:10,
18+
z: unpack(rows, 'Magnitude'), type: "densitymapbox", coloraxis: 'coloraxis',
19+
hoverinfo: 'skip'}];
20+
21+
var layout = {
22+
mapbox: {center: {lon: 60, lat: 30}, style: "outdoors", zoom: 2},
23+
coloraxis: {colorscale: "Viridis"}, title: {text: "Earthquake Magnitude"},
24+
width: 600, height: 400, margin: {t: 30, b: 0}};
25+
26+
var config = {mapboxAccessToken: 'your token'};
27+
28+
Plotly.newPlot('graph', data, layout, config);
29+
})

‎_posts/plotly_js/maps/density-mapbox/2019-08-16-multi_density-mapbox.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
name: Light Tile, Requires Token
3+
plot_url: https://codepen.io/plotly/embed/dybpvgm/?height=510&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
layout: user-guide
6+
suite: density-maps
7+
order: 2
8+
sitemap: false
9+
arrangement: horizontal
10+
11+
---
12+
var data = [
13+
{type: "densitymapbox", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],
14+
radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},
15+
{type: 'densitymapbox', lon: [-10, -20, -30], lat: [15, 25, 35],
16+
radius: [50, 100, 10], colorbar: {y: 0, yanchor: 'bottom', len: 0.45}
17+
}];
18+
19+
var layout = {mapbox: {style: 'light', center: {lat: 20}}, width: 600, height: 400};
20+
21+
var config = {mapboxAccessToken: 'your token'};
22+
23+
Plotly.newPlot('graph', data, layout, config);

‎_posts/plotly_js/maps/lines-on-maps/2015-07-11-lines_on_maps_plotly_js_index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
page_type: example_index
1010
has_thumbnail: true
1111
display_as: maps
12-
order: 3
12+
order: 2
1313
redirect_from: javascript-graphing-library/lines-on-maps/
1414
---
1515
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","lines-on-maps" | sort: "order" %}

‎_posts/plotly_js/maps/scatter-plot-on-maps/2015-07-11-scatter_maps_plotly_js_index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
layout: user-guide
77
thumbnail: thumbnail/scatter-plot-on-maps.jpg
88
language: plotly_js
9-
page_type: example_index
109
has_thumbnail: true
1110
display_as: maps
1211
order: 1

‎_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_plotly_js_index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
name: Scatter Plots on Mapbox
44
permalink: javascript/scattermapbox/
55
description: How to make scatter plots on Mapbox maps in Plotly.JS
6-
layout: base
6+
layout: user-guide
77
thumbnail: thumbnail/scatter-mapbox.jpg
88
language: plotly_js
9-
page_type: example_index
109
has_thumbnail: true
1110
display_as: maps
12-
order: 5
11+
order: 3
1312
---
1413
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scattermapbox" | sort: "order" %}
1514
{% include auto_examples.html examples=examples %}

0 commit comments

Comments
 (0)