web view... {"name":"metallica","children ... "ride the...

<!DOCTYPE html>

<meta charset="utf-8">

<body>

<style>

.link {

fill: none;

stroke: #0000FF;

opacity: 0.4;

stroke-width: 1.5px;

}

.node circle {

stroke: #fff;

opacity: 0.8;

stroke-width: 1.5px;

}

.node:not(:hover) .nodetext {

display: none;

}

text {

font: 22px serif;

opacity: 0.8;

pointer-events: none;

}

</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script>

var width = 3000

height = 2000;

var diameter = 800;

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", width)

.attr("height", height)

.attr("pointer-events", "all")

.call(d3.behavior.zoom().on("zoom", redraw));

var vis = svg

.append("svg:g");

vis.append("svg:rect")

.attr("width", width)

.attr("height", height)

.attr("fill", 'white');

function redraw() {

vis.attr("transform",

"translate(" + d3.event.translate + ")"

+ " scale(" + d3.event.scale + ")");

}

var root = {"name":"Metallica","children":[{"name":"Kill em all","children":[{"name":"The Four Horsemen "},{"name":" Seek and Destroy"},{"name":"Jump in the Fire"}]},{"name":"Ride the Lightning","children":[{"name":"Creeping Death"},{"name":"For Whom The Bell Tolls"},{"name":"Fade TO Black"},{"name":"Creeping Death"},{"name":"Ride The Lightning"}]},{"name":"Master of Puppets","children":[{"name":"Master of Puppets"},{"name":"Sanitarium"},{"name":"Orion"}]},{"name":".. And Justice For all","children":[{"name":"One"},{"name":"Harvester of Sorrow"},{"name":"Blackened"}]},{"name":"Metallica","children":[{"name":"Sad But True"},{"name":"EnterSandman"},{"name":"Nothing Else Matters"},{"name":"Unforgiven"},{"name":"Wherever I may Roam"}]},{"name":"Load","children":[{"name":"King Nothing"},{"name":"Until it Sleeps"},{"name":"Mama Said"}]},{"name":"Reload","children":[{"name":"The Unforgiven II"},{"name":"Better Than You"},{"name":"The Memory Remains"}]},{"name":"St. Anger","children":[{"name":""}]},{"name":"Death Magnetic","children":[{"name":""}]}]} ;

var nodes = tree.nodes(root),

links = tree.links(nodes);

var link = vis.selectAll(".link")

.data(links)

.enter().append("path")

.attr("class", "link")

.attr("d", diagonal);

var node = vis.selectAll(".node")

.data(nodes)

.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

.on("mouseover", mouseover)

.on("mouseout", mouseout)

node.append("circle")

.attr("r", 4.5)

.style("fill", "#FF3399");

node.append("svg: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)"; })

.style("fill", "#D95F0E")

.text(function(d) { return d.name; });

function mouseover() {

d3.select(this).select("circle").transition()

.duration(750)

.attr("r", 9)

d3.select(this).select("text").transition()

.duration(750)




.style("stroke-width", ".5px")

.style("font", "41.8px serif")

.style("opacity", 1);

}

function mouseout() {

d3.select(this).select("circle").transition()

.duration(750)

.attr("r", 4.5)

d3.select(this).select("text").transition()

.duration(750)




.style("font", "22px serif")

.style("opacity", 0.8);

}

d3.select(self.frameElement).style("height", diameter - 150 + "px");

</script>

</body>

web view... {"name":"metallica","children ... "ride the...

Documents