Skip to content

Instantly share code, notes, and snippets.

@databayou

databayou/.block

Last active March 2, 2023 19:13
Download ZIP

Revisions

  1. databayou revised this gist May 31, 2019. No changes.
  2. databayou revised this gist May 31, 2019. No changes.
  3. databayou revised this gist May 31, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    This Chord diagram was created to show the Fish Trade Flows in US dollars between world regions. To show how the exports change through the years I used transitions between the chords. This was possible thanks to a stack overflow [answer](https://stackoverflow.com/questions/21813723/change-and-transition-dataset-in-chord-diagram-with-d3) by [AmeliaBR](https://stackoverflow.com/users/3128209/ameliabr).

    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](https://www.databyou.com/chord/chordi/chordi.html).
    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](https://databyou.com/chord/chordi/chordi.html).

    This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

    This bl.ock was created by [Luz K. Molina](https://www.databayou.com).
    This bl.ock was created by [Luz K. Molina](https://databayou.com).

  4. databayou revised this gist May 31, 2019. No changes.
  5. databayou revised this gist May 31, 2019. 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">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
  6. databayou revised this gist Jun 26, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    This Chord diagram was created to show the Fish Trade Flows in US dollars between world regions. To show how the exports change through the years I used transitions between the chords. This was possible thanks to a stack overflow [answer](https://stackoverflow.com/questions/21813723/change-and-transition-dataset-in-chord-diagram-with-d3) by [AmeliaBR](https://stackoverflow.com/users/3128209/ameliabr).

    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](http://www.databyou.com/chord/chordi/chordi.html).
    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](https://www.databyou.com/chord/chordi/chordi.html).

    This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

    This bl.ock was created by [Luz K. Molina](http://www.databayou.com).
    This bl.ock was created by [Luz K. Molina](https://www.databayou.com).

  7. databayou revised this gist Nov 30, 2017. No changes.
  8. databayou revised this gist Nov 30, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    This Chord diagram was created to show the Fish Trade Flows in US dollars between world regions. To show how the exports change through the years I used transitions between the chords. This was possible thanks to a stack overflow [answer](https://stackoverflow.com/questions/21813723/change-and-transition-dataset-in-chord-diagram-with-d3) by [AmeliaBR](https://stackoverflow.com/users/3128209/ameliabr).

    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](www.databyou.com/chord/chordi/chordi.html).
    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](http://www.databyou.com/chord/chordi/chordi.html).

    This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

    This bl.ock was created by [Luz K. Molina](www.databayou.com).
    This bl.ock was created by [Luz K. Molina](http://www.databayou.com).

  9. databayou revised this gist Nov 30, 2017. No changes.
  10. databayou revised this gist Nov 30, 2017. No changes.
  11. Building blocks revised this gist Nov 30, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  12. databayou created this gist Nov 30, 2017.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    8 changes: 8 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    This Chord diagram was created to show the Fish Trade Flows in US dollars between world regions. To show how the exports change through the years I used transitions between the chords. This was possible thanks to a stack overflow [answer](https://stackoverflow.com/questions/21813723/change-and-transition-dataset-in-chord-diagram-with-d3) by [AmeliaBR](https://stackoverflow.com/users/3128209/ameliabr).

    The data was obtained from [FAO Fisheries Yearbooks](http://www.fao.org/fishery/publications/yearbooks/en). It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at [Databyou](www.databyou.com/chord/chordi/chordi.html).

    This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

    This bl.ock was created by [Luz K. Molina](www.databayou.com).

    408 changes: 408 additions & 0 deletions chord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,408 @@
    /*** Define parameters and tools ***/
    var width = 760,
    height = 820,
    outerRadius = Math.min(width, height) / 2 - 120,//100,
    innerRadius = outerRadius - 10;

    var dataset = "foursix.json";
    //string url for the initial data set
    //would usually be a file path url, here it is the id
    //selector for the <pre> element storing the data

    //create number formatting functions
    var formatPercent = d3.format("%");
    var numberWithCommas = d3.format("0,f");

    //create the arc path data generator for the groups
    var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

    //create the chord path data generator for the chords
    var path = d3.svg.chord()
    .radius(innerRadius - 4);// subtracted 4 to separate the ribbon

    //define the default chord layout parameters
    //within a function that returns a new layout object;
    //that way, you can create multiple chord layouts
    //that are the same except for the data.
    function getDefaultLayout() {
    return d3.layout.chord()
    .padding(0.03)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);
    }
    var last_layout; //store layout between updates
    var regions; //store neighbourhood data outside data-reading function

    /*** Initialize the visualization ***/
    var g = d3.select("#chart_placeholder").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("id", "circle")
    .attr("transform",
    "translate(" + width / 2 + "," + height / 2 + ")");
    //the entire graphic will be drawn within this <g> element,
    //so all coordinates will be relative to the center of the circle

    g.append("circle")
    .attr("r", outerRadius);
    //this circle is set in CSS to be transparent but to respond to mouse events
    //It will ensure that the <g> responds to all mouse events within
    //the area, even after chords are faded out.

    /*** Read in the neighbourhoods data and update with initial data matrix ***/
    //normally this would be done with file-reading functions
    //d3. and d3.json and callbacks,
    //instead we're using the string-parsing functions
    //d3.csv.parse and JSON.parse, both of which return the data,
    //no callbacks required.


    d3.csv("regionsfish.csv", function(error, regionData) {

    if (error) {alert("Error reading file: ", error.statusText); return; }

    regions = regionData;
    //store in variable accessible by other functions


    //regions = d3.csv.parse(d3.select("#regions").text());
    //instead of d3.csv

    updateChords(dataset);
    //call the update method with the default dataset

    }); //end of d3.csv function


    /* Create OR update a chord layout from a data matrix */
    function updateChords( datasetURL ) {

    d3.json(datasetURL, function(error, matrix) {

    if (error) {alert("Error reading file: ", error.statusText); return; }

    //var matrix = JSON.parse( d3.select(datasetURL).text() );
    // instead of d3.json

    /* Compute chord layout. */
    layout = getDefaultLayout(); //create a new layout object
    layout.matrix(matrix);

    /* Create/update "group" elements */
    var groupG = g.selectAll("g.group")
    .data(layout.groups(), function (d) {
    return d.index;
    //use a key function in case the
    //groups are sorted differently
    });

    groupG.exit()
    .transition()
    .duration(1500)
    .attr("opacity", 0)
    .remove(); //remove after transitions are complete

    var newGroups = groupG.enter().append("g")
    .attr("class", "group");
    //the enter selection is stored in a variable so we can
    //enter the <path>, <text>, and <title> elements as well


    //Create the title tooltip for the new groups
    newGroups.append("title");

    //Update the (tooltip) title text based on the data
    groupG.select("title")
    .text(function(d, i) {
    return numberWithCommas(d.value)
    + " x (10\u00B3) in USD exports from "
    + regions[i].name;
    });

    //create the arc paths and set the constant attributes
    //(those based on the group index, not on the value)
    newGroups.append("path")
    .attr("id", function (d) {
    return "group" + d.index;
    //using d.index and not i to maintain consistency
    //even if groups are sorted
    })
    .style("fill", function (d) {
    return regions[d.index].color;
    });

    //update the paths to match the layout
    groupG.select("path")
    .transition()
    .duration(1500)
    //.attr("opacity", 0.5) //optional, just to observe the transition////////////
    .attrTween("d", arcTween( last_layout ))
    // .transition().duration(100).attr("opacity", 1) //reset opacity//////////////
    ;

    //create the group labels
    newGroups.append("svg:text")
    .attr("xlink:href", function (d) {
    return "#group" + d.index;
    })
    .attr("dy", ".35em")
    .attr("color", "#fff")
    .text(function (d) {
    return regions[d.index].name;
    });

    //position group labels to match layout
    groupG.select("text")
    .transition()
    .duration(1500)
    .attr("transform", function(d) {
    d.angle = (d.startAngle + d.endAngle) / 2;
    //store the midpoint angle in the data object

    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" +
    " translate(" + (innerRadius + 26) + ")" +
    (d.angle > Math.PI ? " rotate(180)" : " rotate(0)");
    //include the rotate zero so that transforms can be interpolated
    })
    .attr("text-anchor", function (d) {
    return d.angle > Math.PI ? "end" : "begin";
    });


    /* Create/update the chord paths */
    var chordPaths = g.selectAll("path.chord")
    .data(layout.chords(), chordKey );
    //specify a key function to match chords
    //between updates


    //create the new chord paths
    var newChords = chordPaths.enter()
    .append("path")
    .attr("class", "chord");

    // Add title tooltip for each new chord.
    newChords.append("title");

    // Update all chord title texts
    chordPaths.select("title")
    .text(function(d) {
    if (regions[d.target.index].name !== regions[d.source.index].name) {
    return [numberWithCommas(d.source.value),
    " exports from ",
    regions[d.source.index].name,
    " to ",
    regions[d.target.index].name,
    "\n",
    numberWithCommas(d.target.value),
    " exports from ",
    regions[d.target.index].name,
    " to ",
    regions[d.source.index].name
    ].join("");
    //joining an array of many strings is faster than
    //repeated calls to the '+' operator,
    //and makes for neater code!
    }
    else { //source and target are the same
    return numberWithCommas(d.source.value)
    + " exports ended in "
    + regions[d.source.index].name;
    }
    });

    //handle exiting paths:
    chordPaths.exit().transition()
    .duration(1500)
    .attr("opacity", 0)
    .remove();

    //update the path shape
    chordPaths.transition()
    .duration(1500)
    //.attr("opacity", 0.5) //optional, just to observe the transition
    .style("fill", function (d) {
    return regions[d.source.index].color;
    })
    .attrTween("d", chordTween(last_layout))
    //.transition().duration(100).attr("opacity", 1) //reset opacity
    ;

    //add the mouseover/fade out behaviour to the groups
    //this is reset on every update, so it will use the latest
    //chordPaths selection
    groupG.on("mouseover", function(d) {
    chordPaths.classed("fade", function (p) {
    //returns true if *neither* the source or target of the chord
    //matches the group that has been moused-over
    return ((p.source.index != d.index) && (p.target.index != d.index));
    });
    });
    //the "unfade" is handled with CSS :hover class on g#circle
    //you could also do it using a mouseout event:
    /*
    g.on("mouseout", function() {
    if (this == g.node() )
    //only respond to mouseout of the entire circle
    //not mouseout events for sub-components
    chordPaths.classed("fade", false);
    });
    */

    last_layout = layout; //save for next update

    }); //end of d3.json
    }

    function arcTween(oldLayout) {
    //this function will be called once per update cycle

    //Create a key:value version of the old layout's groups array
    //so we can easily find the matching group
    //even if the group index values don't match the array index
    //(because of sorting)
    var oldGroups = {};
    if (oldLayout) {
    oldLayout.groups().forEach( function(groupData) {
    oldGroups[ groupData.index ] = groupData;
    });
    }

    return function (d, i) {
    var tween;
    var old = oldGroups[d.index];
    if (old) { //there's a matching old group
    tween = d3.interpolate(old, d);
    }
    else {
    //create a zero-width arc object
    var emptyArc = {startAngle:d.startAngle,
    endAngle:d.startAngle};
    tween = d3.interpolate(emptyArc, d);
    }

    return function (t) {
    return arc( tween(t) );
    };
    };
    }

    function chordKey(data) {
    return (data.source.index < data.target.index) ?
    data.source.index + "-" + data.target.index:
    data.target.index + "-" + data.source.index;

    //create a key that will represent the relationship
    //between these two groups *regardless*
    //of which group is called 'source' and which 'target'
    }
    function chordTween(oldLayout) {
    //this function will be called once per update cycle

    //Create a key:value version of the old layout's chords array
    //so we can easily find the matching chord
    //(which may not have a matching index)

    var oldChords = {};

    if (oldLayout) {
    oldLayout.chords().forEach( function(chordData) {
    oldChords[ chordKey(chordData) ] = chordData;
    });
    }

    return function (d, i) {
    //this function will be called for each active chord

    var tween;
    var old = oldChords[ chordKey(d) ];
    if (old) {
    //old is not undefined, i.e.
    //there is a matching old chord value

    //check whether source and target have been switched:
    if (d.source.index != old.source.index ){
    //swap source and target to match the new data
    old = {
    source: old.target,
    target: old.source
    };
    }

    tween = d3.interpolate(old, d);
    }
    else {
    //create a zero-width chord object
    ///////////////////////////////////////////////////////////in the copy ////////////////
    if (oldLayout) {
    var oldGroups = oldLayout.groups().filter(function(group) {
    return ( (group.index == d.source.index) ||
    (group.index == d.target.index) )
    });
    old = {source:oldGroups[0],
    target:oldGroups[1] || oldGroups[0] };
    //the OR in target is in case source and target are equal
    //in the data, in which case only one group will pass the
    //filter function

    if (d.source.index != old.source.index ){
    //swap source and target to match the new data
    old = {
    source: old.target,
    target: old.source
    };
    }
    }
    else old = d;
    /////////////////////////////////////////////////////////////////
    var emptyChord = {
    source: { startAngle: old.source.startAngle,
    endAngle: old.source.startAngle},
    target: { startAngle: old.target.startAngle,
    endAngle: old.target.startAngle}
    };
    tween = d3.interpolate( emptyChord, d );
    }

    return function (t) {
    //this function calculates the intermediary shapes
    return path(tween(t));
    };
    };
    }


    /* Activate the buttons and link to data sets */
    d3.select("#foursix").on("click", function () {
    updateChords( "foursix.json" );
    //replace this with a file url as appropriate

    //enable other buttons, disable this one
    // disableButton(this);
    });

    d3.select("#sevennine").on("click", function() {
    updateChords( "sevennine.json" );
    // disableButton(this);
    });

    d3.select("#tentwelve").on("click", function() {
    updateChords( "tentwelve.json" );
    //disableButton(this);
    });

    d3.select("#thirteenfiveteen").on("click", function() {
    updateChords( "thirteenfiveteen.json" );
    //disableButton(this);
    });
    /*
    function disableButton(buttonNode) {
    d3.selectAll("button")
    .attr("disabled", function(d) {
    return this === buttonNode? "true": null;
    });
    }
    */
    23 changes: 23 additions & 0 deletions foursix.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    [
    [3043905,1376846,77883,54676,1437528,3228,114863,477,10042,3406,1070,426,6227,108308,65243,27417,29445,5778,542207,846492,5386],
    [256977,15208910,628066,41646,453516,121805,417559,119457,226843,15999,134961,1025,8472,30179,18190,76181,133528,6568,135890,396902,5682],
    [332794,4765429,172067,10321,487659,8097,720294,1507,75954,19072,992,18,843,12246,44651,133544,48151,2535,91966,265602,147],
    [239601,222011,3771,149202,388973,1567,13067,176,1708,1181,1966,59,0,664,241,346,11767,1123,114308,628334,15836],
    [215523,275788,6243,51001,40603,90,15206,2253,6494,7327,20646,2992,0,1509,2238,11246,17034,1766,349561,616112,102378],
    [476,73531,73,246,63811,27680,271,124,0,0,1,0,0,0,9,2,81,0,24,7,0],
    [17393,147675,9090,1041,91652,517,151324,0,97,11,0,0,0,3116,99,868,2492,1,79098,130148,1],
    [24791,877967,15578,2667,81667,3123,10846,2547,63252,43332,5652,56,0,4969,1221,6219,48724,25,3433,2947,1084],
    [102889,487961,875,29,95413,181,4733,6909,43945,9145,1726,255,57,2415,235,2770,2303,2497,5039,11121,2038],
    [2,18112,0,0,2,0,0,13,2,404,0,0,0,0,0,0,0,0,80,1874,0],
    [13276,734855,10631,9576,80923,37,646,165,3121,2919,34104,2876,55,689,1381,914,24296,2292,19119,20354,3037],
    [5657,244031,1022,5120,83398,174,434,242,4801,29401,21074,1217,8,211,79,2450,2780,113,3188,3913,431],
    [4143,330219,6183,0,1856,0,0,0,0,0,0,0,0,0,0,0,0,0,372,499,0],
    [1088685,194271,2621,309,50750,0,225,563,26,0,0,0,0,73717,15110,13275,2351,73,17875,75448,0],
    [76984,100783,0,599,16260,0,0,0,0,0,0,1,2,325,5492,1257,474,0,333,2014,2],
    [1640995,2368047,32711,40029,1109867,13374,103164,13688,56494,19776,2883,1000,0,69867,59080,502752,50985,35162,286969,944923,10038],
    [35512,222056,2172,3133,67557,602,2336,5029,1240,95,2861,5,0,5350,218,229,177430,9493,57834,76016,542],
    [536907,761250,4621,24342,370992,347,4899,7864,3543,439,6147,649,15925,1565,3702,30804,111934,41182,211025,236733,524],
    [3495747,1604107,58589,420782,3379881,9629,106641,8327,13917,7633,9135,1394,349,41680,24280,32195,290835,32832,1173357,960551,37905],
    [1729045,1084850,8788,105699,3751744,1584,148057,1244,1343,750,5154,197,496,165068,17746,5723,33255,4088,1627476,726009,52198],
    [30525,42654,3,11773,36719,0,116,0,19,0,0,0,0,92,32,769,36,163,16999,17725,30798]
    ]
    342 changes: 342 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,342 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    <div class="details">
    <h1>Fish Trade Flow <br>by Region</h1>

    <div id="yearbuttons">
    <button id="foursix" class="current">2004-2006</button>
    <button id="sevennine" class="">2007-2009</button>
    <button id="tentwelve" class="">2010-2012</button>
    <button id="thirteenfiveteen" class="">2013-2015</button>
    </div>
    <!--This script is to highlight each year button while on it-->
    <script type="text/javascript">
    $('#yearbuttons button').on('click', function(){
    $('button.current').removeClass('current');
    $(this).addClass('current');
    });
    </script>
    <!--The data comes from FAO Yearbooks on fisheries http://www.fao.org/fishery/publications/yearbooks/en-->
    <!--Created by Luz K. Molina, www.databayou.com-->
    <div id="legend">

    <table class="table1">
    <tr>
    <td bgcolor="#FFFFFF" width="10%">
    </td>
    <td width="90%"><h3>Regions</h3>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FF00FF" width="10%">
    </td>
    <td><a class="two" id="NA" href = "#">North America Developed</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td width="90%">Canada</br>USA</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#0000FF">
    </td>
    <td><a class="two" id="NA" href = "#">European Union (27)</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr> <td>Austria</br>Belgium</br>Denmark</br>Finland</br>France</br>Germany</br>Greece</br>Ireland</br>Italy</br>Luxembourg</br>Netherlands</br>Portugal</br>Spain</br>Sweden</br>UK</br>Bulgaria</br>Cyprus</br>Czech</br>Estonia</br>Hungary</br>Latvia</br>Lithuania</br>Malta</br>Poland</br>Romania</br>Slovakia</br>Slovenia</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#6495ED">
    </td>
    <td><a class="two" id="NA" href = "#">Western Europe other</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Faroe Islands</br>Iceland</br>Norway</br>Switzerland</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#F4A460">
    </td>
    <td><a class="two" id="NA" href = "#">Oceania Developed</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Australia </br>New Zeland</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#8E8E38">
    </td>
    <td><a class="two" id="NA" href = "#">Other Developed</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Israel</br>Japan</br>South Africa</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#C6E2FF">
    </td>
    <td><a class="two" id="NA" href = "#">Eastern Europe</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Albania</br>Bosnia</br>Croatia</br>Serbia-Monte</br>TFYROM</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#D8BFD8">
    </td>
    <td><a class="two" id="NA" href = "#">Econ. in Transition</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Belarus</br>Moldova</br>Russian</br>Ukraine</br>Armenia</br>Azerbaijan</br>Georgia</br>Kazakhstan</br>Kyrgyzstan</br>Tajikistan</br>Turkmenistan</br>Uzbekistan</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#97FFFF">
    </td>
    <td><a class="two" id="NA" href = "#">Northwestern Africa</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Algeria</br>Morocco</br>Tunisia</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#00EEEE">
    </td></td>
    <td><a class="two" id="NA" href = "#">Western Africa</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Benin</br>Burkina</br>Cape Verde</br>Cote dIvoire</br>Gambia</br>Ghana</br>Guinea</br>Guinea Bissau</br>Liberia</br>Mali</br>Mauritania</br>Niger</br>Nigeria</br>Senegal</br>Sierra</br>Togo</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#03A89E">
    </td>
    <td><a class="two" id="NA" href = "#">Central Africa</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Angola</br>Cameroon</br>Centr Afr Rep</br>Chad</br>Congo D Rep</br>Congo Rep</br>Eq Guinea</br>Gabon</br>Sao Tome</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#66CDAA">
    </td>
    <td><a class="two" id="NA" href = "#">Eastern Africa</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Burundi</br>Comoros</br>Djibouti</br>Eritrea</br>Ethiopia</br>Kenya</br>Madagascar</br>Malawi</br>Mauritius</br>Mozambique</br>Reunion</br>Rwanda</br>Seychelles</br>Somalia</br>Tanzania</br>Uganda</br>Zambia</br>Zimbabwe</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#00FF7F">
    </td>
    <td><a class="two" id="NA" href = "#">Southern Africa</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Botswana</br>Lesotho</br>Namibia</br>St Helena</br>Swaziland</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#800080">
    </td>
    <td><a class="two" id="NA" href = "#">N. America Developing</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Bermuda</br>Greenland</br>St Pier Mq</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#BF3EFF">
    </td>
    <td><a class="two" id="NA" href = "#">Central America</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Belize</br>Costa Rica</br>El Salvador</br>Guatemala</br>Honduras</br>Mexico</br>Nicaragua</br>Panama</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#912CEE">
    </td>
    <td><a class="two" id="NA" href = "#">Caribbean</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Anguilla</br>Ant Barbados</br>Aruba</br>Bahamas</br>Barbados</br>Br Virgin Is</br>Cayman Is</br>Cuba</br>Dominica</br>Dominican Rp</br>Grenada</br>Guadeloupe</br>Haiti</br>Jamaica</br>Martinique</br>Montserrat</br>NethAntilles</br>Puerto Rico</br>St Kitts</br>St Lucia</br>St Vincent</br>Trinidad and T</br>Truks Caicos</br>US Virgin</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#EE82EE">
    </td>
    <td><a class="two" id="NA" href = "#">South America</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Argentina</br>Bolivia</br>Brazil</br>Chile</br>Colombia</br>Ecuador</br>Falkland</br>Fr Guiana</br>Guyana</br>Paraguay</br>Peru</br>Suriname</br>Uruguay</br>Venezuela</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FFFF00">
    </td>
    <td><a class="two" id="NA" href = "#">Near East</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Egypt</br>Libya</br>Sudan</br>Afghanistan</br>Bahrain</br>Iran</br>Iraq</br>Jordan</br>Kuwait</br>Lebanon</br>Oman</br>Palestine</br>Qatar</br>Saudi Arabia</br>Syria</br>Turkey</br>Un Arab Emirates</br>Yemen</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FF7256">
    </td>
    <td><a class="two" id="NA" href = "#">Southern Asia</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Bangladesh</br>Bhutan</br>India</br>Maldives</br>Nepal</br>Pakistan</br>Sri Lanka</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FF7F24">
    </td>
    <td><a class="two" id="NA" href = "#">East and Southeast Asia</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>Brunei Darsm</br>Cambodia</br>Indonesia</br>Korea D</br>Korea R</br>Laos</br>Malaysia</br>Mongolia</br>Myanmar</br>Philippines</br>Singapore</br>Thailand</br>Viet Nam</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FF3030">
    </td>
    <td><a class="two" id="NA" href = "#">China</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>China</br>Hong Kong</br>Taiwan</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FF4500">
    </td>
    <td><a class="two" id="NA" href = "#">Oceania Developing</a>
    <table class="table2">
    <tr>
    <td><h3>Countries</h3></td>
    </tr>
    <tr>
    <td>American Samoa</br>Cook Is</br>Fiji</br>Fr Polynesia</br>Kiribati</br>Marshall</br>Micronesia</br>New Caledonia</br>Palau</br>Papua N G</br>Samoa</br>Solomon Is</br>Tonga</br>Tuvalu</br>Vanuatu</br>Wallis</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>

    </div>

    <div id="chart_placeholder"></div>
    <script type="text/javascript" src="chord.js"></script>


    </body>
    </html>
    22 changes: 22 additions & 0 deletions regionsfish.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    name,color
    N. America Developed,#FF00FF
    European U. (27),#0000FF
    Western Europe,#6495ED
    Oceania Developed,#F4A460
    Other Developed,#8E8E38
    Eastern Europe,#C6E2FF
    Econ. in Transition,#D8BFD8
    N.W. Africa,#97FFFF
    Western Africa,#00EEEE
    Central Africa,#03A89E
    Eastern Africa,#66CDAA
    Southern Africa,#00FF7F
    N. America Developing,#800080
    Central America,#BF3EFF
    Caribbean,#912CEE
    South America,#EE82EE
    Near East,#FFFF00
    Southern Asia,#FF7256
    E. and S.E. Asia,#FF7F24
    China,#FF3030
    Oceania Developing,#FF4500
    23 changes: 23 additions & 0 deletions sevennine.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    [
    [3140230,1542458,70536,63063,1060583,5183,193932,1215,7564,1988,1227,748,5687,94110,93078,41967,38405,5707,494295,1024386,13070],
    [381275,19093701,915552,44873,434479,151712,547920,167435,252094,44506,213618,3370,12772,20853,18477,126064,200090,7540,190694,446820,9407],
    [378194,5946619,279431,22623,475013,6496,1054206,3034,191034,46983,1277,1,779,19551,64555,195682,94864,1445,174961,376133,508],
    [195793,161278,3077,188988,334517,2253,25493,1355,4052,1792,5521,259,0,1857,678,285,15682,1612,125430,739877,13646],
    [278920,331656,5800,55713,47413,1183,23503,252,14175,9016,21022,4308,0,702,1186,14823,41187,1814,475721,775213,42841],
    [577,110506,179,149,59541,44508,32,357,0,0,0,0,0,0,0,10,1624,133,102,0,0],
    [21578,160434,6701,339,147011,695,265588,8,9,0,5443,29,0,5352,16,1612,6842,0,291433,337308,0],
    [30150,1211685,19720,2124,148410,3483,28511,8201,95695,65876,10063,2797,0,5201,1742,20099,70940,123,12986,5770,1610],
    [4898,553827,1693,81,77566,1068,7301,7607,126590,10502,1709,937,0,3574,154116,1181,6318,2242,9830,7433,2952],
    [4,10515,1,0,1,0,0,8,23,1887,1,0,0,0,0,52,1,95,0,1847,0],
    [11901,806381,3315,9277,68239,152,10885,153,1216,6001,24957,850,0,1137,1818,1691,31579,2088,24724,57634,2421],
    [4476,349118,100,7483,78664,46,433,7,156,38467,21305,863,0,0,1,966,3912,0,2922,8759,313],
    [0,244082,7021,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [1120889,306759,563,198,71552,354,265,240,1389,100,41,613,0,105657,19065,31915,3098,1598,43181,125316,226],
    [69169,32597,469,3,660,0,0,0,0,0,0,0,8,391,9678,555,0,10,51,519,0],
    [1791691,2966133,56100,57957,1256416,17659,170913,11007,102930,36787,4331,1750,58,73492,71392,973464,71174,32281,375504,1312969,14482],
    [18064,318924,10355,3017,90163,795,5193,4396,2033,1404,5746,22,0,27,283,557,204401,13713,79349,83418,6],
    [490491,1106429,6764,12333,312837,2571,50825,11288,2454,1288,10808,77,779,633,4622,2501,196893,47907,274940,307975,537],
    [4351758,2671396,91333,583209,3485566,38404,329219,42836,32257,26990,27493,6607,413,123841,49712,69542,641094,50143,1633172,1196502,52391],
    [2432913,1715705,16663,153971,3264346,4877,411834,8675,30082,10206,9302,2025,145,183406,27442,46618,80114,9778,2091334,1011296,63015],
    [23269,21490,0,11943,31449,0,260,29,1,0,43,3,0,40,46,243,224,679,14557,19127,24371]
    ]
    204 changes: 204 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,204 @@
    body {
    background: white;
    width:1150px;
    }
    h1 {
    font-size: 220%;
    text-align: center;
    font-family: verdana;
    color: gray;
    margin-top:0px;
    }
    h2 {
    font-size: 130%;
    font-family: verdana;
    text-align: center;
    color: black;
    }

    h3 {
    font-size: 130%;
    font-family: verdana;
    text-align: center;
    color: gray;
    line-height: 100%;
    }
    h4 {
    font-size: 100%;
    font-family: verdana;
    text-align: justify;
    color: black;
    }
    h5 {
    font-size: 100%;
    font-family: verdana;
    text-align: center;
    color: black;
    }
    h6 {
    font-size: 100%;
    font-family: verdana;
    text-align: left;
    color: gray;
    margin-top:12px;
    }
    p {
    font-family: verdana;
    font-size: 80%;
    text-align: center;
    }
    #chart_placeholder {
    text-align: center;
    float:right;
    color:#fff;
    width: 750px;
    height: 830px;
    }
    .details {
    float:right;
    width:350px;
    }
    /*
    .dependencyWheel {
    font: 10px sans-serif;
    }*/
    #circle circle {
    fill: none;
    pointer-events: all;
    }
    path.chord {
    stroke: #000;
    stroke-width: .10px;
    transition: opacity 0.3s;
    }
    #circle:hover path.fade {
    opacity: 0;
    }

    /*text is regions name only on chord diagram and scroll text*/
    text {
    fill: black;
    font-family: Arial Narrow,Arial,sans-serif;
    text-align: center;
    font-size: 14px;
    }
    svg {
    font-size: 10px;
    color: green;
    min-height: 100%;
    min-width: 100%;
    }

    .yearbuttons{/*area*/
    float: left;
    margin-right: 50px;
    width: 400px;
    }
    button{/*this are the year buttons*/
    background-color: black;
    color: white;
    font-size : 16px;
    font-family: Arial Narrow,Arial,sans-serif;
    border-color: black;
    border-radius: 2em;
    border-style: solid;
    cursor:pointer;
    }
    .current{
    background-color: white;
    color: black;
    font-size : 16px;
    font-family: Arial Narrow,Arial,sans-serif;
    border-color: black;
    border-radius: 2em;
    }

    #legend {/*regions*/
    float:left;
    font-size: 14px;
    width: 215px;
    }
    /*regions as well*/
    table.table1{

    }
    /*countries*/
    table.table2 {
    position: absolute;
    top:180px;
    left:1050px;
    white-space: nowrap;
    border-collapse: collapse;
    display: none;
    }
    table.table2 td {
    font-family: verdana;
    font-size: 14px;
    float: left;
    }
    p {
    font-family: verdana;
    font-size: 80%;
    text-align: center;
    }
    .link {
    margin-left: 30px;
    width:300px;
    height:50px;
    float: left;
    }
    .scroll {
    position:absolute; /*on top of vis*/
    top:0;
    left:0px;
    }
    .scroll2 {
    float:left;
    }
    /* unvisited link */
    a.one:link {
    color: #3CBCBC;
    text-decoration: none;
    }

    /* visited link */
    a.one:visited {
    color: #54C571;
    }

    /* mouse over link */
    a.one:hover {
    color: #736AFF;
    }

    /* selected link */
    a.one:active {
    color: #3CBCBC;
    }
    /*this are the links to the table not to other pages*/
    /* mouse over link */
    a.two:hover + table {
    display: table;
    color: black;
    }
    /* unvisited link */
    a.two:link {
    font-family: verdana;
    color: black;
    text-decoration: none;
    }
    /* visited link */
    a.two:visited {
    font-family: verdana;
    color: black;
    }
    /* mouse over link */
    a.two:hover {
    font-family: verdana;
    color: gray;
    }
    /* selected link */
    a.two:active {
    font-family: verdana;
    color: black;
    }
    23 changes: 23 additions & 0 deletions tentwelve.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    [
    [3486136,1441430,81291,71894,1003663,5380,269901,2903,14256,4599,2973,196,4346,88351,111148,44362,33090,8472,588849,1770898,7465],
    [629578,20250182,1092579,53674,382911,131357,468244,198147,399249,91086,223912,2669,17466,19164,23957,195743,297022,9325,315773,532678,7291],
    [403687,6036636,234499,29107,574642,7632,1348768,5704,228701,69031,528,30,815,24132,70167,230677,160141,1652,319092,654440,669],
    [155477,133155,2625,201372,356230,2022,31137,495,6226,4336,10454,474,0,1324,1229,4589,28574,782,226515,927824,15936],
    [244533,281540,7319,58284,48595,1583,25037,110,13901,25546,28112,5399,0,1589,371,16564,46193,1582,528647,1034966,33762],
    [375,120526,395,161,56361,41572,88,562,0,19,0,0,0,0,0,0,23,0,105,29,0],
    [13902,267375,11442,906,215408,451,344851,0,6643,20,1578,0,0,3625,1076,0,8700,94,925147,950114,2],
    [39291,1206414,12895,1919,103013,4179,38916,9574,120630,61308,12213,3265,0,1597,2135,22454,71167,68,12547,10796,1525],
    [39253,493325,10016,178,129937,748,24150,4856,84013,19718,3075,1573,28,3462,29875,14073,15815,757,21650,25661,1183],
    [6,4,0,0,0,0,0,0,1,2547,0,0,0,0,0,0,0,0,1,14,0],
    [10691,646841,2753,14142,71239,148,316,3586,6069,7999,28041,571,0,2,2631,1816,30078,636,26711,43720,429],
    [2038,359423,459,5420,167271,0,0,233,623,107760,35735,710,0,3171,123,8830,4194,10,4299,11052,1006],
    [110,378366,13351,0,565,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [882204,398971,516,672,66078,541,1110,292,350,153,513,0,90,131476,10882,31908,5954,1125,52127,199108,320],
    [61836,30948,125,0,268,0,0,0,25,0,0,0,1,90,14052,616,159,0,25,889,0],
    [1732997,2904454,42579,51548,1561117,19368,204329,10769,159470,53794,1753,908,0,85625,61052,1240661,75048,17939,575307,1767669,5935],
    [13999,311777,7419,309,49261,800,20192,10118,4079,3114,7092,193,0,130,7,2900,399025,19794,153057,109711,409],
    [556816,875188,7863,7023,442010,483,27289,11241,1880,5956,11138,753,0,1116,6087,1387,249655,46599,695673,500600,946],
    [5192446,2782411,120112,756508,4408476,51733,224078,104301,74564,62101,35575,2828,585,115353,56676,209635,1067571,89916,2397309,1916214,61431],
    [2935501,1816089,20758,269282,4106110,4812,545358,27453,132478,54739,37970,3735,422,262719,46395,238795,151588,33898,3758390,2427634,113163],
    [30267,136467,2541,16036,91316,151,308,0,1155,0,57,0,0,8,24,2005,603,1617,113606,46994,21800]
    ]
    23 changes: 23 additions & 0 deletions thirteenfiveteen.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    [
    [4095264,1693439,80433,79589,1016998,1875,204140,8693,21044,4449,2436,697,7825,124962,115132,47807,35868,15921,908418,2062819,5494],
    [776046,24068696,1235878,97436,455070,116113,369762,204422,469736,122882,229677,4206,16931,27823,31493,195083,327589,11711,472488,681109,9075],
    [617388,7663846,245015,48488,622206,3740,1061648,9297,225179,88112,1544,128,1383,19136,65722,173160,234997,1927,512631,700328,698],
    [161699,153115,2072,206597,266580,90,26539,1042,4867,21861,10864,399,0,1353,1455,7699,16589,1070,667941,677193,18785],
    [335499,292305,10233,62763,36016,14,10576,5,15246,16203,38763,47839,0,1510,2001,6901,61010,3093,590647,962739,21331],
    [1,57927,46,14,4,10546,38,54,3,37,0,0,0,0,0,0,0,0,66,4,0],
    [10893,520411,15602,332,227275,489,492539,0,15488,0,29,0,0,48,378,0,24258,14,1079258,1021583,4],
    [52081,1338505,13527,1573,140680,4842,47023,11755,160985,71466,10677,2657,0,1516,495,34162,119256,2203,36661,36256,1783],
    [8942,489465,11597,562,75433,181,36935,6966,189138,27974,2701,109,61,4276,1229,12412,13742,984,83113,48985,350],
    [7,38760,0,0,2558,0,0,0,615,2537,0,2063,0,0,0,1177,36,0,2113,1602,0],
    [12534,954166,6400,5246,65354,10,1037,362,3450,10791,42631,234,7,277,2957,697,40927,28839,33015,112334,0],
    [3400,330099,247,6918,143500,0,332,203,1432,111520,96161,556,0,1237,180,660,2148,10,3053,9673,127],
    [33,397763,24217,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1889,0],
    [963880,327371,545,1158,91359,16,2007,213,162,350,72,16,173,174323,11205,24889,1757,508,68422,207482,90],
    [65365,29684,1,2049,94,0,6,0,8,0,0,0,6,68,12982,383,723,1,805,924,5],
    [3128740,3194057,31833,62505,1441831,13594,472556,12474,118391,72535,4624,827,0,217312,58709,1727196,72692,12218,1282036,1879867,5167],
    [28857,453244,2453,1295,54624,2307,53501,8857,6101,1307,13189,107,1,356,452,19511,409172,37149,156840,29052,1065],
    [1606868,1430156,11564,17781,549796,327,70630,14954,2801,11677,12798,360,0,14712,10450,9783,442314,83309,1559146,452505,1347],
    [5589881,2812590,119348,827983,4256165,20101,222009,92001,78178,50907,55843,2157,472,180362,62000,354661,1132528,133031,3102466,2428099,58880],
    [3826574,2279413,27439,372231,4236271,6220,672398,41189,230390,105057,146103,5899,1268,411725,53890,394309,232390,128074,5254995,4190658,150323],
    [40879,37881,29,7584,46112,6,34,0,66,44,56,0,0,0,373,234,409,740,22902,59995,20010]
    ]