Skip to content

Instantly share code, notes, and snippets.

@tbadams45
Last active February 22, 2018 14:47
Show Gist options
  • Save tbadams45/ba2e202ce45f6ed7e60c1220d767a5d2 to your computer and use it in GitHub Desktop.
Save tbadams45/ba2e202ce45f6ed7e60c1220d767a5d2 to your computer and use it in GitHub Desktop.
Radial Network in D3
scrolling: yes
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle {
stroke: #fff;
stroke-width: 2px;
}
text {
font: bold 12px sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
/* path {
fill: none
stroke: #999;
stroke-width: 1.5px;
}
*/
var width = 700,
height = 500,
radius = 150;
var angle = d3.scale.ordinal()
.rangePoints([0, 360], 1);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.json("network.json", function(error, nodes) {
if (error) throw error;
var nodeByName = d3.map(),
links = [];
nodes.forEach(function(d) { nodeByName.set(d.name, d); });
nodes.forEach(function(source) {
source.connections.forEach(function(target) {
links.push({source: source, target: nodeByName.get(target), color: source.color});
});
});
angle.domain(nodes.map(function(d) { return d.name; }));
var link = svg.append("g")
.attr("class", "links")
.selectAll("path")
.data(links)
.enter().append("path")
.attr("d", curve)
.attr("fill", "none")
.attr("stroke", function(d) { return d.color; })
.attr("stroke-width", "1.5px");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(nodes)
.enter().append("g")
.attr("transform", function(d) { return "rotate(" + angle(d.name) + ")translate(" + radius + ",0)"; });
node.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return d.color; });
node.append("text")
.attr("dy", ".35em")
.attr("x", 6)
.text(function(d) { return d.name; })
.style("fill", function(d) { return d.color; })
.filter(function(d) { return (angle(d.name) + 90) % 360 > 180; }) // flipped
.attr("x", -6)
.attr("transform", "rotate(-180)")
.style("text-anchor", "end")
});
function curve(link) {
var a0 = angle(link.source.name) / 180 * Math.PI,
a1 = angle(link.target.name) / 180 * Math.PI,
x0 = Math.cos(a0) * radius, y0 = Math.sin(a0) * radius,
x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius,
dx = x0 - x1,
dy = y0 - y1,
l = Math.sqrt(dx * dx + dy * dy);
return "M" + x0 + "," + y0
+ "A" + l * 2 + "," + l * 2 + " 0 0 1 "
+ x1 + "," + y1;
}
</script>
[
{"name": "Financial", "group": "Financial", "color": "#B2A00D", "connections": ["Infrastructure", "Human Resources", "Technological", "Water Demand", "Regionalization"]},
{"name": "Infrastructure", "group": "Infrastructure", "color": "#30BB38","connections": ["Financial", "Human Resources", "Technological", "Consumer Perception", "Water Demand"]},
{"name": "Climate Change", "group": "Environmental", "color": "#F0766B", "connections": ["Natural Hazards", "Water Rights", "Consumer Perception", "Environmental Regulations", "Water Demand"]},
{"name": "Natural Hazards", "group": "Environmental", "color": "#F0766B","connections": ["Financial", "Infrastructure", "Political and Legislative", "Water Rights", "Consumer Perception"]},
{"name": "Regionalization", "group": "Regulatory", "color": "#3DBEC2", "connections": ["Financial", "Infrastructure", "Political and Legislative", "Water Demand"]},
{"name": "Water Rights", "group": "Regulatory", "color": "#3DBEC2", "connections": []},
{"name": "Environmental Regulations", "group": "Regulatory", "color": "#3DBEC2", "connections": ["Water Rights"]},
{"name": "Drinking Water Regulations", "group": "Regulatory", "color": "#3DBEC2", "connections": ["Financial", "Infrastructure", "Technological"]},
{"name": "Political and Legislative", "group": "Regulatory", "color": "#3DBEC2", "connections": ["Financial", "Drinking Water Regulations", "Water Rights", "Environmental Regulations", "Water Demand", "Regionalization"]},
{"name": "Water Demand", "group": "Societal", "color": "#6D9EFA", "connections": ["Financial", "Infrastructure", "Consumer Perception", "Regionalization"]},
{"name": "Human Resources", "group": "Societal", "color": "#6D9EFA", "connections": ["Technological"]},
{"name": "Consumer Perception", "group": "Societal", "color": "#6D9EFA", "connections": ["Financial", "Drinking Water Regulations", "Water Demand"]},
{"name": "Technological", "group": "Technological", "color": "#EF5CE3", "connections": ["Infrastructure", "Human Resources", "Water Demand"]}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment