Curran Kelleher's Data Visualization With React and D3 is probably the most comprehensive course on D3 on the Internet. For some time I have been curious about D3 and data visualization in general. While I have worked with Python libraries like Matplotlib , Seaborn and Plotly and they are fantastic for most kinds of exploratory and scientifc plots they have limitations on the web particularly in terms of interactivity. D3, for the uinitiated is the library which powers the bulk of all the interactive and SVG based plots on the web. It also acts as underlying low-level library for a lot of higher level libraries including Vega(For a more comprehensive list look here ).

In the series Curran uses D3 with React. However I personally find React impenetrable magic.

Its also not very convenient to use with D3 as both access the DOM and accessing DOM directly in React is always a risky business. I found Svelte's style of thinking really refreshing and intuitive. Svelte is a radical new approach to building user interfaces. Its essentially a compiler which takes .svelte files , which are components including HTML, CSS and JS required for the component to run and turns them into fast, lighweight code which can be executed in the browser.

So I am using Svelte instead of React for building the components. Also this series is not a tutorial on either D3 or Svelte. At best this can be thought of as course notes for my self to follow along with Curran's course. The only reason this is a series is because Hashnode allows to organize as series. As the series progress and more articles get added I'll add them to the end of this post.

P.S. I am not very good at either D3 and Svelte (Coming to think of it not very good at JS either 😢). The code will probably be full of errors, atrocious bad practices and horrible inefficiencies. Be kind enough to point out in the comments if you notice any such in a constructive manner.

That's all now. Hope you have a good day!