I'm making a chord layout visualization of all the relationships in David Foster Wallace's Infinite Jest, using this. Converting this diagram into a square matrix for the chord layout is taking serious time. Before I got too far I wanted to check if this many chords would render. The result is the above black hole. Hover over the perimiter to see what looks like a black hole. Matrix creation code taken from this Syntagmatic block.
Last active
August 29, 2015 14:17
-
-
Save dhoboy/3ef2dbac59c659c639d7 to your computer and use it in GitHub Desktop.
Black Hole
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 circle { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .group path { | |
| fill-opacity: .5; | |
| } | |
| path.chord { | |
| stroke: #000; | |
| stroke-width: .25px; | |
| } | |
| #circle:hover path.fade { | |
| display: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var width = 510, | |
| height = 510 | |
| outerRadius = Math.min(width, height) / 2 - 10, | |
| innerRadius = outerRadius - 24; | |
| // the 3 pieces needed for Chord Diagram | |
| // arc generator | |
| var arc = d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius); | |
| // chord layout | |
| var layout = d3.layout.chord() | |
| .padding(.04) | |
| .sortSubgroups(d3.descending) | |
| .sortChords(d3.ascending); | |
| // chord generator | |
| var path = d3.svg.chord() | |
| .radius(innerRadius); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("id", "circle") // #circle | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| svg.append("circle") | |
| .attr("r", outerRadius); | |
| // the estimated size of my forthcoming infinite jest matrix | |
| var matrix = d3.range(300).map(function(row) { | |
| return d3.range(300).map(function(col) { | |
| return Math.pow(Math.random(),1.5); | |
| }); | |
| }); | |
| // compute the chord layout | |
| layout.matrix(matrix); | |
| // add a group per character | |
| // each group is a row in the matrix | |
| var group = svg.selectAll(".group") | |
| .data(layout.groups) | |
| .enter() | |
| .append("g") | |
| .attr("class", "group") | |
| .on("mouseover", mouseover); | |
| // add the group arc | |
| var groupPath = group.append("path") | |
| .attr("id", function(d, i) { return "group" + i; }) | |
| .attr("d", arc) | |
| .style("fill", "black"); | |
| // add the chords | |
| var chord = svg.selectAll(".chord") | |
| .data(layout.chords) | |
| .enter() | |
| .append("path") | |
| .attr("class", "chord") | |
| .style("fill", function(d, i){ | |
| if ((d.source.value == 2) && (d.target.value == 2)) { // family | |
| return "tomato"; | |
| } else { | |
| return "#1a9850"; | |
| } | |
| }) | |
| .attr("d", path); | |
| function mouseover(d, i) { | |
| chord.classed("fade", function(p) { | |
| return p.source.index != i && p.target.index != i; | |
| }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment