Learning D3 & Svelte
Charts and scrollytelling templates made with D3.js, Svelte and LayerCake.js
Charts and scrollytelling templates made with D3.js, Svelte and LayerCake.js
This website is designed to showcase what I have learned in 2024 and how I have built my tech stack, as someone who is not a developer by trade.
HTML provides the structure of a webpage. CSS is used to style and
layout web pages
Level of difficulty: easyHTML and CSS are
beginner-friendly.
My advice: Don't skimp on advanced CSS (animations,
grid, flexbox, etc.); it will be a game changer later on, allowing you
to rely on JavaScript as little as possible to add pizzazz to your
creations. If you have time, practise by building your portfolio
website,
like I did.
An XML-based format for vector graphics. It is used to create scalable images that can be resized without losing quality. Level of difficulty: easy Understanding the basics of SVG is straightforward. My adviceEven if that's for later down the line, option to read Data Sketches or Nadieh Bremer's blog to get a sense of the creative power of SVGs.
JavaScript is a programming language that allows you to add
functionality to web pages, such as form validation or interactive
buttons.
Level of difficulty: Difficult (at least for me)
A steeper learning curve, compared to HTML and CSS.
My advice
Stick to the basics when you learn for the first time. I have lost myself
into a (great) 40+ hour course, but my goal is not to become a front web
dev. You want to start dabbling in dataviz as soon as possible.
A JavaScript library for creating dynamic and interactive data
visualisations.
Level of difficulty: borderline discouraging (for me)
Challenging for beginners, but don't despair, Svelte and LayerCake.js will
simplify some bits later on.
My adviceWhile you are learning HTML, CSS, SVG and
Javascript, experiment with the chart libraries built on top of D3.js,
such as
RawGraphs
or Flourish or
Observable notebooks. This is much easier and will give you a good illustration of the
blocs you will start with.
A modern JavaScript framework for building user interfaces. You can start by watching videos by Connor Rothchild or Matthias Stahl, but the long story short for me: it makes Javascript and D3 a hell lot more palatable. Level of difficulty: moderate Svelte is easier to learn compared to some other frameworks. My advice The hardest part for me was not to despair with Javascript and D3, and keep going until I got to the Svelte part. So keep going!
A library for building data visualisations with Svelte. It provides a
set of tools that simplifies layering different components.
Level of difficulty: moderateUsing LayerCake.js
requires knowledge of both Svelte and data visualisation principles.
My advice Very few tutorials on LayerCake.js
unfortunately, outside of the
official documentation. LayerCake.js is worth learning once you get frustrated with writing
the same repetitive parts of D3.js and Svelte.
Scrollytelling is this cool technique you are experiencing right now
that that combines scrolling with storytelling to create engaging and
interactive narratives. It is often used in data journalism and
interactive articles
Level of difficulty: easy to moderateBy that point, you
are already a HTML, CSS, JavaScript, and data visualisation wizard.
My advice
There are many other libraries that can help you with scrollytelling (see
this Bluesky thread), personally I have been taught the IntersectionObserver method.
→ Number of pets VS ↑ levels of happiness
→ Time spent learning dataviz VS ↑ levels of confidence I'll be able to pull a
line chart
expectations Vs
reality
→ Number of toes per animal
↑ Number of toes per animal
Espresso Steamed Milk Milk foam doses in different coffees
Espresso Steamed Milk Milk foam doses in different coffees