Chord Diagram with transitions to see sentiments of each year
forked from willzjc's block: Chord diagram transition - G10 Currency Pairs
xxxxxxxxxx<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>Regional Currency Sentiments</h1> <div id="yearbuttons"><!-- <button id="y2013" class="">2013</button> <button id="y2014" class="">2014</button> <button id="y2015" class="">2015</button> <button id="y2016" class="">2016</button> --> <button id="2017" class="current">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'); }); </script> <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 = "#" onclick="ccyfilter='USD';" >Americas</a> <table class="table2"> <tr> <td><h3>Currencies</h3></td> </tr> <tr> <td>CAD<br/>USD<br/>MXN<br/>COP<br/>BRL<br/>CLP<br/>PEN<br/>ARS</td> </tr> </table> </td> </tr> <tr> <td bgcolor="#0000FF"> </td> <td><a class="two" id="NA" href = "#" >Europe</a> <table class="table2"> <tr> <td><h3>Countries</h3></td> </tr> <tr><td>EUR<br/>GBP<br/>USD<br/>CZK<br/>RUB<br/>PLN<br/>HUF<br/>CHF<br/>TRL</td></tr></table></td> </tr><tr> <td bgcolor="#6495ED"> </td> <td><a class="two" id="NA" href = "#">Middle East & Africa</a> <table class="table2"> <tr> <td><h3>Countries</h3></td> </tr> <tr> <td> USD<br/>EUR<br/>GBP<br/>TRL<br/>ILS<br/>ZAR<br/>MAD<br/>SOS </td></tr></table></td> </tr><tr> <td bgcolor="#F4A460"> </td> <td><a class="two" id="NA" href = "#" >Emergent Nations</a> <table class="table2"> <tr> <td><h3>Countries</h3></td> </tr> <tr><td>USD<br/>MXN<br/>TRY<br/>ILS<br/>CNHZ<br/>SGD<br/>HKD<br/>KRW<br/>BRL<br/>TWD<br/>ZAR<br/>PLN<br/>HUF<br/>CZK<br/>RUB </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> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://code.jquery.com/jquery-3.2.1.min.js