Its graphics and videos stretch to fill the entire browser window, an emerging design trend that is the true successor of the magazine’s full-bleed photos. The Times shows that when you elevate beautiful art that’s telling the story in a seamless way, it becomes greater than the sum of it’s parts. Compare to a similar NYT story where pictures are included with the story, but certainly not featured with any love.
It’s not confined to the style of the rest of the NYT site, which is for the most part a static 975px width. Some of the impact of full-bleed pieces like Snow Fall comes from the contrast between those special features and the whitespace of the primary site. It’s a clue to the user to dig in, and that something special is going to happen.
Read through for the rest, including how Web presentation and storytelling design affected EJ’s reporting on Occupy Oakland.
Lionel Messi won the Ballon d’Or earlier this week as the world’s best soccer (nay, fútbol) player, the fourth year in a row he’s been awarded such.
As ESPN’s Soccernet explains, voting is divided among national coaches, national team captains and media throughout the world.
Ramiro Gómez took the voting data to show how the voting network looks and works:
Messi received 41.60% of the voters’ points followed by Cristiano Ronaldo (23.68%), who did not seem to enjoy the ceremony that much, being 2nd for the 2nd time in a row and Andrés Iniesta (10.91%), who came in 3rd.
The above visualization shows the network of votes of the Ballon d’Or 2012. Voters and voted for players make up the 524 nodes of the graph. Node size is based on indegree. The 1513 edges are based on the given votes, with each of the voters having three votes: 1st place 5 points (thickest line), 2nd place 3 points, and 3rd place 1 point (thinnest line). Node color indicates either being a captain (red), coach (violet), journalist (blue), or player who did not vote (green).
Mozilla has released Popcorn Maker 1.0, which allows journalists to create web-native video that includes real-time tweets, Google maps, images and more.
Popcorn Maker allows users to drag and drop video from YouTube or Vimeo or audio from SoundCloud and then add other other elements such as images, tweets and links to content on the web. For example, tweets that include a hashtag can be added and will be automatically updated with new tweets containing that hashtag after the video is published.
After watching the videos and poking around a bit, Popcorn Maker feels like Storify but with a video wrapper.
No surprises here. Code reduced to its essentials with no word or variable wasted. It’s not fancy; maybe its even a little pedantic - but that’s the beauty of Hemingway’s writing. No need for elaborate logic or clever variable names. It’s plain and its clear and it does what it has to - and nothing more.
The goal of the script is to create a Fibonacci series (a string of numbers where each number is the sum of the two that precede it).
Note that Google, Microsoft and Media Temple all host jQuery for public use on their respective CDNs. The upside is that when you use these resources — instead of hosting jQuery on your own — it’s often likely that the scripts are already cached in a visitor’s browser so site performance will quicken.
Datavisualization.ch Selected Tools is a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly. This is not a list of everything out there, but instead a thoughtfully curated selection of our favourite tools that will make your life easier creating meaningful and beautiful data visualizations.
As Benjamin Wiederkehr writes on their blog, “It includes libraries for plotting data on maps, frameworks for creating charts, graphs and diagrams and tools to simplify the handling of data. Even if you’re not into programming, you’ll find applications that can be used without writing one single line of code.”
I’ve been playing with a delightful timeline creator developed by Zach Wise, a multimedia producer and Associate Professor at Northwestern University’s Medill School.
Called Timeline, the open source software was created as a project within the Knight News Innovation Lab, has support for media types such as Twitter posts, photos from Flickr, video from YouTube and Vimeo, audio from SoundCloud and Google map embeds.
Timeline creators use JSON for authoring or — and this is very clever — enter data into a Google spreadsheet and Timeline will pull it from there. On Twitter, Wise suggests a Timeline plugin for WordPress is coming soon. — Michael
Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…
…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.
To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).
Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.
Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.
The average page is now about 965 kilobytes in size, reveals a study of top sites by the HTTP Archive.
The figure is 33% up on the same period in 2010 when the average webpage was a svelte 726 kilobytes…
…Analysis suggests the bloat is down to user demands for more interactivity, as well as the tools used to watch what happens when people visit a site.
Back in the day when we had to walk uphill both ways to get our Webs to work, a general goal was to keep pages under 50k. The BBC points out that our portly pages might be fine for people accessing sites via broadband but is a killer for those viewing on 3G mobile.
Takeaway: remember to optimize, and then do it again.
Director Kat Cizek used Popcorn and other HTML5 tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects and designers, imagining how they can revitalize their homes and neighborhood together. The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life, all through a multi-layered, three-dimensional landscape that runs directly in the web browser.