Enhancement to use other d3 modules

[karl-schelhammer-td]

I would have left a comment on the blog but could not find that feature. Awesome work by the way!

It would be great if you could add an example of how this sort of approach could be generalized to use the other d3 modules? For instance, in d3 version > 4 many of the core features were moved out of the core d3 package and into modules. So say I wanted to build a treemap and use a formatting function, my paths might look like this:

%%javascript
require.config({
    paths: {
        d3: 'https://d3js.org/d3.v5.min',
        d3_hierarchy: 'https://d3js.org/d3-hierarchy.v1.min.js',
        d3_format: 'https://d3js.org/d3-format.v1.min.js'
    }
});

But how would I build my charting script to take this into account? Something like this?:

require.undef('treemap');

define('treemap', ['d3', 'd3_hierarchy', 'd3_format'], function (d3, d3_hierarchy, d3_format) {

    function draw(container, data, width, height) {
        width = width || 932;
        height = height || 1060;
        var svg = d3.select(container).append("svg")
            .attr('width', width)
            .attr('height', height)
            .append("g");
         format = d3_format.format(",d")
         color = d3.scaleOrdinal().range(d3.schemeCategory10)

         treemap = data => d3_hierachy.treemap()
            .size([width, height])
            .padding(1)
            .round(true)
            (d3.hierarchy(data)
            .sum(d => d.size)
            .sort((a, b) => b.height - a.height || b.value - a.value))
            // rest of visualization code goes here
...
    }

    return draw;
});

Currently errors out: ReferenceError: format is not defined.

[soxofaan]

@karl-schelhammer-td Sorry for the late answer, for some reason I didn't get a notification of this issue.

in the require config, you should not use .js extensions

The following works for me for example:

%%javascript
require.config({
    paths: {
        d3: 'https://d3js.org/d3.v5.min',
        d3_hierarchy: 'https://d3js.org/d3-hierarchy.v1.min',
        d3_format: 'https://d3js.org/d3-format.v1.min'
    }
});

define('treemap', ['d3', 'd3_hierarchy', 'd3_format'], function (d3, d3_hierarchy, d3_format) {
    console.log("using d3, d3_hierarchy, d3_format");
});

require(["treemap"], function(treemap) {
    console.log("using treemap")
})