xxxxxxxxxx
<html>
<head>
<title>naoya</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Playfair|Raleway|Raleway+Dots" rel="stylesheet">
</head>
<style>
#viz, svg {
width: 1000px;
height: 1000px;
}
</style>
<script>
function makeViz() {
d3.json("pages.json", function(data) {drawOrbit(data)});
}
function drawOrbit(_data) {
//down with category20a()!!
colors = d3.scaleOrdinal(d3.schemeCategory20b);
console.log(d3.schemeCategory20b)
orbitScale = d3.scaleLinear().domain([1, 3]).range([3.8, 1.5]).clamp(true);
radiusScale = d3.scaleLinear().domain([0,1,2,3]).range([40,40,3,1]).clamp(true);
orbit = d3.orbit().size([1000,1000])
.children(function(d) {return d.children})
.revolution(function(d) {return d.depth})
.orbitSize(function(d) {return orbitScale(d.depth)})
.speed(.1)
.nodes(_data);
d3.select("svg").selectAll("g.node").data(orbit.nodes())
.enter()
.append("g")
.attr("class", "node")
.attr("x", d => {return d.x})
.attr("y", d => {return d.y})
.attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"})
.on("mouseover", nodeOver)
.on("mouseout", nodeOut)
d3.selectAll("g.node")
.append("a").attr("xlink:href", function(d){return d.url}).attr("target", "_blank")
.append("circle")
.attr("r", function(d) {return radiusScale(d.depth)})
// .style("fill", function(d) {return colors(d.depth)})
.style("fill", d => {return "url(#fill_" + d.name + ")"});
d3.selectAll("g.node")
.append("svg:pattern")
.attr("id", d => {return "fill_" + d.name })
.attr("width", 30)
.attr("height", 30)
// .attr("patternUnits", "userSpaceOnUse")
.append("svg:image")
.attr("xlink:href", d => {return d.img})
.attr("width", 100)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
d3.select("svg").selectAll("circle.orbits")
.data(orbit.orbitalRings())
.enter()
.insert("circle", "g")
.attr("class", "ring")
.attr("r", function(d) {return d.r})
.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y})
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("stroke-opacity", .15)
orbit.on("tick", function() {
d3.selectAll("g.node")
.attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"});
d3.selectAll("circle.ring")
.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y});
});
orbit.start();
var t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
function nodeOver(d) {
orbit.stop();
d3.selectAll(".centerpiece")
.interrupt()
// .transition(t)
.style("opacity", 0)
// d3.select(this)
// .append("text")
// .classed("nameLabel", true)
// .text(d.name).style("text-anchor", "middle")
// .attr("y", 80);
d3.select(this)
.select("circle")
.interrupt()
.transition(t)
.attr("r", function(d) {return 1.3 * radiusScale(d.depth)})
.style("stroke", function(d) {return colors(d.depth)})
.style("stroke-width", 0);
const type = d3.annotationCustomType(
d3.annotationCalloutCircle,
{"className":"custom",
"connector":{"type":"curve"},
"note":{
"lineType":null,
"align":"middle"}})
const annotations = [{
note: {
label: d.note,
title: d.name
},
//can use x, y directly instead of data
x: d.x,
y: d.y,
// data: { date: "18-Sep-09", close: 185.02 },
dy: 500 -d.y,
dx: 500 -d.x,
connector: {
curve: d3.curveBasis,
points: 1
},
subject: {
radius: 1.3 * radiusScale(d.depth),
radiusPadding: 5
}
}]
//
// const parseTime = d3.timeParse("%d-%b-%y")
// const timeFormat = d3.timeFormat("%d-%b-%y")
//
// //Skipping setting domains for sake of example
// const x = d3.scaleTime().range([0, 800])
// const y = d3.scaleLinear().range([300, 0])
//
const makeAnnotations = d3.annotation()
.editMode(false)
.textWrap(300)
.type(type)
//accessors & accessorsInverse not needed
//if using x, y in annotations JSON
// .accessors({
// x: d => x(parseTime(d.date)),
// y: d => y(d.close)
// })
// .accessorsInverse({
// date: d => timeFormat(x.invert(d.x)),
// close: d => y.invert(d.y)
// })
.annotations(annotations)
//
d3.select("svg")
.append("g")
// d3.select(this)
.attr("class", "annotation-group")
.call(makeAnnotations)
}
function nodeOut(d) {
orbit.start();
d3.selectAll(".nameLabel").remove();
d3.selectAll(".annotation-group").remove();
d3.selectAll("g.node > a > circle")
.interrupt()
.transition(t)
.style("stroke", "none")
.style("stroke-width", 0)
.attr("r", function(d) {return radiusScale(d.depth)});
d3.selectAll(".centerpiece")
.interrupt()
.transition(t)
.style("opacity", 1)
}
}
</script>
<body onload="makeViz()">
<div id="viz"><svg>
<text class="centerpiece" x="50%" y="48%">
<tspan class="first" dy="-25px">naoya</tspan><tspan class="last" dy="0">kanai</tspan>
</text>
<text class="centerpiece" x="50%" y="52%">
<tspan class="last" dy="25px">music</tspan><tspan class="first"> + data</tspan>
</text>
</svg></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.js"></script>
<script src="d3-annotation.js"></script>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.js