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


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.
Yeah, yeah.
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 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 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