NBN Web Tools


Timelines, Maps and Charts

Interactive timelines that support media embeds from Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more

As Seen on NBN

Google Maps
Drop pins to make embeddable maps

As Seen on NBN

Authoring tool to tell location-based timelines and stories

As Seen on NBN

Interactive charts and maps (line charts, area charts, bar charts, pie charts, heat maps, and more)

As Seen on NBN

Interactive maps that can be customized with fonts, textures and illustrations, and markers. It also has an open-source JavaScript library for more creative control and customization

As Seen on NBN

An open-source JavaScript library for mobile-friendly interactive maps

As Seen on NBN
  • Thirsty? - magazine tie-in mapping the ratings of various water fountains on campus

Tool that creates simple, embeddable charts

As Seen on NBN

JavaScript library that manipulates documents based on data using HTML, SVG, and CSS

As Seen on NBN
  • A decade of degrees - data visualization and stories about trends in different majors at Northwestern in the past ten years
  • Absentee ballot deadlines - map of the fifty states and each of their absentee ballot deadlines for the 2014 midterm election

Audio and Video

Inline audio players for embedding short clips of music, spoken word, or natural sound

As Seen on NBN

Embed Vimeo videos, can also be used for full-width videos

As Seen on NBN
  • View from the sidelines - collaboration between Video and Interactive on three different perspectives of Northwestern's 2013 Homecoming game

Embed Youtube videos

As Seen on NBN


Image slider for comparing photos and gifs to highlight then/now or before/after stories

As Seen on NBN

Pop out images, great for showcasing scanned documents or images

As Seen on NBN

Social Media

Social storytelling by embedding tweets, photos, gifs, videos, and audio

NBN Meme Generator
Create social sharing images for Twitter and Facebook

NBN Teaser Generator
Create teasers for the NBN homepage

NBN Thumbnail Generator
Create thumbnails for the NBN homepage

Quizzes and Flowcharts

NBN Quiz Generator
Use spreadsheets to create interactive multiple choice quizzes, flowcharts, and true/false quizzes

As Seen on NBN

Best practices for working with NBNteractive

First, brainstorm what you envision for your project. What kind of story are you trying to tell and how can interactive elements communicate it? Approach the Interactive editors with some ideas. As the writer or editor, you understand the story best. If you aren't sure how to translate your story to the web, pick out key elements you wish to highlight (i.e. photos, nonlinear narrative, data analysis and explanation) and discuss it with the Interactive editors.

Second, make sure you aren't adding interactivity just for interactivity's sake. It's great to want to do something with parallax scrolling (because sometimes it looks really cool), but remember that every visual or interactive design choice should serve a purpose that helps the reader in some way. Although it's important to know the types of tools and technologies available for you, it's equally important to lead with ideas.

Third, work closely with the interactive team throughout the reporting process. Traditionally, the interactive section has been a service desk where people hand off finished stories and ask "make this interactive." Though this may apply for some stories (especially if they're time sensitive), there's less interesting things that can be done with an almost-finished product. It's like making brownies - if you thrust a freshly-baked batch at someone and ask them to make mint chocolate chip brownies, they might be able to put some on the top, but it won't taste half as good as it would've been if you'd added the mint chocolate chips before they went in the oven. Work with the Interactive section even when it's just a half-baked idea: we'll make it delicious.

Allow at least 2 weeks for the Interactive team to work on your project.


Questions? Comments? Send Nicole an email!