Created
August 8, 2016 04:33
-
-
Save mayblue9/db720515b219f1fb1e490d34ec493a4e to your computer and use it in GitHub Desktop.
arc_test2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| source | target | weight | |
|---|---|---|---|
| sam | tully | 3 | |
| sam | pat | 8 | |
| sam | kim | 2 | |
| sam | pris | 1 | |
| roy | pris | 5 | |
| roy | sam | 1 | |
| tully | sam | 1 | |
| tully | pris | 5 | |
| tully | kim | 3 | |
| tully | pat | 1 | |
| tully | mo | 3 | |
| kim | pat | 2 | |
| kim | mo | 1 | |
| mo | tully | 7 | |
| mo | pat | 1 | |
| mo | sam | 4 | |
| mo | pris | 1 | |
| pat | sam | 3 | |
| pat | tully | 1 | |
| pat | kim | 2 | |
| pat | mo | 5 | |
| white | sam | 10 | |
| white | kim | 15 | |
| sam | white | 20 | |
| kim | white | 20 | |
| white | jerry | 14 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="http://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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| id,followers,following | |
| sam,17,500 | |
| roy,83,80 | |
| pris,904,15 | |
| tully,7,5 | |
| kim,11,50 | |
| mo,80,85 | |
| pat,150,300 | |
| white,20,30 | |
| jerry,20,30 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment