Home

Awesome

Svend3r v0.1.0-beta

Introducing Svend3r, a plug and play D3 charting library for Svelte!

There are great resources for building your own charts with Svelte, including Pancake (from Rich Harris) and Layer Cake (from Michael Keller), but the Svend3r team wants to make it even easier.

How do I use Svend3r?

- Head to the Svend3r.dev homepage

<img src="./readmeImages/Svend3rNewHome.png" width= 50% height= 50% alt="Svend3r Home Page"/>

- Decide which chart works best for your application

<img src="./readmeImages/Svend3rBarChart.png" width= 50% height= 50% alt="Svend3r Bar Chart"/>

- Ensure your data is formatted correctly by checking the Data Schema Tab

<img src="./readmeImages/DataSchema.png" width= 50% height= 50% alt="Svend3r Bar Chart Data Schema"/>

- Manipulate the properties to customize the look and feel of your chart

<img src="./readmeImages/Svend3rProperties.png" width= 50% height= 50% alt="Svend3r Bar Chart Properties"/>

- Copy the code and the data from the Code and Data tabs

<img src="./readmeImages/Svend3rCode.png" width= 50% height= 50% alt="Svend3r Bar Chart Code"/> <img src="./readmeImages/Svend3rData.png" width= 50% height= 50% alt="Svend3r Bar Chart Data"/>

- Paste the code and data into a Svelte repl or directly into your component

<img src="./readmeImages/Svend3rAreaReplDark.png" width= 50% height= 50% alt="Svend3r Area Repl"/>

Thats it!

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!

Contributors