Author Archives: Susan

You Are Here

DeviceWeb “You Are Here” is an experiment in using digital technologies to represent and engage truly local communities, by offering content and interaction that is only available in a particular place. Using small, inexpensive, open-source wireless routers to deliver compelling, location-specific content, “You Are Here” seeks to facilitate conversations that are informed by the character of the physical spaces where they are installed, and which, in turn, shape the lives of the people who live, work, and play there.

You Are Here was installed in two locations in New York City during the summer of 2016: one just across the street from the storied Alphabet City landmark, Tompkins Square Park, and the other just below the 23rd street entrance to one of the city’s newest and loftiest green spaces, the High Line.

For more information and updates on the project, see our updates on the Tow Center website, or visit our online project hub at: www.youarehere.network.

Understanding Your Internet

TheInternetADataVisibilityOverview-lowOne of the major challenges in digital communications security is that every digital message we send interacts with many different systems behind the scenes, each of which can expose bits of information to others.

This detailed illustration provides an overview of how the Internet functions, including explanations of what “metadata” is typically stored by digital companies and available to (U.S.) authorities, as well as the mechanics of digital security technologies like Tor and encrypted email.

High-quality prints of The What, Where, When, How and Why of Who Can See Your Information Online are available for order (at cost) online. It is available in both a 24″x36″ (61cm x 91cm) wall-sized version, and an individual 12″x18″ (30cm x 45cm) size. You can also download a hi-res version of the image at the link below.

Order a print
| Download hi-res image

Information Visualization: Spring 2014

Course description & overview
Over the course of the semester, students will develop the critical capacity to assess and develop accurate, engaging information visualizations for journalism. In addition to readings about the art and science of information visualization, students will complete a series of critiques of published graphics, in the form of rationalized redesigns of the original work. For these assignments, students will be given a range of acceptable media (physical or digital) in which their solution may be executed; each revision will also be accompanied by a written justification of the design choices it includes. Weekly readings should be summarized either in paragraph or bullet-point form; these summaries are due in aggregate at the end of the semester, though students are expected to complete the readings in advance of the class session for which they have been assigned. Students will also have weekly individual programming assignments and a group final project which will be reviewed in an industry critique at the end of the semester.

Weekly class sessions will be held on Tuesday and Wednesday mornings. Students are expected to arrive promptly for all class meetings and trainings, and will be graded on both their attendance and participation. Students are encouraged to engage their prior knowledge and experience in all aspects of the class, including readings summaries and critiques, as well as in-class and online discussions. Students must complete all readings summaries, programming and design assignments, as well as their final project, in order to pass the class.


Week 1
Lab
Introductions, expectations and class overview, the purpose of programming.
Installing & configuring Aptana Studio 3, FileZilla, introduction to github
Publishing your first webpage to your CUIT server space; overview of webpage structure.
Videos: HTML Basics
Readings due:

Seminar
Visualization as communication, visual shorthand.
First design assignment outlined.
“In the news/room” group problem-solving exercise.
Readings due:


Week 2
Lab
Programming basics and data format familiarity
Readings due: JSON, XML, Programming Parts of Speech
Videos: The browser console, data types, and getting started with GitHub
In-class resources: Unix & GitHub Quick Reference

Seminar
Visual understanding as science and influence. “In the news/room” group problem-solving exercise.
Readings due:

 


Week 3
Lab
More programming basics: functions, conditionals and loops.
Readings due: Understanding Functions, AJAX
Videos: Loops, conditionals and functions

Seminar
Visualization for inference & drawing conclusions from visual information: histograms, chloropleth maps.
Readings due:

 


Week 4
Lab
Basic HTML + CSS sizing and positioning; Bootstrap style framework.
Readings due: API, CSS
Videos:API data, jQuery, AJAX & divs

Seminar
Basic best practices in visualization for journalism
Readings due:

 


Week 5
Lab
Hitting the playground, getting to “ready” with the Google Charts API
Readings due: Google Line Chart documentation: Overview, Example, Loading
Videos:Page configuration & data formatting for Google Visualization; chart rendering.

Seminar
Principles of data journalism and information design
“In the news/room” group problem-solving exercise


Week 6
Lab
Using Google Fusion Tables as a data source
Readings due: Google Line Chart documentation: Configuration Options
Videos: Using Google Fusion Tables with SQL queries as a dynamic data source for Google Visualizations.

Seminar
In the newsroom
Readings due:

 


Week 7
Lab
Customizing interaction with annotations and rollovers
Readings due: KML
Videos: Mapping with Google Fusion Tables

Seminar
Lessons from professional practice
Readings due:

 


Spring break


Week 8
Lab
Basics of data analysis.
Readings due: mean, median, outlier, normal distribution, histogram
Videos: Data analysis essentials with spreadsheets and OpenRefine.

Seminar
Final project pitch discussions


Week 9
Lab
Basic page interactivity and layout with jQuery and CSS

Seminar
Designing the design process
Readings due:

 


Week 10
Lab
Responsive designs with Twitter Bootstrap

Seminar
Essentials of information layout and design.
Readings due:

  • Thinking With Type Ellen Lupton. Princeton Architectural Press, 2010.
    Letter: Anatomy, Size, Scale, Type Classification, Type Families, Superfamilies; Text: Tracking, Line Spacing, Alignment, Hierarchy; Grid: Grid as Program, Grid as Table, Multicolumn Grid, Modular Grid
  • Content-Out Layout by Nathan Ford. A List Apart, 2014.

 


Week 11
Lab
Optimizing code with the principles of DRY (“Don’t Repeat Yourself”) and “convention over configuration”. Using these to have data selections respond to user input.
Videos: Revising and editing your code for efficiency and modularity by applying conventions and the “DRY” (Don’t Repeat Yourself) principle. Adding responsiveness to user actions.

Seminar
Interaction and navigation, designing for users at different levels of experience
Readings due:

 


Week 12
Lab
Updating the URL for sharing user-selected content; adding annotations and customized tooltips.
Videos: “Stateful” URLs for sharing particular views of an interactive; adding annotations for context.
Seminar
Q&A with Lam Thuy Vo, Al Jazeera America
Lam Thuy Vo is a multi-platform reporter and editor currently leading Al Jazeera America’s interactive team where she produces and edits multi-platform stories. She started her journalism career at the Wall Street Journal as a videographer, spearheading the publication’s video operations in Asia, and has also worked as a producer and reporter for Planet Money, telling economic stories with charts, videos and other visuals.

Q&A with Rani Molla, WSJ Visual Journalist and CUJ ’12 graduate.


Week 13
Lab
Targeted final project assistance.

Seminar
Open work day


Week 14
Lab
Final project open lab

Seminar
Final project in-class critique, feedback from instructors and guests


Week 15
Lab
Final project open lab

Seminar
Final project presentations to industry; final project reflections due

Information Visualization Reading List

Below is the most recent iteration of the reading list for my spring course in Information Visualization at Columbia Journalism School. Because I teach in a journalism school but all of my courses involve programming, I start every semester with a discussion about the role and culture of programming in general, facilitated by the first few pages of Douglas Rushkoff’s book “Program or be Programmed.” Unfortunately, this brief but powerful preface is not part of the digital edition, but I recommend locating a print copy even just for the sake of these pages.

Links provided are to the New York Public Library (which now has purchase options!) where possible; otherwise to the publisher.


Program or Be Programmed: Ten Commands for a Digital Age by Douglas Rushkoff. Soft Skull Press, 2011.
Preface


Thinking With Type by Ellen Lupton. Princeton Architectural Press, 2010.
Text: Linearity, Birth of the User


Information Visualization: Perception for Design by Colin Ware. Morgan Kaufman, 2004.
Chapter 1: Foundation for a Science of Information Visualization



“Visualization” by Tamara Munzer, in Fundamentals of Computer Graphics, 3rd. ed. A K Peters/CRC Press, 2009.
Chapter 27: Visualization


Visual Explanations by Edward Tufte. Graphics Press, 1997.
Chapter 2: Visual and Statistical Thinking: Displays of Evidence for Making Decisions


Now You See It: Simple Visualization Techniques for Quantitative Analysis by Stephen Few. Analytics Press, 2009.
Chapter 5: Analytical Techniques and Practices


The Wall Street Journal Guide to Information Graphics by Dona Wong. W. W. Norton & Company, 2013.
Chapter 2: Chart Smart, Chapter 3: Ready Reference, Chapter 4: Tricky Situations


Interview with Amanda Cox. Substratum, Issue 6.


The Functional Art: An introduction to information graphics and visualization by Alberto Cairo. New Riders, 2012.
Profile 3: Steve Duenes, Profile 4: Hannah Fairfield, Profile 5: Jan Schwochow


The Design of Everyday Things by Donald Norman. Basic Books, 2002.
Chapter 6: The Design Challenge, Chapter 7: User-Centered Design


Now You See It: Simple Visualization Techniques for Quantitative Analysis by Stephen Few. Analytics Press, 2009.
Chapter 4: Analytical Interaction and Navigation


Thinking With Type Ellen Lupton. Princeton Architectural Press, 2010.
Letter: Anatomy, Size, Scale, Type Classification, Type Families, Superfamilies; Text: Tracking, Line Spacing, Alignment, Hierarchy; Grid: Grid as Program, Grid as Table, Multicolumn Grid, Modular Grid



Content-Out Layout by Nathan Ford. A List Apart, 2014.


“Five Common but Questionable Principles of Multimedia Learning” by Richard E. Clark & David F. Feldon, in The Cambridge Handbook of Multimedia Learning, 1st Ed. Cambridge University Press, 2005


“The Split-Attention Principle in Multimedia Learning” by Paul Ayres & John Sweller, in The Cambridge Handbook of Multimedia Learning, 1st Ed. Cambridge University Press, 2005


“The Worked-Out Examples Principle” by Alexander Renkl, in The Cambridge Handbook of Multimedia Learning, 1st Ed. Cambridge University Press, 2005

InfoScribe

PrintInfoScribe helps investigative journalists unlock the stories trapped in PDFs. Specifically, InfoScribe is a generalized, web-based crowd-sourcing document transcription platform that invites the public to participate in the journalistic process by transcribing specified data fields from documents. What does that mean in plain English? We are building a platform where journalists can upload image-based documents (such as PDFs) and a community transcribes those documents.

Despite the exponential increase of digital data today, newsrooms aren’t getting any larger and OCR technology isn’t advancing fast enough. Though on its surface greater availability of digital public records should be a boon to investigative journalism, the reality is that these records are often published as unstructured, image-based documents, or without essential metadata.

While providing journalists with access to data sources that would otherwise be beyond their reach, InfoScribe seeks to cultivate meaningful, long-term personal investment in the journalistic process by giving transcribers access to the journalists who are doing work they care about, as well as publication credit for their contribution. We want to invite community participation to increase the transparency of, and the public’s confidence in, the journalistic process.

Hiding In Plain Sight

HidingInPlainSight While it is natural to think of digital information security as primarily an issue of passwords and encryption, a simple first step towards protecting digital data is to make it less detectable. Drawing on the idea of defensive clothing and expanding the concept to include personal data, “Hiding in Plain Sight” incorporates USB keys into convincingly wearable accessories, in an attempt to bring both imagination and whimsy to the often ominous and defeating field of information security. This piece is designed especially to encourage those who don’t consider themselves technically savvy to consider how their individual skills and perspectives can be applied to generate novel forms of digital information protection. “Hiding in Plain Sight” was exhibited as part of the PRISM Breakup exhibit at Eyebeam Gallery in New York, October 4-12, 2013.

Data Docs

betaLogoData Docs is a series of embeddable interactive video narratives, designed to render seamlessly on desktop and mobile devices. By extending the popular Popcorn.js library via our salt plugin, Data Docs offers a mechanism for integrating both static and interactive JavaScript elements – from text to data-driven charts and graphs – into the timeline of a web-based video. Additional plugins and source files support custom video controls, full-screen support, and device detection. All of these features rely on standards-compliant, open technologies, such as HTML, CSS3, Javascript and jQuery, and will be shared using common resources like GitHub. Project website. GitHub repo. Data Docs platform development is made possible with the generous support of the Knight Foundation Prototype Fund.

Jewel.ID

IMG_20141210_200404 These days, most of us don’t think twice about how to find contact information for someone online: a web or social media search for a given name is likely to turn up several (if not hundreds) of results, that we then narrow down using other information we may know about them – such as where they work or, more simply, what they look like.

Though most of us might not use the term, this process of using additional information to confirm what real person “owns” a digital identity – like a social media handle or an email address – is what is known in information security as authentication. And while considered an integral part of secure digital exchanges – especially around encrypted data – it’s one of those aspects of digital communication security that’s best addressed in non-digital ways.

Jewel.ID is designed to help improve the process of digital authentication by making it easy and appealing for individuals to carry and share their PGP “fingerprint” with others. Using a laser cutter, on one side the Jewel.ID is etched with a decorative pattern or design of the bearer’s choosing; on the other, a QR code representation of the individual’s PGP “fingerprint” is inscribed. To share the code, the other party can simple scan the QR code with their mobile device, or snap a photo of the fingerprint string. This can then be easily compared to the fingerprint found on a key server or other website in order to authenticate it to that particular person.

Jewel.ID is sturdy, inexpensive, and easy to add to a keyring or wear as a necklace pendant. By moving the process of digital authentication to an attractive analog “channel,”
Jewel.ID can help improve your daily information security and help you look good doing it!

Removing unwanted units from data with “chomp” in Google Refine

I recently wanted to make a county-by-county map of food stamp use, and a Google search turned up this article which has data from 2009. It’s a bit out of date, but as the data is meant to drive a map-making example, it will serve my purpose – especially since the authors were good enough to make the data available:

datasource

The source data is structured and complete, but there’s a problem: there’s a “%” sign on the end of all the readings. We won’t be able to do any sort of math on this or use it as a source for a Fusion Tables choropleth map unless we can remove those first.

Continue reading