Created
January 13, 2016 19:31
-
-
Save chazcheadle/bd5d4a05f6a526502415 to your computer and use it in GitHub Desktop.
d3 chord diagram of content type interdependencies
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> | |
| <!-- Adapted from mbostock’s block #1046712 June 25, 2011 Chord Diagram--> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .chord { | |
| fill-opacity: .67; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var imports = [ | |
| {"name" : "article", "references" : ["byline", "issues", "newsletter", "package", "partner", "show", "topics"]}, | |
| {"name" : "byline", "references" : []}, | |
| {"name" : "custom_graphic", "references" : ["package", "show"]}, | |
| {"name" : "images", "references" : []}, | |
| {"name" : "infographic", "references" : []}, | |
| {"name" : "issue", "references" : ["article", "custom_graphic", "infographic", "newsletter", "slideshow", "video"]}, | |
| {"name" : "native_ad", "references" : []}, | |
| {"name" : "newsletter", "references" : []}, | |
| {"name" : "package", "references" : ["article", "infographic", "native_ad", "page", "poll", "slideshow", "video"]}, | |
| {"name" : "partner", "references" : []}, | |
| {"name" : "poll", "references" : ["byline", "issue", "topic", "show"]}, | |
| {"name" : "show", "references" : ["byline", "issue", "newsletter", "show_asset"]}, | |
| {"name" : "show_asset", "references" : []}, | |
| {"name" : "topic", "references" : ["graphic", "issue", "package", "show"]}, | |
| {"name" : "video", "references" : ["issue", "package", "partner", "poll", "show", "topic"]} | |
| ]; | |
| var outerRadius = 1280 / 2, | |
| innerRadius = outerRadius - 240; | |
| var fill = d3.scale.category20c(); | |
| var chord = d3.layout.chord() | |
| .padding(.04) | |
| .sortSubgroups(d3.descending) | |
| .sortChords(d3.descending); | |
| var arc = d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(innerRadius + 20); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", outerRadius * 2) | |
| .attr("height", outerRadius * 2) | |
| .append("g") | |
| .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); | |
| // d3.json("content-types.json", function(error, imports) { | |
| // if (error) throw error; | |
| var indexByName = d3.map(), | |
| nameByIndex = d3.map(), | |
| matrix = [], | |
| n = 0; | |
| // Returns the Flare package name for the given class name. | |
| function name(name) { | |
| return name; | |
| } | |
| // Compute a unique index for each package name. | |
| imports.forEach(function(d) { | |
| if (!indexByName.has(d = name(d.name))) { | |
| nameByIndex.set(n, d); | |
| indexByName.set(d, n++); | |
| } | |
| }); | |
| // Construct a square matrix counting package imports. | |
| imports.forEach(function(d) { | |
| var source = indexByName.get(name(d.name)), | |
| row = matrix[source]; | |
| if (!row) { | |
| row = matrix[source] = []; | |
| for (var i = -1; ++i < n;) row[i] = 0; | |
| } | |
| d.references.forEach(function(d) { row[indexByName.get(name(d))]++; }); | |
| }); | |
| chord.matrix(matrix); | |
| var g = svg.selectAll(".group") | |
| .data(chord.groups) | |
| .enter().append("g") | |
| .attr("class", "group"); | |
| g.append("path") | |
| .style("fill", function(d) { return fill(d.index); }) | |
| .style("stroke", function(d) { return fill(d.index); }) | |
| .attr("d", arc); | |
| g.append("text") | |
| .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("transform", function(d) { | |
| return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" | |
| + "translate(" + (innerRadius + 26) + ")" | |
| + (d.angle > Math.PI ? "rotate(180)" : ""); | |
| }) | |
| .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) | |
| .text(function(d) { return nameByIndex.get(d.index); }); | |
| svg.selectAll(".chord") | |
| .data(chord.chords) | |
| .enter().append("path") | |
| .attr("class", "chord") | |
| .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); }) | |
| .style("fill", function(d) { return fill(d.source.index); }) | |
| .attr("d", d3.svg.chord().radius(innerRadius)); | |
| //}); | |
| d3.select(self.frameElement).style("height", outerRadius * 2 + "px"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment