d3 ribbon from chords to bubble chart and back
by ostapische
HTML
<script src="https://d3js.org/d3.v4.min.js"></script>
JavaScript
var arrsLeftTop = [{"based":"United States","globalSettlement":2110220186},{"based":"Switzerland","globalSettlement":463894449},{"based":"Netherlands","globalSettlement":1030149459},{"based":"Germany","globalSettlement":233085000},{"based":"Japan","globalSettlement":408400000},{"based":"United Kingdom","globalSettlement":512600000},{"based":"France","globalSettlement":1645000000},{"based":"Italy","globalSettlement":182500000},{"based":"Other","globalSettlement":117250000}];
var width = 400,
height = 400,
radius = Math.min( width, height ) / 4;
var svg = d3.select( "body" ).append( "svg" )
.attr( "width", width )
.attr( "height", height )
.append( "g" )
.attr( "transform", "translate(" + ( width / 2 ) + "," + ( height / 2 ) + ")" );
var arc = d3.arc()
.outerRadius( radius - 10 )
.innerRadius( radius - 30 )
.padAngle( 0.5 * Math.PI / 180 );
var pie = d3.pie()
.sort( function( a, b ) { return a.globalSettlement >= b.globalSettlement; } )
.startAngle( -90 * Math.PI / 180 )
.endAngle( 0 )
.value( function( d ) { return d.globalSettlement; } );
var g = svg.selectAll( ".arcRed" )
.data( pie( arrsLeftTop, function( d ) { return d.based; } ) )
.enter()
.append( "g" )
.attr( "class", "arcRed" );
g.append( "path" )
.attr( "d", arc )
.style( "fill", "#e58591" );
var bubblesArr = [{"name":"OLYMPUS LATIN AMERICA INC.","value":22800000},{"name":"VimpelCom ","value":795000000},{"name":"Qualcomm","value":7500000},{"name":"PTC and its Chinese subsidiaries","value":28000000},{"name":"SciClone Pharmaceuticals","value":12000000},{"name":"SAP SE","value":3700000},{"name":"Bristol-Myers Squibb","value":14000000},{"name":"Hitachi","value":19000000},{"name":"BNY Mellon","value":14800000},{"name":"Mead Johnson","value":12000000},{"name":"BHP Billiton","value":25000000},{"name":"Goodyear Tire & Rubber Company","value":16000000},{"name":"Walid Hatoum / PBSJ Corporation","value":34000000},{"name":"Louis Berger International Inc....