| iso,unique_iso,country,region,year,income_level,overall_rank,overall_value,pillar_1_rank,pillar_1_value,pillar_2_rank,pillar_2_value,pillar_3_rank,pillar_3_value,pillar_4_rank,pillar_4_value,pillar_5_rank,pillar_5_value,pillar_6_rank,pillar_6_value,pillar_7_rank,pillar_7_value | |
| AGO,AGO-2015,Angola,Africa,2015,3,120,26.2,135,35.24,130,13.65,128,21.11,131,35.27,126,24.3,45,30.8,112,22.18 | |
| AGO,AGO-2014,Angola,Africa,2014,3,135,23.82,136,39.13,129,13.75,137,17.53,107,42.88,135,17.77,83,24.78,127,18.09 | |
| AGO,AGO-2013,Angola,Africa,2013,3,135,23.46,136,40,126,14.05,129,18.24,121,36.95,141,11.82,62,27.17,137,18.26 | |
| ALB,ALB-2018,Albania,Europe,2018,3,83,30,55,64.5,95,21.3,62,45.31,38,52.3,98,24.36,110,13.74,86,23.05 | |
| ALB,ALB-2017,Albania,Europe,2017,3,93,28.86,62,63.3,91,23.48,66,46.41,41,51.69,102,25.28,118,11.36,100,20.02 | |
| ALB,ALB-2016,Albania,Europe,2016,3,92,28.38,64,62.35,90,23.6,64,43.6,30,51.24,114,21.87,106,17.18,119,15.29 | |
| ALB,ALB-2015,Albania,Europe,2015,3,87,30.7,70,60.06,101,21.8,71,38.98,24,59.09,118,26.17,110,1 |
| <!DOCTYPE html> | |
| <!-- Port Arc Diagram visualization from http://homes.cs.washington.edu/~jheer/files/zoo/ex/networks/arc.html to D3.js --> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 960px; | |
| height: 300px; | |
| position: relative; | |
| } |
Rough draft of this chart.
We started out with a SVG animation, tried out Elijah's canvas sankey particles and ended up rewriting in regl to get more dots on the screen.
The final version gets better performance by passing in array of attibutes to the vertex shader - I'm not sure why that is.
Update: Ricky Reusser points out that I was creating a new array of points every frame with:
attributes: {x: () => data.map(d => d.x)}