Interesting article: Learn Programming by Making Visualizations

Learn Programming by Making Visualizations
// David Miller

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

  1. Web development: Learn core web languages like JavaScript and HTML to use libraries such as d3.js to create highly customizable visualizations.
  2. Data analysis: Use packages in R and Python to create visualizations that are less customizable, but still cover many common uses.

Table of pros and cons here: Web development: Highly customizable, Data analysis:

Columns: description, flexibility, development time, learning time, what skills you will pick up, core technologies/languages.

As detailed above, each route 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 learn. If you have programmed, then making visualizations will extend both your programming and communication skills.

27b431f659ca49426d01a7be28f0091d.jpgObama 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, my blog 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 first learning pathway: learning visualization through web development. 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 when learning the syntax of new languages like JavaScript. 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. Basically, 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 visualizations.

  • 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 though, 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!

Learning pathway Description Who will be most interested
Web development Learn core web languages like JavaScript and HTML to use libraries such as d3.js to create highly customizable visualizations.

Learning to create even a simple histogram can take time, but you develop invaluable web and programming skills along the way. The potential for creating new types of graphics is almost limitless. Data might need to be preprocessed or analyzed first in R/Python.

People aiming to…

  • learn computer programming skills more generally
  • develop user design and web development experience
  • create novel and highly customizable visualizations
Data analysis Use packages such as ggvis and rCharts to create visualizations in R and Python that are less customizable, but still cover many common uses.

You can create sexy interactive graphics with just a few lines of codes, but will be limited by the libraries’ pre-existing chart types (e.g., bar charts). However, the much quicker development time is attractive, especially if you already know R/Python.

People aiming to…

  • create interactive graphics rapidly with less concern for customizability
  • learn the most important languages to the data science community (R & Python)
  • extend existing familiarity with R/Python