We’re creating documentaries to tell the tech stories that inspire people to keep creating and learning, and ultimately, unlock more potential in both themselves and software. Check out the YouTube Channel!
Here, Rich Harris, Moritz Stefaner, Amelia Wattenberger and Aliza Aufrigtig about using Svelte for data visualisation.
I think data visualization as a field is constantly evolving. It has evolved so much over the last few years. So it’s all built on this idea that an image can transport information really well and you can encode so much information in an image. But nowadays we build interactive images like data experiences where you can set filters, scroll record, shuffle whatever.
And the other thing is I think we’re moving away from this idea that it’s a single chart that is like has a little board around it, and that’s the visualization but we’re thinking more about data is all around us.
We live in a very fluid and like responsive world by now. And I think if you build a data heavy site, you shouldn’t think of data visualization as chart goes here. Right. But really think more about, hey, how does the data change the text with this playing maybe the background color in the head of maybe a little like bar chart or how can people actually find the information they want to see and Svelte really helps with doing these integrated data experiences where you don’t use a plug in to draw a chart, but you really think every part of my webpage could dynamically change.
And it’s very easy to wire individual elements up to data sources. Right? And being so easy in in making things dynamic that really changes your design process overall.
What I really enjoy about working with Svelte is you can just start somewhere and just start building one component, right? And just start with your page dot Svelte or something and you just add stuff and once you realize, oh, maybe that’s becoming a bit big, I should move that to a separate component. It’s super easy to take a whole chunk of code extracted into a component.
Think about what should go inside or what’s the input, what’s the output maybe and re-use it somewhere else. And this fluid way of not having to think too much about abstraction beforehand but as you develop things, you realize, Oh, I keep reusing the same stuff. I should make it a component that’s so easy to do. And then moving these components to another project is also easy because they are self-contained.
They don’t rely on much typically, and that makes it so easy to just work without much baggage and just play and and see what happens.
I think Svelte and D3, that’s sort of the perfect mixture for data visualization. D3 is a really wonderful framework or let’s say a toolkit almost more for database. So you get on the map projections, layout, algorithms, color scales, also on the like the domain specific stuff. What’s unique to data visualization is really modeled well in D3, but again, it doesn’t really help you that much with managing a whole complex application or doing a responsive design or having a good way to dealing with style sheets.
and Svelte complements that perfectly in a sense, that throat spelled is really good and building journal web pages or web apps. And if you find a good way to combine them and actually they play very well together, you have that perfect mixture of solid application framework, good responsiveness and the UI, good reusable code. But all the benefits of the that the things that come with a low level library like D3 that you don’t have to worry about every single step of throwing an SPG, but you have a few shortcuts and a lot of the best practices and data visualization.
So being able to bring in something like Svelte is really, really helpful where you can have things broken up into components. Um, so say you have a few different chart types. Each of those types of charts will have its own component and you can kind of throw them up around the page or re-use reused different building blocks across projects or within the same project really pretty easily.
I think we tend to see a lot of new tools coming from journalism just because journalists are always having these really tightly scoped tactical projects where they’re kind of starting from scratch and they need to be flexible and they need to be creative.
practitioner is end up doing. And that I think for a very similar reason. There are a lot of people doing interactive data visualization that really love Svelte. And I think originally it’s probably because, uh, Rich Harris was at the New York Times and he is very much in the data business but I think over time a lot of new practitioners realize that it’s such a good fit for like these smaller applications that need to be really interactive and really custom and really complicated in a lot of ways that it you’ll see a lot of these newer data viz pieces coming out, especially from The New York Times uh, they’re built in Svelte.
My perspective on data is as a, as a term that is I think you at least in my role, I want to come up with the best possible way to convey information. Sometimes that’s what the bar chart sometimes is to the line chart. Sometimes it’s with a spinning spiral of like album covers to try and convey like a psychedelic album experience.
And most of the time, I think the best way to convey things is with sentences. I think that there, you know, we should as as journalists or people who are making visualizations, not just like do you of this because it looks cool.
Like we’re, you know, ideally we’re trying to make things because that is the best way that we can think of to communicate it. And so I think that that is like what you think of as data is like another tool in our toolbox of telling stories and communicating with people.
I think that what is particularly good about Svelte is you can go from having an idea to having a pretty fully functional working prototype.
In my case, I don’t know, in a few hours and you’re like, Okay, I had this idea in my head here, and then you can show it to people and you can either decide, Yes, that’s going to work or No, that’s that’s garbage. Let’s try something else. And so I think what I like best about it is how expressive you can be and how quickly you can you can do that.
It allows you to take an idea that you can only see in your head or maybe you sketched out on paper or using some sort of sketching software and see if the interactions that you’re imagining actually work. And I think that it’s just useful, like the things you could do as well you can do in other ways. There’s nothing magical about it.
It has definitely found a home in the data visualization community. And I think that is partly because, you know, it was designed from the beginning to enable me to do my job, which very largely involves data visualization and I think it probably took off with that community because, you know, in a way, I’m kind of like a member of the tribe.
And so there’s a level of trust that goes with that. But it is also designed with the challenges of those sorts of projects in mind. For example, you know, very often you’re dealing with quite a large amount of data, and some of it is maybe going to be in motion at some point. And so performance is super key.
- Svelte Origins: The Documentary by OfferZen
- Why OfferZen is Making Documentaries about Open-source tech
- What is Svelte? feat. Rich Harris
- Rich Harris on why he created Svelte
- Why Svelte is Easy to Learn as a React Developer
- How Svelte differs from React or Vue.js
- When Svelte met TypeScript feat. Rich Harris and Orta Therox
- Taylor Otwell on how he Decides what PRs to Merge into Laravel
- Jeffrey Way Tells the Story of Laracasts
- The Story of Tailwind CSS feat. Adam Wathan
- Nuno Maduro Tells the Story of Pest PHP
- Larabelles and Inclusivity in the Laravel community
- PHP Isn’t Dead ft. Jeffrey Way, Erika Heidi and others
- Taylor Otwell Explains his Coding Style
- The story of Laravel News featuring Eric L. Barnes
- Taylor Otwell on the Importance of Documentation and Developer Experience in Laravel
- The story of Code Happy, Code Bright & Code Smart feat. Dayle Rees
- Taylor Otwell on How He Got Into Programming
- The pros and cons of open-source feat. the Laravel Origins cast
- Taylor Otwell on how Laracon came to be