Using Svelte for data visualisation

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.

Transcript

MORITZ

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.

OfferZen_Using-Svelte-for-data-visualisation_inner-article

MORITZ

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.

MORITZ

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.

MORITZ

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.

MORITZ

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.

MORITZ

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.

MORITZ

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.

MORITZ

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.

MORITZ

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.

AMELIA

At the pudding, our client projects are usually about two and a half weeks to a month long, and these are fairly complex projects. You have a lot of interaction, a lot of data parsing and managing. You have things moving on, scroll. So they're not necessarily static sites where vanilla JavaScript and basically HTML will be the best tools for the job.

AMELIA

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.

AMELIA

Um, so, and there's also. So it's a team of eight people at least when I was there and there's varying levels of familiarity with JavaScript frameworks. So it was really the sweet spot where if you use something like React or Vue, it's kind of stuck together using JavaScript. And if you're very familiar with JavaScript and thinking in a certain sort of way, then that sort of system is really great and really helpful.

AMELIA

But if you're maybe a little bit newer or it's not even in your best interest to learn the ins and outs of different JavaScript frameworks, if you use something like Svelte, you're mostly just looking at basic HTML, JavaScript and CSS.

AMELIA

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.

AMELIA

And I think it's just because you need to re do this this like starting up a new project and you have these restrictions around like how large can the payload be you have to work quickly. Um you know you went like these really tactical uh, like lightweight applications that need to do a lot and you're making them over and over again that you get a really good sense of like how browsers work, how can you compile JavaScript, what might be really nice workflow for a developer to build complicated but small applications so I think a lot of innovation ends up coming out of the data of is community just because of the types of projects that

AMELIA

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.

ALIZA

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.

ALIZA

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.

ALIZA

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.

ALIZA

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.

ALIZA

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.

ALIZA

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.

ALIZA

It's, you know, it's JavaScript in the end. But I think that the, the speed and also just the simplicity of looking at it I think are really useful.

RICH

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.

RICH

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.

RICH

Also, like a lot of the people who are building this stuff, they're not programmers first that they do this practitioners or that journalists and they're not coming to JavaScript because they really love JavaScript. They come into JavaScript because it enables them to do their job. So something that is designed to be very simple and familiar to people who already understand web technology and I think is is a huge advantage.

Transcript

MORITZ

MORITZ

MORITZ

MORITZ

MORITZ

MORITZ

MORITZ

MORITZ

MORITZ

AMELIA

AMELIA

AMELIA

AMELIA

AMELIA

AMELIA

AMELIA

ALIZA

ALIZA

ALIZA

ALIZA

ALIZA

ALIZA

ALIZA

RICH

RICH

RICH

Related content

Recent posts