D3 Examples - arc

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
        #chart {
            font-family: 'Malgun Gothic', sans-serif;
            font-weight: 300;
            background: #fff;
            font-size:9px;
            position: relative;
        }
        .outline {
            fill: none;
            stroke: #888888;
            stroke-width: 1px;
        }
        .hidden {
            display: none;
            visibility: hidden;
            pointer-events: none;
        }
        .tooltip {
            color: #222;
            background: #dcd0d0;
            padding: .5em;
            text-shadow: #f5f5f5 0 1px 0;
            border-radius: 10px;
            border-color: #a6a6a6;
            border-width: 1px;
            border-style: solid;
            box-shadow: 0px 0px 2px 0px #a6a6a6;
            opacity: 0.7;
            position: absolute;
            width: 175px;
            display: block;
            font-size:11px;
        }
        .tooltip h5 {
            font-size: 11px;
        }
        .tooltip p {
            font-size: 9px;
        }
        table {
            border: none;
            margin: 0;
            padding: 0;
            border-spacing: 0;
            width: 150px;
            font-size:12px;
            font-weight: bold;
        }
        td {
            text-align: right;
            padding: 2px 0!important;
        }
        tr {
            margin: 0;
            background-color: white;
        }
        .node {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 2.5px;
            font: 10px sans-serif;
        }
        .node text {
            color: #333;
        }
        .link {
            fill: none;
            stroke: #888888;
            stroke-weight: 1px;
            stroke-opacity: 0.5;
        }
        .legend {
            font-size: 9px;
        }
​
    </style>
    <title>word relationship vis </title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
​
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
​
​
                  var dataset= {
                      "nodes": [{
                          "token": "Alice",
                          "count": "15",
                          "node":0
                      }, {
                          "token": "Rabbit",
                          "count": "2",
                          "node":1
                      }, {
                          "token": "Blue",
                          "count": "5",
                          "node":2
                      }, {
                          "token": "Book",
                          "count": "1",
                          "node":3
                      }, {
                          "token": "Queen",
                          "count": "5",
                          "node":4
                      }, {
                          "token": "Cards",
                          "count": "9",
                          "node":5
                      }, {
                          "token": "is",
                          "count": "2",
                          "node":6
                      }, {
                          "token": "in",
                          "count": "19",
                          "node":7
                      }, {
                          "token": "the",
                          "count": "20",
                          "node":8
                      }, {
                          "token": "of",
                          "count": "16",
                          "node":9
                      }, {
                          "token": "very",
                          "count": "6",
                          "node":10
                      }, {
                          "token": "had",
                          "count": "4",
                          "node":11
                      }, {
                          "token": "?",
                          "count": "2",
                          "node":12
                      }],
                      "links": [
                          {
                          "source": 0,
                          "target": 2
                      },
                          
                          {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 0,
                          "target": 1
                      }, {
                          "source": 1,
                          "target": 3
                      }, {
                          "source": 1,
                          "target": 3
                      }, {
                          "source": 1,
                          "target": 3
                      }, {
                          "source": 1,
                          "target": 3
                      }, {
                          "source": 1,
                          "target": 3
                      }, {
                          "source": 1,
                          "target": 2
                      }, {
                          "source": 2,
                          "target": 3
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 3,
                          "target": 4
                      }, {
                          "source": 4,
                          "target": 5
                      }, {
                          "source": 4,
                          "target": 6
                      }, {
                          "source": 4,
                          "target": 6
                      }, {
                          "source": 4,
                          "target": 5
                      }, {
                          "source": 4,
                          "target": 5
                      }, {
                          "source": 4,
                          "target": 5
                      }, {
                          "source": 5,
                          "target": 6
                      }, {
                          "source": 5,
                          "target": 6
                      }, {
                          "source": 5,
                          "target": 6
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 6,
                          "target": 7
                      }, {
                          "source": 7,
                          "target": 12
                      }, {
                          "source": 7,
                          "target": 12
                      }, {
                          "source": 7,
                          "target": 12
                      }, {
                          "source": 7,
                          "target": 12
                      }, {
                          "source": 7,
                          "target": 12
                      }, {
                          "source": 7,
                          "target": 8
                      }, {
                          "source": 8,
                          "target": 9
                      }, {
                          "source": 9,
                          "target": 10
                      }, {
                          "source": 10,
                          "target": 11
                      }, {
                          "source": 9,
                          "target": 11
                      }, {
                          "source": 8,
                          "target": 11
                      }, {
                          "source": 12,
                          "target": 11
                      }]
                  };
​
                  var width = 800,
                          height = 400,
                          margin = 100,
                          pad = margin / 2,
                          padding = 30, 
                          radius = 6,
                          yfixed = pad + radius;
​
​
                  var color = d3.scale.category20();
​
​
                  var tooltip = d3.select("#chart").append("div")
                          .classed("tooltip", true)
                          .classed("hidden", true);
​
                  var graph = dataset;
                  arc(graph);
​
                  function arc(graph) {
                
                      var svg = d3.select("#chart").append("svg")
                              .attr("id", "arc")
                              .attr("width", width)
                              .attr("height", height);
​
​
                      var plot = svg.append("g")
                              .attr("id", "plot")
                              .attr("transform", "translate(" + padding + ", " + padding + ")");
​
​
                      //count path
                      graph.links.forEach(function(d, i) {
                          var pathcount = 0;
                          for (var j = 0; j < i; j++) {
                              var otherpath = graph.links[j];
                              
                              if (otherpath.source === d.source && otherpath.target === d.target) {
                                  pathcount++;
                              }
                          }
                          d.pathcount = pathcount;
                         
                      });
​
​
                      graph.links.forEach(function(d, i) {
                          d.source = isNaN(d.source) ? d.source : graph.nodes[d.source];
                          d.target = isNaN(d.target) ? d.target : graph.nodes[d.target];
                          console.log("!!!_graph.node",graph.nodes[d.source]);
                           console.log("d.source__", d.source);
                          console.log("d.target__", d.target);
                      });
                      console.log("graph.links", graph.links); 
                      layout(graph.nodes);
​
                      //links
                      var radians = d3.scale.linear()
                              .range([Math.PI / 2, 3 * Math.PI / 2]);
​
                      var arc = d3.svg.line.radial()
                              .interpolate("basis")
                              .tension(0)
                              .angle(function(d) {
                                  return radians(d);
                              });
​
                      d3.select("#plot").selectAll(".link")
                              .data(graph.links)
                              .enter().append("path")
                              .attr("class", "link")
                              .style("stroke-width", function(d) {
                                  return (2 + d.pathcount);
                              })
                              .attr("transform", function(d, i) {
                                  var xshift = d.source.x + (d.target.x - d.source.x) / 2;
                                  var yshift = yfixed;
                                  return "translate(" + xshift + ", " + yshift + ")";
                              })
                              .attr("d", function(d, i) {
                                  var xdist = Math.abs(d.source.x - d.target.x);
                                  arc.radius(xdist / 2);
                                  var points = d3.range(0, Math.ceil(xdist / 3));
                                  radians.domain([0, points.length - 1]);
                                  return arc(points);
                              })
                              .on("mouseover", edgeon);
​
                      //nodes
                      var node = d3.select("#plot").selectAll("g.node")
                              .data(graph.nodes)
                              .enter()
                              .append('g')
                              .attr("class", "gnode");
​
                      node.append("circle")
                              .attr("class", "node")
                              .attr("id", function(d, i) {
                                  return d.name;
                              })
                              .attr("cx", function(d, i) {
                                  return d.x;
                              })
                              .attr("cy", function(d, i) {
                                  return d.y;
                              })
                              .attr("r", 7)
                              .style("stroke", function(d, i) {
                                  return color(d.count);
                              })
                              .on("mousemove", function(d, i) {
                                  var mouse = d3.mouse(d3.select("#chart").node());
                                  tooltip
                                          .classed("hidden", false)
                                          .attr("class", "tooltip")
                                          .attr("style", "left:" + (mouse[0] + 20) + "px; top:" + (mouse[1] - 50) + "px")
                                          .html(tooltipbox(d))
                              })
                              .on("mouseover", nodeon);
​
​
                      node.append("text")
                              .style("text-anchor", "middle")
                              .style("font-size","12px")
                              .style("font-weight","bold")
                              .style("fill","Steelblue")
                              .attr("dx", function(d) {
                                  return d.x;
                              })
                              .attr("dy", function(d) {
                                  return d.y - 30;
                              })
                              .text(function(d) {
                                  return d.token;
                              });
​
                  }
​
                  // layout
                  function layout(nodes) {
                             
                      var xscale = d3.scale.linear()
                              .domain([0, nodes.length - 1])
                              .range([radius, width - margin - radius -30]);
​
                      nodes.forEach(function(d, i) {
                          d.x = xscale(i);
                          d.y = yfixed;
                      });
                  }
​
​
                  function tooltipbox(d) {
                      return "<h5>Words relation from Alice in Wonderland: " + "</h5>" +
                              "<tr>"+
                              "<td class='field'>Word: </td>" +
                              "<td>" + d.token + "</td>"+
                              "</tr>"+ "<br>"+
                              "<tr>"+
                              "<td class='field'>Count: </td>" +
                              "<td>" + d.count + "</td>"+
                              "</tr>"
​
                  }
​
​
​
                  function nodeon(d, i) {
                      d3.selectAll("path").style("stroke", function(p) {
                          return p.source == d || p.target == d ? "#FF4B57" : "#888888"
                      }).style("opacity","0.7")
                  }
​
                  function edgeon(d) {
​
                      d3.selectAll("path").style("stroke", function(p) {
                          return p == d ? "#17becf" : "#888888"
                      })
​
                  }
​
​
​
</script>
</body>
</html>
    