Skip to content

Instantly share code, notes, and snippets.

@dhoboy

dhoboy/README.md

Last active August 29, 2015 14:17
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 dhoboy/914d024adf10bface11a to your computer and use it in GitHub Desktop.
Save dhoboy/914d024adf10bface11a to your computer and use it in GitHub Desktop.
Download ZIP
Gately Tree
Raw
README.md

My Hello, World! of d3 Trees. I formed Don Gately data (adapted from this) into JSON format. Plugged Don Gately data into this Mike Bostock code.

Raw
gately.json
{
"name": "Donald W. Gately",
"children": [
{
"name": "Mother",
"children": [
{"name": "Sir Osis of Thuliver"},
{"name": "former Navy M.P."}
]
},
{"name": "Doshka Bulat"},
{"name": "Mrs. Waite"},
{
"name": "St. Elizabeth's Hospital",
"children": [
{"name": "Otis P. Lord"},
{"name": "The wraith"},
{"name": "Dr. Pendleton"},
{"name": "Dr. Pressburger or Prissburger"},
{"name": "Cathy or Kathy"}
]
},
{
"name": "Revere ADA",
"children": [
{"name": "Tooty"}
]
},
{"name": "\"Ferocious\" Francis Gehaney"},
{
"name": "White Flag",
"children": [
{
"name": "Crocodiles",
"children": [
{"name": "\"Ferocious\" Francis Gehaney"},
{"name": "Glenn K."},
{"name": "Bud O."},
{"name": "Sven S."},
{"name": "Jack J."},
{"name": "Dicky N."},
{"name": "Tamara N."},
{"name": "Louise B."},
{"name": "John L."},
{"name": "Guy Who Didn't Even Use His First Name"}
]
},
{
"name": "T.S.B.Y.S.C.D.",
"children": [
{"name": "Robert F. \"Bob Death\""}
]
}
]
},
{
"name": "Whitey Sorkin",
"children": [
{"name": "Eugene \"Fax\" Fackelmann"},
{"name": "Trent \"Quo Vadis\" Kite"},
{"name": "Gwendine O'Shay"},
{"name": "Eighties Bill"},
{"name": "Dr. Robert \"Sixties Bob\" Monroe"},
{"name": "Bobby C"}
]
},
{
"name": "Eugene \"Fax\" Fackelmann",
"children": [
{"name": "Bobby C"},
{"name": "Whitey Sorkin"}
]
},
{
"name": "Trent \"Quo Vadis\" Kite",
"children": [
{"name": "LES ASSASSINS DES FAUTEUILS ROLLENTS"},
{"name": "Whitey Sorkin"}
]
},
{
"name": "Eugenio Martinez",
"children": [
{
"name": "Counselors",
"children": [
{"name": "ENNET HOUSE DRUG AND ALCOHOL RECOVERY HOUSE"},
{"name": "Danielle Steenbok"},
{"name": "Maureen N."},
{"name": "Calvin Thrust"}
]
}
]
},
{"name": "Vinnie Nucci"},
{
"name": "Staff",
"children": [
{"name": "ENNET HOUSE DRUG AND ALCOHOL RECOVERY HOUSE"},
{
"name": "Johnette Marie Foltz",
"children": [
{"name": "Harold James \"Hal\" Incandenza"}
]
}
]
},
{"name": "Le Front de la Liberation de Quebec"},
{"name": "Stavros Lobokulas"},
{
"name": "Pamela Hoffman-Jeep",
"children": [
{"name": "Bobby C"}
]
},
{"name": "Equus Reese"},
{
"name": "Guillaume Duplessis",
"children": [
{"name": "LES ASSASSINS DES FAUTEUILS ROLLENTS"},
{"name": "Brandeis"},
{"name": "Jeu Du Prochain Train"},
{"name": "Le Front de la Liberation de Quebec"},
{"name": "St. Adalbert, L'Islet Province, Quebec"}
]
},
{
"name": "Joelle van Dyne (Lucille Duquette)",
"children": [
{
"name": "The Entertainment",
"children": [
{"name": "St. Adalbert, L'Islet Province, Quebec"},
{"name": "James O. Incandenza Filmography"},
{"name": "Poor Yorick Entertainment Unlimited"}
]
},
{"name": "U.H.I.D"},
{"name": "Office of Unspecified Services"},
{"name": "Orin James Incandenza"},
{"name": "James Orin \"Himself\" Incandenza Jr."},
{"name": "60 Minutes +/-"},
{"name": "MIT"},
{"name": "Joe Lon van Dyne (Earl or Al Duquette)"},
{"name": "\"Uncle\" Lum Riney"},
{"name": "Notkin's Party"},
{"name": "\"Madame Psychosis\""},
{"name": "Lady Delphina"}
]
}
]
}
Raw
index.html
<!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.js"></script>
<script>
var width = 900,
height = 2000;
var tree = d3.layout.tree()
.size([height, width - 400]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(90,0)");
d3.json("gately.json", function(error, data) {
console.log(data)
var nodes = tree.nodes(data),
links = tree.links(nodes);
var link = svg.selectAll("path.link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal);
var nodes = svg.selectAll("g.node")
.data(nodes);
// enter
nodes.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d){ return "translate(" + d.y + "," + d.x + ")"; })
// update
nodes.append("circle")
.attr("r", 4.5);
nodes.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment