JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title></title>
<link href="http://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet"
type="text/css" />
<script src="http://d3js.org/d3.v2.min.js" type="text/javascript"></script>
</head>
<body></body>
</html>
CSS
text
{
font-family: "Contrail One";
text-shadow: 4px 4px 4px #aaa;
}
line.link
{
stroke: #999;
stroke-opacity: .4;
}
path {
fill: lightsteelblue;
stroke: #000;
stroke-linejoin:round;
opacity:0.2;
}
circle
{
opacity:0.5;
}
JavaScript
var vertices = new Array();
var width = 960,
height = 500;
var color = d3.scale.category10();
var r = 6;
var force = d3.layout.force().size([width, height]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
$(function() {
var json = "{\"nodes\":[{\"name\":\"language\",\"group\":1,\"fontsize\":\"45px\",\"title\":null},{\"name\":\"english\",\"group\":1,\"fontsize\":\"35px\",\"title\":null},{\"name\":\"languages\",\"group\":1,\"fontsize\":\"21px\",\"title\":null}],\"links\":[{\"source\":0,\"target\":1,\"value\":1},{\"source\":0,\"target\":2,\"value\":1},{\"source\":1,\"target\":2,\"value\":1}]}";
json = htmlDecode(json);
json = $.parseJSON(json);
svg.append("svg:rect").attr("width", width).attr("height", height).style("stroke", "#fff").style("fill", "#fff");
force.nodes(json.nodes).links(json.links).gravity(0.05).linkDistance(120).charge(-200).start();
var node = svg.selectAll(".node").data(json.nodes).enter().append("g").attr("class", "node").attr("grp", function(d) {
return (d.group)
});
var link = svg.selectAll(".link").data(json.links).enter().append("line").attr("class", "link").style("stroke-opacity", "0.2");
node.append('circle').attr('r', function(d) {
var tmprad = parseInt(d.fontsize.replace('px', '')) * (d.name.length / 3);
if (tmprad > r) r = tmprad;
return tmprad;
}).style('fill', '#ffffff').style('stroke', function(d) {
return color(d.group)
});
node.selectAll('text').data(json.nodes).enter().append("text").attr("text-anchor", "middle").attr("dx", 2).attr("dy", ".35em").attr('original-title', function(d) {
return d.title
}).attr("style", function(d) {
return "font-size:" + d.fontsize
}).text(function(d) {
return d.name
}).attr("style", function(d) {
return "font-size:" + d.fontsize
}).style('fill',...