Skip to content

Instantly share code, notes, and snippets.

@migzoo

migzoo/index.html

Created June 27, 2015 05:47
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 migzoo/8fe775b11d312bc9b78a to your computer and use it in GitHub Desktop.
Save migzoo/8fe775b11d312bc9b78a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path,
text {
cursor: pointer;
}
circle {
fill: url(#gif);
pointer-events: all;
}
text {
pointer-events: all;
}
/*
.label {
font: 10px sans-serif;
text-anchor: middle;
}*/
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 500, right: 700, bottom: 500, left: 700},
radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10;
var color = d3.scale.category20c();
//var hue = d3.scale.category10();
// var luminance = d3.scale.sqrt()
// .domain([0, 1e6])
// .clamp(true)
// .range([90, 20]);
var svg = d3.select("body").append("svg")
.attr("width", margin.left + margin.right)
.attr("height", margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius]);
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + .5); })
.innerRadius(function(d) { return radius / 3 * d.depth; })
.outerRadius(function(d) { return radius / 3 * (d.depth + 1) - 1; });
d3.json("roleCompendium.json", function(error, root) {
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
partition
.value(function(d) { return 100; })
.nodes(root)
.forEach(function(d) {
d._children = d.children;
d.sum = d.value;
d.key = key(d);
d.fill = color(d);
});
// Now redefine the value function to use the previously-computed sum.
partition
.children(function(d, depth) { return depth < 2 ? d._children : null; })
.value(function(d) { return d.sum; });
var center = svg.append("circle")
.attr("r", radius / 3)
.on("click", zoomOut);
center.append("svg:title")
.text("zoom out");
var label = svg.append("svg:text")
.attr("text-anchor", "middle")
.style("stroke", "grey")
.style("fill", "grey")
.style("font", "20px sans-serif")
.text(root.name)
.on("click", zoomOut);
var image = svg.append("image")
.attr("width", 100)
.attr("height", 100)
.attr("x", -50)
.attr("y", 25);
var path = svg.selectAll("path")
.data(partition.nodes(root).slice(1))
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d._children ? d : d.parent).name); })
.each(function(d) { this._current = updateArc(d); })
.on("click", zoomIn)
.on("mouseover", function(d) {
if(!d._children) {
console.log(d.name)
image.attr("xlink:href", "http://www.smogon.com/dex/media/sprites/xy/" + d.name.toLowerCase() + ".gif")
}
label.text(d.name);
})
.on("mouseout", function(d) {
image.attr("xlink:href", "")
label.text(d.parent.name);
});
path.append("svg:title")
.text(function(d) { return d.name; });
function zoomIn(p) {
if (p.depth > 1)
p = p.parent;
if (!p.children) {
window.open("http://www.smogon.com/dex/xy/pokemon/" + p.name);
//d3.selectAll("svg > *").remove();
return;
}
zoom(p, p);
}
function zoomOut(p) {
console.log(p);
if (!p.parent) return;
// if(p.url)
// window.open("http://ck12.org" + p.url);
zoom(p.parent, p);
}
// Zoom to the specified new root.
function zoom(root, p) {
if (document.documentElement.__transition__) return;
// Rescale outside angles to match the new layout.
var enterArc,
exitArc,
outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);
function insideArc(d) {
return p.key > d.key
? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
: {depth: 0, x: 0, dx: 2 * Math.PI};
}
function outsideArc(d) {
return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
}
center.datum(root);
label.datum(root);
label.text(root.name);
// When zooming in, arcs enter from the outside and exit to the inside.
// Entering outside arcs start from the old layout.
if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);
path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });
// When zooming out, arcs enter from the inside and exit to the outside.
// Exiting outside arcs transition to the new layout.
if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);
d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
path.exit().transition()
.style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
.attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
.remove();
path.enter().append("path")
.style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
.style("fill", function(d) { return color((d._children ? d : d.parent).name); })
.on("click", zoomIn)
.on("mouseover", function(d) {
if(!d._children) {
console.log(d.name)
image.attr("xlink:href", "http://www.smogon.com/dex/media/sprites/xy/" + d.name.toLowerCase() + ".gif")
}
label.text(d.name);
})
.on("mouseout", function(d) {
image.attr("xlink:href", "")
label.text(d.parent.name);
})
.each(function(d) { this._current = enterArc(d); });
path.append("svg:title")
.text(function(d) { return d.name; });
path.transition()
.style("fill-opacity", 1)
.attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
});
}
});
function key(d) {
var k = [], p = d;
while (p.depth) k.push(p.name), p = p.parent;
return k.reverse().join(".");
}
// function fill(d) {
// var p = d;
// while (p.depth > 1) p = p.parent;
// var c = d3.lab(hue(p.name));
// c.l = luminance(d.sum);
// return c;
// }
function arcTween(b) {
var i = d3.interpolate(this._current, b);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function updateArc(d) {
return {depth: d.depth, x: d.x, dx: d.dx};
}
d3.select(self.frameElement).style("height", margin.top + margin.bottom + "px");
</script>
Raw
roleCompendium.json
{
"name": "ORAS RU Role Compendium",
"children": [
{
"name": "Mega Pokemon",
"children": [
{
"name": "Camerupt"
},
{
"name": "Steelix"
},
{
"name": "Banette"
},
{
"name": "Audino"
},
{
"name": "Glalie"
}
]
},
{
"name": "Stealth Rock Users",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Mesprit"
},
{
"name": "Omastar"
},
{
"name": "Piloswine"
},
{
"name": "Archeops"
},
{
"name": "Aurorus"
},
{
"name": "Rhyperior"
},
{
"name": "Camerupt"
},
{
"name": "Druddigon"
},
{
"name": "Cobalion"
},
{
"name": "Seismitoad"
},
{
"name": "Steelix"
},
{
"name": "Crustle"
},
{
"name": "Torterra"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Bronzong"
},
{
"name": "Registeel"
},
{
"name": "Steelix"
},
{
"name": "Rhyperior"
},
{
"name": "Camerupt"
},
{
"name": "Uxie"
},
{
"name": "Seismitoad"
},
{
"name": "Druddigon"
}
]
}
]
},
{
"name": "Spikes Users",
"children": [
{
"name": "Accelgor"
},
{
"name": "Omastar"
},
{
"name": "Roselia"
},
{
"name": "Qwilfish"
},
{
"name": "Glalie"
},
{
"name": "Crustle"
},
{
"name": "Garbodor"
}
]
},
{
"name": "Toxic Spikes Users",
"children": [
{
"name": "Drapion"
},
{
"name": "Weezing"
},
{
"name": "Qwilfish"
},
{
"name": "Roselia"
},
{
"name": "Omastar"
},
{
"name": "Garbodor"
}
]
},
{
"name": "Hazard Control",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Hitmonlee"
},
{
"name": "Kabutops"
},
{
"name": "Shiftry"
},
{
"name": "Sandslash"
},
{
"name": "Skuntank"
},
{
"name": "Flygon"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Golbat"
},
{
"name": "Hitmontop"
},
{
"name": "Togetic"
},
{
"name": "Xatu"
},
{
"name": "Skuntank"
},
{
"name": "Pelipper"
},
{
"name": "Flygon"
}
]
}
]
},
{
"name": "Fire-type Checks",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Rhyperior"
},
{
"name": "Kabutops"
},
{
"name": "Tyrantrum"
},
{
"name": "Omastar"
},
{
"name": "Druddigon"
},
{
"name": "Archeops"
},
{
"name": "Houndoom"
},
{
"name": "Seismitoad"
},
{
"name": "Clawitzer"
},
{
"name": "Camerupt"
},
{
"name": "Samurott"
},
{
"name": "Flygon"
},
{
"name": "Emboar"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Rhyperior"
},
{
"name": "Gastrodon"
},
{
"name": "Lanturn"
},
{
"name": "Quagsire"
},
{
"name": "Alomomola"
},
{
"name": "Jellicent"
},
{
"name": "Seismitoad"
},
{
"name": "Camerupt"
},
{
"name": "Druddigon"
},
{
"name": "Flygon"
}
]
}
]
},
{
"name": "Psychic-type Checks",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Shiftry"
},
{
"name": "Houndoom"
},
{
"name": "Escavalier"
},
{
"name": "Spiritomb"
},
{
"name": "Drapion"
},
{
"name": "Meloetta"
},
{
"name": "Skuntank"
},
{
"name": "Durant"
},
{
"name": "Scrafty"
},
{
"name": "Steelix"
},
{
"name": "Sneasel"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Registeel"
},
{
"name": "Steelix"
},
{
"name": "Spiritomb"
},
{
"name": "Drapion"
},
{
"name": "Meloetta"
},
{
"name": "Skuntank"
},
{
"name": "Escavalier"
}
]
}
]
},
{
"name": "Fighting-type Checks",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Fletchinder"
},
{
"name": "Spiritomb"
},
{
"name": "Delphox"
},
{
"name": "Sigilyph"
},
{
"name": "Mesprit"
},
{
"name": "Meloetta"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Aromatisse"
},
{
"name": "Qwilfish"
},
{
"name": "Golbat"
},
{
"name": "Spiritomb"
},
{
"name": "Amoonguss"
},
{
"name": "Weezing"
},
{
"name": "Granbull"
},
{
"name": "Uxie"
},
{
"name": "Pelipper"
}
]
}
]
},
{
"name": "Wallbreakers",
"children": [
{
"name": "Tyrantrum"
},
{
"name": "Escavalier"
},
{
"name": "Glalie"
},
{
"name": "Houndoom"
},
{
"name": "Hitmonlee"
},
{
"name": "Magneton"
},
{
"name": "Exploud"
},
{
"name": "Clawitzer"
},
{
"name": "Emboar"
},
{
"name": "Meloetta"
},
{
"name": "Sigilyph"
},
{
"name": "Medicham"
},
{
"name": "Camerupt"
},
{
"name": "Sawk"
},
{
"name": "Delphox"
},
{
"name": "Durant"
},
{
"name": "Scrafty"
},
{
"name": "Flygon"
},
{
"name": "Gallade"
},
{
"name": "Sneasel"
},
{
"name": "Samurott"
}
]
},
{
"name": "Stallbreakers/Taunt Users",
"children": [
{
"name": "Meloetta"
},
{
"name": "Cobalion"
},
{
"name": "Braviary"
},
{
"name": "Qwilfish"
},
{
"name": "Spiritomb"
},
{
"name": "Drapion"
},
{
"name": "Jellicent"
},
{
"name": "Sigilyph"
},
{
"name": "Houndoom"
}
]
},
{
"name": "Pivots",
"children": [
{
"name": "Offensive",
"children": [
{
"name": "Jolteon"
},
{
"name": "Magneton"
},
{
"name": "Cobalion"
},
{
"name": "Eelektross"
},
{
"name": "Tangrowth"
},
{
"name": "Flygon"
},
{
"name": "Braviary"
},
{
"name": "Rotom-C"
},
{
"name": "Meloetta"
},
{
"name": "Mesprit"
},
{
"name": "Durant"
}
]
},
{
"name": "Defensive",
"children": [
{
"name": "Lanturn"
},
{
"name": "Alomomola"
},
{
"name": "Aromatisse"
},
{
"name": "Granbull"
},
{
"name": "Amoonguss"
},
{
"name": "Jellicent"
},
{
"name": "Hitmontop"
},
{
"name": "Qwilfish"
},
{
"name": "Tangrowth"
},
{
"name": "Flygon"
},
{
"name": "Pelipper"
},
{
"name": "Uxie"
}
]
}
]
},
{
"name": "Choice Scarf Users",
"children": [
{
"name": "Meloetta"
},
{
"name": "Hitmonlee"
},
{
"name": "Emboar"
},
{
"name": "Rotom-C"
},
{
"name": "Mesprit"
},
{
"name": "Tyrantrum"
},
{
"name": "Houndoom"
},
{
"name": "Durant"
},
{
"name": "Medicham"
},
{
"name": "Flygon"
}
]
},
{
"name": "Trappers",
"children": [
{
"name": "Dugtrio"
},
{
"name": "Houndoom"
},
{
"name": "Spiritomb"
},
{
"name": "Escavalier"
},
{
"name": "Skuntank"
},
{
"name": "Drapion"
}
]
},
{
"name": "Priority",
"children": [
{
"name": "Fletchinder"
},
{
"name": "Glalie"
},
{
"name": "Hitmonlee"
},
{
"name": "Dugtrio"
},
{
"name": "Spiritomb"
},
{
"name": "Druddigon"
},
{
"name": "Emboar"
},
{
"name": "Kabutops"
},
{
"name": "Shiftry"
},
{
"name": "Skuntank"
},
{
"name": "Gurdurr"
},
{
"name": "Kecleon"
},
{
"name": "Houndoom"
},
{
"name": "Samurott"
},
{
"name": "Sneasel"
}
]
},
{
"name": "Clerics",
"children": [
{
"name": "Granbull"
},
{
"name": "Aromatisse"
},
{
"name": "Lanturn"
},
{
"name": "Alomomola"
},
{
"name": "Mesprit"
},
{
"name": "Togetic"
},
{
"name": "Meloetta"
},
{
"name": "Audino"
}
]
},
{
"name": "Boosting Sweepers",
"children": [
{
"name": "Swords Dance",
"children": [
{
"name": "Gallade"
},
{
"name": "Samurott"
},
{
"name": "Fletchinder"
},
{
"name": "Cobalion"
},
{
"name": "Drapion"
},
{
"name": "Shiftry"
},
{
"name": "Virizion"
},
{
"name": "Rhyperior"
},
{
"name": "Bouffalant"
},
{
"name": "Escavalier"
}
]
},
{
"name": "Bulk Up",
"children": [
{
"name": "Medicham"
},
{
"name": "Scrafty"
},
{
"name": "Gallade"
},
{
"name": "Braviary"
},
{
"name": "Gurdurr"
},
{
"name": "Combusken"
}
]
},
{
"name": "Nasty Plot",
"children": [
{
"name": "Mismagius"
},
{
"name": "Houndoom"
},
{
"name": "Togetic"
},
{
"name": "Cofagrigus"
}
]
},
{
"name": "Calm Mind",
"children": [
{
"name": "Aromatisse"
},
{
"name": "Audino"
},
{
"name": "Delphox"
},
{
"name": "Meloetta"
},
{
"name": "Sigilyph"
},
{
"name": "Virizion"
}
]
},
{
"name": "Shell Smash",
"children": [
{
"name": "Gorebyss"
},
{
"name": "Omastar"
},
{
"name": "Barbaracle"
},
{
"name": "Huntail"
}
]
},
{
"name": "Dragon Dance",
"children": [
{
"name": "Scrafty"
},
{
"name": "Tyrantrum"
}
]
},
{
"name": "Rock Polish",
"children": [
{
"name": "Aurorus"
},
{
"name": "Torterra"
},
{
"name": "Tyrantrum"
},
{
"name": "Rhyperior"
},
{
"name": "Cobalion"
}
]
},
{
"name": "Curse",
"children": [
{
"name": "Steelix"
},
{
"name": "Registeel"
}
]
},
{
"name": "Baton Pass",
"children": [
{
"name": "Medicham"
},
{
"name": "Jolteon"
},
{
"name": "Durant"
},
{
"name": "Togetic"
},
{
"name": "Combusken"
},
{
"name": "Gorebyss"
},
{
"name": "Huntail"
},
{
"name": "Musharna"
}
]
},
{
"name": "Other",
"children": [
{
"name": "Malamar"
},
{
"name": "Durant"
},
{
"name": "Vivillon"
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment