Last active
May 12, 2022 13:41
-
-
Save pdavidsonFIA/ce3a1f8ab87c613912ed7a6dac68f539 to your computer and use it in GitHub Desktop.
org chart using d3.js force network
This file contains hidden or 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> | |
| .links line { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| .nodes circle { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| font-family: sans-serif; | |
| font-size: 10px; | |
| } | |
| </style> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().id(function(d) { return d.id; })) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| d3.json("org_chart.json", function(error, graph) { | |
| if (error) throw error; | |
| var link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("line") | |
| .data(graph.links) | |
| .enter().append("line") | |
| .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); | |
| var node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("g") | |
| .data(graph.nodes) | |
| .enter().append("g") | |
| var circles = node.append("circle") | |
| .attr("r", 5) | |
| .attr("fill", function(d) { return color(d.group); }); | |
| // Create a drag handler and append it to the node object instead | |
| var drag_handler = d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended); | |
| drag_handler(node); | |
| var lables = node.append("text") | |
| .text(function(d) { | |
| return d.id; | |
| }) | |
| .attr('x', 6) | |
| .attr('y', 3); | |
| node.append("title") | |
| .text(function(d) { return d.id; }); | |
| simulation | |
| .nodes(graph.nodes) | |
| .on("tick", ticked); | |
| simulation.force("link") | |
| .links(graph.links); | |
| function ticked() { | |
| 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 + ")"; | |
| }) | |
| } | |
| }); | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| function dragended(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| </script> |
This file contains hidden or 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
| { | |
| "links": [ | |
| { | |
| "source": "Dario", | |
| "target": "Peter", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Jean", | |
| "target": "Peter", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Oleg", | |
| "target": "Peter", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Bilal", | |
| "target": "Peter", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Amine", | |
| "target": "Dario", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "JB", | |
| "target": "Bilal", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Reinsurance", | |
| "target": "Peter", | |
| "value": 3.0 | |
| }, | |
| { | |
| "source": "Planning", | |
| "target": "Peter", | |
| "value": 4.0 | |
| }, | |
| { | |
| "source": "BusinessCases", | |
| "target": "Peter", | |
| "value": 3.0 | |
| }, | |
| { | |
| "source": "Reserving", | |
| "target": "Dario", | |
| "value": 3.0 | |
| }, | |
| { | |
| "source": "Reinsurance", | |
| "target": "Dario", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "RiskMgmt", | |
| "target": "Dario", | |
| "value": 3.0 | |
| }, | |
| { | |
| "source": "PortfolioMonitoring", | |
| "target": "Dario", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "ProjectA", | |
| "target": "Jean", | |
| "value": 5.0 | |
| }, | |
| { | |
| "source": "ProductSTA", | |
| "target": "Jean", | |
| "value": 5.0 | |
| }, | |
| { | |
| "source": "ProductSTA", | |
| "target": "Oleg", | |
| "value": 1.0 | |
| }, | |
| { | |
| "source": "ActuarialSystems", | |
| "target": "Oleg", | |
| "value": 3.0 | |
| }, | |
| { | |
| "source": "Anaplan", | |
| "target": "Oleg", | |
| "value": 4.0 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Oleg", | |
| "value": 1.0 | |
| }, | |
| { | |
| "source": "ORSA", | |
| "target": "Oleg", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "IFRS17", | |
| "target": "Bilal", | |
| "value": 6.0 | |
| }, | |
| { | |
| "source": "SolvencyII", | |
| "target": "Bilal", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "RiskMgmt", | |
| "target": "Bilal", | |
| "value": 1.0 | |
| }, | |
| { | |
| "source": "Planning", | |
| "target": "Bilal", | |
| "value": 1.0 | |
| }, | |
| { | |
| "source": "ORSA", | |
| "target": "Bilal", | |
| "value": 2.0 | |
| }, | |
| { | |
| "source": "Reserving", | |
| "target": "Amine", | |
| "value": 6.0 | |
| }, | |
| { | |
| "source": "PortfolioMonitoring", | |
| "target": "Amine", | |
| "value": 4.0 | |
| }, | |
| { | |
| "source": "SolvencyII", | |
| "target": "JB", | |
| "value": 5.0 | |
| }, | |
| { | |
| "source": "ActuarialSystems", | |
| "target": "JB", | |
| "value": 5.0 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Peter", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Dario", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Jean", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Oleg", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Bilal", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "Amine", | |
| "value": 0.2 | |
| }, | |
| { | |
| "source": "Data", | |
| "target": "JB", | |
| "value": 0.2 | |
| } | |
| ], | |
| "nodes": [ | |
| { | |
| "group": 1, | |
| "id": "Peter" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "Dario" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "Jean" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "Oleg" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "Bilal" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "Amine" | |
| }, | |
| { | |
| "group": 1, | |
| "id": "JB" | |
| }, | |
| { | |
| "group": 2, | |
| "id": "Reserving" | |
| }, | |
| { | |
| "group": 2, | |
| "id": "SolvencyII" | |
| }, | |
| { | |
| "group": 2, | |
| "id": "ProductSTA" | |
| }, | |
| { | |
| "group": 2, | |
| "id": "Reinsurance" | |
| }, | |
| { | |
| "group": 2, | |
| "id": "ActuarialSystems" | |
| }, | |
| { | |
| "group": 3, | |
| "id": "IFRS17" | |
| }, | |
| { | |
| "group": 3, | |
| "id": "Anaplan" | |
| }, | |
| { | |
| "group": 3, | |
| "id": "ProjectA" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "Planning" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "PortfolioMonitoring" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "RiskMgmt" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "ORSA" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "Data" | |
| }, | |
| { | |
| "group": 4, | |
| "id": "BusinessCases" | |
| } | |
| ] | |
| } |
This file contains hidden or 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
| body { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: 300; | |
| } | |
| b { | |
| font-weight: 900; | |
| } | |
| .outline { | |
| fill: none; | |
| stroke: #888888; | |
| stroke-width: 1px; | |
| } | |
| #tooltip { | |
| font-size: 10pt; | |
| font-weight: 900; | |
| fill: #000000; | |
| stroke: #ffffff; | |
| stroke-width: 0.25px; | |
| } | |
| .node { | |
| stroke: #ffffff; | |
| stroke-weight: 1px; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #888888; | |
| stroke-weight: 1px; | |
| stroke-opacity: 0.5; | |
| } | |
| .highlight { | |
| stroke: red; | |
| stroke-weight: 4px; | |
| stroke-opacity: 1.0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment