davidbau.com

Teaching About Data

How do you teach beginning programmers about data in the internet age?

• Teach the kids how to learn on their own: for example, can you find and use technical data sources using Google? Self-teaching is a key hallmark of successful students.
• Teach using real-world mainstream idioms: Javascript, jQuery, HTML5. This lets kids directly apply code examples from the web. We take advantage of Pencil Code to make this easy.
• Keep things real: it is more meaningful if we use real data to answer real-world questions!

It is a real pleasure to see students learning to learn independently this way.

Last week I taught a class about data that went very well. It was interesting enough that maybe others might want to try to do the same.

Using Google to find a Technical Article

The class started with an acronym: JSON. A lot of data on the internet is made available using a technology called JSON, so we began by searching Google for code ideas by using the query [Using JSON to get public data]. That query lead us to a few articles, including a blog post by Mark Lee....

The article is a typical technical blog post, including a bit of a story, some explanations, links to running code, and snippets of source code.

After the girls skimmed the article, they put Pencil Code into HTML/Javascript mode (using the "gear" button) and pasted the code in. Another tool that you can use this way is jsfiddle; the difference is that Pencil Code lets students save work with readable URLs.

After copying and pasting the HTML and JS code, I encouraged the students to try running the code before stopping to understand it. Our first mission was to test if the example worked.

Running the code produced a nice dropdown menu with Denver-area zip codes and a submit-button. Beautiful!

But clicking the button did not work.

Time to debug.

Debugging a Code Sample

The broken code was a good chance to learn a few concepts.

• We started by checking the JSON URL. We clipped the base URL out of the code example (http://data.colorado.gov/resource/4ykn-tg5h.json) and viewed it directly in the browser. The URL worked! And it was an excellent chance to stop and look at JSON and discuss its structure.
• Then after looking at the code more carefully, we discussed URL parameters, the oddly-formatted name-value pairs after the question mark in a URL. This was another opportunity to look up explanations on Google. Google Image Search had a good diagram explaining the idea.
• Based on the code, we tested the URL parameter principalZipCode, setting it to a specific Denver area zip code, and visiting the JSON URL directly. This also worked, filtering out records. Estimating the number of records was an opportunity to stop and realize that there was a lot of data here.
• Finally we looked at the Chrome Debugger's Network trace panel, and examined the URLs produced by the submit-button in the sample code. Here we discovered that the principalZipCode created by the example code was malformed, including only four digits of the zip code instead of five.
• At that point, the students quickly discovered that a function call "substring(1, 6)" was clipping out the wrong substring - and that it should have been "substring(0, 5)". Fixing the code, they all got the example to work.

Hooray!

For us, debugging was an excellent way to learn the important concepts behind the code sample.

Social Implications of Big Data

At this point, the students chatted about the sort of data that was used in Mark Lee's example: it was information on credit status of various Denver-area companies, including information about credit delinquencies.

It was a good opportunity to talk about the social ramifications of big data: as soon as you get a credit card, credit reporting agencies begin collecting a permanent file about you. Huge databases track every piece of commerce in the world. Big data could be a good or a bad thing, depending on how you look at it.

Do you want to be tracked in these databases? What will happen with your data when you miss a payment on a loan someday?

The students wanted to add an extra field to the output: the name of the investigating agent for each record - which was present in the database. I suppose it was interesting to add information to let you watch the watchers. And it was a great exercise in navigating a JSON schema by looking at sample records.

Working Independently: Talking About the Weather

The final exercise of the day was to write a new app to show the current weather (temperature or rainfall) in the city of your choice.

When the students said, "I have no idea how to do that!" I reminded them that they knew how to use Google to find data sources - just remember to include the right acronyms.

Searching for "Public Weather JSON API" lead to a ton of sources and examples.

When one of the students asked, "Should we use the same old example and change it, or write new code?" I suggested they could keep the old example if they wanted, but they might have to change it quite a bit to make it work....

But then they did: it took about 30 minutes, but they were all able to find a free JSON API for weather, and then modify the credit-checking example to show a the weather in a selected city around the world.

Here is one of the final projects: http://cipher.pencilcode.net/home/weather. Once in a while it will give an exception when the JSON data comes back with an empty array; but most of the time it works! Not bad for a quick hack in class!

Posted by David at October 3, 2014 12:54 PM