Charts are tedious, let Svend3r save you time…
Why Svelte?
Like React, Angular, and Vue, Svelte gives developers a way to build web apps that are modular and extensible. But Svelte is just…better! Instead of relying on a virtual DOM for “reactivity”, Svelte compiles Javascript topologically, meaning it knows the order in which reactive variables depend upon one another. As Rich Harris put it, “Svelte moves reactivity out of the component API and into the language.” This improves performance, reduces bundle size, and enhances code readability.
Even though SvelteKit is still in beta, it works beautifully with Svelte. In development, it delivers blazingly fast HMR using Vite; in production, it facilitates prefetching, configurable rendering, and seamless serverless integration.
Why Svelte for Charts?
Many amazing engineers have written about why Svelte is so good at creating data visualizations. Connor Rothschild has a great article on his blog titled Making Visualizations Literally w/Svelte & D3. Amelia Wattenberger has Svelte Recipes as well as her amazing blog. There’s no shortage of excellent information out there!
By integrating D3 with Svelte, we get the best of both worlds: D3’s incredible tools for translating information from the data space to the pixel space and Svelte’s optimized DOM interaction. Everything you need to develop great visualizations — markup, styling, and JavaScript — can be done in a single file. Instead of using D3 to manipulate the DOM, Svelte uses {#each} blocks to render chart elements and {#if} blocks to handle conditional logic. This approach also helps lighten the load of D3 by only using a few modules for each chart.
Why Svend3r?
Even though there are great resources for building your own charts with Svelte, including Pancake (from Rich Harris) and Layer Cake (from Michael Keller), the Svend3r team wants to make it even easier. There can be a steep learning curve when integrating technologies like Svelte and D3.
Svend3r is here to lighten the load. We’ve provided a set of plug and play charts that will integrate seamlessly into your next Svelte project. Just copy and paste our code directly into a new component file, import your data (or pass it down as a prop), and voila…you’ve got a chart!
We’ve included a Data Schema in each of the component pages to ensure that your data is formatted correctly. We have also supplied a number of variables that can be manipulated with sliders, toggles, and input fields to customize the look and feel of your charts. When you copy the code, all of your customization stays with you — in fact, you’ll see the chart and code update in real time!
Want to see what your data looks like with one of our charts? Move the code to a Svelte repl and test it out! Play around with the variables and the functionality to your heart’s content. If you run into issues, just grab the code from our site and start from the top!
Want to Contribute?
The incredibly active, supportive community is one of the best parts of building in Svelte. Do you have a chart component you’d like to share? Notice anything missing, not working, or not available yet that you’d like to see? Submit a pull request to the contributor branch on our GitHub repository!
Wrap it up already!
The Svend3r team can’t wait to hear from all of you die-hard Svelters! Let us know how we did and how we can make it even better! We’re only in beta — we’ll continue to add more charts and features, resolve issues, and hopefully implement some of the suggestions coming from all of you!
Contributors:
James Laff | Linkedin | GitHub
