portfolio page

<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 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