Merge pull request #1466 from plotly/choropleth

js choropleth mapbox

Author: Mahdis-z

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-US_states.html

@@ -0,0 +1,23 @@
+---
+name: Dark tile, Needs Token
+plot_url: https://codepen.io/plotly/embed/eYOdVRG/?height=527&theme-id=15263&default-tab=result
+language: plotly_js
+suite: choropleth-mapbox
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+    This example uses [zmin and zmax](https://plot.ly/javascript/reference/#choroplethmapbox-zmin) to define the lower bound and upper bound of the color domain. If these attributes are not set, Plotly [determines the color domain](https://plot.ly/javascript/reference/#heatmap-zauto) based on the input data.
+---
+
+var data = [{
+ type: "choroplethmapbox", name: "US states", geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json", locations: [ "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" ],
+z: [ 141, 140, 155, 147, 132, 146, 151, 137, 146, 136, 145, 141, 149, 151, 138, 158, 164, 141, 146, 145, 142, 150, 155, 160, 156, 161, 147, 164, 150, 152, 155, 167, 145, 146, 151, 154, 161, 145, 155, 150, 151, 162, 172, 169, 170, 151, 152, 173, 160, 176 ],
+zmin: 25, zmax: 280, colorbar: {y: 0, yanchor: "bottom", title: {text: "US states", side: "right"}}}
+ ];
+
+var layout = {mapbox: {style: "dark", center: {lon: -110, lat: 50}, zoom: 0.8}, width: 600, height: 400, margin: {t: 0, b: 0}};
+
+var config = {mapboxAccessToken: 'add your access token'};
+
+Plotly.newPlot('graph', data, layout, config);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-basic-choropleth1.html

@@ -0,0 +1,24 @@
+---
+name: Basic Tile, Needs Token
+plot_url: https://codepen.io/plotly/embed/BaBLYZN/?height=505&theme-id=15263&default-tab=result\
+language: plotly_js
+suite: choropleth-mapbox
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    This tutorial uses [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) to make a map of US states using [vector tiles](https://plot.ly/javascript/mapbox-layers/).
+---
+
+var data = [{
+  type: "choroplethmapbox", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
+  geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
+}];
+
+var layout = {mapbox: {center: {lon: -74, lat: 43}, zoom: 3.5},
+              width: 600, height:400};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot('graph', data, layout, config);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth-geojson-object.html

@@ -0,0 +1,29 @@
+---
+name: Streets Tile, Needs Token
+plot_url: https://codepen.io/plotly/embed/NWKRygN/?height=510&theme-id=15263&default-tab=result
+language: plotly_js
+suite: choropleth-mapbox
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    The following example sets `geojson object` of type `feature` and geometries of type 'Polygon'. For more information see [geojson attribute](https://plot.ly/javascript/reference/#choroplethmapbox-geojson) in the reference page.
+    As you see, scattermapbox trace is above Choropleth mapbox. To set the Choropleth mapbox above all the other traces you should set [below attribute](https://plot.ly/javascript/reference/#choroplethmapbox-below).
+---
+var data = [
+   {type: "scattermapbox", lon: [-86], lat: [34], marker: {size: 20, color: 'purple'}},
+   {
+    type: "choroplethmapbox",locations: ["AL"], z: [10], coloraxis: "coloraxis",           geojson: {type: "Feature", id: "AL", geometry: {type: "Polygon", coordinates: [[
+    [-86, 35], [-85, 34], [-85, 32], [-85, 32], [-85, 32], [-85, 32], [-85, 31],
+    [-86, 31], [-87, 31], [-87, 31], [-88, 30], [-88, 30], [-88, 30], [-88, 30],
+    [-88, 34], [-88, 35]]]
+   }}}];
+
+var layout = {width: 600, height: 400, mapbox: {style: 'streets',
+    center: {lon: -86, lat: 33}, zoom: 5}, marker: {line: {color: "blue"}},
+    coloraxis: {showscale: false, colorscale: "Viridis"}};
+
+Plotly.setPlotConfig({mapboxAccessToken: 'add your access token'});
+
+Plotly.newPlot('graph', data, layout);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth_plotly_js_index.html

@@ -0,0 +1,16 @@
+---
+title: JavaScript Graphing Library D3.js-based Choropleth Mapbox | Examples | Plotly
+name: Choropleth Mapbox
+permalink: javascript/choropleth-mapbox/
+description: How to make a D3.js-based choropleth mapbox in JavaScript. A Choropleth mapbox shades geographic regions by value.
+layout: user-guide
+thumbnail: thumbnail/mapbox-choropleth.png
+language: plotly_js
+page_type: example_index
+has_thumbnail: true
+display_as: maps
+order: 0
+redirect_from: javascript-graphing-library/choropleth-mapbox/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","choropleth-mapbox" | sort: "order" %}
+{% include auto_examples.html examples=examples %}