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

Revisions

  1. widged revised this gist Jan 16, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Derived from the examples from the d3.js project - https://github.com/mbostock/d3/wiki/Gallery
    Derived from the chord diagram example bundled with the d3.js library - https://github.com/mbostock/d3/wiki/Gallery
  2. widged revised this gist Jan 16, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Derived from the examples from the d3.js project - https://github.com/mbostock/d3/wiki/Gallery
  3. widged revised this gist Oct 7, 2012. 1 changed file with 25 additions and 20 deletions.
    45 changes: 25 additions & 20 deletions companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    var r1 = 960 / 2,
    var r1 = 900 / 2,
    r0 = r1 - 200;

    var chord = d3.layout.chord()
    .padding(.04)
    .padding(0.02)
    .sortSubgroups(d3.descending)
    .sortChords(d3.descending);

    @@ -34,24 +34,29 @@ function draw(companions) {
    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;
    var families= {},
    f = 0,
    indexInFamily = 0,
    familyHue = 0,
    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.7 + Math.random()), Math.min(0.7, 0.5 + 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(baseColor); // d3.rgb(ramp(familyIdx));
    p = d.name;
    console.log();
    if(!families[d.family] || !families[d.family].color) {
    f++;
    var hSaturation = (f % 2 !== 0) ? 0.5 : 0.9;
    var hLightness = (f % 2 !== 0) ? 0.5 : 0.9;
    indexInFamily = 1;
    families[d.family] = {name: d.family,color: d3.hsl(familyHue, hSaturation, hLightness)}; familyHue+= hueStep;
    }
    else
    {
    indexInFamily++;
    }
    var baseColor = families[d.family].color;
    // var ramp=d3.scale.linear().domain([0,6]).range(["#fdfdfd",baseColor]);
    d.recolor = d3.rgb(baseColor); // d3.rgb(ramp(indexInFamily));

    if (!(d in indexByName)) {
    nameByIndex[n] = p;
    @@ -61,13 +66,13 @@ function draw(companions) {

    // Construct a square matrix counting relationships.
    companions.forEach(function(d) {
    var source = indexByName[name(d.name)],
    var source = indexByName[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)]]++; });
    d.companions.forEach(function(d) { row[indexByName[d]]++; });
    });

    chord.matrix(matrix);
  4. widged revised this gist Oct 7, 2012. 1 changed file with 3 additions and 5 deletions.
    8 changes: 3 additions & 5 deletions companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,5 @@
    /* adapted from https://github.com/maxdemarzi/d3_js_intro */

    var r1 = 960 / 2,
    r0 = r1 - 270;
    r0 = r1 - 200;

    var chord = d3.layout.chord()
    .padding(.04)
    @@ -50,10 +48,10 @@ function draw(companions) {
    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++; }
    if(!familyColor[d.family]) { familyIdx = 1; familyColor[d.family] = d3.hsl(familyHue, Math.min(0.9, 0.7 + Math.random()), Math.min(0.7, 0.5 + 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));
    d.recolor = d3.rgb(baseColor); // d3.rgb(ramp(familyIdx));

    if (!(d in indexByName)) {
    nameByIndex[n] = p;
  5. widged revised this gist Oct 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Neo4j Chord Diagram Example</title>
    <title>Companion Planting Chord Diagram</title>
    <script src="http://d3js.org/d3.v2.js"></script>
    <style>
    body {
  6. widged revised this gist Oct 7, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    /* adapted from https://github.com/maxdemarzi/d3_js_intro */

    var r1 = 960 / 2,
    r0 = r1 - 270;

  7. widged revised this gist Oct 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    var r1 = 960 / 2,
    r0 = r1 - 120;
    r0 = r1 - 270;

    var chord = d3.layout.chord()
    .padding(.04)
  8. widged revised this gist Oct 7, 2012. 2 changed files with 1 addition and 2 deletions.
    1 change: 0 additions & 1 deletion companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    var r1 = 960 / 2,
    r0 = r1 - 120;

    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Neo4j Chord Diagram Example</title>
    <script type="text/javascript" src="../lib/d3.v2.min.js"></script>
    <script src="http://d3js.org/d3.v2.js"></script>
    <style>
    body {
    font: 11px sans-serif;
  9. widged created this gist Oct 7, 2012.
    110 changes: 110 additions & 0 deletions companionchord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@

    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);
    43 changes: 43 additions & 0 deletions companions.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    [
    {"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"]}
    ]
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Neo4j Chord Diagram Example</title>
    <script type="text/javascript" src="../lib/d3.v2.min.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>