Adam Pearce 1wheel
| node_modules |
| gistup |
Passing arrays of attributes:
attributes: {
p: () => data.map(({x, y1, dy, isB, speed}) =>
[x, y1, dy + isB, speed]
),
},
Why is moving a rect with a pattern fill so laggy?
My laptop can animating 1000 solid rects at 60 fps, but 30 pattern filled rects slows down to 10 fps!
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)}
| license: gpl-3.0 | |
| height: 600 | |
| scrolling: no | |
| border: yes |
Levin Dixon asked how to create a path with rounded corners. The provided curves in d3 adjust the entire path, not just area around the data points.
This might look a better with an A command instead of C, but circles are hard.
See beeswarm-path for a tidier implementation of beeswarm along a path.
Beeswarm along a path, suggested by Arman.