Monday, July 18, 2016

Spring Semester D3 Class (take 2)

I reprised my class on interactive visualization with D3.js at University of Miami with twice as many students in the spring semester. It was successful again, but I found it noticeably more work having more students. We did not focus on UNICEF this time; instead each student explored a topic of their own interest. More on how it scaled (or didn't) after some project highlights...

One note: Very few of them are reading their school email over the summer, so there wasn't much chance to update bugs or design issues I requested fixed. Fair warning :)

Iceland's Energy Use

The project by Zhiming "Eric" Sun is gorgeous and draws smart data comparisons about energy use over time by different countries. Iceland is the star here. There are nice tooltips with plots of use over time in this first display in the scrollytelling story.

In the next stage of the story, there is a slightly hidden lovely feature, which is that a mouseover on a bar zooms the map to locate the country in question. Useful!

There is a super interactive line chart with some smart commentary, and then a great connected scatter plot showing comparison country trajectories.

I think there are still some odd aspects of the scrollytelling display—as we constantly discovered in my class, getting the scrolly display/hide tuned right isn't that easy, at least the way we were constructing them.

Eric will be an amazing hire for someone when he's finished with his MFA. He was a superb help with other students' coding issues and has a strong sense of data story. His technical curiosity and ability to figure hard things out on his own were superior.

Chinese Tourism

Yuxuan "Sunny" Xie did a great project on Chinese tourists, specifically on where they go and what they spend. Her project features small multiples, scrollytelling, lines charts, bar charts, and a neat exploding map of China. The map is built with the d3-exploder, which she dedicated herself to trying to adapt and use.

The map of Chinese provinces shows tourism outbound, with mouseover and clickable provinces. Each provinces has a little story typifying a traveller from that area.

The scatterplot version of the map shows each province along 2 axes, population and income, using the same color scale for traveler percentages.

Sunny is a dedicated journalist with a strong sense of data design, visual design, and interaction. Another excellent hire!

Transport in Miami Dade

Jennifer Hernandez looked at the distribution of public transportation options in Miami-Dade county. She made some amazing point maps of bus stations (the small blue dots, which have tooltips) and the metrorail stops (bigger dots).

In contrast, the locations with the most affordable houses are shown in pink here:

Jennifer has other stats on ridership by location and commuting preferences in her original project. She is another excellent MFA student in the Communications Department at U of Miami.

Climate Change

Shi Li, who was auditing my class, nevertheless did all the (hard) work and produced a lovely project on climate change. Her project features a number of striking charts, including a small multiples-details-on-demand array of bar charts based on modifying Jim Vallandingham's coffeescript demo. There is also an animated bump chart of the causes of global warming, with the dramatic lead going to greenhouse gases ever since 1990.

Cost of Education (2 Projects)

Sherman Hewitt, my only undergrad student this semester, did a great project on cost of college across time in the US. This bar chart from his data shows that as of 2012, there had been an increase in the number of folks attending college, in part fueled by an increase in the number of Hispanics attending.

His map shows that the most expensive states for public universities are Vermont and New Hampshire, with the cheapest being Colorado.

Sherman's project is strong in the reporting text as well. He has a great future and is working as a data journalism intern this summer.

Terrorism Over Time

Claudia Aguirre is working with a large dataset on terrorism, and produced a solid project on incidents and deaths by different terrorist groups over time.

One of her more interesting charts shows incidents by group by year, and the extreme and sudden increase in ISIL is the steepest, highest, and most recent of the blue lines. (The other highlights are Taliban, Al-Shabaab, and Boko Haram. The 1980ies are dominated by Shining Light and other Central/South-American groups.)

Formula One

Zhou Fang indulged her knowledge of Formula One racing stats to focus on the history of the Ferrari team.

In the map above, she shows the win history of Ferrari vs. other teams across 15 years of F1. When you click on a country in the map, small multiple line charts are displayed for each country by team, as well.

Travel Prices

Sevika Singh did a project on hotel costs in different cities. The differences between one-star and five-star prices in the same cities are particularly interesting. Here's a scatter plot showing the relationships, with some UI to help you find a city of interest. (I believe the dots are sized by average price, with New York having the largest average.)

Developer Survey

Jose Fierro looks at the responses to the Stack Overflow Developer Survey. Although he uses raw counts instead of percentages by country, the results are interesting, especially on the topic of future technology plans. The "big data" and hipster tools like Rust get lots of "intend to use in the future" votes, but tools like Javascript don't. Uh, good luck with that?

Other Projects...

Han Huang's autism project looks at the incidence of autism in the US by state. She uses donut charts, maps, a timeline, bar charts, and other techniques.

A look at California's educational attainment stats from Cibonay Dames shows that California students are underperforming. California is the largest and most diverse state in the US in terms of educational enrollment figures. She uses maps, small multiples, and bar charts.

Luying Wu's project looks at causes of US road accidents. As of 2013, Montana had the most deaths due to road accidents and District of Columbia had the least. Her map of top reported causes by state is very interesting (and may reflect some state data categorization artifacts).

Hyan de Frietas's project looked at which states invest in early education support. He documents that early education enrollment impacts future success.

Eliot Rodriguez investigates drug use by teens in the USA including alcohol, over time. Although prescription drug overdoses are on the rise, teens are still primarily using alcohol, marijuana, and cigarettes.

Former Students!

My fall semester students have done some great things since our D3 class. Barbara Poon got a job in the Emerging Technologist Program (ETP) at Nielsen. Halina Mader has been consulting as a web designer and D3 developer while she settles on her next job. Shiyan Jiang is a data journalism intern this summer with the Florida Sun Sentinel and so far has worked on a map for a story. Louise Whitaker is still an MFA student for another year and is an intern at Sapient this summer.

Jiaxin Liu did her journalism capstone project on the status of financial support for Chinese retired folks, using D3 in strategic places. She is working now as a data journalist in China. Zhizhou Wang is in the Lede Program at Columbia School of Journalism, pursuing further data journalism credentials (a program which looks amazing, to be honest). Luis Melgar is still working as a journalist at Univision, and he also used D3 in his capstone project for his master's on homeless students in Florida.

Three former students (Jiaxin Lui, Zhizhou Wang, Shi Li) worked together on a lovely multi-media article about shark tracking. They did it for Alberto Cairo's Maya class. They used D3, Maya, video, and nice web design. I helped them very little!

Debrief on Teaching This, Take 2.

Did I Help Too Much?
With twice as many students, I had twice as many visitors in my office wanting help making custom, and often very advanced, visualizations. I think I promised that they could do anything with my help; but my help and time were finite resources, and I never remembered that before it was too late! If I were teaching this again, I'd probably be a little more restrictive about the coding I did for them myself. It takes them—and me —longer if I prompt them to solve it themselves with a million hints. This just wasn't practical with the number of people needing help and the weekly deadlines. It's easier for everyone if they just watch me do it while sitting beside me as I talk through it. But I'm not sure that process teaches them enough and it still doesn't scale well. The alternative is for them all to have much less ambitious and interesting portfolio pieces, though. (Sadface.)

My former fall semester students who wrestled with their own problems achieved some excellent results on their own, as you can see above. One of them said as she did, "I'm finally starting to like and understand D3 now." So maybe they did learn even while watching me or reading my code fixes?

And Some Never Asked For Help
There were some students I never heard from and only realized were struggling when I saw their weekly homework or prodded them quite explicitly. The amount of help given was not even across the students, certainly. I put this issue down on my "teaching to-learns" list with some ambivalence about how to solve it. Some of the onus is on students to request the help, certainly...

Data Analysis
I saw a lot of data analysis and data manipulation issues this semester. The real work of data visualization is to get your data in shape, explore it, and then design your visualization and code it. Often the coding requires specific manipulation either before loading or in Javascript, to get the ideal structure from which to "draw." None of the steps can really be skipped. Our course program was definitely lacking in this "munging" and analysis training. Given the choice, I would not teach this class again without a preceding required data analysis class. (And even then, I've heard from other faculty friends that a data analysis course can easily go off-the-rails into endless custom work for the teacher if the students get to use their own data sets. This is a hard teaching problem.)

Javascript Difficulties
On the Javascript side, I assigned more work with Javascript programming and data "munging" than previously. I also spent a fair amount of time on Javascript refactoring and structuring of code, based on issues that had come up during the first semester, especially in the sizable final projects. I heard from some that these assignments were "too hard." A lot of students struggled with the basic programming I thought they knew in advance, e.g., what's a variable, what's a function, how to call functions, scope. Along with the required data analysis class, I would prefer this class is preceded by more solid Javascript preparation or some other programming experience. (Many students had had a prior class in JQuery or P5.js, but since those classes weren't about doing data manipulation, some of the higher level concepts didn't cross over.)

Bottom Line
Teaching this class to people without much programming experience is very hard, and doesn't scale to a large group of students. At least not without a lot of experienced TA support which I did not have. Doing it the same way again, I wouldn't be able to handle more than 15 students.

Updated Course Repo
The class materials, in some parts radically updated, are posted here. I especially added a lot to the maps section, including more Leaflet examples, and added some nice small multiples code examples. I'll probably update one more time soon to remove mention of student homeworks.

News: My New Teaching Job

Meanwhile, my next teaching gig is in Lyon, France, at EM-Lyon, where I will be teaching data analysis, data science, and NLP classes. I will be there for at least 2 years. I am looking forward to focusing now on the "front-end" of the analysis stage, teaching Excel, Tableau, SQL, Python, and R. Look for more insights on teaching those in the future!

Thursday, January 28, 2016

Fall Student D3.js Projects

Here's the followup I promised on my post about teaching D3.js to journalism students: A selection from their projects! Their project goal was to produce a data story using UNICEF data (and possibly related data) about child mortality. The grading criteria were pretty rigorously spelled out as follows in Week 14 of the repo:

  • 20% for using 4 chart types we covered in class (can include small multiples as one)
  • 20% for good interactivity: Transitions, highlights, tooltips, filter/sort, animation...
  • 15% on text: Connective text holding the story together, intro and conclusion, annotations on graphs, good explanations, good writing (good English style)
  • 10% on storytelling: You create a useful, interesting data story flow using a mix of text, steppers/buttons, highlights, scrollytelling. (You don't have to use all of them.)
  • 10% on graph/chart elements: Good labeling of values/axes, tooltips, readability of chart contents and labels
  • 10% on visual style overall: Color scheme, attractiveness, clarity in graphs, use of UNICEF style somewhere in page
  • 10% for good data analysis: Interesting findings/results, nice use of top 10s or top N, relating data sets to each other intelligently
  • 5% for page layout/design: Good visual and functional CSS, useful external links, resume/CV link, header/footer with info about the project and data as needed.

I realized later I should have had a separate line item or aspect of "Good UX," which is embarrassing to me since that was my job for 18 years. Anyway, live and learn. Extra credit was given for using special layouts or interaction methods we didn't cover in class, as well as going above-and-beyond on any single aspect (such as using new external data).

Grading was NOT based on good code. It was primarily based on user-facing results. Expect the code to be not the best, as these were not computer science students and this wasn't a software engineering class! However, everyone is still learning and is interested in doing better, given opportunity to practice.

Also note: Several students were not native English speakers. Regardless of the injunction to check the English, there may be remaining writing issues. It's apparently hard to fit copy-editing into the project delivery cycle at the end of the semester :)

US Child Mortality

One of my favorites, this project by MFA student Louise Whitaker explores child mortality in the US as compared to the rest of the world. She starts with a "scrollytelling" line chart and moves into bar charts and small multiple bar charts with linked mouseovers and linked scatterplots:

There is a lovely tooltip on the map with dual dot plots in it:

And we end with more small multiple linked bar charts showing the relative status of different US states on health issues:

Louise will be looking for work in UX and/or data vis design after this semester. Amazing hire, I'd say.

Fertility and Mortality

Halina Mader's excellent project features a study of fertility and mortality rates for children under five. She uses a "stepper" structure with "next" and "previous" buttons.

Her first view is a world map colored by 2015 infant mortality rates. The tooltips are a lovely detail: a bullet-style bar graph showing the rate of the country vs. the world avg and the worst.

The next state is a little subtle if you aren't watching closely: the map animates shading over time with the decline in death rates. The line chart is synced with the map on rollover:

She shows useful trendlines and correlations on small multiple scatter plots which have linked mouseovers by country:

Earlier, in only Week 6 of my class, Halina also produced this wonderful line chart block that was widely fav'd on Twitter:

You should hire Halina, she's available now and she's outstanding.

Malawi and Under Five Mortality

Graduating senior Barbara Poon produced a lovely project with helpful graphics and a nice analytic edge. Her scrollytelling trends story is particularly good:

She also uses dotplots, one of my favorite plot types:

Barbara is looking for analytics and data visualization work and would be another excellent hire!

The Effect of War

Grad student Shiyan ("Yan") Jiang's project focused on the effect of war on child mortality. She opens with a choropleth map with line chart tooltips (ok, if you see a trend, I maybe have told them all they'd get instant A's for tooltips with charts in them):

She uses a scrollytelling style to walk through her data story. At one point she highlights key sections of trend lines to show long-term impacts of wars:

Yan is a graduate student who is available for summer work and contract work.

Disasters and Mortality

Jiaxin Liu's project uses a unique button legend method for controlling the views. This line chart's focus on worldwide disasters and their impact on child deathrates was especially good:

She also features some synchronized interaction between plots -- highlighting world regions on the line chart also highlights the same countries in the scatterplot on the right:

Jiaxin became such a big fan of D3 during the class that she used it for another web class project as well. Jiaxin will be looking for data journalism jobs after this semester!

Female Education

Zhizhou ("Jo") Wang produced a very graphic, dramatic visual project related to female education and childhood mortality. Her magnum opus interactive piece is the linked map, line charts, and bar charts. Clicking on the map updates all of the data on the right:

She also features a nice "scrollytelling" scatterplot section:

Jo will be pursuing graduate journalism programs after this semester.

A Sad Story: Sub-Saharan African Infant Mortality

Luis Melgar's project focused on the sad story of sub-Saharan Africa. He uses a choropleth map linked to a line chart, animated bar charts, small linked multiples inspired by Jim Vallandingham's Flowing Data tutorial materials taught in my class (Week 10), and an epic scatter plot animation with 11 "stepper" buttons that looks specifically at diarrhea and pneumonia.

Luis Melgar is a journalist at Univision and a grad student at University of Miami. He says he is also a cheese addict, but aren't we all.

Thanks are Due

Thanks to the University of Miami's School of Communication and my visiting Knight Chair position in the Center for Communication, Culture, and Change for giving me some dedicated, hard-working students for the first run of my D3 vis class. The repo materials are here and being tweaked for the second run of the class, with twice as many students!

Also thanks to Guy Taylor of UNICEF in NYC for supporting my students and help with data questions.

Monday, January 11, 2016

Teaching a Semester of D3.js

I spent last semester frantically putting together a course on D3.js for journalism students at the University of Miami at the same time as teaching it and grading it. Wow, teaching a semester course is hard. Teaching coding, especially to non-CS students, is a special challenge. I was lucky to have a small class of very patient and motivated guinea pigs students for the first semester.

The class was meant to be a portfolio-builder, focused on journalistic interactive visualization. We used data from UNICEF in the first semester, visible in the examples and projects. This coming semester has fewer journalism students, which means changing the content a little, a process I'm still going through in the repo. This post is a recap of what we did and what was hard about it. Next post (in a week) will show some of my students' work.

Interactivity and "Journalistic" Vis

Why teach D3? At least one friend teaching journalism students said he'd never do that again. I heard this right before I started on the adventure. But this course was meant to be on interactive data visualization, which means a chart does more than behave like a static bar chart and readers do more than look at the bars. I have talk slides here about designing for interactivity in vis, and primarily the examples I show are built in D3. This is the current lay of the land!

There is still no better library than D3 for building custom data-driven designs, with custom interactions, and integrating them with the web page DOM. I did show Highcharts, and one of the first homeworks was to use it for a few charts. But the animated transitions in D3 (and open palette of design options) are what sell it, and all my students wanted to do fancy artistic animations in their final projects: animated maps, animated lines, animated lines on maps, synchronized lines and maps that animate over time, you name it if it involved lines or maps apparently. :) (It pushed me hard too, to help them figure all that out.)

When I was trying to learn D3, I wanted to know how to hook up a chart to UI elements and make things move, but the books out there didn't get into anything that fancy, sticking mostly to how to create static charts in isolation. Static charts are usually much easier to create with other tools than D3 (unless it's an "unusual" chart type). So for my class I focused a lot on the UI interaction aspects of D3 coding. D3 can do a lot of fancy things, like networks, parallel coordinates, sankey diagrams... But I stuck to the "basics" for journalistic vis in this class:

  • Tables and heatmaps
  • Bars, vertical and horizontal
  • Lines, including handling lots and lots of lines
  • Stream/Area charts
  • Stacked and grouped bars
  • Scatterplots
  • Small multiples
  • Maps

We also covered a lot of key interaction features like animated transitions, swapping out a dataset and animating in a new one, how to hook up various UI elements like select menus, buttons, sliders; making complex tooltips, linking two charts together with a toggle switch or a click/mouseover, annotating particular data points, adding legends. In Javascript, important data concepts included sorting, getting top 10's (or N's), creating calculated variables.

Setting up the Tools: Github and Servers, Oh My

Getting folks set up on day one with a server and Github was a challenge, but luckily most of them had encountered a little bit of git before. However, most students did not know how to use the command line, and two of them had Windows machines, so this was "challenging" for all including me. (I totally forgot that all people don't automatically know Unix and Windows command line. Really threw me for a loop.) I probably oversold how useful "git stash" is when they had conflicts, but I feel no regret. Before too long they were git pulling every week and had learned how to make gists.

Gists are the building blocks of a portfolio of bl.ocks, a key component of the D3 community eco-system. Also, they were required for easier grading and debugging on my part — especially now that Ian Johnson (@enjalot) has released, which made debugging a lot simpler.

For some reason, using a server really stumps new web programmers. (After watching people struggle, I've put a bunch of documentation on setting them up in the nascent drafty d3-faq.) Folks who have done only static web design have usually not got a good understanding of why you need to use a server to view and render code. Unlearning that they can just double click on their file to view it takes a lot of time. No, the URL really has to say "localhost://" not "file://". The source of many bugs for the first few weeks was folks not having loaded their page using the server, even after they had set one up. (And note: That's an example of an issue that's harder to debug by email remotely than it is when you're looking over their shoulder. There were a lot like this. My office hours were sometimes busy.)

Javascript with D3

My class came in with required background in HTML and CSS, but little to no Javascript. Heck, this is how a lot of people learn D3, so why not? Well, anyone (like me) who has gone this route knows that the Javascript part is the thing that trips you up the most, even after you start to "get" the D3 paradigm. Just understanding the D3 examples out there (especially Mike Bostock's) requires a fairly advanced understanding of Javascript.

For all data visualization, data "munging" is hard and sometimes very data-set specific. You can either "munge" in a tool outside Javascript — I recommended and showed Excel — but at a certain point, you need to get a grip on the munging that's close to the vis code itself. Structuring your data to make it easy to get at certain values during interaction in the UI is pretty important. Getting data sets merged, looping through them to do calculations, or to create subsets of data, learning and using a functional coding style with forEach and maps — these things were hard for everyone, even the students with some programming background. I gave a few pure Javascript homeworks, on topics like debugging and data manipulations, but honestly, I should have given more of them. (OTOH, this is harder to grade, because it usually requires eyes-on-careful-review of each one. Meh.)

I also should have buckled down on teaching data manipulation tools earlier. In an attempt to be "easier" on them, I didn't teach d3.nest() right away, and helped one poor student (hi Luis!) write a laborious loop in JS to nest his data... After that hour, I realized, "Teach all the tools. Teach the nest()." Students need to know about the helper functions, which will save them time down the road. A homework on nesting data followed. I'll introduce lodash.js this spring semester, too.

A Lack of "Complex" Examples To Teach From

Many of the D3 examples, books, and tutorials are basic or even "toy" (abstract from realistic frames, not using real data, etc). There's a role for the basic — the best intro book is Scott Murray's very simple, unscary starter book, Interactive Data Vis for the Web. We started there, of course, but as we got into complex animations and transitions, there were fewer and fewer good working examples and tutorials out there to inspire class materials.

The big exceptions are the tutorials of Jim Vallandingham and Nathan Yau on Flowing Data; both do "journalistic" vis how-to's on their sites. I borrowed and adapted several of theirs, for small multiples and maps in particular. Jim's code tends towards more "advanced" and I simplified some of it — which I have mixed feelings about and may undo; Nathan's code I sometimes updated when it was using older D3 style or could be made more functional. Scott Murray's intro examples I also updated to use more D3-common conventions (e.g., adding the margin object convention, removing for-loops).

Even after seeing how to use functions for update patterns in D3, when project time came, everyone struggled to organize their code. When I asked people to just make a page combining 3 charts on it, all hell broke loose in the global scope conflict space. While I was quite clear that projects were judged on end-user experience, not code quality, code structure issues made it much harder for the students to modify and debug their own code. I'll be focusing more on code structure this semester.

Unfortunately, there are more examples online of how to use Angular or React to structure big projects, rather than pure Javascript. Obviously those frameworks solve a lot of organizational and architectural issues, but this is a challenge for everyone teaching D3, I feel. I don't want to inflict a framework on students who are just learning Javascript and D3.

Finding a Data Story Is Hard

Almost all of the class had had a static infographics class (from Alberto Cairo), but the practice of finding a story in data is hard, and I considered it outside the scope of the course. I recommended and demoed Excel and Tableau to a few students who were struggling, and luckily several had already had experience using Tableau. (I tried PowerBI briefly and was also very impressed by it!) Nevertheless, data "stories" for their projects were in flux until the very end. It's notoriously difficult to "design" for data vis without using the real data (sketching by hand only gets you so far), and a lack of proficiency with exploratory tools probably impaired some of them.

With a class next semester that's less journalistic, I'll expand the project grading to allow for less data-driven stories and allow a broader range of data visualization. I'll also be exploring a design process that starts with data exploration, then moves to UI sketches, then moves to phased development and feedback cycles.

Debugging is Also Hard

I knew I should teach debugging, and I did, but I think you can only teach it to a point. It's boring to watch someone else doing it, but it's also necessary. Getting students to learn how to use breakpoints in the Chrome console is a necessary evil, as is walking back through the stack trace.

One of the harder aspects of debugging is that you have to have a lot of experience with what can go wrong to be able to guess what it might be this time. It's about hours spent doing it. This is hard to teach; it just requires practice time.

Students Will Find and Replicate All Your Bugs

Because the general practice of learning D3 in the wild is to take examples and modify them to fit your own data, I wanted to support that in my class. I made examples and then had the class plug in their own data (hopefully on the topic of their final project!). This means that code sloppiness, errors, and bad habits in my code ended up replicated and magnified over and over. Including bad UI design — one example with unfortunate bar coloring showed up in a couple of projects.

My homework is to fix all that in the repo and try not to introduce too many new ones.

Thanks for Content I Borrowed, Linked To, or Adapted

People whose work contributed a lot to this repo include Mike Bostock, Scott Murray, Jim Vallandingham, Nathan Yau, Mike Freeman, Ian Johnson.

Course Materials

The repo (that will keep evolving this semester) is here. I expect to be adding more examples — such as for canvas, crossfilter/dc.js, and perhaps other layouts. There might even be data "art." I will post links and examples from student projects for the fall in another week or so!