NBN Web Tools

Tools

Timelines, Maps and Charts

TimelineJS
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

StoryMapJS
Authoring tool to tell location-based timelines and stories

As Seen on NBN

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

As Seen on NBN

Mapbox
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

Leaflet
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

Datawrapper
Tool that creates simple, embeddable charts

As Seen on NBN

D3
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

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

As Seen on NBN

Vimeo
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

Youtube
Embed Youtube videos

As Seen on NBN

Images

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

As Seen on NBN

Lightbox
Pop out images, great for showcasing scanned documents or images

As Seen on NBN

Social Media

Storify
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.

Contact

Questions? Comments? Send Nicole an email!