Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

executable file 107 lines (90 sloc) 2.618 kb
<html>
<head>
<meta charset="UTF-8" />
<title>Phrase Net: COLLECTION_NAME</title>
<script src="support/d3.v2.js"></script>
<script src="support/d3.layout.cloud.js"></script>
<style type="text/css">
body {
font: 12pt sans-serif;
margin: 1em;
}
h1 {
position: fixed;
top: 1em;
left: 1em;
}
.link {
stroke: #000;
fill: none;
}
.node {
text-anchor: middle;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = DATA;
var nodedata = data['nodes'];
var edgedata = data['edges'];
var fontSize = d3.scale.log().range([10,32]);
var linkSize = d3.scale.linear().range([2,10]);
var vals = nodedata.map(function (d) { return +d.freq});
fontSize.domain([d3.min(vals), d3.max(vals)]);
vals = edgedata.map(function (d) { return +d.weight});
linkSize.domain([d3.min(vals), d3.max(vals)]);
var textOffset = 15;
var diagonal = d3.svg.diagonal()
.source(function (d) { return {'x': d.source.x, 'y': d.source.y + (d.source.y < d.target.y ? textOffset : -textOffset)};})
.target(function (d) { return {'x': d.target.x, 'y': d.target.y - (d.source.y < d.target.y ? textOffset : -textOffset)};});
var width = 960, height = 500;
d3.select("body").append("h1").text("PATTERN");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("svg:defs").selectAll("marker")
.data(["defaultmarker"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 0 10 10")
.attr("refX", 0)
.attr("refY", 5)
.attr("markerWidth", 4)
.attr("markerHeight", 3)
.attr("markerUnits", "strokeWidth")
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,0L10,5L0,10z");
var force = d3.layout.force().size([width, height])
.distance(100)
.charge(-100)
.gravity(0.05)
.nodes(nodedata)
.links(edgedata)
.start();
var node = svg.selectAll(".node")
.data(nodedata)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
var link = svg.selectAll(".link")
.data(edgedata)
.enter().append("path")
.attr("class", "link")
.style("stroke-width", function (d) { return linkSize(+d.weight);})
.style("stroke", "#000")
.attr("d", diagonal)
.attr("marker-end", "url(#defaultmarker)");
node.append("text")
.attr("dx", 0)
.attr("dy", ".35em")
.style("font-size", function (d) { return fontSize(+d.freq); })
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("d", diagonal);
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.