Last active
January 24, 2016 21:27
-
-
Save MariellaCC/b74e7174e4aa5b9eb3ff to your computer and use it in GitHub Desktop.
vciel EP43 arbo
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
{"name": "Accueil", | |
"children": [ | |
{"name":"Les maladies orphelines"}, | |
{"name":"Nous connaître", | |
"children": | |
[{"name": "L'association"}, | |
{"name": "Nos moyens" }, | |
{"name": "Nos partenaires"} | |
]}, | |
{"name":"Nos actions", "children": | |
[{"name": "Résumé des actions"}, | |
{"name": "CR années précédentes"}, | |
{"name": "Presse"} | |
] | |
}, | |
{"name":"Actualités", | |
"children": [ | |
{"name": "Agenda", | |
"children": [{"name": "Concerts"}, | |
{"name": "Thés dansants"}, {"name": "Belote"}, {"name": "Théâtre"} | |
]}, | |
{"name": "Actualités"}]}, | |
{"name":"Contact"}, | |
{"name":"Faire un don"} | |
]} |
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> | |
.node circle { | |
fill: #fff; | |
stroke: #79055D; | |
stroke-width: 1.5px; | |
} | |
.node { | |
font: 10px sans-serif; | |
} | |
.link { | |
fill: none; | |
stroke: #ccc; | |
stroke-width: 1.5px; | |
} | |
svg { | |
margin: 50px; | |
padding: 15px; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
-webkit-box-shadow: 2px 2px 5px rgba(121, 5, 93, 0.2); | |
-moz-box-shadow: 2px 2px 5px rgba(121, 5, 93, 0.2); | |
box-shadow: 2px 2px 5px rgba(121, 5, 93, 0.2); | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<div id="visu"></div> | |
<script> | |
var width = 500, | |
height = 300; | |
var cluster = d3.layout.cluster() | |
.size([height, width - 160]); | |
var diagonal = d3.svg.diagonal() | |
.projection(function(d) { return [d.y, d.x]; }); | |
var svg = d3.select("#visu").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(45,0)"); | |
d3.json("flare.json", function(error, root) { | |
if (error) throw error; | |
var nodes = cluster.nodes(root), | |
links = cluster.links(nodes); | |
var link = svg.selectAll(".link") | |
.data(links) | |
.enter().append("path") | |
.attr("class", "link") | |
.attr("d", diagonal); | |
var node = svg.selectAll(".node") | |
.data(nodes) | |
.enter().append("g") | |
.attr("class", "node") | |
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
node.append("circle") | |
.attr("r", 4.5); | |
node.append("text") | |
.attr("dx", function(d) { return d.children ? -8 : 8; }) | |
.attr("dy", 3) | |
.style("text-anchor", function(d) { return d.children ? "end" : "start"; }) | |
.text(function(d) { return d.name; }); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment