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; | |
| } |
| 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 |
A radar chart visualizes multivariate data in a 2D chart of three or more quantitative variables represented on axes.
The project is created using AngularJS and D3.js.
| license: gpl-3.0 |
| license: gpl-3.0 |
| license: gpl-3.0 |