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)}
| <!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; | |
| } |
| 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 |
| // Breakpoints | |
| // $break: Breakpoint to use | |
| // $dir: 'min-width' or 'max-width' | |
| // $until: Maximum width | |
| // @include breakpoint('medium'); | |
| // @include breakpoint($break: 'medium', $until: 'large'); | |
| // @include breakpoint($break: 'medium', $dir: 'max-width'); | |
| @mixin breakpoint($break, $dir: 'min-width', $until: null, $breakpoints-map: $breakpoints) { | |
| @if not map-has-key($breakpoints-map, $break) { | |
| $break: $break; |
| license: mit |
| # Download and Transform the 1:50m Country Shapefiles from Natural Earth | |
| # http://www.naturalearthdata.com/downloads/110m-physical-vectors/ | |
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip | |
| # Download the zip file from the Natural Earth server | |
| ne_110m_land.zip: | |
| curl -LO $(URL) | |
| # Unzip the shapefiles |
| # Finds images in markdown files and replace them with a cloudinary responsive image include | |
| Jekyll::Hooks.register :documents, :pre_render do |post, payload| | |
| docExt = post.extname.tr('.', '') | |
| # only process if we deal with a markdown file | |
| if payload['site']['markdown_ext'].include? docExt | |
| newContent = post.content.gsub(/\!\[(.*)?\]\((.*?)(?=\"|\))(\".*\")?\)/, '{% include cloudinary-responsive-img.html title=\3 alt="\1" path="\2" %}') | |
| post.content = newContent | |
| end | |
| end |
| { | |
| "Version": "2012-10-17", | |
| "Statement": [ | |
| { | |
| "Effect": "Allow", | |
| "Action": [ | |
| "s3:ListBucket", | |
| "s3:GetBucketLocation" | |
| ], | |
| "Resource": [ |