Teaching a Semester of D3.js | Hacker News Reader

Teaching a Semester of D3.js

blogger.ghostweather.com

188 pointsbootload31 comments

I followed the link to some slides created by the Author at: http://ghostweather.slides.com/lynncherny/deck#/

This is not a direct criticism of the Author, but what is it with the penchant these days to use absolutely minimalistic, flat interfaces with zero help on how to use the interface?

I blame Google for starting this and all the other sheep who blindly follow them without actually asking what an interface is really meant to do. They have this insane desire to trend towards an interface which ultimately will consist of a slightly beige-grey background with not a single other thing on it. Google et al, seem to be on a never ending quest for an interface that is both so simple, it is practically brain dead and yet requires advanced degrees in "find the hidden button that does something" and "try separate the interface from the data being presented".

Microsoft have picked up the torch and are running with it with unbridled enthusiasm. Their new Office interface is a master class on how to make it as difficult as possible to determine where my data ends and the interface starts. All done in a tasteful shade of death-bed grey.

Hilarious, but you are right. And actually, while we're throwing blame around, Apple gets some credit for this problem as well. The "invention" of "flat design" that was whole-hog adopted in iOS 7 has left plenty of room for the problems you describe. It becomes less clear what is visual content to consume, what is a control to interact with, and what is actually both. I think all companies decided a while back that a computer interface can be like a magazine page. Except you don't press buttons on a magazine page, so it's not a good strategy a lot of time (in rare cases you see it handled well).

> Microsoft have picked up the torch

They did it several years before Google with the Lumia UI.

> what is it with the penchant these days to use absolutely minimalistic, flat interfaces

It has dragged graphics design costs to lows that have never been seen before.

It used to take weeks to design a proper icon set for an application, especially on OS X or iOS, where users were particularly wary of how applications looked. This is a drag, especially on mobile, where most people don't want to pay a real artist too much to build them a good-looking UI. The trend towards flat and simple is a blessing. You can pay a few dimes to someone who can Photoshop, and he won't screw it up too hard.

I'm not deriding minimalism. Rendering, in a work of art, only that which is essential, is so hard and so beautiful that only few artists manage to do it.

This crap is just cargo cult minimalism.

I'm not sure who started it. I used to work in a place where people thought flat, white and grey and no indication on how to use it was the epitome of design, and they worshiped the ghost of Steve Jobs.

What interface are you talking about? Something in the slide content? The interface for the slides themselves?

If you are talking about the latter, I think it's from reveal.js

If you hit "?", it will give you shortcuts.

How much of an interface do you want on your presentation app?

There's a "?" button on the screen?

No; if you push the questionmark key; it's the same hotkey that powerpoint, for example, (the main proprietary alternative to this web-based app) uses when you are giving a presentation.

I suspect this is exactly the kind of thing the OP is complaining about.

but what is it with the penchant these days to use absolutely minimalistic, flat interfaces with zero help on how to use the interface?

It's a slideshow. It is intended to be operated by the presenter (who knows the shortcuts) and for those watching it to be able to focus on the content, not the UI.

There are legitimate complaints to be made about minimalistic interfaces, but IMO this is not one. It's a situation where you want to deliberately hide the interface.

i keep wondering - whether the combination of ES6/Typescript + immutable.js + lodash + d3 + asm.js makes for the true next generation of R like analytics tools.

The way that Periscope.io works is probably indicative of the direction of a JS based analytics/prototyping framework.

I suppose the first step needs to be a Jupyter notebook in ES6.

For me, the first step would need to be a good tabular data library, like R's data.frames or Python's Pandas. Doing any kind of subsetting/selecting/slicing/joining on nested objects is a nightmare.

You should check out crossfilter: http://square.github.io/crossfilter/

You import your records, define dimensions, and can then slice and dice your datasets to your liking.

Very impressive is dc.js, which adds some magic on top of crossfilter and d3 to build interactive charts.

https://dc-js.github.io/dc.js/

this is brilliant! thanks for this.

Incidentally, it seems my entire tech stack is running on Square these days. Retrofit, Picasso, okhttp, dagger, some rxjava libs.... and now crossfilter.

> the true next generation of R like analytics tools.

Dunno, but right now, today, you can use Plotly (which itself uses D3.js) with R, Shiny and RStudio. It's pretty awesome :)

As much as I admire D3, it using the DOM as its data model has made it difficult to work with (for me at least). I've actually had a much better experience using SVG and RactiveJS. It's animation/tweening of property changes is very handy for designing visualizations. http://examples.ractivejs.org

I was coming in to mention Ractive actually. Designed by the team at the Guardian for easy data vis by non programmers. I've found that teammates who look at it pick it up in about 30 minutes. All your have to do in a course is teach the HTML and CSS and Ractive pretty much makes the interaction easy

there is also Machine-Learning-In-The-Browser which attempts to link Emscripten+llvm+lapack in the browser

https://github.com/software-engineering-amsterdam/MLitB

https://github.com/software-engineering-amsterdam/MLitB/issu...

We took a different approach on how to engage end-users by designing our own DSL with a compact pre-processor (template engine) for basic control structures:

http://apps.axibase.com/chartlab/14cf1974/3/ - Basic example

http://apps.axibase.com/chartlab/2111a2b7/2/ - Inheritance and Iterator

http://apps.axibase.com/chartlab/e8635882/10/ - Time series Transformations

http://apps.axibase.com/chartlab/2ef08f32/1/ - Composite

html/js/d3.js is prominent but not exposed. Users still have to learn some basic syntax but we really wanted to give them an alternative to UI controls (select drop-down, click) and GUI editors which I find restrictive and limiting.

I hope this catches on. Just the right level of abstraction. Easy to learn, yet feature rich.

"this course was meant to be on interactive data visualization"

So the best way to do this was to teach journalism students how to program, how to program for the web, how to program with javascript, how to program with third party libraries, and finally how to program with the third-party library d3.js?

I feel like this is just an extension of the thought process "everyone should learn to program because learning to program makes your life better".

I sincerely appreciate the write-up and will definitely be coming back to this blog next week to see the students work.

Ignoring how important interactive web visualization has become to journalism (fivethirtyeight, NYT, Economist, etc), its very difficult to claim a university level course which likely is an elective or has alternative courses can be prescriptivist. This seems like an extension of the thought process "we should make opportunities and tools available to people if said tools can help them" and I'm glad people are doing that.

Math is hard, yet we require everyone to learn basic math in school. Programming is hard too, but there is a fair case to be made that it too should be part of the basic curriculum. Just like with math, most people don't have the talent or drive to reach a high level of skill in programming, but it would still be valuable for almost everyone to learn the basics.

I agree with general sentiment that teaching journalists programming is not a realistic option - not only is it time consuming, but might also simply not workout for people who chose to be journalists. It is a humanitarian area of knowledge, after all, not technical. Of course, some might have affinity with programming, but generally speaking (from my experience at least) young journalists won't appreciate the idea of extra class where they have to learn programming.

However I believe infographics and data visualization specifically are important when trying to convey densely-packed information so it has to be taught journalists in some form. They should know that given some data they can pick certain type of visualization that would work well within the article.

I think some general course on data visualization without jumping into programming would work fine - explain what data visualization is, how it is done, what kinds of data could be used with it, what kinds of representations of data are available and so on. Plus share some resources where people can view various visualization samples.

I like it because it gives the journalists a vocabulary and a firm sense of what can be done, even if it ends up being assigned to someone else for implementation.

I think you are underestimating the importance of a shared understanding of technical possibilities. Even if those people are not going to use visualizations in their own daily work (and almost all won't), it still enables them to reason about it much more creatively and communicate what they would like to see with their more spezialized colleagues. For example, the NY Times website has shown a stunning amount of great visualization in recent years. This might not have been possible without the people who tell the stories being able to imagine how to combine it with visual additions.

I think this is something that goes beyond the combination of journalism and visualization. It's literally like learning a common language.

"Because the general practice of learning D3 in the wild is to take examples and modify them to fit your own data, I wanted to support that in my class."

I like this one a lot. When I am teaching data science, I often use data which some errors I do know.

I think that we need more of learning on real examples, not polished ones.

> For some reason, using a server really stumps new web programmers.

With Beaker you can program your client and server all on one page in one document. It makes working with D3 really easy. Here are some examples:

D3 JS and Python: https://pub.beakernotebook.com/#/publications/560c9f9b-14e6-...

node client and server: https://pub.beakernotebook.com/#/publications/560b4be1-2d91-...

I thought it was great that you brought up debugging as a specific pain point, especially in the context of beginning programmers. I teach a semester-long class on programming iOS apps to journalism majors, and debugging is a really complicated topic once you get outside the command line.

I usually take the opportunity to explain what's going on when students think their iOS app has crashed after inadvertently setting a breakpoint (it's very easy in XCode to put one in) to show them that they can now see the state of the running app.

That article reminds me of http://blog.tagesanzeiger.ch/datenblog/; these Swiss guys are trying to copy the "datablog" http://www.theguardian.com/data. I think the tagesanzeiger.ch guys make even better work sometimes and they make heavy use of D3. (btw. if you look for a job in Zurich, I am a tech-recruiter)

This is excellent Lynn, I'm already following your repo and I love the order in which you board the topics.

Reply on news.ycombinator.com