Skip to content

Instantly share code, notes, and snippets.

@lennyburdette

lennyburdette/index.html

Last active August 29, 2015 13:58
Show Gist options
  • Save lennyburdette/10434585 to your computer and use it in GitHub Desktop.
Save lennyburdette/10434585 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
body {
font: 11px sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var graph = {
"nodes":[
{ "name": "presenter", "group": 0 },
{ "name": "payment", "group": 0 },
{ "name": "merchant", "group": 0 },
{ "name": "map", "group": 0 },
{ "name": "signature", "group": 0 },
{ "name": "weather_data", "group": 1 },
{ "name": "weather", "group": 0 },
{ "name": "recipient", "group": 0 },
{ "name": "geocoding", "group": 1 },
{ "name": "itemizations", "group": 1 },
{ "name": "market_data", "group": 1 },
{ "name": "user_data", "group": 1 },
{ "name": "merchant_data", "group": 1 },
{ "name": "email_address", "group": 1 },
{ "name": "card_data", "group": 1 },
{ "name": "signature_data", "group": 1 },
{ "name": "merchant_token", "group": 0 },
{ "name": "payment_token", "group": 0 },
{ "name": "receipt", "group": 2 },
{ "name": "pickup", "group": 0 }
],
"links":[
{ "source":0,"target":18,"value":1 },
{ "source":0,"target":1,"value":1 },
{ "source":0,"target":2,"value":1 },
{ "source":0,"target":3,"value":1 },
{ "source":0,"target":6,"value":1 },
{ "source":0,"target":4,"value":1 },
{ "source":0,"target":19,"value":1 },
{ "source":1,"target":14,"value":1 },
{ "source":1,"target":9,"value":1 },
{ "source":2,"target":11,"value":1 },
{ "source":2,"target":12,"value":1 },
{ "source":2,"target":10,"value":1 },
{ "source":3,"target":18,"value":1 },
{ "source":3,"target":1,"value":1 },
{ "source":3,"target":2,"value":1 },
{ "source":3,"target":8,"value":1 },
{ "source":4,"target":18,"value":1 },
{ "source":4,"target":1,"value":1 },
{ "source":4,"target":15,"value":1 },
{ "source":5,"target":18,"value":1 },
{ "source":5,"target":1,"value":1 },
{ "source":5,"target":4,"value":1 },
{ "source":6,"target":18,"value":1 },
{ "source":6,"target":5,"value":1 },
{ "source":7,"target":13,"value":1 },
{ "source":8,"target":2,"value":1 },
{ "source":9,"target":16,"value":1 },
{ "source":9,"target":17,"value":1 },
{ "source":10,"target":16,"value":1 },
{ "source":10,"target":17,"value":1 },
{ "source":10,"target":13,"value":1 },
{ "source":11,"target":16,"value":1 },
{ "source":12,"target":16,"value":1 },
{ "source":13,"target":18,"value":1 },
{ "source":14,"target":17,"value":1 },
{ "source":15,"target":17,"value":1 },
{ "source":16,"target":18,"value":1 },
{ "source":17,"target":18,"value":1 },
{ "source":19,"target":18,"value":1 },
{ "source":19,"target":10,"value":1 }
]
};
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-500)
.linkDistance(100)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("circle")
.attr("class", "node")
.attr("r", 5);
node.append("text")
.text(function(d) { return d.name; })
.attr("dy", 3)
.attr("dx", 5);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
});
</script>
Raw
values.json
{
"nodes":[
{ "name": "presenter" },
{ "name": "payment" },
{ "name": "merchant" },
{ "name": "map" },
{ "name": "signature" },
{ "name": "weather_data" },
{ "name": "weather" },
{ "name": "recipient" },
{ "name": "geocoding" },
{ "name": "itemizations" },
{ "name": "market_data" },
{ "name": "user_data" },
{ "name": "merchant_data" },
{ "name": "email_address" },
{ "name": "card_data" },
{ "name": "signature_data" },
{ "name": "merchant_token" },
{ "name": "payment_token" },
{ "name": "receipt" },
{ "name": "pickup" }
],
"links":[
{ "source":0,"target":18,"value":1 },
{ "source":0,"target":1,"value":1 },
{ "source":0,"target":2,"value":1 },
{ "source":0,"target":3,"value":1 },
{ "source":0,"target":6,"value":1 },
{ "source":0,"target":4,"value":1 },
{ "source":0,"target":19,"value":1 },
{ "source":1,"target":14,"value":1 },
{ "source":1,"target":9,"value":1 },
{ "source":2,"target":11,"value":1 },
{ "source":2,"target":12,"value":1 },
{ "source":2,"target":10,"value":1 },
{ "source":3,"target":18,"value":1 },
{ "source":3,"target":1,"value":1 },
{ "source":3,"target":2,"value":1 },
{ "source":3,"target":8,"value":1 },
{ "source":4,"target":18,"value":1 },
{ "source":4,"target":1,"value":1 },
{ "source":4,"target":15,"value":1 },
{ "source":5,"target":18,"value":1 },
{ "source":5,"target":1,"value":1 },
{ "source":5,"target":4,"value":1 },
{ "source":6,"target":18,"value":1 },
{ "source":6,"target":5,"value":1 },
{ "source":7,"target":13,"value":1 },
{ "source":8,"target":2,"value":1 },
{ "source":9,"target":16,"value":1 },
{ "source":9,"target":17,"value":1 },
{ "source":10,"target":16,"value":1 },
{ "source":10,"target":17,"value":1 },
{ "source":10,"target":10,"value":1 },
{ "source":11,"target":16,"value":1 },
{ "source":12,"target":16,"value":1 },
{ "source":13,"target":18,"value":1 },
{ "source":14,"target":17,"value":1 },
{ "source":15,"target":17,"value":1 },
{ "source":16,"target":18,"value":1 },
{ "source":17,"target":18,"value":1 },
{ "source":19,"target":18,"value":1 },
{ "source":19,"target":10,"value":1 }
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment