Skip to content

Instantly share code, notes, and snippets.

@widged

widged/README.md

Last active June 13, 2021 09:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save widged/3847527 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save widged/3847527 to your computer and use it in GitHub Desktop.
Download ZIP
D3 companion planting
Raw
companionchord.js
var r1 = 960 / 2,
r0 = r1 - 120;
var chord = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
var arc = d3.svg.arc()
.innerRadius(r0)
.outerRadius(r0 + 20);
var svg = d3.select("body").append("svg")
.attr("width", r1 * 2)
.attr("height", r1 * 2)
.append("g")
.attr("transform", "translate(" + r1 + "," + r1 + ")");
/** Returns an event handler for fading a given chord group. */
function fade(opacity) {
return function(g, i) {
svg.selectAll("g path.chord")
.filter(function(d) {
return d.source.index != i && d.target.index != i;
})
.transition()
.style("opacity", opacity);
};
}
function draw(companions) {
var indexByName = {},
nameByIndex = {},
matrix = [],
n = 0;
function name(name) {
return name;
}
// Compute a unique index for each name.
var previousFamily;
var familyIdx = 0;
var familyCount = 0;
var familyHue = 0;
var familyColor = {};
var hueStep = 26;
companions.forEach(function(d) {
p = name(d.name);
if(!familyColor[d.family]) { familyIdx = 1; familyColor[d.family] = d3.hsl(familyHue, Math.min(0.9, 0.3 + Math.random()), Math.min(0.6, 0.25 + Math.random())); familyHue+= hueStep; } else { familyIdx++; }
var baseColor = familyColor[d.family];
var ramp=d3.scale.linear().domain([0,6]).range(["#fdfdfd",baseColor]);
d.recolor = d3.rgb(ramp(familyIdx));
if (!(d in indexByName)) {
nameByIndex[n] = p;
indexByName[p] = n++;
}
});
// Construct a square matrix counting relationships.
companions.forEach(function(d) {
var source = indexByName[name(d.name)],
row = matrix[source];
if (!row) {
row = matrix[source] = [];
for (var i = -1; ++i < n;) row[i] = 0;
}
d.companions.forEach(function(d) { row[indexByName[name(d)]]++; });
});
chord.matrix(matrix);
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("g")
.attr("class", "group");
g.append("path")
.style("fill", function(d, i) { return companions[i].recolor; })
.style("stroke", function(d, i) { return companions[i].recolor.darker(); })
.attr("d", arc)
.on("mouseover", fade(0.1))
.on("mouseout", fade(1));
g.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (r0 + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d) { return nameByIndex[d.index]; });
svg.selectAll("path.chord")
.data(chord.chords)
.enter().append("path")
.attr("class", "chord")
.style("stroke", function(d, i) { return companions[d.source.index].recolor.darker(); })
.style("fill", function(d, i) { return companions[d.source.index].recolor; })
.attr("d", d3.svg.chord().radius(r0));
}
d3.json("companions.json",draw);
Raw
companions.json
[
{"family": "Alliaceae" , "name": "chive" , "size":1, "companions":[]},
{"family": "Alliaceae" , "name": "leek" , "size":1, "companions":["onion","celery","carrot"]},
{"family": "Alliaceae" , "name": "onion" , "size":1, "companions":["beet", "strawberry", "tomato", "lettuce", "bean"]},
{"family": "Amaranthaceae" , "name": "beet" , "size":1, "companions":["onion", "kohlrabi"]},
{"family": "Amaranthaceae" , "name": "spinach" , "size":1, "companions":["strawberry"]},
{"family": "Apiaceae" , "name": "carrot" , "size":1, "companions":["pea", "lettuce", "chive", "onion", "leek", "rosemary", "sage", "tomato"]},
{"family": "Apiaceae" , "name": "celery" , "size":1, "companions":["leek", "tomato", "bean-bush", "cauliflower", "cabbage"]},
{"family": "Apiaceae" , "name": "dill" , "size":1, "companions":["cabbage","carrot"]},
{"family": "Apiaceae" , "name": "parsley" , "size":1, "companions":["tomato","asparagus"]},
{"family": "Asteraceae" , "name": "lettuce" , "size":1, "companions":[]},
{"family": "Asteraceae" , "name": "chamomile" , "size":1, "companions":["cabbage","onion"]},
{"family": "Asteraceae" , "name": "marigold" , "size":1, "companions":[]},
{"family": "Asteraceae" , "name": "sunflower" , "size":1, "companions":["cucumber"]},
{"family": "Brassicaceae" , "name": "cabbage" , "size":1, "companions":["potato", "celery", "dill", "chamomile", "sage", "thyme", "mint", "pennyroyal", "rosemary", "lavender", "beet", "onion"]},
{"family": "Brassicaceae" , "name": "cauliflower", "size":1, "companions":[]},
{"family": "Brassicaceae" , "name": "horseradish", "size":1, "companions":["potato", "plum"]},
{"family": "Brassicaceae" , "name": "kohlrabi" , "size":1, "companions":[]},
{"family": "Brassicaceae" , "name": "radish" , "size":1, "companions":["pea", "nasturtium", "lettuce", "cucumber"]},
{"family": "Cucurbitaceae" , "name": "cucumber" , "size":1, "companions":["bean", "corn", "pea", "radish", "sunflower"]},
{"family": "Cucurbitaceae" , "name": "pumpkin" , "size":1, "companions":["corn"]},
{"family": "Cucurbitaceae" , "name": "squash" , "size":1, "companions":["nasturtium", "corn"]},
{"family": "Fabaceae" , "name": "bean" , "size":1, "companions":["potato", "carrot", "cucumber", "cauliflower", "cabbage"]},
{"family": "Fabaceae" , "name": "bean-bush" , "size":1, "companions":["sunflower", "cucumber", "potato", "corn", "celery"]},
{"family": "Fabaceae" , "name": "bean-lima" , "size":1, "companions":[]},
{"family": "Fabaceae" , "name": "pea" , "size":1, "companions":["squash"]},
{"family": "Poaceae" , "name": "corn" , "size":1, "companions":["potato","pea","bean","cucumber","pumpkin","squash"]},
{"family": "Solanaceae" , "name": "eggplant" , "size":1, "companions":["bean"]},
{"family": "Solanaceae" , "name": "potato" , "size":1, "companions":["horseradish", "bean", "corn", "cabbage", "marigold", "bean-lima", "eggplant"]},
{"family": "Solanaceae" , "name": "tomato" , "size":1, "companions":["chive","onion", "parsley", "asparagus", "marigold", "nasturtium", "carrot", "bean"]},
{"family": "Other" , "name": "asparagus" , "size":1, "companions":["tomato","parsley","basil"]},
{"family": "Tropaeolaceae" , "name": "nasturtium" , "size":1, "companions":["cucumber","squash","tomato", "radish","cabbage"]},
{"family": "Lamiaceae" , "name": "basil" , "size":1, "companions":["tomato"]},
{"family": "Lamiaceae" , "name": "lavender" , "size":1, "companions":[]},
{"family": "Lamiaceae" , "name": "mint" , "size":1, "companions":["cabbage","tomato"]},
{"family": "Lamiaceae" , "name": "pennyroyal" , "size":1, "companions":[]},
{"family": "Lamiaceae" , "name": "rosemary" , "size":1, "companions":["carrot", "bean", "cabbage", "sage"]},
{"family": "Lamiaceae" , "name": "sage" , "size":1, "companions":["rosemary", "carrot", "cabbage", "pea", "bean"]},
{"family": "Lamiaceae" , "name": "thyme" , "size":1, "companions":["cabbage"]},
{"family": "Boraginaceae" , "name": "borage" , "size":1, "companions":["tomato","squash","strawberry"]},
{"family": "Fruit" , "name": "plum" , "size":1, "companions":[]},
{"family": "Fruit" , "name": "strawberry" , "size":1, "companions":["bean-bush", "spinach", "borage", "lettuce"]}
]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Neo4j Chord Diagram Example</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
body {
font: 11px sans-serif;
}
path.chord {
fill-opacity: .3;
stroke-opacity: .4;
}
</style>
</head>
<body>
<script type="text/javascript" src="companionchord.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment