I find myself following a few recipes when creating new Svelte components.
You'll find that most of this code is focused on visualizing data, just due to what I'm typically building.
Instead of creating a chart library, I prefer to curate recipes , which keeps things super flexible.
- World MapCreate a world map, with sized & colored bubbles for each country. Check this out on desktop and mobile 😉.
- ForceUse d3 force to move particles around. You can change the forces at any point, more info in the d3 docs.
- ScatterplotCreate a chart with dots that animate when they move.
- SpiralCreate a chart that spirals out from the center — great for showing yearly trends, not great for accurate comparisons. Inspired by this NYTimes chart from Gus Wezerek and Sara Chodosh.
- IconI love using raw svgs for icons - they're super lightweight, always look crisp, and are super flexible. The component has a direction for easy rotations (super useful for arrows), and is easily sized based on font size.
I'll usually have a utils.js file that I throw custom methods into for easy use. Here are some of those methods.
- tweened-staggeredA tweaked version of the official svelte
tweenedmethod, with two updates: a: it takes an
iDelayconfiguration option, which staggers the transition of individual items in a tweened array, and b: it uses d3.js's interpolation function, which handles interpolation of colors.
transform: translatecss style to keep code concise. I like to use
transforms liberally, since they are easy to animate (via CSS transitions), and one of the most performant ways to animate on the web.