Adapted from Mike Bostock's radial arc diagram.
Last active
February 22, 2018 14:47
-
-
Save tbadams45/ba2e202ce45f6ed7e60c1220d767a5d2 to your computer and use it in GitHub Desktop.
Radial Network in D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| scrolling: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| {"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