Skip to content

Instantly share code, notes, and snippets.

@1wheel
1wheel / README.md
Last active Jan 1, 2020
regl-ladder-2
View README.md

Passing arrays of attributes:

attributes: {
  p: () => data.map(({x, y1, dy, isB, speed}) => 
    [x, y1, dy + isB, speed]
  ),
},
@1wheel
1wheel / README.md
Created Mar 16, 2018
laggy-pattern-fill
View README.md

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!

@1wheel
1wheel / README.md
Last active Jan 22, 2020
regl-ladder
View README.md

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)}

@1wheel
1wheel / .block
Last active Jan 1, 2020
closest-county
View .block
license: gpl-3.0
height: 600
scrolling: no
border: yes
@1wheel
1wheel / README.md
Last active Mar 14, 2018
rounded-corner-curve
View README.md

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.

@1wheel
1wheel / README.md
Created Mar 3, 2018
flying-beeswarm
View README.md

See beeswarm-path for a tidier implementation of beeswarm along a path.

View README.md

Beeswarm along a path, suggested by Arman.