What we doing here?

This is a course about making data-y, graphics-y things for the internet. We are going hard on the future, here.

Where is “here?”

Jonathan Soma: js4571@columbia.edu, @dangerscarf

Spring 2012, Columbia Graduate School of Journalism

Tuesdays, 2:30-5PM

Zoom office hours available via calendly

Syllabus

Week 1: HTML/CSS build systems

An introduction to build systems, automated pipelines for getting your content on the web. We’ll use pandoc to produce web pages from Jupyter Notebooks. Customization comes from HTML templates and a CSS framework or two. We’ll also leave the warm embrace of pip for the Wild West of npm.

portfolio-autopublish will give us a hand to update our website whenever we push a change to the repo (courtesy GitHub Actions). To make autopublish do what we want, we’ll create a few issues and make unreasonable demands of the repo owner.

Output

• Customized portfolio website via autopublish build system
• Project walkthrough/tutorial page sourced from a Jupyter Notebook

Links

• pandoc, a CLI tool to convert between different document formats.
• A Twitter thread on link rot
• CSS Frameworks/etc:
  • Bootstrap, a common CSS framework
  • Bulma, a simpler and less popular CSS framework that I love
  • HTML5 UP!, one of ten million sources for webpage templates
• A big list of static site generators, including:
  • Jekyll, a Ruby-based static site generator
  • Hugo, a Go-based static site generator
  • Pelican, a Python-based static site generator
  • Gatsby, a node-based static site generator
  • GitHub Pages, a Jekyll-based static site generator
• Our personal static site generators:
  • portfolio-autopublish, a Python Google-Docs-based publishing system
  • bottlejack, a node.js-based publishing system
• Web bundlers (probably won’t talk about these today)
  • Parcel
  • Webpack
  • Rollup

Week 2: Intro to scrollytelling

Wait, is it 2012 all over again? We’ll tackle scrollytelling, the scourage of usability and darling of designers. This session will focus on image-based transitions and stacks, not the D3-whiz-bang version.

We’ll also review our bottlejack websites and see what needs improving, along with doing a little maintenance on our terminals.

Output

• A fancy-looking scrollytelling page to add to your portfolio

Tutorial

• Building a scrollytelling site with scrollama.js (no d3, no magic) (YouTube)

Links

• Open VSCode from OS X Terminal
• JavaScript, a language that isn’t Python
• background-size: cover, a CSS technique to make “full-bleed” images
• position:sticky, the CSS way to make things stick around on-screen while you scroll
• Intersection Observer, a JavaScript ability to detect when you hit certain parts of a scrolly-told piece
• Scrollytelling best practices by Russell Goldenberg of The Pudding
• Simplified scrollama examples
• No, just kidding, scrollytelling has been done well once or twice

Week 3: Svelte web apps

I typically teach webapps using Flask (Python) with a SQL backend, but we might as well go all-in on JavaScript. This week we’ll learn to create web apps, which encompasses everything from browsable databases to interactive calculators.

Output

• A custom web app using the dataset of your choice

Tutorial

• The official Svelte tutorial
• A bare-bones news app with Svelte (YouTube)

Links

• Svelte, a web application framework for JavaScript, which is like a nicer Vue which is like a nicer React
• Flask, a web application framework for Python
• Dollars for docs, an age-old example of a webapp for news (but not Svelte!)

Week 4: Intro to D3

Imagine if the most beautiful idea in data visualization was married wit the least useable interface. Or don’t imagine, and just go use D3! It’s a wreck, but a loveable, constantly-requested one.

• D3 on GitHub
• Official D3 documentation, lol good luck
• Observable, where D3 stuff lives because oh hey turns out you don’t make money for making a software library, you gotta do some sort of value-add

Week 5: ai2html

ai2html is a magic tool that exports responsive visuals from Illustrator to HTML. More or less every newsroom with a graphics desk uses ai2html.

• ai2html homepage
• A Baby Steps Introduction to Converting Illustrator to HTML (video)
• Responsive Data Visualizations in Illustrator with ai2html (video)
• Exporting, custom fonts and using CSS-only templates for responsive data viz (video)

Week 6: Blender (+ 3D scrollytelling!)

• Why Notre-Dame was a Tinderbox (NYT)
• Blender, the best free 3D modeling software in all of history
• model-viewer, a very easy to use but somewhat limited library for displaying 3D models in the browser
• scrollama.js, my favorite scrollytelling library

Week 7: More D3

• Intro to D3 (YouTube playlist)
• Intermediate D3 (YouTube playlist)

Week 8: Force Diagrams (D3)

• Potentially, the only force diagram that has ever been made
• YouTube playlist of some videos I put together at the dawn of time

Week 9: Scrollytelling with D3

• scrollama.js

Week 10: Radial diagrams with D3

Other topics

• Observable.js (sigh)
• Photogrammetry
• Text-based games with Twine
• Canvas
• WebGL
• GreenSock
• Netlify
• Linting
• Three.js
• Figma