Ian Johnson

Ian and I talk about his long history of building up the d3.js community, his day-to-day working at Observable, and the value of breaking projects down into small pieces.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack D3 Masterclass with a single-time purchase.

Thumbnail for the \newline course Fullstack D3 Masterclass
  • [00:00 - 00:10] So today we have Ian Johnson on. He's a data visualization developer at Observable, and he's been a big part of the D3JS community for a while now.

    [00:11 - 00:18] So Ian, if you wanna introduce yourself and talk about your history with the D3 community. - Sure.

    [00:19 - 00:28] Yeah, I mean, it's actually been almost 10 years. Well, D3's been out for, will have been out for 10 years in February, 2021.

    [00:29 - 00:41] And I sort of stumbled onto it by joining a startup in 2011, where they were like, "Hey, we wanna build some visualization tools. This new library came out.

    [00:42 - 00:45] Can you help us?" Let's figure it out and build stuff with it.

    [00:46 - 01:05] So I got pretty lucky there in terms of, it's turned out to be a great library and a great tool to use to make visualizations all that time. I think though, I remember back then, the main way to learn it was by asking questions on the mailing list.

    [01:06 - 01:20] And I spent a good six months banging my head against the desk trying to understand the enter update exit pattern. And we actually started a meetup because it was so hard to learn.

    [01:21 - 01:41] We started the SF Bay Area meetup as like 10 people getting together for coffee to talk about D3. And so been part of that for a long time as well, which has been a great way to, well, see what other people are making and learn from other folks.

    [01:42 - 01:43] Yeah. - Yeah, yeah, I love that.

    [01:44 - 02:03] And I went to the D3 Unconference, conference or non-conference last year. - How have you seen the community grown community grow over I guess the past decade?

    [02:04 - 02:11] Because I feel like the 10 people in a coffee shop to the conference last year, it's really grown a lot. - Yeah.

    [02:12 - 02:20] Yeah, no, I mean, the community is huge. I mean, D3 is one of the most like, you know, starred or whatever, you have projects, open source projects out there.

    [02:21 - 02:57] But the community of people sharing and making work has grown a lot over that time. I think it's really interesting to see, so the Unconference came about as a recognition that, well, there were some big data-vis conferences, but what was really nice about the meetups was chatting with everybody and like, the one-on-one conversations, we did go to nice conferences, you know, between the sessions, you get to have spirited discussions about how people did things or that kind of stuff.

    [02:58 - 03:05] So we wanted to say, can we have an event where that's all we do? And we also purposely limited to 100 people.

    [03:06 - 03:21] So every, we've done like five of them now, last year was most recent and we always keep it to that size to where it's not, you don't feel overwhelmed. You can't quite meet every single person, but you feel like you can talk to folks.

    [03:22 - 03:40] You can always reach someone you want to talk to. And yeah, so I think that, you know, one thing I've also appreciated by the D3 community, both the in-person meetups, the conferences and conferences, and online, is how I would say like humble and welcoming people are.

    [03:41 - 04:05] I think there's something about it, about D3, where it combines design, software engineering, data analytics and science, all these disciplines that it's hard enough to be an expert at any one of those, to like expect to be an expert at all of them is pretty much impossible. I mean, there's people like you that make amazing things, right?

    [04:06 - 04:17] But you also know that like you've learned a lot from folks in the community and you partner with people I think, right? And like, it's just impossible to know all the things about all the things.

    [04:18 - 04:39] And it just, I think, so nobody comes in with like, you know, better than thou attitude. And I think that that's always been really encouraging for me as someone who like at this time and doing it for so long, like there's a lot of D3 stuff I know, but there's way more D3 stuff that I don't know.

    [04:40 - 04:58] Like I'm still constantly learning from you, from folks like Shirley and Nadi, right? Like just people making beautiful, impactful visualizations, always combining new techniques and pulling on stuff from these different disciplines.

    [04:59 - 05:12] Like it never, you never stop learning. So while that can, you know, I guess I could be imposing in one way in the other to me as inspiring because there is no ceiling.

    [05:13 - 05:22] - Yeah, yeah. I think you hit the nail on the head. It's just such a great welcoming community with such a diverse set of people.

    [05:23 - 05:28] Like I think you have a CS background. I have like a psychology neuro background.

    [05:29 - 05:57] There's people who are from research backgrounds, people who are from, what's the weirdest background you've heard? - The weirdest background, I mean, I know there's people that are, I don't know about like school teachers, you know, designer, like I've noticed that like a lot of designers I've met that I end up doing database projects, they all have a different background from like design, right?

    [05:58 - 06:13] So like anthropology or, yeah, there's, it's really cool. Like people come in basically wanting to express some data, like some patterns or something they know about, right?

    [06:14 - 06:26] But in this new way, like using programming to be able to automate or make it interactive or, yeah, bringing a different perspective in, right? And so you get so many different perspectives.

    [06:27 - 06:28] It's really cool. - Yeah, yeah.

    [06:29 - 06:32] And we're always learning from each other. And I think that's so great.

    [06:33 - 06:41] I guess kind of related. So you've been doing data visualization for almost a decade now or maybe a decade now.

    [06:42 - 06:50] What is the strongest motivation for you to keep visualizing data? Like what's the best part about it?

    [06:51 - 07:08] - I think, I mean, the, yeah, the strongest motivation for me is, is trying to gain a better understanding of how things work. So I feel like data is the most direct way to see what's going on in a complex system.

    [07:09 - 07:28] And so a lot of the work I've done over the years has been in trying to understand complex systems. So it could be like large scale computing could be elections and like, or COVID, that kind of stuff, right?

    [07:29 - 07:35] It's like anything where there's a lot of things going on. It's really complicated and a lot of things to consider.

    [07:36 - 07:42] But we also have good data on it. I feel is a prime candidate for applying visualization to.

    [07:43 - 07:59] And the more I do it and the more I see people do it, the more ideas I get for ways that it could be done better. And so to me that, yeah, it like continues to motivate me.

    [08:00 - 08:27] - Yeah, it seems like it's a design challenge. There's enough constraints that you're, there's just always like a constraint space to work in. Like if you're working with a specific data set, it's not just design a button or design like a date picker, it's which I guess has its own constraints, but like each data set you work with, it's gonna have its own constraints, especially if they're really complicated, like the election data sets.

    [08:28 - 08:37] I feel like every election we have new data is from all the different new sites, which is fun. And we never feel like we've solved it, right?

    [08:38 - 08:45] Like it's always kind of evolving, which is like a fun journey. - Absolutely.

    [08:46 - 08:56] Well, and I just wanted to add to that, that I feel, you know, data vis is also, it's a lot of, it's about communicating, right? So you're trying to express something that you see, right?

    [08:57 - 09:26] Like maybe it's a pattern in that system or you're trying to, first you might be trying to understand as the creator of the vis, like trying to work with that data and understand what's happening, but once you've learned something about what's happening, trying to communicate that to other people is another challenge, right? And you could write a paragraph, you could write an essay or you can make a static visualization, you could make an animated or an interactive visualization.

    [09:27 - 09:42] And so to me, that's like, yeah, there's just so much opportunity to figure out how to express that understanding. And it takes a lot of creativity to do it well or do better each time.

    [09:43 - 09:46] Yeah. - Yeah, totally.

    [09:47 - 09:51] So you work at observable. What does your day-to-day look like there?

    [09:52 - 10:00] - My day-to-day observable is, it's kind of interesting. In most days, I'm making some kind of notebook.

    [10:01 - 10:35] So whether I'm working on more, like, I'm helping document various aspects of D3 or make examples of features for observable or like, you know, also doing this live stream where we try to challenge ourselves in various ways. It's interesting because like, for me, that's the like, the best way to move forward is to make small things often.

    [10:36 - 10:52] Like, I feel like when I've been able to do that in the past as well, is how like, my skills have grown the most and the fastest. And so I guess that observable, we're trying to build a tool that like, enables that, that helps you think with your data, right?

    [10:53 - 11:09] So I guess I'm just happy that I get to do that every day. Like, try to make a small pieces, put those pieces together, fork other people's examples or data sets, push those forward.

    [11:10 - 11:18] Yeah, that's like a good portion. I guess the, I'm also helping part of, I mean, observable supporting the D3 community.

    [11:19 - 11:35] So I'm helping organize. Like, it's not an observable thing, but just like our, well, now that we don't do in-person meetups or in-person conferences, trying to help advance the D3 community online.

    [11:36 - 11:47] So that maybe we're trying to do more events online as well as improve the, just the way that you access and learn about the D3 online. Yeah.

    [11:48 - 11:52] I was thinking of that aspect, yeah. Yeah, you just, you love organizing D3 things.

    [11:53 - 12:01] (laughs) Yeah, yeah. I mean, from my perspective, like the more cool fizz I get to see, the happier I am.

    [12:02 - 12:21] And like, there's a lot of ways, I feel that if you can just make it easier for people to do something, like either make it easier from the share, easier for them to learn, then they'll get further along in their journey and share. And you share, be able to share their more unique perspective, right?

    [12:22 - 12:46] And I feel like when you're starting out, it's a little harder 'cause you have to figure out how this stuff works and you may feel like I'm doing something, it's the first time for you, but you've seen like really cool stuff, people making like really amazing things out there, you wanna get there. So just accelerating that as much as possible is definitely motivational for me.

    [12:47 - 13:05] Yeah, I love seeing observable examples because first of all, you know the code is all there. So if you wanna dissect it and figure out how it works, all you have to do is open the link and kind of look at how the different pens, maybe they're called, are put together.

    [13:06 - 13:27] And then the remix factor is really fun where you're like, I wanna take this person's legend and then this map and kind of put them together. And it's just really easy to work on little parts and then combine them together, which I find really valuable because otherwise you're like, oh no, I have to make this whole visualization.

    [13:28 - 13:38] Like I wanna do this big thing and then you're sitting there and you're like, this is gonna be a lot of work, but it's nice to like have not a blank sheet of paper to then edit. Totally.

    [13:39 - 14:02] Yeah, and to sort of add to that a little bit because I 100% agree, I found many times in doing my day job type visualization work, especially in the past, like we're in big companies. It's like you're building a code base, you have all these like ways that you do it in that code base or in that project.

    [14:03 - 14:13] But let's say you see something somebody makes and you're like, that's a good idea. I would love to have that technique but for my data and my project.

    [14:14 - 14:36] What I've found over time is that, it can be tempting to try to copy, let's say, often this happens with a D3 example, you wanna copy paste that example, bring it into your environment and make it work. But in fact, I feel it can be much more effective to like understand that what that technique is and what it's doing in that context.

    [14:37 - 15:06] And so that when you go to do it in your project, you're not trying to like fit a bunch of things, somebody else decided into how you've decided to do things, you're just like, okay, like I wanna be able to do a crazy SVG gradient based on the data and this layer of my thing. It's like, there's so many technical moving parts just in the example that if you can isolate to like, I tweaked it there and I played with it and I like how that works.

    [15:07 - 15:17] Let me just take that little piece and bring it into my bigger project. I found that to be really valuable to be able to do that, which is kind of newer with observable.

    [15:18 - 15:43] - Yeah, I really like that. I think something at least as D3 old timers are familiar with is a lot of us learned by copy and pasting entire code snippets for the whole chart. And then you might not even understand all of it, but it's in your project and then you have to maintain it and you don't exactly understand how everything works.

    [15:44 - 16:06] In the course, I kind of split it up into, I think there's a seven step process of like, get the data, like create your scales, create the wrapper, that kind of thing to like kind of break it up into different parts. So I think anything where you're not like, here's the chart code, look at it.

    [16:07 - 16:15] But instead you have like these pens where you're like, this variable is created this way. I think it can be really helpful, especially when you're first starting out.

    [16:16 - 16:26] - Absolutely. - Being overwhelmed. - Yeah, I really like that because looking for me also, I guess I have noticed, you know, I've given a bunch of workshops in the past and talked to a lot of meetups.

    [16:27 - 16:44] And I think it's really helpful when folks start to look at it more as a process rather than like a single output, right? So it's like the examples or even, you know, polished visualizations that people make, it makes it, it can make it feel like, oh, that's a thing.

    [16:45 - 17:06] I want that thing rather than looking at it more like, oh, there's a bunch of different processes, a bunch of pieces to this process. And I can like learn a new data processing technique or I can learn about a new utility function that makes it easier to do the data part or getting the data part.

    [17:07 - 17:26] And that's different from like a new layout or a new, you know, SVG technique or something. And so when you can see that and you can break things down, yeah, you just end up a lot less confused when something small changes, but everything disappears or breaks or whatever, right?

    [17:27 - 17:31] Which can definitely happen. (laughs) - Yeah, yeah, way too often.

    [17:32 - 17:40] I think this is really great. I love these tips for, you know, breaking things down.

    [17:41 - 18:00] Is there anything else that you think would be really helpful for someone just starting out with D3 to know either about the library or the community? - Sure, I think, you know, when D3 has a lot of stuff in it, there's a lot of modules, a lot of functions.

    [18:01 - 18:13] I think, I mean, you've made an excellent visualization and tutorial to go with it. So what I just try to always reassure people that like, well, you don't have to know all of it at once.

    [18:14 - 18:35] You don't have to know even a good fraction of it to have it help you. And I tend to just encourage people to do like smaller projects and examples to start with, then they even think they should do like, try to figure out what the smallest thing is that you can make progress on.

    [18:36 - 18:56] Because it's especially starting out, there's just too many, like you can easily balloon your scope and get frustrated or stuck. And like, even today, even after doing this for, yeah, pretty much 10 years, I do, I get stuck and I ask myself, like, how can I do like a smaller step?

    [18:57 - 19:03] Like what is a way I could break this down and just tackle like a smaller piece? - Awesome, such great advice.

    [19:04 - 19:06] Thanks so much for taking the time today.