Correct idiom to inject static JSON Data

[schnee]

I'm attempting to "simply" draw a map using D3 and D3 Projections via htmlwidgets. My question is how to "inject" the shapes data, in the "htmlwidgets" way.

Currently, my renderValue looks like:

  renderValue: function(el, x, instance) {

    var path = d3.geo.path()
    .projection(instance.projection);

    // select the svg element and remove existing childern
    var svg = d3.select(el).select("svg");
    svg.selectAll("*").remove();

    d3.json("htmlwidgets/lib/shapes/world-110m.json", function(error, world) {
      svg.insert("path", ".trip")
          .datum(topojson.feature(world, world.objects.land))
          .attr("class", "land")
          .attr("d", path);

      svg.insert("path", ".trip")
          .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
          .attr("class", "boundary")
          .attr("d", path);
  });
},

My question centers on this line:

d3.json("htmlwidgets/lib/shapes/world-110m.json", function(error, world) {

What is the idiomatic way to, in general, provide static data like this?

My yaml looks like:

dependencies:
- name: d3-geo-projection
  version: 0.2.12
  src: htmlwidgets/lib/d3-geo-projection
  script: d3-geo-projection.js
- name: d3
  version: 3.5.3
  src: htmlwidgets/lib/d3
  script: d3.min.js
- name: topojson
  version: 1.6.18
  src: htmlwidgets/lib/topojson
  script: topojson.js

[jjallaire]

@ramnathv Would the attachment work that we did cover this use case?

[ramnathv]

Yes. The attachment stuff would work. Let me cook up a simple example that can go into the docs.

[jjallaire]

Okay, you can add it as a section of the "Advanced" article

On Mon, Jan 12, 2015 at 1:13 PM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

Yes. The attachment stuff would work. Let me cook up a simple example that
can go into the docs.

—
Reply to this email directly or view it on GitHub
#71 (comment).

[ramnathv]

@schnee I will be posting a more detailed article on how to handle extra dependencies within the htmlwidgets framework. But here is a quick version of it.

Step 1

Include shapes as a dependency in the YAML

dependencies:
  - name: 'shapes'
    version: 0.1.0
    src: 'htmlwidgets/lib/shapes'
    attachment: {"world": 'world-110m.json'}

Step 2

Access it in your javascript binding

// first argument refers to dependency name and the second argument refers to the name of the 
// attachment you are trying to access.
var shape = HTMLWidgets.getAttachmentUrl('shapes', 'world')
d3.json(shape, function(error, world) {
      svg.insert("path", ".trip")
          .datum(topojson.feature(world, world.objects.land))
          .attr("class", "land")
          .attr("d", path);

      svg.insert("path", ".trip")
          .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
          .attr("class", "boundary")
          .attr("d", path);

Note that if you have multiple json files in shapes, then this approach would copy all of them, even if you end up using only one of those files. If you want to do this dynamically, say for example user gets to pick which map they are plotting, then the idiomatic way to do it is to use the dependencies argument in createWidget. So, here is what you would do.

d3map <- function(map){
  shape <- htmlwidgets::htmlDependency(
    name = 'shapes',
    version = '0.1.0',
    src = system.file('htmlwidgets/lib/shapes', package = 'd3map'),
   attachment = list(world = map)
  )
  ...
  htmlwidgets::createWidget(
    ...,
    dependencies = shape
  )
}

This will inject a dynamic dependency, and also allow the user to use files outside of the package.

[timelyportfolio]

Thanks so much for the response @ramnathv. This will be helpful.

[schnee]

SO SO Awesome. Thanks! Useful for my particular issue and useful in general.

http://note.io/17BleMJ

[GiovanninoPaneEvino]

However this way the json gets loaded for each reactive instance of the widget, am I right?
If it's like that I would suggest to insert the json reading into the factory through a promise and then reference it in the reactive by promise.then !

Awesome anyway :-)