Skip to content

[Question] Custom maps / geojson (Choropleth maps) #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
luisquintanilla opened this issue Jun 21, 2021 · 3 comments
Closed

[Question] Custom maps / geojson (Choropleth maps) #86

luisquintanilla opened this issue Jun 21, 2021 · 3 comments
Labels
Area: MissingAbstraction Plotly.js functionality that has to be implemented Type: Enhancement Type: Question

Comments

@luisquintanilla
Copy link
Contributor

Is there a way to provide or use custom geojson with Plotly.NET?

https://plotly.com/python/choropleth-maps/#choropleth-map-using-geojson

I'm looking to focus on a specific US city / state as opposed to using the USA_States or CountryNames built in LocationFormat

@kMutagene kMutagene added Area: MissingAbstraction Plotly.js functionality that has to be implemented Type: Enhancement Type: Question labels Jun 22, 2021
@kMutagene
Copy link
Collaborator

kMutagene commented Jun 22, 2021

Hi @luisquintanilla , thanks for the question, it sent me down quite some rabbit hole 😄

It took me quite a while, mainly due to not knowing what geojson exactly is, but i made the python example you linked work in F#. As always with un-wrapped features, you currently have to access some low level properties though.

The following things are needed:

  • A key in the geojson features that can be used as lookup. In the example data, that key is simply "id"

  • a data array, containing pairs of those keys and the z data that will be the color on the plot. In the example it is this table:

    image

    with the keys being the fips codes, and the data the "unemp" column.

Here is a snippet.

  • locations are the fips codes
  • z contains the unemp data
  • geojson is the geojson object
  • it is now important to set the following properties on the choropleth trace:
    • locationmode to "geojson-id" to trigger the lookup instead of just using locations as data source
    • featureidkey to set the feature that is used as lookup
#r "nuget: FSharp.Data"
#r "nuget: Deedle"
#r "nuget: Newtonsoft.Json"
#r "nuget: Plotly.NET, 2.0.0-preview.3"

open Plotly.NET
open GenericChart
open FSharp.Data
open Newtonsoft.Json
open System.Text
open System.IO
open Deedle

let geoJson = 
    Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json"
    |> JsonConvert.DeserializeObject

let data = 
     let dataString = Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv"
     let byteArray = Encoding.UTF8.GetBytes(dataString)
     use stream = new MemoryStream(byteArray)
     Frame.ReadCsv(stream,true,separators=",",schema="fips=string,unemp=float")

let locations: string [] = 
    data
    |> Frame.getCol "fips"
    |> Series.values
    |> Array.ofSeq

let z: int [] = 
    data
    |> Frame.getCol "unemp"
    |> Series.values
    |> Array.ofSeq

Trace.initChoroplethMap(id)
|> fun t ->
    t?z <- z
    t?locations <- locations
    t?geojson <- geoJson
    t?featureidkey <- "id"
    t?locationmode <- "geojson-id"
    t
|> GenericChart.ofTraceObject
|> Chart.withMap(
    Geo.init(
        Scope=StyleParam.GeoScope.Usa
    )
)
|> Chart.Show

image

To add this to Plotly.NET, basically only the featureidkey, locationmode and geojson options are missing, so this can be implemented very easily. I will add it in the next prerelease.

@luisquintanilla
Copy link
Contributor Author

Wow! Thanks @kMutagene. I was expecting a yes / no answer but you went above and beyond! Thanks so much! 😃

@kMutagene
Copy link
Collaborator

@luisquintanilla glad you liked it! It was a possibility to learn something new for me, so it was cool going down that rabbit hole. I released a new preview package that contains the relevant changes to use this with the high level abstractions contained in Chart.Choropleth. The respective docs are here: https://plotly.net/5_0_choropleth-map.html#Using-GeoJSON

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: MissingAbstraction Plotly.js functionality that has to be implemented Type: Enhancement Type: Question
Projects
None yet
Development

No branches or pull requests

2 participants