Appendix

Resources & Thanks

Chances are you started with little to no experience in using Svelte and D3, but throughout this workshop you figured out how to draw basic shapes on a browser, manipulate them with data and made a start on your journey to create custom dataviz - and maybe along the way realised that code isn’t as scary as you thought it was.

If you were also curious about how you could take this forwards, so here’s a couple links to get you started - there’s a lot of different directions that you could go with creating on the web, so pick whatever you find interesting.

Additional Resources

SVG and the Web

  • MDN SVG Tutorial: Go a bit more in-depth with SVG and learn about the tools on hand to create custom shapes.
  • JavaScript Tutorial: D3 can be incredibly expressive, but you may find yourself needing to learn a bit more about JavaScript to actually understand enough code to explain what you want to do in the first place. This is a great free resource to get started with JavaScript.

Learning D3

  • D3 official documentation: the source of truth for scales, shapes, and every helper we've leaned on.
  • The D3 Graph Gallery: Dozens of copy-and-adapt chart recipes, each with full code.
  • Observable notebooks: A lively notebook community creating dataviz with javascript and D3; search any chart idea and read how others built it.
  • Curran Kelleher - YouTube: If you prefer to learn by watching Curran has a massive library of D3 tutorials and chart deep-dives with D3 on YouTube.

Svelte

  • Connor Rothschild - Learning D3 in 2023: If you already worked with D3 in the past and wanted a better understanding of why we reach for Svelte, this a great article by Connor that talks about his framework-first approach to learning D3 (which is what this workshop is an attempt at)
  • Official Svelte Tutorials: If you want to dive deeper into Svelte, this is by far the best place to look. There's a bunch we couldn't cover like how to filter your data, swap out the data being displayed and custom interaction.
  • Deploying your app: Wanted to figure out how to make your chart/site live for others to view and play around with much like this site? Well it's often as straightforward as running npm run build and dropping the created build folder into your favourite hosting service. This site uses Netlify which is free for small projects and has a nice integration with GitHub.

Misc

  • Shirley Wu - Introduction to SVG and D3.js: A series of observable notebooks which Shirley Wu references in her Frontend Masters course on D3. This doesn't use Svelte, but is a great resource to learn SVGs and D3 with observable notebooks.
  • Three.js: If you wanted to work with 3D on the web, Three.js is the way to go. It works similar to what we learnt in our workshop except now we are writing code to define cubes, 3D models and lighting sources instead of 2D SVG shapes.
  • The Coding Train: A collection of creative coding tutorials and projects, often using JavaScript and p5.js, which can complement your D3 and Svelte learning.

Acknowledgements

I’m a strong believer that rarely, is anything we produce, built in a vacuum. There are dozens of people who influence the work we put out. This is just my attempt to list out the handful of folks whose contributions simply can’t go unmentioned:

  • Amit Kapoor: Amit was the primary reviewer for this workshop. With this being my first time teaching, his meticulous edits and guidance saw me through multiple reworks of workshop content and stands today as something I’m confident about sharing with others.
  • Gurman Bhatia: Besides being my boss, Gurman is a force of positivity in the Indian dataviz community. This workshop is the result of her badgering me throughout the years to get out of my comfort zone and try my hand at speaking (as with many other speakers). Shes does office hours too btw.
  • Aman Bhargava: Aside from overcompensating for my first time teaching, Aman’s learning resources are the primary inspiration why I have put as much time into this course site. Working together has caused both of us to push and inspire each of us to do so much more, dev or otherwise.
  • Arvind V: Arvind reviewed the first draft of this workshop and was honestly the best person to make my first time teaching less intimidating.
  • Divya Ribeiro: Divya was my editorial POC and was in every review call and handled all of the logistics around the workshop, despite having a ridiculous amount on her plate with VizChitra. Also a crazy talented illustrator btw.
  • Vivek Matthew, Darshan: Didn’t think I would need help on the day of, but I couldn’t have been more wrong.
  • Revisual Labs team: I did a dry run of the workshop with the team a week before VizChitra - explaining things to real people was by far the best barometer of what worked. Surround yourself with people with people that will call you out when they have no clue what you’re on about, but somehow also hype you up regardless!
  • Showcased works by: Revisual Labs, Urmila J, Aman Bhargava, Surbhi Bhatia, Nadieh Bremer, Shirley Wu, Amelia Wattenberger, Odd Studio
  • Ustwo games: I often like to study art direction but trying to emulate things in code. The inspiration for this workshop site is largely around - Assemble with Care - a cozy game from the makers of Monument Valley. You can find some of the visual exploration here and their insanely well detailed technical art write-up here.