elm-charts

elm-charts

Tereza joins us to talk about building charts in Elm using the new elm-charts package.

PublishedSeptember 13, 2021

Episode#39

Tereza Sokol (GitHub) (Twitter)
terezka/elm-charts
elm-charts.org
Original APIs: line-charts and elm-plot
Tereza's Elm Europe talk elm-plot: the big picture
Tereza's talk If Coco Chanel Reviewed Elm
Edward Tufte
New version tries to be less prescriptive
Extensible Web Manifesto
gampleman/elm-visualization
elm-vega
GHCJS (mentioned in Elm Town episode 6)

Transcript

Hello Jeroen. Hello Dillon. And today we're joined by Teresa Sokal. Teresa, thanks so

much for joining us. Welcome. Thank you for having me. It's a pleasure. We're excited

to talk about these beautiful charts that everybody's tweeting about. I think just like

this landing page is so beautiful it makes you want to play around with charts. Thank

you. Yeah, actually like it took me so long to settle on what the look should be for the

front page. I feel like that's always what delays me like, like doing a release is just

like the small details of that. Evan was like, you know, he was going crazy. It was just

it looks beautiful. Everything, anything you do will look good. But I'm like, what if I

put this chart over here instead? Whatever your process was, it worked. And you've got

all these like nice examples in line in the site. It's very cool. Yay, thank you. I'm

so glad to hear. So let's so we'd like to start with like, definitions, introductions

and concepts. So why don't you tell us like what what is Elm charts? What what's it for?

And how do you build charts with it? Cool. Yeah, Elm charts is sort of a high level charting

library. So it's a charting library that compiles directly or like produces SVG directly in

Elm. And you don't have to know any SVG to work with it, which was one of my goals as

well was just to make it like just like people who don't know anything about charts should

be able to make a chart with Elm charts. So yeah, that was the primary goal. And then

to make it like really customizable. I've had like in my chart story sort of starts

back in my job at upbeat quite a few years ago, where we had a lot of charts and I would

use like react libraries because that was I was still doing react back then. And they

were actually like pretty nice. But there will always be like a fatal flaw. I think

I missed a feature of some sort that like totally like like that made me like they would

not be able to do what I needed to do in the design of the library. Yeah, exactly. Exactly.

And it didn't have like the appropriate holes to like go so I can do it myself. So I've

sort of tried to do that. Of course, it's hard to anticipate like no, no shade to the

react like they they were very inspiring. And I've gotten a lot of design features from

them. But there was just like, it's hard to anticipate what people would need because

charts is such an enormous like area like and there's just like so many charts you can

make and people will like, Oh, like, how do I do this? And I was like, I had no idea that

anybody would want to do that. I was like, No, okay, I'll figure it out, which is also

what makes it a quite a challenging API to design is that you have to design for so many

use cases and still keep it like manageable. So yeah, that was actually that's why it has

had such a like, so many API designs throughout time, like the first charting library that

I made came out when I first started at Nord inc, which is like five years ago, four years

ago or something. I'm not quite sure. But there were a few right there was like, elm

plot online. Yeah, exactly. So the funny thing is that I actually kind of just went back

to the original API of like, hmm. So if you look at them, that thing is pretty similar

to what it is now a lot of the like, it's just like, you know, the sort of look alike

HTML API that has attributes and that sort of thing. I like to think that the one I made

now is slightly better. More features than the original, but yes, but then I was like,

that was like such a new beginning of my life. And I like just like learning to design libraries,

it was the first library ever published. So I would like listen to a lot of people who

had like, we didn't really necessarily know anything about charts, but just like, Oh,

wouldn't it be cool to do the design like this? And I was like, Well, you probably know

better. I ended up actually going against my own intuition. So the line charts API is

sort of goes away from the attributes and just has like a configuration. And I think

it's very limiting and pretty confusing because you sort of overwhelmed with so many configuration

You mean like passing into records where you can say...

Yeah, exactly. Exactly. Instead of passing in like...

So the attributes is like kind of familiar from the like, Elm HTML attributes a little

bit like a list of attributes.

Yeah, exactly. So they modify the configuration.

Yeah, underneath it's kind of it's also just a record of like configuration record.

So it's actually not that different. It just hides the fact that like, you're not so you're

not confronted with so many configuration options in the very beginning.

That makes sense. Yeah, it looks like they're all basically just little like record setter

Yeah, yeah. I just went with the most basic setup. I don't know if there's actually a

better way. It does have like serious drawbacks in some sense to do that way as Sharun and

I talked about earlier today as well. It's like it costs a lot of major updates. You

can have a record. They're not even really major. That's the thing. That's what's so

annoying because they're misleading. It's like you don't actually have to change your

code because I make another like thing on the configuration option because it'll be

I guess major versions are not a problem because it's very easy to upgrade. But then it's really

hard to make an ecosystem around that. Like you can't have any other packages that will

target Elm charts because they would have to update all the time.

That would be very annoying. That's probably the biggest drawback against major versions

for this library I think.

Yeah. It is pretty annoying. But I've had to accept that it's not perfect from the beginning.

Otherwise, I'll just never publish anything. I will try to find a good solution for that

because it is a really good point.

Yeah. Can you walk us through an example of configuring something? What would be some

basic configuration that you might do on a chart?

You always start with a chart. It's basically a list of the elements that you like. You

would put in like, okay, I want a line chart and then I'll put in the properties of that.

What data do you want in there and what access are on that? If data, wouldn't you want the

line to reflect and like colors and like dots and stuff? And then you do axes, you can not

do axes and you can put labels. I made a big point of like making the axes and all the

elements that you can put around it for like navigation of the chart, make them very customizable

so you're not locked into like a certain way of doing it. Because sometimes you want to

put like labels of like arbitrary elements in your chart. So I've tried to also make

the coordinate system available in the charts so that I'm not the only one who like knows

how to place things in the SOG world. Because the strange thing about SOGs is that like

the coordinate system is not only flipped, but it's also like, you know, it's based on

the pixels, but then, okay, if you scale it, it's actually not pixels. It's just very confusing.

So I try to make it easy to just like, okay, I want this to be at X equals five and Y equals

six and then that's all you need to know. So yeah, I've tried to make it really flexible,

but we'll see. We'll see how people find use cases that it doesn't fit.

Yeah. What I really like is that it's not like you have a chart and you say, this is

a bar chart or this is a pie chart or whatever. It's more like you have a chart, you configure

the chart, you say, this is the padding, this is the size. And then you compose, you add

elements to it. So you add bar charts, you add lines, you add axis. And what I really

like with this system is like you can add multiple axis really easily. And yeah, you

just compose, you just add them all together. That's really nice, I think.

Thank you. Yeah. That was actually one of the things that was also an issue with the

line charts thing. It was kind of constraining as to what elements you'd be able to put in

and just how creative you could be with your chart. And I think I was quite enthusiastic

about this idea of defaulting to really nice charts or to good charts in a way or as correct

charts or whatever. You talked about that in your Coco Chanel talk

with Elm Townsend, your Elm Europe talk, I think. Yeah.

But I also think it's very difficult to predict what is a good chart in a way. You can put

up guidelines, but I think you can't really restrict it in a way. I think I kind of tried

to listen to like Evertefte and stuff like that. And you shouldn't put too many elements

in your chart and don't use pie charts or whatever. But honestly, I'm sort of turned

on that. I'm just like, if you think a pie chart would be the best for your users and

make them understand the best, you should do that. And so I don't want to be prescriptive

in the library in a way. It's also just fun to do it. And I think also there should be

like, you know, maybe it'd be good to have like a second library that sort of like is

on top of this where, okay, this is only, this can do like Evertefte charts or whatever.

But I want there to be an option where it's just like, okay, you can build whatever you

want. So can people build pie charts with Elm charts?

No, but I'm planning to add that actually. So yeah, I'm actually quite happy with one,

like I think it's very easy to actually add chart, new chart shapes. I don't remember.

So I think I'm going to do some releases quite soon. Because one of the tricky things about

it is like doing the events because once you have overlapping elements, regular event handlers

are not going to cut it. Because then you, if you have like two bubbles, for example,

overlapping and you're standing on the overlapping part, like which should it pick? I mean, it

should kind of show both of them, or at least you should know that you're hovering over

both of them. But that wouldn't, you wouldn't be able to see that as easily just doing regular

events on the SVG. So, or like native events. So, but now like I have a pretty good foundation

for doing that sort of event stuff. And it's quite easy to like add it, add new charts,

types and stuff like that. So I'm excited about that.

That's really interesting. Yeah. I think I've spoken a few times on this podcast about my,

you know, how much I appreciated this concept of the extensible web manifesto and that like

it sort of said, let's, Hey, let's not try to assume that we're going to be able to build

for every use case when we're building out the web platform. Like the web platform should

be a platform, which means it should, it should have the building blocks to do what you need

to with it. And then if people want to abstract those building blocks, the building blocks,

their job is to be a solid foundation and extensible in the right ways and not locking

you into certain things that you can't back out of. Cause the, like, if the platform doesn't

give you the ability to do that, you can't build that on top of it. But if you want to

build like a nice happy path with a high level way to consume that, that's can be in user

space or, you know, that can exist in another library. So it sounds like you've arrived

at a similar like idea with, with the principles for designing this API.

Yeah, exactly. I'm a subscriber to that theory. I think at least it's very good to like build

those basic, like have those basic building blocks in the ecosystem. And then like if

people want to do more descriptive things, then that's great too. I mean, cause I love

using prescriptive libraries because there are just like lots of things that I don't

know anything about and I, and that's, it's not the object of my tasks to like learn everything

about this particular area and I just want it to work. So I think that's where I, like

my initial feeling came from. I was like, I just, I just wanted to make a chart. I didn't

want it to know so many things. So yeah.

That's cool. I actually, I had a similar thought with, with the new Elm pages released that

I was like, you know like there used to be this assumption that you put like a markdown

file or some file in the content folder and then it creates a page for you. And now it

doesn't do that. And if you want it to create a page based on something in markdown folder,

you tell it, you tell the framework to do that, which means if that's not how you want

to do things, if that's not where you want your pages to come from, you, you can change

that if you want like a single markdown file of like slides for a presentation and you

want to extract in all of the little break points in that or all the headings in that

markdown file and create a page for each of those, for each slide, you can build that.

But if someone wanted to build an opinionated thing that's like, I liked it exactly the

way it was before, that was exactly what I needed. Great. Then like go build a framework

on top of the framework and yeah, but you can never like anticipate every need that

a user will have. You know, we were talking to Ryan about that when, when we had him on

and he was saying like, I'll never anticipate everything a user will need. So I need to

like give them the power to extend things as, as needed. Yeah, yeah, exactly. No, and

I think to some extent this is like the progression of the ecosystem. I suppose like you start

like, I mean, it's like, like there was JavaScript, you can do the wildest things in that. And

then there's Elm is like a little more prescriptive. And then there was like all these like, there's

Elm pages comes in and just like, so I think that's really beautiful and a natural progression.

And then you can sort of pick the layer that you need to operate within. And then Yeroon

will make like, you know, an Elm charts, no pie charts rule with Elm Review. After you

add that functionality. That's hilarious. You all make things possible and I make things

impossible. You make cool stuff and I make it like, no, this part is not cool. That's

hilarious. Yeah. Like, it was just like, okay, you just make it impossible to import pie

charts from Elm charts. Yeah. Easy, easy. Just automatically deletes it. Right, exactly.

Use my proposed fix. Just a slap on the wrist. So Elm charts slogan or is a composer chart

with delights. I'm curious to know what part of the experience do you think is delightful?

I know we like to use delightful in all things Elm. Yeah. Yeah. Honestly, I had so much trouble

finding a good tagline for it. I was so confused. I went so many ways. We tried to do the original

like, we're like, so, like Evan told me the story about how he found the tagline for his

thing and like, he was working at Prezi and he was talking to like the marketing manager

or some, like some lady that had some sort of marketing role and they did this like classical

like chart of like, what features do your library have and like human terms and then

you like narrow it down and we did that. But like, I feel like it ended up being like super

generic just like, oh, it's like, I just want it to be nice. I want you to be confident

with your chart. It's like it always sounded terrible. We're like so generic that it didn't

make any sense. You know, there's like some words that I just have a distrust towards

because they're just like used in every single library of Saba, like reliable. It was like,

oh, it's reliable. It was like 2% of things that says that are reliable or reliable, you

So you're saying that Elm Chart is not blazingly fast?

Well, I mean, I guess it's fast. I mean, it's, well, it's just like the like, my point is

just that I didn't know what to put in there. And then I just found that like, you know,

I just want you to have a good time making a chart. You know, I just want it to be not

a frustrating experience. And actually one of the things that I was thinking a lot about

was like, I didn't want it to be cluttered. I think a lot of the time, like when I've

been making charts in the past, and like, there's been like a huge, huge lead class

before my chart with all these like variables that I've been setting. It just felt like

an overwhelming task. And I wanted it to be like, clean and nice. And I wanted to just

like, you know, it just like reacts the way you expect it to be, to do. And actually,

somebody told me it does that. So I was very excited about that review. I was like, that

was the best thing I heard all day. So I think that was a big part of it. I just like making

charts can just like be a really difficult experience because like not only are there

like, exilient charting libraries to pick between. So like, even like you start up and

you're just like confused from the beginning. And then like, there's like such variation

of the detail of charts, libraries, you know, like what exactly, like what level are we

discussing? Like, or like, are we building out? Like, are we doing raw SVG? Are we doing

like a D3 kind of style? But there's like, these are the options. So I just wanted to

make something that's like, okay, it's very like descriptive. Okay, like I want a chart,

and it should have an axis in it. And it should have a line. And it should have a bar chart.

And that's it, you know, like,

and adding a tool to like, in the section on interactivity. And you know, you've got

ways to add tool tips, like, it must be doing a lot under the hood, because tool tips aren't

like a native concept, like in SVG or in in the browser, really. So and that's one thing,

like in in Elm that can sometimes be challenging is you're like, you can't just sprinkle in

this JavaScript that magically like makes tool tips appear places. But this tool tip

API looks really intuitive.

Yeah, I'm so glad to hear. Yeah, that's actually one of the things that took me the longest

time for sure. Like, honestly, like, drawing things on an SVG is not actually that difficult

is like, draw a rectangle, draw a circle. Right. But designing the events API was like

really, was probably that was the most challenging part of the API. And it's still definitely

like, even though it's like, you say it looks, it's quite intuitive. And I think that's been

a long process. And definitely wasn't in the beginning. And it's still, I think, one of

the most complicated parts, if not the most complicated parts of the library, even though

I've tried to make it as simple, but it's just like, you have to be able to do a lot

of things. So like, for example, like, if you want to hover not only just like this

dot, but like, maybe you want to hover a stack, and it should react like on on all like hovering

any part of the stack and not just like one of the elements. And so and like, maybe you

wanted to find the nearest stack. And so there's just like, so many things you could want from

an interactive and from an interactivity. So yeah,

I, okay, here's, here's a thing I want to do with it really more of a graph than a chart.

And I'm curious if if this would be like an Elm charts thing, or if this would maybe be

like an Elm visualization thing more, I want to have like a, like interconnected nodes

in a graph with basically arrows of basically for my like digital garden of like, this note,

like 10 different nodes point to this note, and then interconnected nodes with like arrows

Oh, yeah, so I wouldn't say that's like that. I don't have like native support for that

right now. But I'm trying to even though you could technically there's actually like a

custom thing. So you can like make any shape you like, and they will hook into the interactivity.

So right, I've sort of hidden this because like, I don't is not like a very developed

API. But there's a heat map example on the site of like, you can make a heat map with

this custom thing. So you could use that to make the graph if you really want to, but

it's not like a poof, it's just there.

Right, right, right. Yeah, right. So, so it's, I guess, like Elm visualization has some sort

of broader things. It's a visualization library, and this is more of a charting library. So

that would you say that's the distinction?

Well, I think like, Elm visualization, I haven't used it a ton. But my impression is that it's

a lot broader. And like, it also just like works on SVG, like you just make SVG elements,

as far as I know. And so it's a lot more low level, essentially. So I wouldn't say that

like, I think the I'm trying to do things high level more. And that also means that

like features will come a little slower. So for example, like the chart, the graphing

thing that you just mentioned, like I could definitely make that but I'd have to make

it so that would delay it a bit. But yeah, right.

It's not like Elm charts isn't aiming to be D3 level of customizability necessarily.

But that is Elm visualizations aim, is it?

Maybe. I think it's inspired by D3 and has adopted a lot of the similar like concepts.

So I think it does have like aspects of that at least. But at the top of the docs, it says

this project is designed to give you all the tools needed to build data visualizations

is not a charting library in the sense that you have pre bundled Excel style charts, but

should contain all the tools to make building such charts relatively easy. The advantage

is that you are free to design and build data visualizations that uniquely suit your needs.

So yeah, I think that's a pretty good split between the two.

Yeah, yeah, I guess. Yeah, yeah, I'm never I've never really been sure what the exact

definition of a chart is. But I guess I guess this is a charting library in that case. Yeah.

But yeah, I think ultimately, my hope is that somebody who needs like, basic charts, like

charts that we all know about generally like lines, bars, pies, heat maps, like that sort

of thing, you should be able to make in the charts eventually. And but of course, there's

definitely like, like, it's not like trying to replace language visualization at all.

Like I think that's a great tool. And it's so flexible. And you should definitely be

Yeah. So so have you thought about making charts be a higher API of of Elm visualization?

Or was it similar to build upon?

Yeah, actually, like, so I think I don't, I'm not exactly sure of the history. But I

think I had like my foundations for building srd charts, like pretty early on as well,

at least before I knew about Elm visualization. So I didn't really need it in a way, because

I already had built that stuff myself. So yeah, I don't Yeah, I think one of the things

is that I don't I haven't actually used Elm visualization for my own stuff. So we're like

for work or anything. So I think that's maybe also just like thought it'd be fun to understand

like the foundations of it. I think that's actually helpful when you're building a library

to like know the how everything's built from scratch and have that flexibility. So yeah,

I mean, it could, it could have been built on Elm visualization, I'm sure.

Well, we're on the topic of other libraries, would you be able to tell what the difference

is with Elm Vega?

Well, I think the major difference is that it's Vega is a is a configuration library

for JavaScript library, isn't it?

As far as I can tell, yeah.

Yeah. Yeah. So I think, I mean, I think I just like the simplicity of just like, okay,

build a chart in sg. And you don't have to hook it up anywhere. But yeah, I haven't like,

I haven't actually gone into details of Vega, the Vega library either. So I can't, I can't

really specify it. Yeah.

Yeah. I mean, once you once you have, you start building on top of something and at

a certain point, like I think I think I heard Evan speaking once about maybe considering

like trying wasn't there something about Haskell? Has, like Haskell JS or something like that?

Oh, yeah, like GHC, GHC, GHC, right. Yeah. And like, at a certain point, he realized

like, I can't, I'm going to be so limited by this, that the those little customization

points that I need aren't going to be there, because that's not what it's designed for.

And yeah, so yeah, I think that's been one of my fears is that like, if you don't know

a library really, really well, and you want to do the amount of customizations of the

library that like that I wanted to build, then right, I didn't want to run into like

a blocker or something. Right. Even if the user station looks like a huge and can like

manage like all kinds of scenarios. Right. And I mean, at least for me as a front end

developer, but who sort of is not that confident with like the really visual stuff. Ironically,

right? It's like, kind of a funny space of being like, I guess, like, sometimes people

call it like the back of the front end, you know? I think a lot of Elm people fall into

this category that they're more comfortable on the back of the front end. And things like,

like SVG, and like really, you know, sophisticated, like CSS animations and things like that seem

intimidating. But really, like SVG is like, like you said, like you're telling it, draw

a rectangle here. And like, yeah, we don't really, like, we don't really manually want

to do that. But it's like, you know, adding those building blocks in your library, you

don't really need to build on anything, you could just put a rectangle down.

Yeah, I think that was so what was so shocking when I first like started doing the library

was actually like how easy it was to actually draw a chart. Yeah. Because I've been so scared

of it. Because I was like, Oh, I don't know about this SVG stuff. Because I wrote it,

I've always used libraries for it. So it was definitely like, yeah, it was quite a surprise

to see like, okay, it's actually like pretty basic. And like the core of this library is

really simple, like a whole library isn't very big, really. So it was, I think, drawing

it has never been a problem. It's like the biggest challenge has been making the API

so that it's easy to interact with while having the breadth of people's use cases.

So I played a bit with Elm charts over the last few weeks. And the thing that I found

most difficult was to know what can I what operations can I use? Like I'm making a bar

chart, how can I configure this bar chart? What functions are available? I think I tried

to put that in the documentation in the API documentation. And but maybe maybe that hasn't

been sufficient. And I think that's also I mean, I kind of had a feeling that this would

be an issue generally because of the way the API is set up, which is also why I made all

those examples so that you should have a visual understanding of like how to make something.

Because I also think like, one of the things in charting world is that there is not necessarily

like a set vocabulary for everything. So I've just like, opted like for just like, okay,

like which one of these charts would you like? And then like, you can press on it and say,

okay, this is how you do it.

The examples are very helpful. And the terminology that you put at the top of the bar chart documentation

is also really, really useful.

I'm so glad to hear. Yeah, but I think as we as we discussed this morning as well about

this question about like, a small fix could be to like put the configuration directly

in the bar type instead of having it be opaque. So that would I will just do that.

Yeah, I'll try to come up with something but yeah, we'll see how that goes.

It's kind of a yeah, it's a little bit tricky to make it just right. But I think like, yeah,

lots of trade offs. Yeah, exactly.

I think that, well, I've shared my hot take on GitHub Copilot on Twitter, but I feel like

basically what I like GitHub Copilot I feel like is trying to do is it's trying to say

like, hey, here's like, let me use machine learning to figure out how to suggest something

useful to you. And I'm like, no, that's the wrong direction. Like machines are really

good at like, being proof engines that can say, all right, I've, I've cranked all the

details. And I know that these are exactly the three options that you can use here. And

yeah, that's what I want. And that's, I mean, an Elm gives us that in the sense that the

compiler can tell us is this valid or not, and you can, it's very statically analyzable.

But our tools haven't caught up to that yet to leverage that to narrowly, you know, narrow

down our options. And that's the developer experience I want. And I think that all of

the libraries in the Elm ecosystem will benefit from that when we when we get that sort of

tooling to, you know, for our tooling to be able to say, you know, for configuring your

bar chart, like, these are the only things you can do given these types. Yeah, exactly.

No, that would be amazing. So you want an Elm review copilot? That would be so cool.

If you want to build it, then absolutely. That's something that helps you write things.

It's something that tells you, hey, this is not good.

Think of how hot Elm copilot would be on Hacker News. People would be all about it. It's true.

It'd be so good. It'd be able to do so much, you know, it'd be crazy. The static versus

dynamic wars between machine learning. Yeah, I think I think that's just like so as such

a bright future to look forward to. It's amazing, because there's just like so many things one

could do because there's so much information available. This is going to be very exciting.

Yeah, yeah, it seems it seems like the innovation in the Elm ecosystem right now is kind of

ramping up. Yeah, I'm also so excited to like, I'm kind of interested in doing more like

editor stuff. I think that would be really cool. There's just like, there's so much one

could do. Yes. So yeah, we'll see about that. Unfortunately, I don't know anything about

editors. And which editors do you want to support? They're not very compatible, unfortunately.

Yeah, exactly. Yeah, I've been messing around with the try page yesterday, today. I'm just

like updating the styles. And then I'm like, Oh, what if I like make the error messages

so you can just like use the suggestions and the error messages by just clicking on it

and stuff like that. So I've been very excited about all the what you can do there. And yeah,

I'm just like, Oh, should I put Elm review in there so you can get the experience of

that as well. I was like, really, definitely like pulling it out of scope and I should

No, no, it's not out of scope. It's perfect. It's perfect. The only question is like, what

rules do you then add? Yeah, exactly. This is a lot of questions. But I think it'd be

really fun actually to add it because one of the things that I do think would be really

cool to do with Elm is just like what I think is missing is like that people get to actually

experience what it's like to work with Elm from just like you go somewhere and you get

the experience of working on a large project with all these Elm tools. Because I think

that's where it really shines. It's like when you have a tiny example, it's just like you

kind of can have it all in your head. So like the types are like, they're cool, but like

they're not like saving you the way that they are in huge projects. Look at how maintainable

my counter app is. Yeah, exactly. Exactly. So I think that would be cool to like showcase

more. So that's one of my what I've been thinking about as well. It's like I think I was with

since I've since I quit at Nord Inc. and I've been doing more like community work. I've

sort of had a lot on my mind as well like the whole PR world of Elm and stuff like that.

So like public relations, like just like how do you present Elm in the most like appealing

way or like so people understand what it's about in the best way? Just say it's delightful.

Yeah. Yeah, that covers it. The new elmlang.org definitely like presents a nice, you know,

image and like it does a good job like presenting it. It was definitely a nice nice overhaul.

Yeah. Yeah. Yeah. On that note, what is the official color of Elm? Because it used to

be green in my mind. Is it blue now? I think it is blue. I think that's a that's like the

that's what we're landing on over time. I think there's still like so I just I've made

the for the tri page I was making the theme for the light in the dark and I sort of like

okay we're gonna do the blue but I needed more color so I was like okay well I think

the orange still makes sense like it's good like as an accent color and then maybe like

a pink of some sort I think those colors go rather well together but I think Evan has

sort of like left the visual design just to me like I'm just like in charge. I think that's

a good choice. Judging by the Elm charts website which is absolutely gorgeous. Thank you. Yeah,

it's like you look at those charts and you're like how do you make charts look so pretty

like all these little like details like what makes these charts look so pretty it's like

some opacity and like some rounding on the bar charts and some rounding on the lines

and like it's so cool. Thank you. What are your secrets? You know actually Evan has asked

me that question before too as well and I like can't tell I think this is like building

like I just I've seen so many mocks and tried to build them and I think like I remember

in the beginning like we had a designer like I was working on a consultancy and the designer

would give us these mocks and then I'd make it and then I'd be like wait why is the designer's

mug so beautiful and my page is so ugly and I just couldn't I didn't understand what was

happening but I think it's all about my theory it's all about margins like margins and colors

like just like get the colors right to be soft enough to go with each other and just

like have the margins be correct but yeah I can't pin it down any further. Well the

margins are important that's for sure. Yeah yeah or just like have it be like harmonious

like a what's it called like a color scheme. Yeah yeah yeah but it's really difficult really

to pin down honestly I feel like I just mostly I just wing it I think it's just an intuition.

So basically if you want a beautiful chart just go through the account charts documentation

pick one chart and you're good to go. Absolutely. Or you can hire me to make you your chart

and I'll make it for you. That's the only way to get your intuition yeah. When I look

at these charts I and compare it in my mind to what what super ugly chart I would like

intuitively do if I just built a chart like the bar charts would not be rounded there's

like a nice little rounding at the top like you've even got these like bar charts that

are like rounded on both ends and they don't even have like a label on the bottom which

looks so nice and then like the lines are not just jagged lines they're like rounded

a little bit so things have like a little more rounding things have like a little more

opacity like everything has a little bit of opacity and a lot of things have like a little

bit of a gradient like none of the colors are like bold you know none of the colors

are colors that you could write by just writing a word in CSS yeah like red or black or blue

yeah exactly I think that those are all differences between what I would build and what you have

on the landing page so those are probably good design tips just like do a diff between

what I would do and what you did that's funny there you go design school now I'm very curious

to know what what colors are in your charts um if it's not red or if it's not purple it's

probably some hex code and yeah no it definitely is I actually spend so much time trying to

pick the right colors it's a very challenging space for me because you sort of need color

with enough contrast to each other while like still keeping them nice so you have to find

like a nice hue of things that are still because my my personal style is just like I like no

I was just basically no colors they're just like it just like white things maybe a little

green like if you look at my apartment has like three colors in it um it was like very

peaceful but I couldn't do you can't do that with a charts library you just have to have

colors I mean you can do it but it shouldn't be the default like if you want accessibility

you probably shouldn't do it at all so I spend a lot of time trying to find some colors that

like fit in nicely I think so yeah I hope hopefully I was successful I actually I almost

like pivoted into using the google colors like from the google color scheme but Evan

convinced me to go with my intuition which is very it was very helpful but yeah so how

do people get started with using Elm charts well I think all you really need to do is

just to install tereska slash Elm charts and import the chart module and from there like

if you're not going to do any customizations you can sort of leave it at that and just

say charts and just like do the basic like okay I want to axis I want to bars bars and

for a line or whatever but actually probably what I would really recommend and what I think

everybody does is just to copy one of the examples yeah yeah which is why that's so

important because that's just that's how people use things yeah yeah exactly yeah I think

also like what I've experienced he's about past two weeks I guess since I've published

it is that like people barely people don't even read the documentation from the api anymore

they just look at examples if it's not in one of the examples people don't think is

there so at this scenario where somebody was like oh like can I rotate a label and like

you can it's there's an attribute called rotate but I had forgotten to make an example for

it so they were just like wouldn't it be nice if you could rotate that thing and I was like

yeah I mean you can but I was like okay I'll just I'll just add I'll add the example you

know I mean you made the example so good that you get people excited yeah once you try it

out and then like the documentation yeah I think also like I mean I don't I don't mind

it actually I think it is especially for charts I think it is so to me at least a nicer way

to learn because you just you know what you want visually and then you can just go find

that so I think that was like I want people to use the examples and I do plan to just

make an example for like every single thing you could do basically that would be very

cool yeah yeah I think I'm already like fairly close to it obviously I can't do combinations

but because that would be an insane idea but yeah so basically if we yeah like you've you've

got all these like built in colors and things and if we if we do that then are we can gain

a little bit of your design intuition right yeah you've like built a little bit of it

into some of the defaults yeah I've definitely tried to make the default chart that you build

fairly nice that's I really like that because I mean I don't know if something gives you

the tools to like make something look nice but it's sort of like yeah you can make something

look nice if you like try really hard yeah yeah exactly that's not a good experience

because it's finished it's not gonna look nice yeah yeah I think there's also there's

there's like two different user groups who'd end up using this charting library and like

one of them is like just like developers like you and I who are like doing home projects

or like side projects and either charge to visualize some data that we collected and

so there's no designer on the project but then there's like the other side where it's

like like I was building this originally for it was like a consultant consultancy job where

there was designs and you knew these charts and stuff like that so it needed to be like

very specifically looking this way and so you sort of need to it can't just be the default

pretty you need to customize everything through like to a very high level which is one of

the wilder things to do is just like you need to be able to round everything and like because

I've never thought of actually like rounding the bottom of the bar chart but I just realized

that that's people need that some people need that in their design so you just need to make

that an option yeah some people really need it like this chart is totally not gonna work

if the buttons aren't rounded exactly exactly and it's it's actually funny because like

you could do some like fairly irresponsible charts using the feature where it's like rounding

it too crazy I don't know you can do some visually tricks like where you make your bar

like because there's all these like interplay between volume and position so like if you

have the rounding like it might look smaller than it actually is and like just like tricks

on your brain some opacity yeah yeah exactly so you can like highlight certain things right

yeah make your competitors product in an ugly color yeah could you customize the bar to

be like a squiggly line like a snake that'd be hilarious I mean technically you can you

could make that if with the customs yes and you can still hook into the events thing so

it's you could do it but it's definitely not recommendable but yeah so we briefly mentioned

the like events API but can you can you walk us through in a little more detail like so

you can you can get like nearby elements with these events and then interact with them like

what what does that look like yeah so I guess like a basic the most basic interaction you

could do on a chart the classic one is like okay if you hover over a certain element then

you could show tooltip or whatever or like you can register that you're over that element

but then there's also like okay like do you want to okay how about you want to know if

you're within 10 pixels away from that element and that's where it starts getting tricky

or you could do like okay I want the nearest element to where my cursor is so that's the

sort of stuff that it makes easy to do and like especially also then like when you start

working with groups of elements like I alluded to earlier like what if you're not only looking

for a single bar but also like a group of bars or a whole like bin of bars so you can

do like a really high level of customizations as to what elements you're looking for on

your chart based on your cursor position yeah right and then you can get messages from those

events so you can update your model however you need to to present information yeah so

that's actually one of the things that I've been that I've tried very hard to make possible

is that like so that you know everything about the thing that you're hovering so like what

color it is what the exact position of it is what data it came from like so that you

can have like very advanced tooltips and you can use that information other parts and like

so it doesn't only belong to the chart but you can if you have a table below you can

also use that information in your table so yeah that's been a big part of making the

events api's like me picking all that information available to you as well and on

those events are just regular elm events yeah yeah so you can have when you click on a bar

you can have open a new page you can do whatever so that's very cool yeah yeah there's actually

yeah technically there's nothing fancy about it it just like it's all about like collecting

the information and giving it a nice format which has been tricky to find out exactly

what that format should be yeah i really like that attributes design and so the the events

like like we're familiar with with like on click handlers and elm it's uh it's just an

attribute and yeah it feels really natural thank you i'm so glad to hear that yeah i

don't think i've seen that really in a lot of places as configuration it's really interesting

yeah i think i don't remember the exact history in the past either but i think that's been

a big part of where you'd sort of like run into trouble with a lot of the libraries that

i've been using for example from the rack world i mean it's a long time ago since i've

used them so i don't know if they've improved um but like doing more advanced interactivity

like this so like find the nearest thing find groups of these things and then like just

like have it not be complicated or just like a one liner and yeah so i really tried to

make that experience as uncomplicated and intuitive as possible right yeah right because

there's you have to build those concepts as first class citizens to to expose them there's

no sense of like nearest things it's just yeah exactly rectangles on a exactly yeah

i think maybe that's now that we were talking about taglines earlier i think maybe one of

the things i've also wanted to put in there which ended up being just a header was like

this idea of like intuitiveness and this declarativeness i just want you to like describe what chart

you want like i wanted to when you like when you must move i wanted to find the nearest

element and then i wanted to have these elements and like have it be also like so you look

at your code and it's like visually like it explains what your chart is so that's what

i've sort of been my inspiration and goal yeah i mean just reading through an example

it's very clear what everything will do that is very nice that makes me so happy to hear

we have um at work we use vega and we have vega specifications which are hundreds of

kinds of codes and there's a lot of computation in there and a lot of properties that are

probably not well set yeah this is jason yeah i'm hoping it doesn't it isn't but you never

know yeah and it is really hard to to figure out how to do some things yeah and i never

even got to the part where we do events yeah i mean i'd be curious what kind of requirements

you have for your charts and stuff like that and hear more about it so that could convince

you to use elm charts so are there any other resources you'd recommend for people getting

started is it i mean the the basically elm charts.org and then never look at the documentation

site is that what you'd recommend yeah yeah i actually i think that would be the way to

go definitely like utilize um the examples that are there and they should cover almost

everything and yeah i mean you could resort to the api documentation if you really need

to but yeah i think most people have actually made it really far um just looking at the

examples and now if people go back and and watch your your talks that you've given about

like these charting ideas is it is it basically going to be like the like you've changed your

thinking so much that it's history at this point right it's not i think it is like your

your prescriptive chart idea you've sort of done a 180 on that yeah yeah i mean i think

like to some extent like as we also discussed i think prescriptive libraries would be nice

to have but i think there was um as i've become more like uh like i feel responsible for like

the elm community like ecosystem in a way and my goal as like through my consulting

as well is just to like fill out those holes and like make it as nice experience as possible

so that's why i wanted this library to be more flexible because i wanted to cover a

larger breadth of people and use cases and just like yeah and so i think like if somebody

wants to make a prescriptive library like that'd be great i love those as well so i

think just yeah like there should be a library that could cover the a larger um set of use

cases and pie charts just to be clear a prescriptive library would only allow a few things is that

yeah or like just to make um yeah like make things yeah for example like not do pie charts

or uh make axes in a certain ways like if you read ever tough these books like he has

a lot of opinions about what you should and should not do which i think they're really

great and they're really good to know and they do makes for some really beautiful charts

but i think no no shade to edward but i think there's also use cases for the things that

he's dis recommending so yeah i think it's also it's fun to be creative with visualizations

like it's it's like you're describing your data and your data might be really unique

and it might be like you might even come up with new ideas for how to present yourself

and you could be the new edward tufty out there even i mean sometimes you do need those

snakes yeah yeah exactly like maybe there was a really intuitive some data that really

needs snaky bars like who knows we just we just don't know what's out there maybe you're

showing like sales at a pie company exactly you really need a pie chart yeah if nothing

else it'd be good for jokes you know and i think that's an important as like this important

to have in the ecosystem as well definitely so yeah well thanks so much for for joining

us to talk about your your new library teresa and congratulations on the release thanks

thanks for having me and congratulations on your release thank you well uh it's uh it's

several weeks ago uh people listening now but that's okay we snuck in our our episode

release on the same day so i'm happy about that that's good well thank you so much for

having me on it was so much fun and i really enjoyed our conversation our pleasure yeah

you're welcome back anytime thanks and you're in until next time until next time