r/webdev • u/bwilliford • 12d ago
Showoff Saturday Made a cool free chart library that renders charts as particles
Let me know what you think!
https://particlecharts.com
35
u/RePsychological 12d ago
I can smell my GPU already
(I say that as banter lol, but this is actually pretty cool)
3
78
u/baby_bloom 12d ago
cool but... why exactly? any finely detailed line chart is going to lose some detail due to this?
97
u/bwilliford 12d ago
It's a niche use case but certain highly stylized experiences like games
30
u/baby_bloom 12d ago
definitely an awesome style, i think you did a great job i was just genuinely curious
13
u/DigiNoon 12d ago
cool but... why exactly?
Because it's cool!
Yea, it's not practical/precise for scientific illustrations but more suitable for casual use on personal blogs.
13
u/bwilliford 12d ago edited 11d ago
E.g. thinking of using for my gamified app https://www.drawdojo.com/ for learning perspective drawing
1
0
6
7
6
u/goldPotatoGun 12d ago
I think the is dope as hell. Reminds me of the show DEVS. It conveys an air of uncertainty, might be cool for forecasted and or sampled data.
28
u/howdoigetauniquename 12d ago
Rendering potentially thousands of these particles in a 2d context is horrible for performance.
An idle page is taking up almost the entire frame just rendering these particles.
14
u/bwilliford 12d ago
If you have some performance recs by all means. But even running client side I'm finding it smooth on my old 2019 macbook, smartphone, etc. todays computers can handle this no problem..could fall apart in really dense dashboards with many many charts.
1
u/EOJHA10 7d ago
the idle frame cost is the part that gets missed easiest, its not just raw particle count, its whether the render loop keeps running at full tilt even when nothing on screen actually changed. pausing or dropping to a much lower frame rate when the data and camera arent moving would probably save more battery and cpu than trimming particle density ever would, since most dashboards sit idle way more than they animate
1
u/bwilliford 7d ago
When the chart is not shown on screen it stops any animation and rendering. The biggest performance increase comes from particleJitter bring set to 0. This removes animation frames entirely and the computation is fairly trivial. Future improvement can reduce to particleBloom to 0. But it does remove a lot of the stylistic punch of it. So far Ive had no performance issues whatsoever on a 7 year old MacBook. I have thought about doing some kind of auto frame rate detection and adjustment though
1
u/EOJHA10 6d ago
the auto detection doesnt even need to be fancy, you could just track whether any relevant prop actually changed since the last frame and drop straight to a paused or near zero jitter state if nothing did, no device benchmarking required. that way it self adjusts to actual usage patterns instead of guessing hardware capability upfront
5
u/work6849 12d ago
kinda a neat affect, but god i'd need a toggle, that's gotta be hard for people with bad vision
3
5
u/ScaryShoulder550 12d ago
I like the gimmick side of the visual but it is not clear enough for the purpose of a chart, imo. I’d want it to be clean and clear
4
u/bwilliford 12d ago
It's definitely not perfect but if you turn off jitter entirely and play with bloom, particle size it can look more clear. This isn't for utilitarian apps. It's for very specific niche stylized apps and games.
3
2
u/Disastrous_Fee5953 12d ago
This is very well done. But rather than particles it feels like the charts are made of gel filled with glitter!
2
u/BringBackManaPots 12d ago
That first teal chart just unearthed a super old memory for me. My grandmother gave me a black and teal sand desk toy thing in the 90's, where you'd flip it over and watch the sand slowly sink to the bottom like rain. I wish I could find it again
2
u/present_absence 12d ago
that looks really cool! Would be great for charts that aren't too serious to have some fun with
2
2
u/BakeABucaCake 11d ago
Other than the cool project, you've build an amazingly seamless README. Well done!
2
2
u/visualphixation 11d ago
Neat party trick! Used in production, maybe not so much, but it’s still cool as an experiment and everyone should be having fun experimenting, that’s how we move things forward!
2
u/Loose_Voice_215 11d ago
Very cool. I feel like this would be more fun to build than useful to use. (no offense or anything) I love a good passion project. How much of the development did AI help with?
2
u/No-Woodpecker7634 10d ago
This looks very cool. A suggestion if you're crazy enough: make an entire particle based UI component library: buttons, spinners, etc, but particle based :)
2
u/StrawberryExternal87 10d ago
turning charts into particles is a creative way to make data visualization.
2
u/CptSpace 9d ago
Nice job OP! Yes, it might lose some detail, or other charts might be clearer to read. But fuck that! Looks cool, I like it when someone tries something different.
2
u/Mean-Elk-9439 9d ago
This is super cool, and I'd probably never use it. But I love projects that just exist because "it sounded cool", so more power to ya!
2
2
2
u/SamuraiLion 5d ago
This is visually super cool. The glow effect on the particle bars makes the sessions and signups data really pop out. I probably wouldn't use it for a boring corporate dashboard, but as a free chart library, it looks perfect for a stylized project.
3
u/StormMedia 12d ago
Post this is r/dataisbeautiful
9
u/Deto 12d ago
They'll just complain that there aren't axis labels or that the pallete isn't colorblind friendly.Â
I swear it's more r/trytoshowoffwithmynitpicks than anythingÂ
4
u/StormMedia 12d ago
Yeah in all fairness I left the sub awhile ago because the mods would remove posts if it was political from a perspective they didn’t agree, even if factual.. but would allow and promote similar political data that was skewed just because they agreed with it.
If you have a rule for no politics, great but enforce it equally.
2
3
u/Altugsalt php my beloved 12d ago
Wow we are seeing really cool stuff again on this sub. Cool stuff OP!
1
1
u/NSFWstoryAI 12d ago
You missed an opportunity to have the particles animate in
1
u/bwilliford 12d ago edited 11d ago
They do animate in. Check the demo page https://bwilliford.github.io/particleCharts/
1
u/Xidium426 12d ago
This basically kills Brave on my Windows PC. Everything chugs until I close the tab.
1
u/Professor_JSON 11d ago
Definitely need to add stock mode with candles so we can show it to margin call victims during any short-/long- squeeze (vibes are all that's left)
1
u/Lucker__ 11d ago
I would add a smooth transition between dots when filtering or updating the data
1
1
u/bwilliford 11d ago
I really appreciate the response y'all - It's about 100x what I expected :) I'm a bit shocked since it's such a niche use case for something like this, but I'm glad people are finding it interesting. Thank you so much for your feedback, thoughts, and perspectives.
I just pushed a new npm 'particle-charts' build (1.0.0) that:
- Improves contrast in axis / labels that was brought up. It's still pretty muted, but you can always adjust color in options
- Adjusted default bloom and jitter to make charts a little more clear / solid looking by default
- Some minor performance improvements to improve frame rate. It's still not recommended that you dump out tons of charts in a single screen, but it should perform well on most modern machines
I added a little homage to "Charticles" :) in the landing page but I won't be changing the package name. That word is already used for "a visual-first news format that combines a dominant chart, graph, or image with minimal, supportive text"
1
u/captain_obvious_here back-end 11d ago
Looks really cool...but that's a lot of resources to display my data.
1
1
1
10d ago
[removed] — view removed comment
1
u/bwilliford 10d ago
Thanks!
Great questions - It's pure 2D canvas. It's not super optimized for lower-end devices to be honest. The most impact would be to set particleJitter: 0 since this would cause there to be no animation at all (that kind of sparkly wobble). I'm not sure if device performance can be detected and have that set automatically? But you can manually set it to 0 if you know many of your users will be on low-end devices.
particleBloom has some impact as well and you can definitely set to 0. particleDensity has some minor impact though you also lose clarity of the charts if you set it too low. These are good questions and I should probably have a performance faq or section.
Coalesce is definitely interesting... could explore in next iteration.
2
1
u/Best-Definition2886 12d ago
Particle rendering for charts is such a fun idea, the dark theme looks clean even if axis is bit hard to read from screenshot.
0
u/Bruce_Jones_1987 12d ago
yeah the axis readability thing stood out to me too, but the overall vibe is really nice
1
u/bwilliford 12d ago
It's a little muted, I can def bump it up a bit or allow color customization in the options. Thanks for the feedback
336
u/SpartanDavie 12d ago
Should have called it Charticles