Chord diagram transition - G10 Currency Pairs

.block

license: mit

README.md

Chord Diagram with transitions to see sentiments of each year

===============================================

Forked from below:

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.

forked from databayou's block: Chord diagram transition interactive

chord.js

/*** Define parameters and tools ***/

var csvfilter = "";
var ccyfilter = "";

var width = 760,
    height = 820,
    outerRadius = Math.min(width, height) / 2 - 120,//100,
    innerRadius = outerRadius - 10;

var dataset = "y2013.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) 
                + " Total Google Interest for " 
                + 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 + '  (' + (100* ((d.endAngle - d.startAngle) / 2)/Math.PI).toFixed(1) + '%)'; 
        });

    //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
            })
			.text(function (d) {
				return regions[d.index].name + '  (' + (100* ((d.endAngle - d.startAngle) / 2)/Math.PI).toFixed(1) + '%)'; 
			})
            .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),
                        " Google Rating for ",
                        regions[d.source.index].name,
                        regions[d.target.index].name,
                        "\n",
                        numberWithCommas(d.target.value),
                        " Google Rating for ",
                        regions[d.target.index].name,
                        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("#y2011").on("click", function() {
    updateChords( "y2011.json" );
		csvfilter="2011";
    //disableButton(this);
});


d3.select("#y2012").on("click", function() {
    updateChords( "y2012.json" );
    csvfilter="2012";
    //disableButton(this);
});

d3.select("#y2013").on("click", function() {
    updateChords( "y2013.json" );
  	csvfilter="2013";
  	task_delete_tables();
    //disableButton(this);
});


d3.select("#y2014").on("click", function() {
    updateChords( "y2014.json" );
  	csvfilter="2014";
		task_delete_tables();
    //disableButton(this);
});


d3.select("#y2015").on("click", function() {
    updateChords( "y2015.json" );
  	csvfilter="2015";
    //disableButton(this);
  task_delete_tables();
});


d3.select("#y2016").on("click", function() {
    updateChords( "y2016.json" );
  csvfilter="2016";
    //disableButton(this);
  task_delete_tables();
});

d3.select("#y2017").on("click", function() {
  csvfilter="2017";
    updateChords( "y2017.json" );
    //disableButton(this);
  task_delete_tables();
});


function injectHTML(inject_content){
 
    //step 1: get the DOM object of the iframe.
    var iframe = document.getElementById('target_iframe');
 		alert(iframe);
    var html_string = '<html><head></head><body><p>' + inject_content + '</p></body></html>';
 
    /* if jQuery is available, you may use the get(0) function to obtain the DOM object like this:
    var iframe = $('iframe#target_iframe_id').get(0);
    */
 
    //step 2: obtain the document associated with the iframe tag
    //most of the browser supports .document. Some supports (such as the NetScape series) .contentDocumet, while some (e.g. IE5/6) supports .contentWindow.document
    //we try to read whatever that exists.
    var iframedoc = iframe.document;
        if (iframe.contentDocument)
            iframedoc = iframe.contentDocument;
        else if (iframe.contentWindow)
            iframedoc = iframe.contentWindow.document;
 
     if (iframedoc){
         // Put the content in the iframe
         iframedoc.open();
         iframedoc.writeln(html_string);
         iframedoc.close();
     } else {
        //just in case of browsers that don't support the above 3 properties.
        //fortunately we don't come across such case so far.
        alert('Cannot inject dynamic contents into iframe.');
     }
 
}
 

/*
function disableButton(buttonNode) {
    d3.selectAll("button")
        .attr("disabled", function(d) {
            return this === buttonNode? "true": null;
        });
}
*/

index.html

<!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>G10 Currency Sentiments</h1>

      <div id="yearbuttons">

        <button id="y2013" class="current">2013</button>
        <button id="y2014" class="">2014</button>
        <button id="y2015" class="">2015</button>
        <button id="y2016" class="">2016</button>
        <button id="y2017" class="">2017</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');
        });
        
				function refresh_tables(ccy){
          ccyfilter = ccy;
          var tableDiv = d3.select(".table_placeholder").append("div").attr("id", "tableDiv1");
					var divs = tableDiv.selectAll("div");
  				divs.remove();
        }

      </script>


      <div id="legend">

        <table class="table1">
          <tr>
            <td bgcolor="#FFFFFF" width="10%">
            </td>
            <td width="90%"><h3>Currencies</h3>
            </td>  
          </tr>
          <tr>
            <td bgcolor="#FF00FF" width="10%">
            </td>
            <td><a class="two" id="NA" href = "#"   onclick="ccyfilter='USD';" >USD</a>
              <table class="table2">
                <tr>
                  <td><h3>Information</h3></td>
                </tr>
                <tr>
                  <td><div class="thisframe"></td>
          			</tr>
        </table>
        </td>  
      </tr> 
    <tr>
      <td bgcolor="#0000FF">
      </td>
      <td><a class="two" id="NA" href = "#" onclick="ccyfilter='GBP';">GBP</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 = "#">CAD</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 = "#" onclick="ccyfilter='EUR';">EUR</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="#8E8E38">
  </td>
  <td><a class="two" id="NA" href = "#" onclick="ccyfilter='JPY';" >JPY</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 = "#" oonclick="refresh_tables('SEK');">SEK</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><a class="two" id="NA" href = "#">CHF</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="#97FFFF">
  </td>
  <td><a class="two" id="NA" href = "#" onclick="refresh_tables('AUD');">AUD</a>

    <table class="table2">
      <tr>
        <td><h3>Countries</h3></td>
      </tr>
      <tr>
        <td >Australia<br/></td>
</tr>
</table>
</td>  
</tr>

</table>
</div> 

</div>


 
<div id="chart_placeholder"></div>
    <div class="table_control"></div>

    <div class="table_placeholder"></div>

<script type="text/javascript" src="chord.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="table_manipulation.js"></script>
   

</body>
</html>

interests.csv

matrix.csv

regionsfish.csv

style.css

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 path.fade {
  opacity: 1;
}
#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: white;
  color: white;
  font-size : 20px;
  font-family: Arial Narrow,Arial,sans-serif;
  border-color: white;
  /*     border-radius: 2em; */
  border-style: solid;
  cursor:pointer;
}
.current{
  background-color: white;
  color: black;
  font-size : 20px;
  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: #2414ff;
}

/* 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;
} */

a.two:click + 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;
}   


/*subframe*/

table.table2a {
  position: absolute;
  top:140px;
  left:1050px;
  white-space: nowrap;
  border-collapse: collapse;

}

table.table2a iframe {
  border: 0;	
}

table.table2a 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: #2414ff;
}

/* 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;
} */

a.two:click + 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;
}   

body {
}

.table_placeholder {

  position: absolute;
  top:180px;
  left:950px;
  white-space: nowrap;

  padding-top: 0px;
  padding-bottom: 0px;
  min-width: 500px;

}
.table_placeholder table{
  margin=1px;
}
.well {
  padding-top: 0px;
  padding-bottom: 0px;
  min-width: 500px;
}
.h3, h3 {
    text-align: left;
}


label {
  margin-bottom: 10px;
}

.table1 table {
  border-collapse: separate;
}

h3, .h3 { 
  text-align: left;
}

table_manipulation.js

'use strict';

// title div with label and button
var header = d3.select(".table_placeholder").append("div").attr("class", "well");


header.append("h3").text("Notable events relating to selected CCY " + ccyfilter)
		.attr("text-align", "left")
		.attr("class","h3class")
;



var taskLabel = header.append("label")
    .attr("id", "taskLabel")
    .html(" ");
header.append("br")
var currTask = 0;
  
var taskButton1 = header.append("button")
    .attr("class", "btn btn-primary")
    .style("margin-bottom", "20px")
    .style("width", "200px")
    .style("text-align", "left")
		.style("margin-left", "1px")
    .text("Data Relations")
    .on("click", function() {
      this.blur();
      // execute the task
      showmatrix("interests.csv");
      // next task
//       currTask = ++currTask % tasks.length;
    })

var taskButton2 = header.append("button")
    .attr("class", "btn btn-primary")
    .style("margin-bottom", "20px")
    .style("width", "200px")
    .style("text-align", "left")
		.style("margin-left", "1px")

    .text("Show Matrix")
    .on("click", function() {
      this.blur();
      // execute the task
      showmatrix("matrix.csv");
      // next task
//       currTask = ++currTask % tasks.length;
    })
var button_clear = header.append("button")
    .attr("class", "btn btn-primary")
    .style("margin-bottom", "20px")
    .style("width", "200px")
    .style("text-align", "left")
		.style("margin-left", "1px")

    .text("Clear")
    .on("click", function() {
      this.blur();
      // execute the task
      task_delete_tables();
      // next task
//       currTask = ++currTask % tasks.length;
    })

// container for array of tables
var tableDiv = d3.select(".table_placeholder").append("div").attr("id", "tableDiv1");

// initial data
var data;
var initialData = [
  { table: "Notable Events", rows: [
      { col1: "abc", col2: "Row1", col3: "DataT1R1" },
	  { col1: "sdfasdf", col2: "Row1", col3: "DataT1R1" },
      { col1: "asdfasdf", col2: "Row2", col3: "DataT1R2" }
    ]
  }
]

// tasks
function task_delete_tables() {
  // clear any existing tables (by providing an empty array)
//   update([]);
// 	var table = d3.select("wells").select("table").selectAll("tr")
  var divs = tableDiv.selectAll("div");
  ccyfilter="";
  divs.remove();
//   taskLabel.html("Cleared any existing tables");
}


function task_initialize() {
  // load initial tables
  data = JSON.parse(JSON.stringify(initialData));
  update(data);
	console.log(data);
  taskLabel.text("Step 1: Initial tables loaded");
}

function task_initialize_csv() {
  data = JSON.parse(JSON.stringify(initialData));
  update(data);
  update([]);
  
  d3.text("interests.csv", function(csvdata) {

  var divs = tableDiv.selectAll("div")
      // after .data() is executed below, divs becomes a d3 update selection
      .data(data,                     // new data
        function(d) { return d.table  // "key" function to disable default by-index evaluation
      }) 
  
    var divsEnter = divs.enter().append("div")
    .attr("id", function(d) { return d.table + "Div"; })
    .attr("class", "well")

    // add title in new div(s)
    divsEnter.append("h5").text(function(d) { return d.table; });

    // add table in new div(s)
    var tableEnter = divsEnter.append("table")
    .attr("id", function(d) { return d.table })
    .attr("class", "table table-condensed table-striped table-bordered")

    // append table head in new table(s)
    tableEnter.append("thead")
      .append("tr")
      .selectAll("th")
      .data(["Currency Pair", "Time", "Related Information"]) // table column headers (here constant, but could be made dynamic)
      .enter().append("th")
      .text(function(d) { return d; })

    // append table body in new table(s)
    tableEnter.append("tbody");
    
    
    var parsedCSV = d3.csv.parseRows(csvdata);
    var tr = divs.select("table").select("tbody").selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")

    .selectAll("td")
    .data(function(d) { return d; }).enter()
    .append("td")
    .text(function(d) { return d; });

  });
}

function task_update_insert() {
  // add 4th row to table 2
  data[0].rows.push({ table: "Table2", row: "Row4", data: "DataT2R4" });
  update(data);
	
  taskLabel.text("Step 2: Added 4th row to Table 2");
}

function showmatrix(filename){
  
  header.select('h3').text("Notable events relating to selected CCY " + ccyfilter);

  
  data = JSON.parse(JSON.stringify(initialData));
  update(data);
  update([]);
  

  
  d3.text(filename, function(csvdata) {

  var divs = tableDiv.selectAll("div")
      // after .data() is executed below, divs becomes a d3 update selection
      .data(data,                     // new data
        function(d) { return d.table  // "key" function to disable default by-index evaluation
      }) 
  
    var divsEnter = divs.enter().append("div")
    .attr("id", function(d) { return d.table + "Div"; })
    .attr("class", "well")

    // add title in new div(s)
    divsEnter.append("h5").text(function(d) { return d.table; });
    var parsedCSV = d3.csv.parseRows(csvdata);

    // add table in new div(s)
    var tableEnter = divsEnter.append("table")
    .attr("id", function(d) { return d.table })
    .attr("class", "table table-condensed table-striped table-bordered")
		
    
    // append table head in new table(s)
    tableEnter.append("thead") 
      .append("tr")
      .selectAll("th")
      .data((parsedCSV[0])) // table column headers (here constant, but could be made dynamic)
      .enter().append("th")
      .text(function(d) { return d; })
		
    // append table body in new table(s)
    tableEnter.append("tbody");
    parsedCSV.splice(0,1);
    
    // Filter
    if ( filename.includes('interest')){
      for (var i = parsedCSV.length - 1; i >= 0; i--) {
				
        // Filter on year and currency
        if ( (!parsedCSV[i][1].includes(csvfilter)) || (!parsedCSV[i][0].includes(ccyfilter) )  )  { 
          console.log(parsedCSV.splice(i,1));
        }   
		
        // if ( (!parsedCSV[i][1].includes(csvfilter))  and  (!parsedCSV[i][0].includes(ccyfilter) ) )  { 
          // console.log(parsedCSV.splice(i,1));
        // }
      }
    }

    
    var tr = divs.select("table").select("tbody").selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")

    .selectAll("td")
    .data(function(d) { return d; }).enter()
    .append("td")
    .text(function(d) { return d; });
  });
}

function task_updated() {
  // change the content of row 1 of table 1
  var item = data[0].rows[0].data;
  data[0].rows[0].data = item + " - Updated";
  update(data);

  taskLabel.text("About To restart");
  taskButton.text("Restart") ;  
}

// task list (array of functions)
var tasks = [task_delete_tables,task_initialize,task_update_insert,task_updated]




// function in charge of the array of tables
function update(data) {

  // select all divs in the table div, and then apply new data 
  var divs = tableDiv.selectAll("div")
      // after .data() is executed below, divs becomes a d3 update selection
      .data(data,                     // new data
        function(d) { return d.table  // "key" function to disable default by-index evaluation
      }) 

  // use the exit method of the d3 update selection to remove any deleted table div and contents (which would be absent in the data array just applied)
  divs.exit().remove();

  // use the enter metod of the d3 update selection to add new ("entering") items present in the data array just applied
  var divsEnter = divs.enter().append("div")
      .attr("id", function(d) { return d.table + "Div"; })
      .attr("class", "well")

  // add title in new div(s)
  divsEnter.append("h5").text(function(d) { return d.table; });

  // add table in new div(s)
  var tableEnter = divsEnter.append("table")
      .attr("id", function(d) { return d.table })
      .attr("class", "table table-condensed table-striped table-bordered")

  // append table head in new table(s)
  tableEnter.append("thead")
    .append("tr")
      .selectAll("th")
      .data(["Currency Pair", "Time", "Related Information"]) // table column headers (here constant, but could be made dynamic)
    .enter().append("th")
      .text(function(d) { return d; })

  // append table body in new table(s)
  tableEnter.append("tbody");

  // select all tr elements in the divs update selection
  var tr = divs.select("table").select("tbody").selectAll("tr")
      // after the .data() is executed below, tr becomes a d3 update selection
      .data(
        function(d) { return d.rows; }, // return inherited data item
        function(d) { return d.row }    // "key" function to disable default by-index evaluation
      ); 

  // use the exit method of the update selection to remove table rows without associated data
  tr.exit().remove();

  // use the enter method to add table rows corresponding to new data
  tr.enter().append("tr");

  // bind data to table cells
  var td = tr.selectAll("td")
      // after the .data() is executed below, the td becomes a d3 update selection
      .data(function(d) { return d3.values(d); });   // return inherited data item

  // use the enter method to add td elements 
  td.enter().append("td")               // add the table cell
      .text(function(d) { return d; })  // add text to the table cell
}

thumbnail.png

y2013.json

[[   5,  289,  888,  979, 2405,    3,  888, 1778,  561],
 [ 354,    0,  866,  287,  841,    3,  609, 1525,  684],
 [ 776,  278,    1,  370,  621,    7,   61,  684,  531],
 [1503,  502, 1357,    5, 2245,    8, 1480, 1378,  282],
 [1208,  717,  342,  543,    9,    7,  197,  228,  100],
 [   1,    4,    1,    7,    2,    7,    3,    4,    3],
 [ 486,   61,    0,  206,  430,    6,    7,    6,    0],
 [2209,  609, 1047, 1435, 1528,    1,  474,    3,  894],
 [ 688,  476,  268,  227, 1099,    2,  585,  281,    6]]

y2014.json

[[   5,  286, 1118, 1221, 1878,    3,  654, 1363,  591],
 [ 376,    0, 1068,  303,  925,    3,  739, 1532,  787],
 [1014,  521,    1,  363,  658,    7,   54,  726,  668],
 [1488,  584, 1505,    5, 1568,    8, 1627, 1326,  240],
 [1096,  493,  303,  560,    9,    7,   85,  157,  178],
 [   1,    4,    1,    7,    2,    7,    3,    4,    3],
 [ 603,  222,  100,  264,  112,    6,    7,    6,  167],
 [1693,  729, 1167, 1416, 1317,    1,  191,    3,  501],
 [ 762,  307,   60,  158,  677,    2,  498,  262,    6]]

y2015.json

[[   5,  447, 2020, 1952, 1602,    3, 1422, 2145,  871],
 [ 431,    0, 1473,  621, 1094,    3,  945, 1883, 1091],
 [1747,  904,    1,  663,  658,    7,  352,  565,  687],
 [2541,  856, 1973,    5, 1385,    8, 1864, 1610,  601],
 [ 941,  815,  347,  633,    9,    7,    0,  232,  333],
 [   1,    4,    1,    7,    2,    7,    3,    4,    3],
 [ 565,  101,  382,  605,  311,    6,    7,    6,  430],
 [2229,  654, 1446, 1828, 1042,    1,  246,    3,  721],
 [ 997,  616,  500,  627,  750,    2,  969,  279,    6]]

y2016.json

[[   5,  674, 2609, 1372, 2986,    3, 1051, 1792,  705],
 [ 933,    0, 1763,  948, 2207,    3, 1071, 2272, 1161],
 [1774, 1283,    1,  710, 1322,    7,  203, 1163,  918],
 [1843, 1138, 2395,    5, 1503,    8, 1629, 1649,  245],
 [1238,  851,  282,  510,    9,    7,  231,  376,  325],
 [   1,    4,    1,    7,    2,    7,    3,    4,    3],
 [ 602,  400,   90,  483,  254,    6,    7,    6,  187],
 [2333,  997, 1595, 1743, 1476,    1,  329,    3,  902],
 [ 725,  489,  215,  240,  880,    2,  487,  282,    6]]

y2017.json

[[   5,  486, 2491, 1453, 2870,    3,  894, 1731,  712],
 [ 699,    0, 1529,  755, 2041,    3,  895, 2074, 1142],
 [1592, 1096,    1,  873, 1374,    7,  152,  910,  824],
 [1959,  985, 2490,    5, 1621,    8, 1371, 1863,  287],
 [1072,  729,  391, 1060,    9,    7,  211,  302,  223],
 [   1,    4,    1,    7,    2,    7,    3,    4,    3],
 [ 276,  268,  341,  505,   90,    6,    7,    6,   87],
 [1836,  837, 2003, 1850, 1617,    1,  216,    3, 1111],
 [ 637,  568,  348,  243,  783,    2,  469,  169,    6]]