Published
Edited
Aug 9, 2019
Insert cell
Insert cell
chart = {
const root = pack(data);
let focus = root;
let view;

const svg = d3.create("svg")
.attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
.style("display", "block")
.style("margin", "0 -14px")
.style("cursor", "pointer")
.on("click", () => zoom(root));

const node = svg.append("g")
.selectAll("circle")
.data(root.descendants().slice(1))
.join("circle")
.attr("fill", d => d.children ? color(d.depth) : "white")
.attr("pointer-events", d => !d.children ? "none" : null)
.on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
.on("mouseout", function() { d3.select(this).attr("stroke", null); })
.on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation()));

const label = svg.append("g")
.style("font", "12px sans-serif")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
.style("fill-opacity", d => d.parent === root ? 1 : 0)
.style("display", d => d.parent === root ? "inline" : "none")
.text(d => d.data.name);

zoomTo([root.x, root.y, root.r * 2]);

function zoomTo(v) {
const k = width / v[2];

view = v;

label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("r", d => d.r * k);
}

function zoom(d) {
const focus0 = focus;

focus = d;

const transition = svg.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", d => {
const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
return t => zoomTo(i(t));
});

label
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.transition(transition)
.style("fill-opacity", d => d.parent === focus ? 1 : 0)
.on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}

return svg.node();
}
Insert cell
data = {
return {"name": "Emissionsdaten 2018", "children": [{"name": "Verbrennung", "children": [{"name": "MTU Maintenance Berlin-Brandenburg", "children": [{"name": "Pr\u00fcfstandsanlage f\u00fcr Industriegasturbinen (Stand 5)", "value": 1.174}, {"name": "Pr\u00fcfstandsanlage f\u00fcr Flugtriebwerke (Stand 8)", "value": 1.979}, {"name": "Pr\u00fcfstandsanlage f\u00fcr Flugtriebwerke (Stand 4)", "value": 2.157}]}, {"name": "Fiberboard GmbH", "children": [{"name": "Herstellung von HDF-Platten", "value": 2.815}]}, {"name": "Siemens Aktiengesellschaft", "children": [{"name": "Hochdruck-Testzentrum f\u00fcr Gasturbinenbrenner", "value": 3.618}]}, {"name": "Rolls-Royce Deutschland Ltd & Co KG", "children": [{"name": "Triebwerkpr\u00fcfstand", "value": 19.019}]}]}, {"name": "Herstellung von Roheisen und Stahl", "children": [{"name": "H.E.S. Hennigsdorfer Elektrostahlwerke GmbH", "children": [{"name": "Elektrostahlwerk", "value": 61.071}]}, {"name": "B.E.S. Brandenburger Elektrostahlwerke GmbH", "children": [{"name": "Elektrostahlwerk einschlie\u00dflich Stranggu\u00dfanlagen", "value": 104.296}]}, {"name": "ArcelorMittal Eisenh\u00fcttenstadt GmbH", "children": [{"name": "Roheisen- und Stahlerzeugung", "value": 1446.767}]}]}, {"name": "Herstellung von Zement, Kalk, Mineralfasten & Industrieru\u00df", "children": [{"name": "Herstellung von Zementklinker", "children": [{"name": "Cemex Zement GmbH", "children": [{"name": "Zementwerk R\u00fcdersdorf", "value": 1140.546}]}]}, {"name": "Herstellung von Kalk", "children": [{"name": "S\u00fcdzucker AG", "children": [{"name": "Zuckerfabrik Brottewitz", "value": 72.412}]}, {"name": "ArcelorMittal Eisenh\u00fcttenstadt GmbH", "children": [{"name": "Kalkbrennmahlanlage", "value": 153.036}]}, {"name": "Fels-Werke GmbH", "children": [{"name": "Fels K\u00dc GGR NSO", "value": 199.807}]}]}]}, {"name": "Energie", "children": [{"name": "Energieumwandlung \u2265 50 MW FWL", "children": [{"name": "innogy SE", "children": [{"name": "HHKW Berlin \u2013 Neuk\u00f6lln", "value": 5.508}]}, {"name": "Vattenfall W\u00e4rme Berlin AG", "children": [{"name": "BHKW K\u00f6penick", "value": 21.701}, {"name": "BHKW Lange Enden", "value": 27.94}, {"name": "HW Scharnhorststra\u00dfe", "value": 32.171}, {"name": "HKW Wallenroder Str. (FHW M\u00e4rkisches Viertel)", "value": 33.972}, {"name": "HKW Buch", "value": 37.922}, {"name": "HKW Wilmersdorf", "value": 61.285}, {"name": "HKW Charlottenburg", "value": 76.591}, {"name": "HKW Lichtenberg (Marzahn)", "value": 133.111}, {"name": "HKW Lichterfelde", "value": 157.829}, {"name": "HKW Reuter", "value": 216.722}, {"name": "GuD-HKW Lichterfelde", "value": 236.519}, {"name": "HKW Moabit", "value": 419.676}, {"name": "HKW Klingenberg", "value": 598.412}, {"name": "HKW Mitte", "value": 935.834}, {"name": "HKW Reuter West", "value": 2151.083}]}, {"name": "BTB Blockheizkraftwerks- Tr\u00e4ger- und Betreibergesellschaft mbH Berlin", "children": [{"name": "BTB Heizkraftwerk Adlershof", "value": 34.27}]}, {"name": "Bayer AG", "children": [{"name": "Bayer AG Energiezentrale Berlin", "value": 41.353}]}, {"name": "Fernheizwerk Neuk\u00f6lln AG (FHW Neuk\u00f6lln AG)", "children": [{"name": "Fernheizwerk Neuk\u00f6lln", "value": 75.907}]}, {"name": "Lausitz Energie Kraftwerke AG", "children": [{"name": "Gasturbinenkraftwerk Ahrensfelde", "value": 0.001}, {"name": "Gasturbinenkraftwerk Thyrow", "value": 1.276}, {"name": "Kraftwerk Schwarze Pumpe", "value": 12374.048}, {"name": "Kraftwerk J\u00e4nschwalde", "value": 22807.073}]}, {"name": "LEIPA Georg Leinfelder\nGmbH", "children": [{"name": "HKW, Leipa Nord", "value": 0.767}]}, {"name": "Stadtwerke Frankfurt (Oder ) GmbH", "children": [{"name": "Heizwerk Nord", "value": 1.442}]}, {"name": "Hamburger Rieger GmbH Papierfabrik Spremberg", "children": [{"name": "Hilfsdampfkessel (HDK) des EBS Heizkraftwerk Spreerecycling", "value": 1.641}]}, {"name": "ENRO Ludwigsfelde Energie GmbH", "children": [{"name": "HKW Ludwigsfelde", "value": 13.607}]}, {"name": "Sonae Arauco Beeskow\nGmbH", "children": [{"name": "Energiezentrale Werk Beeskow", "value": 16.287}]}, {"name": "Stadtwerke Strausberg\nGmbH", "children": [{"name": "HKW Nord", "value": 22.538}]}, {"name": "Pfleiderer Baruth GmbH", "children": [{"name": "Energiezentrale", "value": 22.916}]}, {"name": "envia THERM GmbH", "children": [{"name": "Heizkraftwerk Guben", "value": 28.278}]}, {"name": "Stadtwerke Brandenburg an der Havel GmbH & Co. KG", "children": [{"name": "Heizkraftwerk Brandenburg", "value": 48.07}]}, {"name": "SWISS KRONO GmbH SWISS KRONO TEX\nGmbH & Co. KG", "children": [{"name": "SWISS KRONO, Heiligengrabe", "value": 89.902}]}, {"name": "Stadtwerke Frankfurt Oder GmbH", "children": [{"name": "Heizkraftwerk", "value": 168.416}]}, {"name": "Energie und Wasser\nPotsdam GmbH", "children": [{"name": "HKW Potsdam S\u00fcd", "value": 213.218}]}, {"name": "Uniper Kraftwerke\nGmbH", "children": [{"name": "Kraftwerk Kirchm\u00f6ser", "value": 251.781}]}, {"name": "Stadtwerke Cottbus\nGmbH", "children": [{"name": "HKW Cottbus Gesamtanlage", "value": 275.892}]}, {"name": "BASF Schwarzheide\nGmbH", "children": [{"name": "GuD-Kraftwerk", "value": 305.677}]}, {"name": "Vulkan Energiewirtschaft Oderbr\u00fccke GmbH", "children": [{"name": "Industriekraftwerk VEO", "value": 2140.988}]}]}, {"name": "Energieumwandlung 20\u201350 MW FWL", "children": [{"name": "Vattenfall W\u00e4rme Berlin AG", "children": [{"name": "HW Altglienicke", "value": 6.28}, {"name": "HW Friedrichshagen", "value": 8.092}, {"name": "HW Blankenburger Stra\u00dfe", "value": 8.481}]}, {"name": "Bayerische Motoren Werke Aktiengesellschaft", "children": [{"name": "BMW Werk 3 Berlin Energiezentrale", "value": 6.332}]}, {"name": "Daimler AG", "children": [{"name": "Heizwerk Bau 11", "value": 6.542}]}, {"name": "Philip Morris Manufacturing GmbH", "children": [{"name": "Feuerungsanlage zur Dampferzeugung", "value": 7.304}]}, {"name": "Berliner Flughafen\nGmbH", "children": [{"name": "Heizwerk mit 3 Hei\u00dfwassererzeugern", "value": 8.099}]}, {"name": "Messe Berlin GmbH", "children": [{"name": "Betriebszentrale I", "value": 10.184}]}, {"name": "Deutsche Rentenversicherung Bund", "children": [{"name": "Heizkraftwerk", "value": 11.254}]}, {"name": "DEK Deutsche Extrakt Kaffee GmbH", "children": [{"name": "DEK Feuerungsanlage", "value": 20.62}]}, {"name": "BTB Blockheizkraftwerks- Tr\u00e4ger- und Betreibergesellschaft mbH Berlin", "children": [{"name": "BTB Heizkraftwerk Sch\u00f6neweide", "value": 64.327}]}, {"name": "E.ON edis Contracting\nGmbH", "children": [{"name": "Heizwerke im Flughafen Berlin Sch\u00f6nefeld", "value": 0.002}, {"name": "Energiezentrale SF 3", "value": 23.084}]}, {"name": "Progroup Power 1\nGmbH", "children": [{"name": "Niederdruck-Dampferzeuger (ND-DE) Eisenh\u00fcttenstadt", "value": 0.483}]}, {"name": "Stadtwerke Senftenberg GmbH", "children": [{"name": "Spitzenheizwerk Mitte", "value": 3.804}]}, {"name": "Fernw\u00e4rme Teltow\nGmbH", "children": [{"name": "HW 3", "value": 5.388}]}, {"name": "Rathenower W\u00e4rmeversorgung GmbH", "children": [{"name": "BHKW mit SLK-Anlage W\u00e4rmeversorgung Rathenow", "value": 10.854}]}, {"name": "Stadtund \u00dcberlandwerke GmbH LuckauL\u00fcbbenau", "children": [{"name": "BHKW L\u00fcbbenau", "value": 11.688}]}, {"name": "Energie und Wasser\nPotsdam GmbH", "children": [{"name": "BHKW-Nord mit Spitzenkesselanlage", "value": 14.193}]}, {"name": "Emsland-St\u00e4rke GmbH", "children": [{"name": "Heizkraftwerk Kyritz", "value": 16.674}]}, {"name": "Stadtwerke Bernau\nGmbH", "children": [{"name": "BHKW", "value": 17.477}]}, {"name": "Herbstreith & Fox GmbH", "children": [{"name": "Herbstreith & Fox GmbH (Energiezentrale)", "value": 19.661}]}]}, {"name": "Antriebsmaschinen (Turbinen)", "children": [{"name": "OPAL Gastransport GmbH und Co. KG", "children": [{"name": "Verdichterstation Radeland", "value": 193.175}]}, {"name": "GASCADE Gastransport\nGmbH", "children": [{"name": "Verdichterstation Mallnow", "value": 193.401}]}]}]}, {"name": "Herstellung von Chemikalien", "children": [{"name": "Herstellung organischer Grundchemikalien", "children": [{"name": "Grupa Azoty ATT Polymers GmbH", "children": [{"name": "ATT Polymers Guben", "value": 0.0}]}]}, {"name": "Herstellung von Wasserstoff und Synthesegas", "children": [{"name": "BASF Schwarzheide\nGmbH", "children": [{"name": "Steamreforminganlage", "value": 38.586}]}]}]}, {"name": "Verarbeitung von Eisenmetallen", "children": [{"name": "ArcelorMittal Eisenh\u00fcttenstadt GmbH", "children": [{"name": "Kaltwalzwerk", "value": 24.831}, {"name": "Verzinkungsanlage", "value": 47.793}, {"name": "Warmwalzwerk", "value": 125.25}]}, {"name": "H.E.S. Hennigsdorfer Elektrostahlwerke GmbH", "children": [{"name": "Walzwerk 320", "value": 32.017}]}, {"name": "B.E.S. Brandenburger Elektrostahlwerke GmbH", "children": [{"name": "Kontinuierliche Drahtstra\u00dfe", "value": 65.383}]}]}, {"name": "Raffinerien", "children": [{"name": "PCK Raffinerie GmbH", "children": [{"name": "PCK Raffinerie Glocke", "value": 3789.945}]}]}, {"name": "Herstellung von Glas, Gips & Keramik", "children": [{"name": "Herstellung von Glas", "children": [{"name": "SWARCO SCH\u00d6NBORN\nGmbH", "children": [{"name": "Anlage zur Herstellung von Spezialglas (Mikro-Glaskugeln f\u00fcr Fahrbahnmarkierungen)", "value": 6.035}]}, {"name": "GMB Glasmanufaktur Brandenburg GmbH", "children": [{"name": "Solarglaswerk Tschernitz", "value": 38.803}]}, {"name": "Ardagh Glass GmbH", "children": [{"name": "Neuenhagen Werk", "value": 39.66}, {"name": "Drebkau Werk", "value": 47.509}]}]}, {"name": "Herstellung von Keramik", "children": [{"name": "Klinkerwerk Muhr GmbH & Co. KG", "children": [{"name": "Klinkerwerk Muhr GmbH & Co. KG", "value": 7.268}]}, {"name": "Wienerberger GmbH", "children": [{"name": "Vormauerziegelwerk Buchw\u00e4ldchen", "value": 15.753}, {"name": "Werk Reetz", "value": 49.223}]}, {"name": "Braas GmbH", "children": [{"name": "Braas GmbH \u2013 Werk Karst\u00e4dt", "value": 17.859}]}, {"name": "Porcelaingres GmbH", "children": [{"name": "Anlage zur Produktion von Feinsteinzeugfliesen", "value": 27.097}]}]}, {"name": "Herstellung von Gips", "children": [{"name": "Etex Building Performance GmbH", "children": [{"name": "Werk Peitz", "value": 21.025}]}, {"name": "Knauf Deutsche Gipswerke KG", "children": [{"name": "Gipsbauplattenwerk Schwarze Pumpe", "value": 34.345}]}, {"name": "Saint-Gobain Rigips\nGmbH", "children": [{"name": "Werk Berlin-Brieselang", "value": 41.991}]}]}]}, {"name": "Herstellung von Papier", "children": [{"name": "Neuk\u00f6lln Spezialpapier NK GmbH & Co. KG", "children": [{"name": "Anlage zur Herstellung von Spezialpapier", "value": 0.328}]}, {"name": "LEIPA Georg Leinfelder\nGmbH", "children": [{"name": "Papierproduktion, Leipa Nord", "value": 0.0}, {"name": "Papiermaschinen 1-4", "value": 51.629}]}, {"name": "Progroup Paper PM2\nGmbH", "children": [{"name": "PM2", "value": 0.009}]}, {"name": "Hamburger Rieger GmbH Papierfabrik Spremberg", "children": [{"name": "Papierfabrik, Strichtrocknung mit IRund Lufttrocknern", "value": 1.714}]}]}]}
}
Insert cell
pack = data => d3.pack()
.size([width, height])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
Insert cell
width = 932
Insert cell
height = width
Insert cell
format = d3.format(",d")
Insert cell
color = d3.scaleLinear()
.domain([0, 5])
.range(["#eee", "#e31818"])
.interpolate(d3.interpolateHcl)
Insert cell
d3 = require("d3@5")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more