About this repo

Website made in Svelte hosting data visualisations made with D3 (deployed here).

A mix of tutorials and experimental stuff. Site structure and folders a bit of a mess, don't judge too harshly :D

Collection of resources

Guides and templates

• Svelte starter on Github (Pudding)
• Svelte starter on Github (Matthias Stahl)
• Connor Rothschild post on Svelte and D3
• Overview of Svelte and D3 projects
• (Svelte Charts): Templates for charts in Svelte and D3

Scrollytelling templates

• svelte-scroller: Github, Demo
• svelte-scrolly: Demo, Github (ONS)
• Scrollytelling component from Russell Goldenberg: Starter Kit by Connor, Demo (also used by Pudding)

Tutorials

• Svelte + D3 training by Matthias Stahl on YouTube
• Your first data visualization with Svelte & D3 by Connor Rothschild for Newline on YouTube

Inspiration/Projects

• Spiegel: Nobel Laureates (Project, Code)
• Jess Voiture for Pudding: Vogue magazine covers (Project, Code)
• Connor Rothschild: Bob Ross Art gallery (Project, Code)
• Flore Perche: Tour de France (Project, Code)
• Taiwan Data Stories (Code)

Sveltekit project setup

Everything you need to build a Svelte project, powered by sv.

Install dependencies

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.