Gist 1e86c34932980874eb5f
This animated SVG visualization maps the distribution of Starbucks and Dunkin' Donuts locations across U.S. states, using a circular adjacency matrix to compare the two coffee chains. Each state is represented along both axes, with colored cells encoding store counts for each brand. The visualization highlights regional differences in coffee chain dominance, with Dunkin' Donuts concentrated in the Northeast and Starbucks stronger in the West and South. Animated transitions help draw attention to the highest-density pairs, making it easy to compare the relative presence of each company across different states at a glance.
AI-generated descriptionAnswering Preventing d3 chords from overlapping on stackoverflow.
Modified from http://projects.delimited.io/experiments/chord-diagrams/coffee-from-files.html
I would not recommend actually using this solution:
//all the values in matrix are integers
//we can track the numbers that are starbucks stores
//by adding a small decimal to them
matrix = matrix.map(function(row){
return row.map(function(d, i){
return d + (i == row.length - 1 ? 1e-7 : 0) })
})
//now we can do a lexicographic sort
//first checking for the presence of a decimal and then size
var chord = d3.layout.chord()
.sortSubgroups(function(a, b){
if (a != Math.round(a)) return false
if (b != Math.round(b)) return true
return b < a ? -1 : b > a ? 1 : 0;
})
Modifying d3.layout.chord or starting fresh with something simpler that doesn't require a redundant matrix of values would probably work better in most situations.