Interactive map with complex function

[joelgombin]

Hi,

I'd like to make an interactive map, where the data represented on the map is computed from several input parameters. Is there any way to process the input parameters, generate a new dataset and push it to the map, ideally in R, or possibly in javascript? How would that articulate with the map.updateChoropleth function (I'm referring to http://rmaps.github.io/blog/posts/animated-choropleths/index.html)?

Thanks !

[ramnathv]

Depending on what you are changing, the map.updateChoropleth function may or may not do the trick. The alternate in this case would be to redraw the entire map.

There are two options here:

1. You can do the data processing in R on the server side using a framework like Shiny or OpenCPU and then use rCharts to push the chart to the client.
2. You can do a part of the data manipulation in JS on the client side using AngularJS/Lodash, and do more instantaneous updating of the map using map.updateChoropleth.

If you can create a simple example based on your use case, I will be able to advice more. I am constantly looking for more complex use-cases to enhance functionality. The author of datamaps will also be willing to enhance features if there is a genuine use case.

[ramnathv]

Here is an example with Shiny, where the number of cuts and palette is controlled from the Shiny server. Because of duplication of the datamaps library across rCharts and rMaps, this app ends up using the assets from rCharts, which is not the latest version of datamaps. This situation will be remedied as I pull datamaps and leaflet out of rCharts.

Note that in this case, the chart is being redrawn everytime you modify an input. This does NOT use updateChoropleth. The examples in my blog post used AngularJS to update the map, all from the client side.

Once you are able to provide more information about your use case, I can advice on the best approach.

library(shiny)
library(rMaps)
runApp(list(
  ui = pageWithSidebar(
    headerPanel("Shiny, rCharts and DataMaps"),
    sidebarPanel(
      selectInput("pal", 'Select Palette', c('Blues', 'PuRd')),
      numericInput("ncuts", 'Select Number of Breaks', value = 5, min = 4, max = 9)
    ),
    mainPanel(
      rCharts::chartOutput('myplot', 'datamaps')  
    )
  ),
  server = function(input, output, session){
    output$myplot = rCharts::renderChart2({ichoropleth(
      Crime ~ State, 
      data = subset(violent_crime, Year == 2010),
      pal = input$pal,
      ncuts = input$ncuts
    )})
  }
))

[joelgombin]

Thanks for these explanations. I guess the performances are better if the map is updated from the client side. So I was probably looking at better understanding how updateChoropleth works. Can you use it to push some new data, or does it have to only select a different part of the existing dataset?

In my case, I have a choropleth map, where the user gives some input (let's say three variables v1, v2 and v3). The values to be mapped (say v.out) are the result of some arbitrary formula f : v.out = f(v1,v2,v3). So of course I could compute v.out in shiny and then push a new map to the output, but I'd rather do this client side - or rather, I don't mind computing v.out server side, but I'd prefer nt having to send a new map to the client each time, just push the new values of v.out. How would you do that? (of course, one handicap here is that I'm not familiar with javascript, but I'm willing to try to understand it).

[ramnathv]

map.updateChoropleth can only update the mapping on colors on the map (currently). Are v1, v2 and v3 user provided inputs? If the base map is the same (e.g. US map), it should be possible to do the update using updateChoropleth. It does NOT accept a data argument.

While developing interactive, updateable visualizations, I have always found it useful to create a simple interactive version. In this case, can you create a simple visualization that takes v1, v2 and v3 as inputs and creates an interactive map with it. Once, you have that, it will be easier to figure out how to use updateChoropleth to do the rest.

[joelgombin]

Yes, v1, v2 and v3 are use provided inputs, and the base map (in that case a custom layer) remains the same, only the polygons' colours change.

[ramnathv]

If you provide a simple example, I can help you work through the steps to do it with AngularJS.