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.