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:

        data: { source: mygeojsonfile }
                order: 10000
                color: |
                        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%)";


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.

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.