CorrelCon 2025 - DataViz for the Web with Svelte

Context

I gave a talk at CorrelCon 2025 and promised to shared links & resources for staying up-to-date with the Web Platform.

CSS

• Curated list of resources for learning and staying up-to-date with the Web Platform, CSS, and Accessibility

Svelte (and D3)

• official, interactive Svelte tutorial (Svelte 5) - https://svelte.dev/tutorial
• Connor Rothschild - Using d3 the "Svelte way" (Svelte 4) - https://v4.connorrothschild.com/viz
• Matthias Stahl (Head of DataViz at Spiegel) - YouTube channel (Svelte 5) https://www.youtube.com/@h_i_g_s_c_h_videos
• official d3-in-Svelte tutorial (Svelte 4) - https://d3js.org/getting-started#d3-in-svelte
• Charting / DataViz Libraries:
  • SveltePlot: https://svelteplot.dev/
  • LayerCake: https://layercake.graphics/
  • LayerChart: https://www.layerchart.com/
  • (non-Svelte) Observable Plot: https://observablehq.com/plot/
• Svelte Summit Youtube playlist, e.g. an impressive talk on visualising the orbit with Svelte and WebGL and lots of astronomics: https://www.youtube.com/watch?v=gRHCAYC8ivE

Coding Examples

• REPL 1 - simple bar chart: https://svelte.dev/playground/991ec5a50c3f45779f065790d9da067e?version=5.35.2
• REPL 2 - dotplot / scatterplot: https://svelte.dev/playground/674033e7d5014c01bb0d6b3cdde1408c?version=5.35.2
• REPL 3 (Svelte 4) - scatter with a baseline, sorting and hovering: https://svelte.dev/playground/150760ebe7fb4756a4569fcd281781ca?version=5.35.2

marimo

• https://marimo.io/
• marimo VSCode plugin (also available in Positron etc.): https://marketplace.visualstudio.com/items?itemName=marimo-team.vscode-marimo
• Docker Compose (from Coolify - you might need a volume): https://github.com/coollabsio/coolify/blob/v4.x/templates/compose/marimo.yml
• marimo extension for Quarto (!): https://github.com/marimo-team/quarto-marimo
• Tailscale Funnel (the localhost tunnel thing): https://tailscale.com/kb/1223/funnel