David Miller

Physicist Turned Psychologist

Northwestern University

Learn to Code by Making Visualizations

March 25, 2015

Making interactive visualizations is an exciting way to also learn computer programming. That’s what Obama did. You can learn both programming and interactive visualization skills in two ways: (a) though web devevelopment and (b) through data analysis.

Description Key learning outcomes
Learning through web development
  • Use JavaScript and HTML and libraries such as d3.js to create highly customizable visualizations.
  • Learning to make even a simple chart can take time, but you develop core web and coding skills along the way.
  • Learn computer programming skills more generally.
  • Develop user design and web development experience.
  • Create novel and highly customizable visualizations.
Learning through data analysis environments
  • Use R or Python and associated visualization packages such as ggvis, rCharts, and Shiny.
  • You can create sexy interactive graphics with just a few lines of codes, but can also be limited by the libraries' pre-existing graphics types (e.g., bar charts).
  • Create interactive graphics rapidly, but potentially with less customizability.
  • Learn the basics of the most important languages to the data science community (R & Python).
DISCLAIMER: This distinction above is a helpful, but rough, one. For instance, JavaScript "wrapper" libraries like NVD3 and Vega more closely resemble R- and Python-based visualization packages than d3.js. R's Shiny package further blurs this distinction.

As detailed above, each learning pathway has its pros and cons, but both involve learning some computer programming. If you haven’t programmed before, then great! Making visualizations is a fun way to start learning. If you have programmed, then learning interactive visualization skills will be even easier.

Obama learns computer programming by making visualizations with JavaScript.

When learning visualization skills, I found many great individual blog posts and tutorials, but struggled in finding a curriculum that pieced together all of these learning resources. Hence, subsequent posts will take will take a more “meta” approach that will outline various learning pathways and direct you to relevant resources.

My next post will focus on the web development learning pathway. In the meantime, here are some (free!) resources about learning more general web development skills:

  • Codecademy: Provides interactive courses on HTML/CSS and JavaScript that (a) give some information (e.g., about HTML tags), (b) have you do an example exercise using that information, and (c) give you automated feedback about your code. I highly recommend it. You learn web development skills by actually practicing them, rather than just reading about them!
* Codecademy’s courses don’t assume prior programming experience. However, as someone with prior programming experience, I still found them useful especially for learning new syntax. I was only mildly irrirated by the slow pace of the courses. But the somewhat slow pace suits a broad audience (e.g., they have over 24 million learners!). * SIDENOTE: JavaScript (JS) is easily the most important programming language for interactive data visualization. Nearly all interactive data visualizations use JS, even if you don’t know it. Packages in R and Python can create JS code for you, allowing you to never touch JS. But not knowing JS will limit you if you want to create highly customizable interactive graphics.
  • CodeSchool’s course on Chrome DevTools: I highly highly highly recommend that you learn how to use a web development environment like Chrome DevTools or Firebug before getting deep into making visualizations. I didn’t myself, which was a rookie mistake that I now regret. Like Codecademy’s courses, CodeSchool’s course on DevTools is interactive and I also highly recommend it.
  • Chapter 3 from Scott Murray’s book: Provides a brief, highly accessible overview of core web development technologies. It’s a fairly dense summary, so I recommend using it as a “reference guide” for when you get deeper into more specific topics.

Think I’ve missed a route for learning interactive data visualization? Tell me so in the comments!