Visualising Flows in a D3 Chord Diagram with Hover

This is an example of a reusable chart built using d3.

The idea is that you have a matrix of the flows between one category (here, optimist/neutral/pessimist) to another (introvert/extrovert). `d3.elts.flowChord()` then converts this matrix into a chord diagram, with the option of hover text.

Check the sample source code on bitbucket for the full description of how to use it; here is the essence:

  var colors = d3.scale.ordinal().range(["#AAA", "steelblue", "green", "orange", "brown"]);
  var hoverHtml = {'Introvert': '<h1>Introverts</h1>Like to be by themselves', 
      'Extrovert': '<h1>Extroverts</h1>Like the company of other people', 
      'Optimist': '<h1>Optimists</h1>Look on the bright side of life',
      'Neutral': '<h1>Neutrals</h1>Life could be good, it could be bad',
      'Pessimist': '<h1>Pessimists</h1>See the glass half empty'}
  var chordDiagram = d3.elts.flowChord().colors(colors).hoverHtml(hoverHtml).rimWidth(30);
  var data = [['Disposition','Optimist','Neutral','Pessimist'],
              ['Introvert', 0.8, 0.4, 0.67], 
              ['Extrovert', 0.2, 0.6, 0.33]]
  d3.select("#flow").datum(data).call(chordDiagram);
  

2 thoughts on “Visualising Flows in a D3 Chord Diagram with Hover”

  1. Thanks for posting this example.
    Is there a way i can add an unrelated Category. The category needs to be shown on UI but is not related to any other category.

    var colors = d3.scale.ordinal().range(["#AAA", "steelblue", "green", "orange", "brown","#7FFF00"]);
    var hoverHtml = {‘Category A’: ‘

    Introverts

    Like to be by themselves’,
    ‘Category B’: ‘

    Extroverts

    Like the company of other people’,
    ‘Category C’: ‘

    Optimists

    Look on the bright side of life’,
    ‘Category D’: ‘

    Neutrals

    Life could be good, it could be bad’,
    ‘Category E’: ‘

    Pessimists

    See the glass half empty’,
    ‘Unrelated Category’:’

    Unrelated Category

    Unrelated Category’}
    var chordDiagram = d3.elts.flowChord().colors(colors).hoverHtml(hoverHtml).rimWidth(30);
    var data = [['Alpha','Category C','Category D','Category E'],['Category A', 0.8, 0.4, 0.67], ['Category B', 0.2, 0.6, 0.33],['Unrelated Category', 0.0, 0.0, 0.0]]
    d3.select(“#flow”).datum(data).call(chordDiagram);

    using above code i dont get the desired output

    details here http://stackoverflow.com/questions/31923762/d3-and-chord-diagram

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>