Skip to content

Instantly share code, notes, and snippets.

@andrewwitherspoon
Last active October 17, 2017 19:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewwitherspoon/70f8716dae5595f3f04927e53540be57 to your computer and use it in GitHub Desktop.
Save andrewwitherspoon/70f8716dae5595f3f04927e53540be57 to your computer and use it in GitHub Desktop.
NAFTA treemap
border: no
height: 600
license: gpl-3.0

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from mbostock's block: Treemap

{
"name": "flare",
"children": [{
"name": "mexico",
"children": [{
"name": "mexico",
"children": [{
"name": "01 Live Animals",
"size": 649506141
}, {
"name": "02 Meat And Edible Meat Offal",
"size": 1086862013
}, {
"name": "03 Fish, Crustaceans & Aquatic Invertebrates",
"size": 494282352
}, {
"name": "04 Dairy Prods; Birds Eggs; Honey; Ed Animal Pr Nesoi",
"size": 98888408
}, {
"name": "05 Products Of Animal Origin, Nesoi",
"size": 91431191
}, {
"name": "06 Live Trees, Plants, Bulbs Etc.; Cut Flowers Etc.",
"size": 53607793
}, {
"name": "07 Edible Vegetables & Certain Roots & Tubers",
"size": 5727526455
}, {
"name": "08 Edible Fruit & Nuts; Citrus Fruit Or Melon Peel",
"size": 6799351521
}, {
"name": "09 Coffee, Tea, Mate & Spices",
"size": 270356248
}, {
"name": "10 Cereals",
"size": 21054485
}, {
"name": "11 Milling Products; Malt; Starch; Inulin; Wht Gluten",
"size": 92407187
}, {
"name": "12 Oil Seeds Etc.; Misc Grain, Seed, Fruit, Plant Etc",
"size": 79335868
}, {
"name": "13 Lac; Gums, Resins & Other Vegetable Sap & Extract",
"size": 61941214
}, {
"name": "14 Vegetable Plaiting Materials & Products Nesoi",
"size": 43509227
}, {
"name": "15 Animal Or Vegetable Fats, Oils Etc. & Waxes",
"size": 152580404
}, {
"name": "16 Edible Preparations Of Meat, Fish, Crustaceans Etc",
"size": 92230115
}, {
"name": "17 Sugars And Sugar Confectionary",
"size": 1296129097
}, {
"name": "18 Cocoa And Cocoa Preparations",
"size": 552694314
}, {
"name": "19 Prep Cereal, Flour, Starch Or Milk; Bakers Wares",
"size": 1274822811
}, {
"name": "20 Prep Vegetables, Fruit, Nuts Or Other Plant Parts",
"size": 1355085516
}, {
"name": "21 Miscellaneous Edible Preparations",
"size": 483195142
}, {
"name": "22 Beverages, Spirits And Vinegar",
"size": 4886755814
}, {
"name": "23 Food Industry Residues & Waste; Prep Animal Feed",
"size": 19640588
}, {
"name": "24 Tobacco And Manufactured Tobacco Substitutes",
"size": 157907147
}, {
"name": "25 Salt; Sulfur; Earth & Stone; Lime & Cement Plaster",
"size": 309863187
}, {
"name": "26 Ores, Slag And Ash",
"size": 52141118
}, {
"name": "27 Mineral Fuel, Oil Etc.; Bitumin Subst; Mineral Wax",
"size": 10290651074
}, {
"name": "28 Inorg Chem; Prec & Rare-earth Met & Radioact Compd",
"size": 556936007
}, {
"name": "29 Organic Chemicals",
"size": 609367801
}, {
"name": "30 Pharmaceutical Products",
"size": 459619117
}, {
"name": "31 Fertilizers",
"size": 40977908
}, {
"name": "32 Tanning & Dye Ext Etc; Dye, Paint, Putty Etc; Inks",
"size": 223684218
}, {
"name": "33 Essential Oils Etc; Perfumery, Cosmetic Etc Preps",
"size": 990552010
}, {
"name": "34 Soap Etc; Waxes, Polish Etc; Candles; Dental Preps",
"size": 406012868
}, {
"name": "35 Albuminoidal Subst; Modified Starch; Glue; Enzymes",
"size": 65388018
}, {
"name": "36 Explosives; Pyrotechnics; Matches; Pyro Alloys Etc",
"size": 77852274
}, {
"name": "37 Photographic Or Cinematographic Goods",
"size": 24107279
}, {
"name": "38 Miscellaneous Chemical Products",
"size": 468833120
}, {
"name": "39 Plastics And Articles Thereof",
"size": 4970212410
}, {
"name": "40 Rubber And Articles Thereof",
"size": 2306931774
}, {
"name": "41 Raw Hides And Skins (no Furskins) And Leather",
"size": 99408678
}, {
"name": "42 Leather Art; Saddlery Etc; Handbags Etc; Gut Art",
"size": 194886481
}, {
"name": "43 Furskins And Artificial Fur; Manufactures Thereof",
"size": 440496
}, {
"name": "44 Wood And Articles Of Wood; Wood Charcoal",
"size": 330008577
}, {
"name": "45 Cork And Articles Of Cork",
"size": 940999
}, {
"name": "46 Mfr Of Straw, Esparto Etc.; Basketware & Wickerwrk",
"size": 15715626
}, {
"name": "47 Wood Pulp Etc; Recovd (waste & Scrap) ppr & pprbd",
"size": 8887615
}, {
"name": "48 Paper & Paperboard & Articles (inc Papr Pulp Artl)",
"size": 1003513916
}, {
"name": "49 Printed Books, Newspapers Etc; Manuscripts Etc",
"size": 296881701
}, {
"name": "50 Silk, Including Yarns And Woven Fabric Thereof",
"size": 115522
}, {
"name": "51 Wool & Animal Hair, Including Yarn & Woven Fabric",
"size": 26093108
}, {
"name": "52 Cotton, Including Yarn And Woven Fabric Thereof",
"size": 53514918
}, {
"name": "53 Veg Text Fib Nesoi; Veg Fib & Paper Yns & Wov Fab",
"size": 570639
}, {
"name": "54 Manmade Filaments, Including Yarns & Woven Fabrics",
"size": 128294633
}, {
"name": "55 Manmade Staple Fibers, Incl Yarns & Woven Fabrics",
"size": 58980934
}, {
"name": "56 Wadding, Felt Etc; Sp Yarn; Twine, Ropes Etc.",
"size": 148094771
}, {
"name": "57 Carpets And Other Textile Floor Coverings",
"size": 28835723
}, {
"name": "58 Spec Wov Fabrics; Tufted Fab; Lace; Tapestries Etc",
"size": 32507274
}, {
"name": "59 Impregnated Etc Text Fabrics; Tex Art For Industry",
"size": 313442678
}, {
"name": "60 Knitted Or Crocheted Fabrics",
"size": 20263852
}, {
"name": "61 Apparel Articles And Accessories, Knit Or Crochet",
"size": 1500073497
}, {
"name": "62 Apparel Articles And Accessories, Not Knit Etc.",
"size": 2115669756
}, {
"name": "63 Textile Art Nesoi; Needlecraft Sets; Worn Text Art",
"size": 938266410
}, {
"name": "64 Footwear, Gaiters Etc. And Parts Thereof",
"size": 419654780
}, {
"name": "65 Headgear And Parts Thereof",
"size": 120101713
}, {
"name": "66 Umbrellas, Walking-sticks, Riding-crops Etc, Parts",
"size": 5120385
}, {
"name": "67 Prep Feathers, Down Etc; Artif Flowers; H Hair Art",
"size": 4721516
}, {
"name": "68 Art Of Stone, Plaster, Cement, Asbestos, Mica Etc.",
"size": 588183967
}, {
"name": "69 Ceramic Products",
"size": 1056003416
}, {
"name": "70 Glass And Glassware",
"size": 1217698680
}, {
"name": "71 Nat Etc Pearls, Prec Etc Stones, Pr Met Etc; Coin",
"size": 5199941307
}, {
"name": "72 Iron And Steel",
"size": 1684992608
}, {
"name": "73 Articles Of Iron Or Steel",
"size": 4245259260
}, {
"name": "74 Copper And Articles Thereof",
"size": 953513616
}, {
"name": "75 Nickel And Articles Thereof",
"size": 62288408
}, {
"name": "76 Aluminum And Articles Thereof",
"size": 970504394
}, {
"name": "78 Lead And Articles Thereof",
"size": 192672641
}, {
"name": "79 Zinc And Articles Thereof",
"size": 274021791
}, {
"name": "80 Tin And Articles Thereof",
"size": 13343941
}, {
"name": "81 Base Metals Nesoi; Cermets; Articles Thereof",
"size": 50420418
}, {
"name": "82 Tools, Cutlery Etc. Of Base Metal & Parts Thereof",
"size": 571690246
}, {
"name": "83 Miscellaneous Articles Of Base Metal",
"size": 2013247195
}, {
"name": "84 Nuclear Reactors, Boilers, Machinery Etc.; Parts",
"size": 52165201876
}, {
"name": "85 Electric Machinery Etc; Sound Equip; Tv Equip; Pts",
"size": 61935428129
}, {
"name": "86 Railway Or Tramway Stock Etc; Traffic Signal Equip",
"size": 118416986
}, {
"name": "87 Vehicles, Except Railway Or Tramway, And Parts Etc",
"size": 81320789543
}, {
"name": "88 Aircraft, Spacecraft, And Parts Thereof",
"size": 1139553389
}, {
"name": "89 Ships, Boats And Floating Structures",
"size": 397327677
}, {
"name": "90 Optic, Photo Etc, Medic Or Surgical Instrments Etc",
"size": 13668638117
}, {
"name": "91 Clocks And Watches And Parts Thereof",
"size": 53876863
}, {
"name": "92 Musical Instruments; Parts And Accessories Thereof",
"size": 68986244
}, {
"name": "93 Arms And Ammunition; Parts And Accessories Thereof",
"size": 60385783
}, {
"name": "94 Furniture; Bedding Etc; Lamps Nesoi Etc; Prefab Bd",
"size": 11008040852
}, {
"name": "95 Toys, Games & Sport Equipment; Parts & Accessories",
"size": 982092721
}, {
"name": "96 Miscellaneous Manufactured Articles",
"size": 723843617
}, {
"name": "97 Works Of Art, Collectors' Pieces And Antiques",
"size": 209295110
}, {
"name": "98 Special Classification Provisions, Nesoi",
"size": 6153397484
}, {
"name": "99 Special Import Provisions, Nesoi",
"size": 2473837656
}]
}]
},{
"name": "canada",
"children": [{
"name": "canada",
"children": [{
"name": "01 Live Animals",
"size": 1381594278
}, {
"name": "02 Meat And Edible Meat Offal",
"size": 2437648901
}, {
"name": "03 Fish, Crustaceans & Aquatic Invertebrates",
"size": 2837446249
}, {
"name": "04 Dairy Prods; Birds Eggs; Honey; Ed Animal Pr Nesoi",
"size": 192531131
}, {
"name": "05 Products Of Animal Origin, Nesoi",
"size": 133468428
}, {
"name": "06 Live Trees, Plants, Bulbs Etc.; Cut Flowers Etc.",
"size": 364112113
}, {
"name": "07 Edible Vegetables & Certain Roots & Tubers",
"size": 1676791370
}, {
"name": "08 Edible Fruit & Nuts; Citrus Fruit Or Melon Peel",
"size": 388514215
}, {
"name": "09 Coffee, Tea, Mate & Spices",
"size": 568654630
}, {
"name": "10 Cereals",
"size": 1112165194
}, {
"name": "11 Milling Products; Malt; Starch; Inulin; Wht Gluten",
"size": 654495559
}, {
"name": "12 Oil Seeds Etc.; Misc Grain, Seed, Fruit, Plant Etc",
"size": 655776398
}, {
"name": "13 Lac; Gums, Resins & Other Vegetable Sap & Extract",
"size": 15478270
}, {
"name": "14 Vegetable Plaiting Materials & Products Nesoi",
"size": 1303951
}, {
"name": "15 Animal Or Vegetable Fats, Oils Etc. & Waxes",
"size": 2126601965
}, {
"name": "16 Edible Preparations Of Meat, Fish, Crustaceans Etc",
"size": 747121216
}, {
"name": "17 Sugars And Sugar Confectionary",
"size": 769815140
}, {
"name": "18 Cocoa And Cocoa Preparations",
"size": 1484128503
}, {
"name": "19 Prep Cereal, Flour, Starch Or Milk; Bakers Wares",
"size": 3068885802
}, {
"name": "20 Prep Vegetables, Fruit, Nuts Or Other Plant Parts",
"size": 1424532761
}, {
"name": "21 Miscellaneous Edible Preparations",
"size": 1246250396
}, {
"name": "22 Beverages, Spirits And Vinegar",
"size": 786093703
}, {
"name": "23 Food Industry Residues & Waste; Prep Animal Feed",
"size": 1432088443
}, {
"name": "24 Tobacco And Manufactured Tobacco Substitutes",
"size": 141468517
}, {
"name": "25 Salt; Sulfur; Earth & Stone; Lime & Cement Plaster",
"size": 953179484
}, {
"name": "26 Ores, Slag And Ash",
"size": 365545090
}, {
"name": "27 Mineral Fuel, Oil Etc.; Bitumin Subst; Mineral Wax",
"size": 68325578760
}, {
"name": "28 Inorg Chem; Prec & Rare-earth Met & Radioact Compd",
"size": 2595536666
}, {
"name": "29 Organic Chemicals",
"size": 2840593557
}, {
"name": "30 Pharmaceutical Products",
"size": 3963740251
}, {
"name": "31 Fertilizers",
"size": 2591238843
}, {
"name": "32 Tanning & Dye Ext Etc; Dye, Paint, Putty Etc; Inks",
"size": 823578186
}, {
"name": "33 Essential Oils Etc; Perfumery, Cosmetic Etc Preps",
"size": 1311564075
}, {
"name": "34 Soap Etc; Waxes, Polish Etc; Candles; Dental Preps",
"size": 657634728
}, {
"name": "35 Albuminoidal Subst; Modified Starch; Glue; Enzymes",
"size": 144798689
}, {
"name": "36 Explosives; Pyrotechnics; Matches; Pyro Alloys Etc",
"size": 105977912
}, {
"name": "37 Photographic Or Cinematographic Goods",
"size": 13930160
}, {
"name": "38 Miscellaneous Chemical Products",
"size": 1785155083
}, {
"name": "39 Plastics And Articles Thereof",
"size": 10851613714
}, {
"name": "40 Rubber And Articles Thereof",
"size": 2595896592
}, {
"name": "41 Raw Hides And Skins (no Furskins) And Leather",
"size": 26108787
}, {
"name": "42 Leather Art; Saddlery Etc; Handbags Etc; Gut Art",
"size": 84562683
}, {
"name": "43 Furskins And Artificial Fur; Manufactures Thereof",
"size": 68542658
}, {
"name": "44 Wood And Articles Of Wood; Wood Charcoal",
"size": 9994222743
}, {
"name": "45 Cork And Articles Of Cork",
"size": 239742
}, {
"name": "46 Mfr Of Straw, Esparto Etc.; Basketware & Wickerwrk",
"size": 9831145
}, {
"name": "47 Wood Pulp Etc; Recovd (waste & Scrap) ppr & pprbd",
"size": 1861791864
}, {
"name": "48 Paper & Paperboard & Articles (inc Papr Pulp Artl)",
"size": 5826106049
}, {
"name": "49 Printed Books, Newspapers Etc; Manuscripts Etc",
"size": 527802073
}, {
"name": "50 Silk, Including Yarns And Woven Fabric Thereof",
"size": 5496
}, {
"name": "51 Wool & Animal Hair, Including Yarn & Woven Fabric",
"size": 17102176
}, {
"name": "52 Cotton, Including Yarn And Woven Fabric Thereof",
"size": 17229508
}, {
"name": "53 Veg Text Fib Nesoi; Veg Fib & Paper Yns & Wov Fab",
"size": 6435347
}, {
"name": "54 Manmade Filaments, Including Yarns & Woven Fabrics",
"size": 265482351
}, {
"name": "55 Manmade Staple Fibers, Incl Yarns & Woven Fabrics",
"size": 51505161
}, {
"name": "56 Wadding, Felt Etc; Sp Yarn; Twine, Ropes Etc.",
"size": 149594628
}, {
"name": "57 Carpets And Other Textile Floor Coverings",
"size": 106741646
}, {
"name": "58 Spec Wov Fabrics; Tufted Fab; Lace; Tapestries Etc",
"size": 21679747
}, {
"name": "59 Impregnated Etc Text Fabrics; Tex Art For Industry",
"size": 389080496
}, {
"name": "60 Knitted Or Crocheted Fabrics",
"size": 42249230
}, {
"name": "61 Apparel Articles And Accessories, Knit Or Crochet",
"size": 165752722
}, {
"name": "62 Apparel Articles And Accessories, Not Knit Etc.",
"size": 391815043
}, {
"name": "63 Textile Art Nesoi; Needlecraft Sets; Worn Text Art",
"size": 196281124
}, {
"name": "64 Footwear, Gaiters Etc. And Parts Thereof",
"size": 45989593
}, {
"name": "65 Headgear And Parts Thereof",
"size": 26811656
}, {
"name": "66 Umbrellas, Walking-sticks, Riding-crops Etc, Parts",
"size": 3443524
}, {
"name": "67 Prep Feathers, Down Etc; Artif Flowers; H Hair Art",
"size": 10183849
}, {
"name": "68 Art Of Stone, Plaster, Cement, Asbestos, Mica Etc.",
"size": 981752405
}, {
"name": "69 Ceramic Products",
"size": 47420584
}, {
"name": "70 Glass And Glassware",
"size": 421851635
}, {
"name": "71 Nat Etc Pearls, Prec Etc Stones, Pr Met Etc; Coin",
"size": 4976033487
}, {
"name": "72 Iron And Steel",
"size": 4830112425
}, {
"name": "73 Articles Of Iron Or Steel",
"size": 3692068108
}, {
"name": "74 Copper And Articles Thereof",
"size": 2487646594
}, {
"name": "75 Nickel And Articles Thereof",
"size": 708437216
}, {
"name": "76 Aluminum And Articles Thereof",
"size": 7931484328
}, {
"name": "78 Lead And Articles Thereof",
"size": 595915955
}, {
"name": "79 Zinc And Articles Thereof",
"size": 1251033135
}, {
"name": "80 Tin And Articles Thereof",
"size": 30334385
}, {
"name": "81 Base Metals Nesoi; Cermets; Articles Thereof",
"size": 149629425
}, {
"name": "82 Tools, Cutlery Etc. Of Base Metal & Parts Thereof",
"size": 367186479
}, {
"name": "83 Miscellaneous Articles Of Base Metal",
"size": 985683918
}, {
"name": "84 Nuclear Reactors, Boilers, Machinery Etc.; Parts",
"size": 20294971948
}, {
"name": "85 Electric Machinery Etc; Sound Equip; Tv Equip; Pts",
"size": 7417737995
}, {
"name": "86 Railway Or Tramway Stock Etc; Traffic Signal Equip",
"size": 193696100
}, {
"name": "87 Vehicles, Except Railway Or Tramway, And Parts Etc",
"size": 57417759439
}, {
"name": "88 Aircraft, Spacecraft, And Parts Thereof",
"size": 5505439657
}, {
"name": "89 Ships, Boats And Floating Structures",
"size": 164797314
}, {
"name": "90 Optic, Photo Etc, Medic Or Surgical Instrments Etc",
"size": 3347535338
}, {
"name": "91 Clocks And Watches And Parts Thereof",
"size": 7324637
}, {
"name": "92 Musical Instruments; Parts And Accessories Thereof",
"size": 41199379
}, {
"name": "93 Arms And Ammunition; Parts And Accessories Thereof",
"size": 169111568
}, {
"name": "94 Furniture; Bedding Etc; Lamps Nesoi Etc; Prefab Bd",
"size": 4814549247
}, {
"name": "95 Toys, Games & Sport Equipment; Parts & Accessories",
"size": 407373565
}, {
"name": "96 Miscellaneous Manufactured Articles",
"size": 621822106
}, {
"name": "97 Works Of Art, Collectors' Pieces And Antiques",
"size": 125872704
}, {
"name": "98 Special Classification Provisions, Nesoi",
"size": 14776686633
}, {
"name": "99 Special Import Provisions, Nesoi",
"size": 2742427089
}]
}]
}]
}
<!DOCTYPE html>
<style>
form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
svg {
font: 10px sans-serif;
}
</style>
<svg width="960" height="450"></svg>
<form>
<label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
<label><input type="radio" name="mode" value="sumByCount"> Count</label>
</form>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
format = d3.format(",d");
var treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.round(true)
.paddingInner(1);
d3.json("flare.json", function(error, data) {
if (error) throw error;
var root = d3.hierarchy(data)
.eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
.sum(sumBySize)
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var cell = svg.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function(d) { return d.data.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.attr("fill", function(d) { return color(d.parent.data.id); });
cell.append("clipPath")
.attr("id", function(d) { return "clip-" + d.data.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.data.id; });
cell.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 4)
.attr("y", function(d, i) { return 13 + i * 10; })
.text(function(d) { return d; });
cell.append("title")
.text(function(d) { return d.data.id + "\n" + format(d.value); });
d3.selectAll("input")
.data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
.on("change", changed);
var timeout = d3.timeout(function() {
d3.select("input[value=\"sumByCount\"]")
.property("checked", true)
.dispatch("change");
}, 2000);
function changed(sum) {
timeout.stop();
treemap(root.sum(sum));
cell.transition()
.duration(750)
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
.select("rect")
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; });
}
});
function sumByCount(d) {
return d.children ? 0 : 1;
}
function sumBySize(d) {
return d.size;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment