Each category is a subjective labeling of the various API functions in d3 version 3. The numbers that drive the treemap are counts of API funcions in each category. This is a little like using lines of code as a metric as a higher count doesn’t necessarily mean more important, but it does give a relative sense for the distribution of functionality in d3.
This makes it easy to see the logic in splitting d3 up into smaller modules for version 4.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%}
text {
font-family: Arial;
font-size: 10px;
fill: #212026;
}
</style>
</head>
<body>
<svg></svg>
<script>
d3.json("api.json", function(err, api) {
var w = 960;
var h = 500;
//counting functions under each API section
//this is not quite comprehensive because I arbitrarily removed some
//functions that would add clutter, and didn't include sub functions
var nested = d3.nest()
.key(function(d) { return d.type})
.rollup(function(d) { return d.length })
.map(api)
var groups = Object.keys(nested);
var color = d3.scale.category20c()
.domain(groups);
var prepTypes = groups.map(function(t) {
return {
type: t,
children: [{value: nested[t]}]
}
})
var typeObj = {type:"API", children:prepTypes};
var treemap = d3.layout.treemap()
.size([w,h])
.sort(function(a,b) { return a.value - b.value })
.value(function(d) { return d.value })
var nodes = treemap.nodes(typeObj)
var svg = d3.select("svg");
var gs = svg.selectAll("g.cell")
.data(nodes)
.enter()
.append("g").classed("cell",true);
gs.append("rect")
.attr({
x: function(d) { return d.x },
y: function(d) { return d.y },
width: function(d) { return d.dx },
height: function(d) { return d.dy}
})
.style({
opacity: function(d) { return !!d.parent },
fill: function(d) { if(d.parent) return color(d.parent.type) }
})
svg.selectAll("text.cell")
.data(nodes).enter()
.append("text")
.text(function(d) { if(d.parent && d.parent.type != "API") return d.parent.type })
.attr({
x: function(d) { return d.x + 10 },
y: function(d) { return d.y - 10 },
transform: function(d) {
return "rotate(90," + [d.x, d.y]+")"
}
})
});
</script>
</body>
[
{"name":"d3.select", "type":"Selections"},
{"name":"d3.selectAll", "type":"Selections" },
{"name":"d3.selection", "type":"Selections" },
{"name":"d3.event", "type":"Selections" },
{"name":"d3.mouse", "type":"Selections" },
{"name":"d3.touches", "type":"Selections" },
{"name":"d3.transition", "type":"Transitions"},
{"name":"d3.ease","type":"Transitions"},
{"name":"d3.timer","type":"Transitions"},
{"name":"d3.interpolate","type":"Transitions"},
{"name":"d3.interpolateNumber","type":"Transitions"},
{"name":"d3.interpolateRound","type":"Transitions"},
{"name":"d3.interpolateString","type":"Transitions"},
{"name":"d3.interpolateRgb","type":"Transitions"},
{"name":"d3.interpolateHsl","type":"Transitions"},
{"name":"d3.interpolateLab","type":"Transitions"},
{"name":"d3.interpolateHcl","type":"Transitions"},
{"name":"d3.interpolateArray","type":"Transitions"},
{"name":"d3.interpolateObject","type":"Transitions"},
{"name":"d3.interpolateTransform","type":"Transitions"},
{"name":"d3.interpolators","type":"Transitions"},
{"name":"d3.ascending","type":"Arrays"},
{"name":"d3.descending","type":"Arrays"},
{"name":"d3.min","type":"Arrays"},
{"name":"d3.max","type":"Arrays"},
{"name":"d3.extent","type":"Arrays"},
{"name":"d3.sum","type":"Arrays"},
{"name":"d3.mean","type":"Arrays"},
{"name":"d3.median","type":"Arrays"},
{"name":"d3.quantile","type":"Arrays"},
{"name":"d3.bisect","type":"Arrays"},
{"name":"d3.bisectRight","type":"Arrays"},
{"name":"d3.bisectLeft","type":"Arrays"},
{"name":"d3.bisector","type":"Arrays"},
{"name":"d3.shuffle","type":"Arrays"},
{"name":"d3.permute","type":"Arrays"},
{"name":"d3.zip","type":"Arrays"},
{"name":"d3.transpose","type":"Arrays"},
{"name":"d3.keys","type":"Arrays"},
{"name":"d3.values","type":"Arrays"},
{"name":"d3.entries","type":"Arrays"},
{"name":"d3.merge","type":"Arrays"},
{"name":"d3.range","type":"Arrays"},
{"name":"d3.nest","type":"Arrays"},
{"name":"d3.map","type":"Arrays"},
{"name":"d3.set","type":"Arrays"},
{"name":"d3.random.normal","type":"Math"},
{"name":"d3.random.logNormal","type":"Math"},
{"name":"d3.random.irwinHall","type":"Math"},
{"name":"d3.transform","type":"Math"},
{"name":"d3.xhr","type":"AJAX"},
{"name":"d3.text","type":"AJAX"},
{"name":"d3.json","type":"AJAX"},
{"name":"d3.html","type":"AJAX"},
{"name":"d3.xml","type":"AJAX"},
{"name":"d3.csv","type":"AJAX"},
{"name":"d3.tsv","type":"AJAX"},
{"name":"d3.format","type":"Strings"},
{"name":"d3.formatPrefix","type":"Strings"},
{"name":"d3.requote","type":"Strings"},
{"name":"d3.round","type":"Strings"},
{"name":"d3.rgb","type":"Colors"},
{"name":"d3.hsl","type":"Colors"},
{"name":"d3.lab","type":"Colors"},
{"name":"d3.hcl","type":"Colors"},
{"name":"d3.ns.prefix","type":"Namespaces"},
{"name":"d3.ns.qualify","type":"Namespaces"},
{"name":"d3.functor","type":"Internals"},
{"name":"d3.rebind","type":"Internals"},
{"name":"d3.dispatch","type":"Internals"},
{"name":"d3.scale.linear","type":"Scales"},
{"name":"d3.scale.sqrt","type":"Scales"},
{"name":"d3.scale.pow","type":"Scales"},
{"name":"d3.scale.log","type":"Scales"},
{"name":"d3.scale.quantize","type":"Scales"},
{"name":"d3.scale.threshold","type":"Scales"},
{"name":"d3.scale.quantile","type":"Scales"},
{"name":"d3.scale.identity","type":"Scales"},
{"name":"d3.scale.ordinal","type":"Scales"},
{"name":"d3.scale.category10","type":"Scales"},
{"name":"d3.scale.category20","type":"Scales"},
{"name":"d3.scale.category20b","type":"Scales"},
{"name":"d3.scale.category20c","type":"Scales"},
{"name":"d3.svg.line","type":"SVG"},
{"name":"d3.svg.line.radial","type":"SVG"},
{"name":"d3.svg.area","type":"SVG"},
{"name":"d3.svg.area.radial","type":"SVG"},
{"name":"d3.svg.arc","type":"SVG"},
{"name":"d3.svg.symbol","type":"SVG"},
{"name":"d3.svg.symbolTypes","type":"SVG"},
{"name":"d3.svg.chord","type":"SVG"},
{"name":"d3.svg.diagonal","type":"SVG"},
{"name":"d3.svg.diagonal.radial","type":"SVG"},
{"name":"d3.svg.axis","type":"SVG"},
{"name":"d3.svg.brush","type":"SVG"},
{"name":"d3.time.format","type":"Time"},
{"name":"d3.time.format.utc","type":"Time"},
{"name":"d3.time.format.iso","type":"Time"},
{"name":"d3.time.scale","type":"Time"},
{"name":"d3.time.interval","type":"Time"},
{"name":"d3.time.day","type":"Time"},
{"name":"d3.time.days","type":"Time"},
{"name":"d3.time.dayOfYear","type":"Time"},
{"name":"d3.time.hour","type":"Time"},
{"name":"d3.time.hours","type":"Time"},
{"name":"d3.time.minute","type":"Time"},
{"name":"d3.time.minutes","type":"Time"},
{"name":"d3.time.month","type":"Time"},
{"name":"d3.time.months","type":"Time"},
{"name":"d3.time.second","type":"Time"},
{"name":"d3.time.seconds","type":"Time"},
{"name":"d3.time.week","type":"Time"},
{"name":"d3.time.weeks","type":"Time"},
{"name":"d3.time.weekOfYear","type":"Time"},
{"name":"d3.time.year","type":"Time"},
{"name":"d3.time.years","type":"Time"},
{"name":"d3.layout.bundle","type":"Layouts"},
{"name":"d3.layout.chord","type":"Layouts"},
{"name":"d3.layout.cluster","type":"Layouts"},
{"name":"d3.layout.force","type":"Layouts"},
{"name":"d3.layout.hierarchy","type":"Layouts"},
{"name":"d3.layout.histogram","type":"Layouts"},
{"name":"d3.layout.pack","type":"Layouts"},
{"name":"d3.layout.partition","type":"Layouts"},
{"name":"d3.layout.pie","type":"Layouts"},
{"name":"d3.layout.stack","type":"Layouts"},
{"name":"d3.layout.tree","type":"Layouts"},
{"name":"d3.layout.treemap","type":"Layouts"},
{"name":"d3.geo.path","type":"Geo"},
{"name":"d3.geo.circle","type":"Geo"},
{"name":"d3.geo.area","type":"Geo"},
{"name":"d3.geo.bounds","type":"Geo"},
{"name":"d3.geo.centroid","type":"Geo"},
{"name":"d3.geo.distance","type":"Geo"},
{"name":"d3.geo.interpolate","type":"Geo"},
{"name":"d3.geo.length","type":"Geo"},
{"name":"d3.geo.projection","type":"Geo"},
{"name":"d3.geo.projectionMutator","type":"Geo"},
{"name":"d3.geo.albers","type":"Geo"},
{"name":"d3.geo.mercator","type":"Geo"},
{"name":"d3.geo.orthographic","type":"Geo"},
{"name":"d3.geo.stream","type":"Geo"},
{"name":"d3.geom.voronoi","type":"Geom"},
{"name":"d3.geom.delaunay","type":"Geom"},
{"name":"d3.geom.quadtree","type":"Geom"},
{"name":"d3.geom.polygon","type":"Geom"},
{"name":"d3.geom.hull","type":"Geom"},
{"name":"d3.behavior.drag","type":"Behaviors"},
{"name":"d3.behavior.zoom","type":"Behaviors"}
]
[
{"type":"Selections", "value":62},
{"type":"Scales", "value":50},
{"type":"Layouts", "value":43},
{"type":"SVG", "value":32},
{"type":"Arrays", "value":31},
{"type":"Transitions", "value":24},
{"type":"Time", "value":10},
{"type":"Geo", "value":10},
{"type":"Geom", "value":10},
{"type":"Strings", "value":15},
{"type":"Colors", "value":15},
{"type":"Math", "value":12},
{"type":"AJAX", "value":12},
{"type":"Namespaces", "value":10},
{"type":"Internals", "value":10},
{"type":"Behaviors", "value":4}
]