Tangram YAML, use external function?

Question

I would like to use some functions from D3 in my Tangram scene.yaml, but I'm not finding anything about it in the documentation.

I've tried referencing D3 in the YAML, like so:

layers:
    give:
        data: { source: mygeojsonfile }
        draw:
            polygons:
                order: 10000
                color: |
                    function(){
                        var x = d3.scaleLinear()
                            .domain([40, 60])
                            .range([0, 360]);
                        return "hsla(" +
                            x(feature.give) +","+
                            "100%," +
                            "50%," +
                            "100%" +
                            ")";
                    }
                extrude: function(){ return feature.give ; }

But it's not working, I get ReferenceError: D3 is not defined.

I'm importing D3 before Tangram, so my assumption was that the D3 object would be globally accessible.

My next attempt was to manipulate the color from my map.js file.

d3.json("give.geojson", function(d){
  d = d.features;
  var x = d3.scaleLinear()
    .domain(d3.extent(d, function(d){ return d.properties.give; }))
    .range([0, 360]);

  var give = scene.config.layers.give;

  give.draw.polygons.color = "hsla(" +
    x(feature.give) +","+
    "100%, 50%, 100%)";

  scene.updateConfig();
});

But this won't work because feature will not be defined and I won't be calculating the color for each feature.

I would prefer to make the other option work, since it's less cumbersome writing the code in map.js than inside of a string in scene.yaml.

Answer 1

Look in style_parser.js in the tangram source to see how your function gets executed. You may be able to attach library functions to the global element of the scene but you might have to write your own scalelinear for this to work nicely.