Skip to content

Instantly share code, notes, and snippets.

@databayou

databayou/.block

Last active May 31, 2019
Embed
What would you like to do?
Chord diagram transition interactive
license: mit

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 by AmeliaBR.

The data was obtained from FAO Fisheries Yearbooks. It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at Databyou.

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.

/*** 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;
});
}
*/
[
[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]
]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<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>
<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>
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
[
[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]
]
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;
}
[
[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]
]
[
[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]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.