Code from mbostock. Data from wikipedia.
Quoting mbostock's description of what's going on here, "The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm."
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var diameter = 960; | |
| var tree = d3.layout.tree() | |
| .size([360, diameter / 2 - 120]) | |
| .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); | |
| var diagonal = d3.svg.diagonal.radial() | |
| .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", diameter) | |
| .attr("height", diameter) | |
| .append("g") | |
| .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); | |
| d3.json("lr-provinces.json", function(error, root) { | |
| var nodes = tree.nodes(root), | |
| links = tree.links(nodes); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) | |
| node.append("circle") | |
| .attr("r", 4.5); | |
| node.append("text") | |
| .attr("dy", ".31em") | |
| .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) | |
| .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) | |
| .text(function(d) { return d.name; }); | |
| }); | |
| d3.select(self.frameElement).style("height", diameter + "px"); | |
| </script> |
| { | |
| "name": "Imperium Romanorum", | |
| "children": [ | |
| { | |
| "name": "Galliae", | |
| "children": [ | |
| { | |
| "name": "Galliae", | |
| "children": [ | |
| { | |
| "name": "Belgica I" | |
| }, | |
| { | |
| "name": "Belgica II" | |
| }, | |
| { | |
| "name": "Belgica III" | |
| }, | |
| { | |
| "name": "Germania I" | |
| }, | |
| { | |
| "name": "Germania II" | |
| }, | |
| { | |
| "name": "Lugdunensis I" | |
| }, | |
| { | |
| "name": "Lugdunensis II" | |
| }, | |
| { | |
| "name": "Lugdunensis III" | |
| }, | |
| { | |
| "name": "Lugdunensis IV Senonia" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Viennensis", | |
| "children": [ | |
| { | |
| "name": "Viennensis" | |
| }, | |
| { | |
| "name": "Alpes Maritimae" | |
| }, | |
| { | |
| "name": "Aquitanica I" | |
| }, | |
| { | |
| "name": "Aquitanica II" | |
| }, | |
| { | |
| "name": "Novempopulana" | |
| }, | |
| { | |
| "name": "Narbonensis I" | |
| }, | |
| { | |
| "name": "Narbonensis II" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Hispaniae", | |
| "children": [ | |
| { | |
| "name": "Baetica" | |
| }, | |
| { | |
| "name": "Baleares" | |
| }, | |
| { | |
| "name": "Carthaginiensis" | |
| }, | |
| { | |
| "name": "Tarraconensis" | |
| }, | |
| { | |
| "name": "Gallaecia" | |
| }, | |
| { | |
| "name": "Lusitania" | |
| }, | |
| { | |
| "name": "Mauretania Tingitana" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Britanniae", | |
| "children": [ | |
| { | |
| "name": "Maxima Caesariensis" | |
| }, | |
| { | |
| "name": "Valentia" | |
| }, | |
| { | |
| "name": "Britannia Prima" | |
| }, | |
| { | |
| "name": "Britannia Secunda" | |
| }, | |
| { | |
| "name": "Flavia Caesariensis" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Italy and Africa", | |
| "children": [ | |
| { | |
| "name": "Italia suburbicaria", | |
| "children": [ | |
| { | |
| "name": "Campania" | |
| }, | |
| { | |
| "name": "Tuscania et Umbria" | |
| }, | |
| { | |
| "name": "Picenum Suburbicarium" | |
| }, | |
| { | |
| "name": "Bruttia et Lucania" | |
| }, | |
| { | |
| "name": "Samnium" | |
| }, | |
| { | |
| "name": "Valeria" | |
| }, | |
| { | |
| "name": "Corsica" | |
| }, | |
| { | |
| "name": "Sicilia" | |
| }, | |
| { | |
| "name": "Sardinia" | |
| } | |
| ] | |
| },{ | |
| "name": "Italia annonaria", | |
| "children": [ | |
| { | |
| "name": "Venetia et Istria" | |
| }, | |
| { | |
| "name": "Aemilia" | |
| }, | |
| { | |
| "name": "Liguria" | |
| }, | |
| { | |
| "name": "Flaminia et Picenum Annonarium" | |
| }, | |
| { | |
| "name": "Alpes Cottiae" | |
| }, | |
| { | |
| "name": "Raetia I" | |
| }, | |
| { | |
| "name": "Raetia II" | |
| } | |
| ] | |
| },{ | |
| "name": "Africa", | |
| "children": [ | |
| { | |
| "name": "Africa proconsularis" | |
| }, | |
| { | |
| "name": "Byzacena" | |
| }, | |
| { | |
| "name": "Mauretania Caesariensis" | |
| }, | |
| { | |
| "name": "Sitifensis" | |
| }, | |
| { | |
| "name": "Numidia" | |
| }, | |
| { | |
| "name": "Tripolitania" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Illyricum", | |
| "children": [ | |
| { | |
| "name": "Pannonia", | |
| "children": [ | |
| { | |
| "name": "Dalmatia" | |
| }, | |
| { | |
| "name": "Noricum mediterraneum" | |
| }, | |
| { | |
| "name": "Noricum ripense" | |
| }, | |
| { | |
| "name": "Pannonia Prima" | |
| }, | |
| { | |
| "name": "Pannonia Secunda" | |
| }, | |
| { | |
| "name": "Savia" | |
| }, | |
| { | |
| "name": "Valeria ripensis" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Dacia", | |
| "children": [ | |
| { "name": "Dacia mediterranea" }, | |
| { "name": "Moesia I" }, | |
| { "name": "Praevalitana" }, | |
| { "name": "Dardania" }, | |
| { "name": "Dacia ripensis" } | |
| ] | |
| }, | |
| { | |
| "name": "Macedonia", | |
| "children": [ | |
| { "name": "Macedonia Prima" }, | |
| { "name": "Macedonia Salutaris" }, | |
| { "name": "Thessalia" }, | |
| { "name": "Epirus vetus" }, | |
| { "name": "Epirus nova" }, | |
| { "name": "Achaea" }, | |
| { "name": "Creta" } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Oriens", | |
| "children": [ | |
| { | |
| "name": "Thracia", | |
| "children": [ | |
| { "name": "Europa" }, | |
| { "name": "Thracia" }, | |
| { "name": "Haemimontus" }, | |
| { "name": "Rhodope" }, | |
| { "name": "Moesia II" }, | |
| { "name": "Scythia" } | |
| ] | |
| }, | |
| { | |
| "name": "Asiana", | |
| "children": [ | |
| { "name": "Asia" }, | |
| { "name": "Hellespontus" }, | |
| { "name": "Pamphylia" }, | |
| { "name": "Caria" }, | |
| { "name": "Lydia" }, | |
| { "name": "Lycia" }, | |
| { "name": "Lycaonia" }, | |
| { "name": "Pisidia" }, | |
| { "name": "Phrygia Pacatiana" }, | |
| { "name": "Pisidia" }, | |
| { "name": "Phrygia Salutaris" }, | |
| { "name": "Insulae" } | |
| ] | |
| }, | |
| { | |
| "name": "Pontus", | |
| "children": [ | |
| { "name": "Bithynia" }, | |
| { "name": "Galatia" }, | |
| { "name": "Galatia Salutaris" }, | |
| { "name": "Paphlagonia" }, | |
| { "name": "Honorias" }, | |
| { "name": "Cappadocia I" }, | |
| { "name": "Cappadocia II" }, | |
| { "name": "Helenopontus" }, | |
| { "name": "Pontus Polemoniacus" }, | |
| { "name": "Armenia I" }, | |
| { "name": "Armenia II" } | |
| ] | |
| }, | |
| { | |
| "name": "Oriens", | |
| "children": [ | |
| { "name": "Arabia" }, | |
| { "name": "Palaestina I" }, | |
| { "name": "Palaestina II" }, | |
| { "name": "Palaestina Salutaris" }, | |
| { "name": "Syria I" }, | |
| { "name": "Syria II" }, | |
| { "name": "Phoenice I" }, | |
| { "name": "Phoenice II Libanensis" }, | |
| { "name": "Euphratensis" }, | |
| { "name": "Osroene" }, | |
| { "name": "Mesopotamia" }, | |
| { "name": "Cilicia I" }, | |
| { "name": "Cilicia II" }, | |
| { "name": "Isauria" }, | |
| { "name": "Cyprus" } | |
| ] | |
| }, | |
| { | |
| "name": "Aegyptus", | |
| "children": [ | |
| { "name": "Aegyptus" }, | |
| { "name": "Augustamnica" }, | |
| { "name": "Thebais" }, | |
| { "name": "Arcadia" }, | |
| { "name": "Libya Superior" }, | |
| { "name": "Libya Inferior" } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |