D3 Tutorials for Teens

Craig Oda
CodeCakes
Published in
3 min readOct 24, 2018

Code Cakes encourages parents to teach their own children to code. The suggested technique is to go through code recipes with your own child in one-on-one lessons. The primary goal is to get to know your own child by tackling a tough challenge together.

To kick off the project, I recently created a 6 video playlist for teenagers learning D3.js.

The tutorials are optimized for 8th grade female students in the US. My previous tutorials focused on Python and building Android apps using Pygame. Check out the Code Cakes RAPT packaging example if you want to pursue a Python path. I went through many months of teaching mobile game development with both Pygame (Python) and Phaser (JavaScript) before I switched to D3.js.

Based on discussions with my friends who are also teaching their daughters, girls want more pragmatic lessons. Mobile, PC games, and browser games, though cool, are not pragmatic for real world use.

Despite my personal enjoyment of games and my positive experience working with my son on mobile game development, I’m currently focused on teaching D3.js and JavaScript.

I’ve created dozens of tutorials. These are battle-tested with an average teenage girl.

Here is a sample of some of the lessons.

Boy Band Data

Popular Boy Band BTS Data Plotted from CSV file
7 member profile data stored as array of objects

8th Grade US History

mouseover event shows states in each group in the Civil War
Creation of X and Y axis with automatic scale
radio button change event shows temperature data

Lessons Learned

  • Most programming curriculum is not suitable for young teens. I’ve reviewed courses on Udemy, Coursera, Udacity, egghead.io, Zenva. Cost is not a problem. I would rather purchase pre-built curriculum. I can’t find JavaScript material usable for typical kids.
  • Python is the easiest language for kids to learn. Java is also easy with many courses for kids. Greenfoot and BlueJ are excellent and completely suitable for kids. If Java or Python meets your requirements, don’t bother with JavaScript and D3.js.
  • JavaScript is the most difficult to learn and is filled with many gotchas that can lead to poor programming techniques. This is unfortunate as it adds complexity when trying to learn fundamental concepts such as object inheritance, variable types and scope. It’s also the most pragmatic.
  • Using TypeScript or something similar is not viable as the kids want to hack out something quick and share it with their friends who are most likely using standard JavaScript.
  • It’s highly likely that kids will have the opportunity to use JavaScript and some type of charting package for things like data journalism for their high school newspaper or graphing lab data for their science class

Going Forward

I’m planning to create more videos and articles on learning D3.js. Most of the curriculum is on GitHub in reStructuredText, but I will try to move to Medium to make things easier to publish. Although the tutorials are optimized for 8th graders, adults may want to subscribe to the YouTube channel and watch the videos as they come out. My experience with the PyChildren project was that many adults found it useful to get basic tips. If you have opinions on teaching young teenagers programming, I would love to hear them.

--

--

Craig Oda
CodeCakes

open source advocate, writer, Flutter developer, father, husband, fly fisherman, surfer