Skip to content

Commit bbacaa3

Browse files
kMutagenekMutagene
authored
Merge pull request #93 from plotly/mapbox
2 parents 41fe6e2 + aa58b4f commit bbacaa3

28 files changed

+1839
-34
lines changed

‎Plotly.NET.sln

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,21 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{60FB
7474
docs\4_3_contour-plots.fsx = docs\4_3_contour-plots.fsx
7575
docs\4_4_2d-histograms.fsx = docs\4_4_2d-histograms.fsx
7676
docs\4_5_splom.fsx = docs\4_5_splom.fsx
77-
docs\5_0_choropleth-map.fsx = docs\5_0_choropleth-map.fsx
78-
docs\6_0_candlestick.fsx = docs\6_0_candlestick.fsx
79-
docs\6_1_funnel.fsx = docs\6_1_funnel.fsx
80-
docs\6_2_funnel_area.fsx = docs\6_2_funnel_area.fsx
81-
docs\7_0_polar-charts.fsx = docs\7_0_polar-charts.fsx
82-
docs\7_1_windrose-charts.fsx = docs\7_1_windrose-charts.fsx
83-
docs\8_0_parallel-categories.fsx = docs\8_0_parallel-categories.fsx
84-
docs\8_1_parallel-coords.fsx = docs\8_1_parallel-coords.fsx
85-
docs\8_2_sankey.fsx = docs\8_2_sankey.fsx
77+
docs\5_0_geo-vs-mapbox.fsx = docs\5_0_geo-vs-mapbox.fsx
78+
docs\5_1_geo-plots.fsx = docs\5_1_geo-plots.fsx
79+
docs\5_2_choropleth-map.fsx = docs\5_2_choropleth-map.fsx
80+
docs\6_0_geo-vs-mapbox.fsx = docs\6_0_geo-vs-mapbox.fsx
81+
docs\6_1_mapbox-plots.fsx = docs\6_1_mapbox-plots.fsx
82+
docs\6_2_choropleth-mapbox.fsx = docs\6_2_choropleth-mapbox.fsx
83+
docs\6_3_density-mapbox.fsx = docs\6_3_density-mapbox.fsx
84+
docs\7_0_candlestick.fsx = docs\7_0_candlestick.fsx
85+
docs\7_1_funnel.fsx = docs\7_1_funnel.fsx
86+
docs\7_2_funnel_area.fsx = docs\7_2_funnel_area.fsx
87+
docs\8_0_polar-charts.fsx = docs\8_0_polar-charts.fsx
88+
docs\8_1_windrose-charts.fsx = docs\8_1_windrose-charts.fsx
89+
docs\9_0_parallel-categories.fsx = docs\9_0_parallel-categories.fsx
90+
docs\9_1_parallel-coords.fsx = docs\9_1_parallel-coords.fsx
91+
docs\9_2_sankey.fsx = docs\9_2_sankey.fsx
8692
docs\_template.html = docs\_template.html
8793
docs\_template.ipynb = docs\_template.ipynb
8894
docs\Dockerfile = docs\Dockerfile

‎docs/5_0_geo-vs-mapbox.fsx

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
(**
2+
---
3+
title: Geo vs. Mapbox
4+
category: Geo map charts
5+
categoryindex: 6
6+
index: 1
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 12.0.3"
14+
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
15+
16+
(*** condition: ipynb ***)
17+
#if IPYNB
18+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
19+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
20+
#endif // IPYNB
21+
22+
(**
23+
# Mapbox Maps vs Geo Maps
24+
25+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
26+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
27+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
28+
29+
*Summary:* This introduction shows the differences between Geo and Mapbox based geographical charts.
30+
31+
Plotly and therefore Plotly.NET supports two different kinds of maps:
32+
33+
- **Mapbox maps** are tile-based maps. If your figure is created with a `Chart.*Mapbox` function or otherwise contains one or more traces of type `scattermapbox`,
34+
`choroplethmapbox` or `densitymapbox`, the layout.mapbox object in your figure contains configuration information for the map itself.
35+
36+
- **Geo maps** are outline-based maps. If your figure is created with a `Chart.ScatterGeo, `Chart.PointGeo`, `Chart.LineGeo` or `Chart.Choropleth` function or
37+
otherwise contains one or more traces of type `scattergeo` or `choropleth`, the layout.geo object in your figure contains configuration information for the map itself.
38+
39+
_This page documents Geo outline-based maps, and the [Mapbox Layers documentation]({{root}}/6_0_geo-vs-mapbox.html) describes how to configure Mapbox tile-based maps._
40+
41+
## Physical Base Maps
42+
43+
Plotly Geo maps have a built-in base map layer composed of "physical" and "cultural" (i.e. administrative border) data from the Natural Earth Dataset.
44+
Various lines and area fills can be shown or hidden, and their color and line-widths specified.
45+
In the default plotly template, a map frame and physical features such as a coastal outline and filled land areas are shown, at a small-scale 1:110m resolution:
46+
47+
*)
48+
49+
open Plotly.NET
50+
51+
let baseMapOnly =
52+
Chart.PointGeo([]) // deliberately empty chart to show the base map only
53+
|> Chart.withMarginSize(0,0,0,0)
54+
55+
(*** condition: ipynb ***)
56+
#if IPYNB
57+
baseLayerOnly
58+
#endif // IPYNB
59+
60+
(***hide***)
61+
baseMapOnly |> GenericChart.toChartHTML
62+
(***include-it-raw***)
63+
64+
(**
65+
To control the features of the map, a `Geo` object is used that can be associtaed with a given chart using the `Chart.WithGeo` function.
66+
Here is a map with all physical features enabled and styled, at a larger-scale 1:50m resolution:
67+
*)
68+
69+
let myGeo =
70+
Geo.init(
71+
Resolution=StyleParam.GeoResolution.R50,
72+
ShowCoastLines=true,
73+
CoastLineColor="RebeccaPurple",
74+
ShowLand=true,
75+
LandColor="LightGreen",
76+
ShowOcean=true,
77+
OceanColor="LightBlue",
78+
ShowLakes=true,
79+
LakeColor="Blue",
80+
ShowRivers=true,
81+
RiverColor="Blue"
82+
)
83+
84+
let moreFeaturesBaseMap =
85+
Chart.PointGeo([])
86+
|> Chart.withMap myGeo
87+
|> Chart.withMarginSize(0,0,0,0)
88+
89+
(*** condition: ipynb ***)
90+
#if IPYNB
91+
moreFeaturesBaseMap
92+
#endif // IPYNB
93+
94+
(***hide***)
95+
moreFeaturesBaseMap |> GenericChart.toChartHTML
96+
(***include-it-raw***)
97+
98+
(**
99+
## Cultural Base Maps
100+
101+
In addition to physical base map features, a "cultural" base map is included which is composed of country borders and selected sub-country borders such as states.
102+
103+
_Note and disclaimer: cultural features are by definition subject to change, debate and dispute. Plotly includes data from Natural Earth "as-is" and defers to the Natural Earth policy regarding disputed borders which read:_
104+
105+
> Natural Earth Vector draws boundaries of countries according to defacto status. We show who actually controls the situation on the ground.
106+
107+
Here is a map with only cultural features enabled and styled, at a 1:50m resolution, which includes only country boundaries. See below for country sub-unit cultural base map features:
108+
*)
109+
110+
let countryGeo =
111+
Geo.init(
112+
Visible=false,
113+
Resolution=StyleParam.GeoResolution.R50,
114+
ShowCountries=true,
115+
CountryColor="RebeccaPurple"
116+
)
117+
118+
119+
let countryBaseMap =
120+
Chart.PointGeo([])
121+
|> Chart.withMap countryGeo
122+
|> Chart.withMarginSize(0,0,0,0)
123+
124+
(*** condition: ipynb ***)
125+
#if IPYNB
126+
countryBaseMap
127+
#endif // IPYNB
128+
129+
(***hide***)
130+
countryBaseMap |> GenericChart.toChartHTML
131+
(***include-it-raw***)

‎docs/5_1_geo-plots.fsx

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
(**
2+
---
3+
title: Scatter and line plots on Geo maps
4+
category: Geo map charts
5+
categoryindex: 6
6+
index: 2
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 12.0.3"
14+
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
15+
16+
(*** condition: ipynb ***)
17+
#if IPYNB
18+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
19+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
20+
#endif // IPYNB
21+
22+
(**
23+
# Scatter and line plots on Geo maps
24+
25+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
26+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
27+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
28+
29+
*Summary:* This example shows how to create Point and Line charts on geo maps in F#.
30+
31+
let's first create some data for the purpose of creating example charts:
32+
*)
33+
open Plotly.NET
34+
35+
let cityNames = [
36+
"Montreal"; "Toronto"; "Vancouver"; "Calgary"; "Edmonton";
37+
"Ottawa"; "Halifax"; "Victoria"; "Winnepeg"; "Regina"
38+
]
39+
40+
let lon = [
41+
-73.57; -79.24; -123.06; -114.1; -113.28;
42+
-75.43; -63.57; -123.21; -97.13; -104.6
43+
]
44+
let lat = [
45+
45.5; 43.4; 49.13; 51.1; 53.34; 45.24;
46+
44.64; 48.25; 49.89; 50.45
47+
]
48+
49+
(**
50+
The simplest type of geo plot is plotting the (lon,lat) pairs of a location via `Chart.PointGeo`.
51+
Here is an example using the location of Canadian cities:
52+
*)
53+
54+
let pointGeo =
55+
Chart.PointGeo(
56+
lon,
57+
lat,
58+
Labels=cityNames,
59+
TextPosition=StyleParam.TextPosition.TopCenter
60+
)
61+
|> Chart.withMapStyle(
62+
Scope=StyleParam.GeoScope.NorthAmerica,
63+
Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
64+
CountryColor = "lightgrey"
65+
)
66+
|> Chart.withMarginSize(0,0,0,0)
67+
68+
(*** condition: ipynb ***)
69+
#if IPYNB
70+
pointGeo
71+
#endif // IPYNB
72+
73+
(***hide***)
74+
pointGeo |> GenericChart.toChartHTML
75+
(***include-it-raw***)
76+
77+
78+
(**
79+
To connect the given (lon,lat) pairs via straight lines, use `Chart.LineGeo`.
80+
Below is an example that pulls external data as a Deedle data
81+
frame containing the source and target locations of American Airlines flights from Feb. 2011:
82+
*)
83+
84+
#r "nuget: Deedle"
85+
#r "nuget: FSharp.Data"
86+
open Deedle
87+
open FSharp.Data
88+
open System.IO
89+
open System.Text
90+
91+
let data =
92+
Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/c34aaa0b1b3cddad335173cb7bc0181897201ee6/2011_february_aa_flight_paths.csv"
93+
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
94+
95+
let opacityVals : float [] = data.["cnt"] |> Series.values |> fun s -> s |> Seq.map (fun v -> v/(Seq.max s)) |> Array.ofSeq
96+
let startCoords = Series.zipInner data.["start_lon"] data.["start_lat"]
97+
let endCoords = Series.zipInner data.["end_lon"] data.["end_lat"]
98+
let coords = Series.zipInner startCoords endCoords |> Series.values
99+
100+
let flights =
101+
coords
102+
|> Seq.mapi (fun i (startCoords,endCoords) ->
103+
Chart.LineGeo(
104+
[startCoords; endCoords],
105+
Opacity = opacityVals.[i],
106+
Color = "red"
107+
)
108+
)
109+
|> Chart.Combine
110+
|> Chart.withLegend(false)
111+
|> Chart.withMapStyle(
112+
Scope=StyleParam.GeoScope.NorthAmerica,
113+
Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
114+
ShowLand=true,
115+
LandColor = "lightgrey"
116+
)
117+
|> Chart.withMarginSize(0,0,50,0)
118+
|> Chart.withTitle "Feb. 2011 American Airline flights"
119+
120+
(*** condition: ipynb ***)
121+
#if IPYNB
122+
flights
123+
#endif // IPYNB
124+
125+
(***hide***)
126+
flights |> GenericChart.toChartHTML
127+
(***include-it-raw***)

‎docs/5_0_choropleth-map.fsx renamed to ‎docs/5_2_choropleth-map.fsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
(**
22
---
33
title: Choropleth maps
4-
category: Map Charts
4+
category: Geo map charts
55
categoryindex: 6
6-
index: 1
6+
index: 3
77
---
88
*)
99

@@ -193,10 +193,8 @@ open System.IO
193193
open System.Text
194194

195195
let data =
196-
let dataString = Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv"
197-
let byteArray = Encoding.UTF8.GetBytes(dataString)
198-
use stream = new MemoryStream(byteArray)
199-
Frame.ReadCsv(stream,true,separators=",",schema="fips=string,unemp=float")
196+
Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv"
197+
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",",schema="fips=string,unemp=float")
200198

201199

202200
(**
@@ -239,7 +237,10 @@ let choroplethGeoJSON =
239237
)
240238
|> Chart.withMap(
241239
Geo.init(
242-
Scope=StyleParam.GeoScope.Usa
240+
Scope=StyleParam.GeoScope.NorthAmerica,
241+
Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
242+
ShowLand=true,
243+
LandColor = "lightgrey"
243244
)
244245
)
245246
|> Chart.withSize (800.,800.)

0 commit comments

Comments
 (0)