Think I might be out of my league...but wow is this stuff cool!

1

Hi guys,

First, hats off to Mike Bostock. I’ve been trying to learn about data visualizations and it’s like all roads lead back to a lot of his work. The interactive data visualizations and the way they flow are like poetry in motion!

Observable and D3 are both very impressive tools, but I have to admit it feels a bit like Plato’s cave. I’ve been chained to wordpress for the last few years so I’m not sure I’ve got the foundation to just dive into Observable. A lot of the concepts, even with the tutorials, are like reading Greek to this noob.

I guess I should start by describing what I hope to accomplish, and then maybe you guys could help point me in the right direction. I’ve got a business that instructs entrepreneurs on how to start a brewing company - businesses like microbreweries, brewpubs, cideries, meaderies, etc. I’ve been doing it for about 5 years now and really enjoy the work (how could you not like working with beer? :slight_smile: )

I’m trying to enhance what I offer clients, and a big component of that is the research arm that I want to build. I want users to be able to source information (like local demographics and economics) from various APIs (like the census/open graph/etc) all in one place to allow them to build a business plan easier than ever. I’ve been able to successfully pull down the data from various APIs, and now I’m looking for creative ways to display it. I love the interactive and fluid appeal of D3, so I’ve just started to dig into that. As for my own background, I’ve been coding in a variety of languages for years, but rarely from scratch. I guess you could say I have amateur level knowledge of html/php/mysql/javascript/jquery/etc.

I think my biggest problem is I can’t figure out what framework or platform can meet all my needs. I started with bootstrap, then went to wordpress, then to javascript, then to jquery, then nodejs, then D3, and I’ve just landed here at Observable. It kind of feels like I could use more of a foundation in the basics that would ultimately lead to the fully interactive data visualizations shown here at observable. At this point, I’m not even sure how to export the code that I write here to a usable format.

I think ultimately I’d really like some research components built into my site that are similar to what you would see at an areavibes.com or maybe city-data. Something that would allow the users to view data rich graphics and figures to help them research building a brewery.

I know the basics of javascript and jquery, but not much beyond that when it comes to javascript and the various frameworks and libraries js has available. JSON is pretty self explanatory, so I can handle json files. If you guys were me, where would you start. Being able to code blindfolded w/ standard js, then maybe move up to D3…or is observable user-friendly enough that it should eventually click - even with a noob this thick?

Thanks!

2 Likes
2

Hi, I started learning JS on Observable a few months ago, so I can definitely understand where you’re coming from. I personally found going through each of the notebooks in the “Introduction” collection, (very slowly at first) extremely helpful. For instance, see the tutorial notebook “Downloading and Embedding Notebooks” for how to “export the code that [you] write here to a usable format”.

Of course, I had (and still have!) many other resources open as well, such as the Mozilla web docs, Mike Bostock’s essays on d3, various random stackoverflow pages, and basically anything else that comes up in google when I (frequently) don’t know what I’m looking at.

I find that I learn best by diving headfirst into things I don’t understand and messing around with them, so I’ve also learned a ton just by finding cool visualizations on the web or on Observable and fooling around with their source to see how they work. If that sounds like you, then you might like this list by @fil of cool notebooks.

I can’t give particularly sage advice as to what specific frameworks to use since I’m not too experienced myself. If I were you I would start making some prototypes, seeing where I get stuck and then re-evaluating from there.

Good luck, and if there are specific things you get stuck on, feel free to ask on this forum!

2 Likes
3

Obviously there is a heap of great learning material on the web already, but if you don’t mind learning from books I’d recommend Interactive Data Visualization for the Web. It’s targeted at people with exactly your level of familiarity with data visualisation and programming.

I also found this introductory course on egghead to be helpful if you like following along to screencasts.

Good luck!

2 Likes
4

I do love sticking my nose in a good book…seems more forgiving to the eyes, so I’ll definitely check it out. I’ve also found the various courses like lynda/treehouse/etc very helpful as well, so I’ll check out your recommendation on egghead as well. Thanks!!

5

Hi bg,
Thanks for the resources. I’ll definitely add a few of those resources to my bookmarks! I think I’m a lot like you which is encouraging. I’ve always enjoyed going behind the scenes using google’s console to see how websites tick and tinkering.

I guess my issue is I keep playing musical chairs with various languages/frameworks/libraries - maybe over tinkering, lol! I’ll get started w/ some new code, try to take good notes to reference, and have the material stick. Of course then I get distracted by the next bit of code that looks like maybe it’ll be more applicable to what I’m trying to build, and by the time I go back to the code I was working on before…I’ll remember 10% of it. I’ve tried shifting from paper notebooks to using one note to make everything easier to keep up with, but we’ll see how that goes. Ironically, the only thing I’ve tried where I’ve really had any success retaining more than bits and pieces of any new code is when making some cheesy video tutorials. Trying to teach others and explain the logic behind the code really helped me gain a good understanding of jquery. Of course, doing that for everything just isn’t feasible.

I really love what D3 can create, so I’ll continue trying to push forward with that and basic js. Since observable makes it that much more accessible, I’ll continue pushing forward with those tutorials as well. :slight_smile: Thanks for the tips bg!

1 Like