|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>D3: Force layout</title> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> |
|
<style type="text/css"> |
|
/* No style rules here yet */ |
|
text { |
|
font: 10px sans-serif; |
|
pointer-events: none; |
|
} |
|
circle{ |
|
opacity: 0.5; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
|
|
//Width and height |
|
var w = 800; |
|
var h = 600; |
|
|
|
//Original data |
|
var dataset = { |
|
nodes: [ |
|
{ name: "ideal amelia" }, |
|
{ name: "herbal wisdom" }, |
|
{ name: "makes things by hand" }, |
|
{ name: "connected" }, |
|
{ name: "generous" }, |
|
{ name: "affluent" }, |
|
{ name: "divinely feminine" }, |
|
{ name: "writer" }, |
|
{ name: "artist" }, |
|
{ name: "startup pace work" }, |
|
{ name: "midwife" }, |
|
{ name: "accordion player" }, |
|
{ name: "strong woman" }, |
|
{ name: "wild" }, |
|
{ name: "open" }, |
|
{ name: "gardener" }, |
|
{ name: "maker of tinctures" }, |
|
{ name: "maker of tea blends" }, |
|
{ name: "maker of salves" }, |
|
{ name: "maker of bitters" }, |
|
{ name: "has a kitchen herb garden" }, |
|
{ name: "fermenter" }, |
|
{ name: "gurerilla gardens" }, |
|
{ name: "seed bombs" }, |
|
{ name: "wild crafter" }, |
|
{ name: "sourdough" }, |
|
{ name: "pizza nights" }, |
|
{ name: "soaking beans" }, |
|
{ name: "sprouting seeds" }, |
|
{ name: "no microwave" }, |
|
{ name: "helping anyone I can" }, |
|
{ name: "dinner parties" }, |
|
{ name: "helping with d3.js user group" }, |
|
{ name: "hosting Quantified Self meetup" }, |
|
{ name: "public speaking" }, |
|
{ name: "tips well" }, |
|
{ name: "hosts" }, |
|
{ name: "gives money" }, |
|
{ name: "gives time and art to causes" }, |
|
{ name: "bicycle advocacy" }, |
|
{ name: "does datavis for causes" }, |
|
{ name: "spends on adventure, gear, good food, clothing, home" }, |
|
{ name: "has bodywork done" }, |
|
{ name: "flow" }, |
|
{ name: "posture" }, |
|
{ name: "long, lean, muscle" }, |
|
{ name: "dress well" }, |
|
{ name: "subtle makeup" }, |
|
{ name: "adorn yourself (jewels)" }, |
|
{ name: "energy work" }, |
|
{ name: "meditation" }, |
|
{ name: "tarot" }, |
|
{ name: "reiki" }, |
|
{ name: "acupuncture" }, |
|
{ name: "small, curated selection" }, |
|
{ name: "accessories" }, |
|
{ name: "boots" }, |
|
{ name: "skirts" }, |
|
{ name: "skinny jeans" }, |
|
{ name: "dresses" }, |
|
{ name: "chambray" }, |
|
{ name: "adventurer" }, |
|
{ name: "climber" }, |
|
{ name: "alpine climbng" }, |
|
{ name: "trad leader" }, |
|
{ name: "trip leader" }, |
|
{ name: "bike tours" }, |
|
{ name: "mountaineering" }, |
|
{ name: "sex" }, |
|
{ name: "Open Review Quarterly" }, |
|
{ name: "published" }, |
|
{ name: "Taking The Lane Press" }, |
|
{ name: "ameliagreenhall.com/blog" }, |
|
{ name: "drawing/illustration" }, |
|
{ name: "spoke cards" }, |
|
{ name: "cover of zines" }, |
|
{ name: "screenprinter" }, |
|
{ name: "annual valentines day cards" }, |
|
{ name: "photographer" }, |
|
{ name: "posters" }, |
|
{ name: "cyanotypes" }, |
|
{ name: "content marketing" }, |
|
{ name: "design" }, |
|
{ name: "data scientist" }, |
|
{ name: "studies" }, |
|
{ name: "product design" }, |
|
{ name: "User Experience (UX)" }, |
|
{ name: "User Interface (UI)" }, |
|
{ name: "hacker" }, |
|
{ name: "strong female community" }, |
|
{ name: "present" }, |
|
{ name: "connected to earth" }, |
|
{ name: "yoga" }, |
|
{ name: "pushups" }, |
|
{ name: "busking" }, |
|
{ name: "blackbird raum" }, |
|
{ name: "balkan folk" }, |
|
{ name: "knows songs by heart" }, |
|
{ name: "reads music" }, |
|
{ name: "harmonica" }, |
|
{ name: "morning pages" }, |
|
{ name: "sacred/divine print series" }, |
|
{ name: "print exchanges" }, |
|
{ name: "maker" }, |
|
{ name: "textiles" }, |
|
{ name: "dyes" }, |
|
{ name: "feminist womens book club" }, |
|
{ name: "folk" }, |
|
{ name: "non-violent communication (NVC)" } |
|
], |
|
edges: [ |
|
{ source: 0, target: 1 }, |
|
{ source: 0, target: 2 }, |
|
{ source: 0, target: 3 }, |
|
{ source: 0, target: 4 }, |
|
{ source: 0, target: 5 }, |
|
{ source: 0, target: 6 }, |
|
{ source: 0, target: 7 }, |
|
{ source: 0, target: 8 }, |
|
{ source: 0, target: 9 }, |
|
{ source: 0, target: 10 }, |
|
{ source: 0, target: 11 }, |
|
{ source: 0, target: 12 }, |
|
{ source: 0, target: 13 }, |
|
{ source: 0, target: 14 }, |
|
{ source: 0, target: 15 }, |
|
{ source: 0, target: 61 }, |
|
{ source: 1, target: 16 }, |
|
{ source: 1, target: 17 }, |
|
{ source: 1, target: 18 }, |
|
{ source: 1, target: 19 }, |
|
{ source: 1, target: 20 }, |
|
{ source: 1, target: 21 }, |
|
{ source: 1, target: 24 }, |
|
{ source: 21, target: 25 }, |
|
{ source: 15, target: 22 }, |
|
{ source: 15, target: 24 }, |
|
{ source: 15, target: 28 }, |
|
{ source: 22, target: 23 }, |
|
{ source: 2, target: 25 }, |
|
{ source: 2, target: 26 }, |
|
{ source: 3, target: 26 }, |
|
{ source: 2, target: 27 }, |
|
{ source: 2, target: 28 }, |
|
{ source: 2, target: 29 }, |
|
{ source: 3, target: 30 }, |
|
{ source: 3, target: 31 }, |
|
{ source: 3, target: 32 }, |
|
{ source: 3, target: 33 }, |
|
{ source: 3, target: 34 }, |
|
{ source: 3, target: 4 }, |
|
{ source: 4, target: 5 }, |
|
{ source: 4, target: 35 }, |
|
{ source: 4, target: 36 }, |
|
{ source: 4, target: 37 }, |
|
{ source: 4, target: 38 }, |
|
{ source: 4, target: 39 }, |
|
{ source: 4, target: 40 }, |
|
{ source: 5, target: 36 }, |
|
{ source: 5, target: 38 }, |
|
{ source: 5, target: 39 }, |
|
{ source: 5, target: 40 }, |
|
{ source: 5, target: 41 }, |
|
{ source: 5, target: 42 }, |
|
{ source: 5, target: 43 }, |
|
{ source: 5, target: 6 }, |
|
{ source: 6, target: 41 }, |
|
{ source: 6, target: 44 }, |
|
{ source: 6, target: 45 }, |
|
{ source: 6, target: 46 }, |
|
{ source: 6, target: 47 }, |
|
{ source: 6, target: 48 }, |
|
{ source: 6, target: 49 }, |
|
{ source: 49, target: 50 }, |
|
{ source: 49, target: 51 }, |
|
{ source: 49, target: 52 }, |
|
{ source: 49, target: 53 }, |
|
{ source: 46, target: 54 }, |
|
{ source: 54, target: 55 }, |
|
{ source: 54, target: 55 }, |
|
{ source: 54, target: 56 }, |
|
{ source: 54, target: 57 }, |
|
{ source: 54, target: 58 }, |
|
{ source: 54, target: 59 }, |
|
{ source: 54, target: 60 }, |
|
{ source: 61, target: 62 }, |
|
{ source: 61, target: 66 }, |
|
{ source: 61, target: 68 }, |
|
{ source: 62, target: 63 }, |
|
{ source: 62, target: 64 }, |
|
{ source: 62, target: 65 }, |
|
{ source: 62, target: 67 }, |
|
{ source: 7, target: 69 }, |
|
{ source: 7, target: 100 }, |
|
{ source: 7, target: 70 }, |
|
{ source: 7, target: 72 }, |
|
{ source: 7, target: 8 }, |
|
{ source: 70, target: 71 }, |
|
{ source: 71, target: 75 }, |
|
{ source: 73, target: 72 }, |
|
{ source: 73, target: 74 }, |
|
{ source: 73, target: 75 }, |
|
{ source: 73, target: 76 }, |
|
{ source: 73, target: 81 }, |
|
{ source: 73, target: 79 }, |
|
{ source: 73, target: 8 }, |
|
{ source: 8, target: 78 }, |
|
{ source: 78, target: 80 }, |
|
{ source: 78, target: 79 }, |
|
{ source: 8, target: 103 }, |
|
{ source: 103, target: 104 }, |
|
{ source: 103, target: 105 }, |
|
{ source: 81, target: 82 }, |
|
{ source: 9, target: 81 }, |
|
{ source: 9, target: 83 }, |
|
{ source: 9, target: 88 }, |
|
{ source: 82, target: 84 }, |
|
{ source: 82, target: 85 }, |
|
{ source: 82, target: 86 }, |
|
{ source: 86, target: 87 }, |
|
{ source: 83, target: 84 }, |
|
{ source: 83, target: 87 }, |
|
{ source: 83, target: 86 }, |
|
{ source: 82, target: 83 }, |
|
{ source: 82, target: 84 }, |
|
{ source: 10, target: 89 }, |
|
{ source: 10, target: 90 }, |
|
{ source: 10, target: 91 }, |
|
{ source: 89, target: 106 }, |
|
{ source: 12, target: 89 }, |
|
{ source: 12, target: 92 }, |
|
{ source: 12, target: 93 }, |
|
{ source: 11, target: 94 }, |
|
{ source: 11, target: 95 }, |
|
{ source: 11, target: 96 }, |
|
{ source: 11, target: 97 }, |
|
{ source: 11, target: 98 }, |
|
{ source: 11, target: 99 }, |
|
{ source: 11, target: 107 }, |
|
{ source: 11, target: 14 }, |
|
{ source: 14, target: 68 }, |
|
{ source: 14, target: 108 }, |
|
{ source: 76, target: 77 }, |
|
{ source: 76, target: 101 }, |
|
{ source: 76, target: 102 }, |
|
{ source: 76, target: 104 } |
|
] |
|
}; |
|
|
|
//Initialize a default force layout, using the nodes and edges in dataset |
|
var force = d3.layout.force() |
|
.nodes(dataset.nodes) |
|
.links(dataset.edges) |
|
.size([w, h]) |
|
.linkDistance([90]) |
|
.charge([-250]) |
|
.start(); |
|
|
|
var colors = d3.scale.category10(); |
|
|
|
//Create SVG element |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
//Create edges as lines |
|
var edges = svg.selectAll("line") |
|
.data(dataset.edges) |
|
.enter() |
|
.append("line") |
|
.style("stroke", "#ccc") |
|
.style("stroke-width", 1); |
|
|
|
var node = svg.selectAll(".node") |
|
.data(dataset.nodes) |
|
.enter().append("g") |
|
.attr("class", "node") |
|
.on("mouseover", mouseover) |
|
.on("mouseout", mouseout) |
|
.call(force.drag); |
|
|
|
//Create nodes as circles |
|
//var nodes = svg.selectAll("circle") |
|
//.data(dataset.nodes) |
|
// .enter() |
|
node.append("circle") |
|
.attr("r", 10) |
|
.style("fill", function(d, i) { |
|
return colors(i); |
|
}) |
|
.attr("class","circle"); |
|
//.call(force.drag); |
|
|
|
//Add text |
|
node.append("text") |
|
.attr("x", 12) |
|
.attr("dy", ".35em") |
|
.text(function(d) { console.log(d.name); return d.name; }); |
|
|
|
//Every time the simulation "ticks", this will be called |
|
force.on("tick", function() { |
|
|
|
edges.attr("x1", function(d) { return d.source.x; }) |
|
.attr("y1", function(d) { return d.source.y; }) |
|
.attr("x2", function(d) { return d.target.x; }) |
|
.attr("y2", function(d) { return d.target.y; }); |
|
|
|
//node.attr("cx", function(d) { return d.x; }) |
|
//.attr("cy", function(d) { return d.y; }); |
|
node |
|
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
|
|
|
}); |
|
|
|
function mouseover() { |
|
d3.select(this).select("circle").transition() |
|
.duration(750) |
|
.attr("r", 16); |
|
} |
|
|
|
function mouseout() { |
|
d3.select(this).select("circle").transition() |
|
.duration(750) |
|
.attr("r", 8); |
|
} |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |