Tags: avi

28 Months on Mars - NYTimes.com

Curiosity’s journey so far, nicely visualised.

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Why You Want a Code of Conduct & How We Made One | Incisive.nu

A great piece by Erin on the value of a code of conduct for conferences, filled with practical advice.

Once you decide to create a code and do it thoughtfully, you’ll find the internet overflows with resources to help you accomplish your goals, and good people who’ll offer guidance and advice. From my own experience, I can say that specificity and follow-through will make your code practical and give it teeth; humane language and a strong connection to your community will make it feel real and give it a heart.

Smart Fixed Navigation

Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.

I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

James Bridle — Where You Are

The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.

Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting

A terrific piece of well-illustrated data-driven journalism.

If the Moon Were Only 1 Pixel - A tediously accurate map of the solar system

A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.

4 Million Ravelers

A lovely bit of data celebration from Ravelry on the occasion of their 4 millionth user.

I’ve said it before and I’ll say it again: if you want to see a successful example of a real social networking site, don’t look at Facebook; look at Ravelry.

Earth wind map

A beautiful real-time visualisation of winds on our planet.

WTF Visualizations

Data visualisations that make no sense.

The perils at Great Falls - Washington Post

On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.

EIRE signs of WW II | GPS of the past

A fascinating project to document markings from 1939—designed to be visible from the air—placed all around the Irish coast.

Links are not buttons. Neither are DIVs and SPANs by Karl Groves

Yes! THIS!

Online communities

Caterina Fake takes a heartfelt look at the history of online communities:

The internet is full of strangers, generous strangers who want to help you for no reason at all. Strangers post poetry and discographies and advice and essays and photos and art and diatribes. None of them are known to you, in the old-fashioned sense. But they give the internet its life and meaning.

100,000 Stars

A gorgeous interactive visualisation of our local galactic neighbourhood.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

SpaceWarps

Zooniverse have done it again. Now you can help in the hunt for sources of gravitational lensing.

It’s informative. It’s fun. It has genuine scientific value.

Here is today

A long-zoom data visualisation.

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004

This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

Responsive Navigation

David’s slides from the Responsive Day Out.

Inside the Battle of Hoth: The Empire Strikes Out

A damning analysis of the Empire’s military strategy at the battle of Hoth, complete with illustrations. The comments are good too:

Guys, cut Palpatine some slack. He’s still in his first term as Emperor…

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

Flickr, codeswarming

A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.

Medaler.com

I know have a visualisation of my public data in the form of 3D-printed snowflake, thanks to Medaler.

Jan V. White

Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.

All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.

Jan V. White is a mensch.

10 Years of Scrobbling Timeline – Last.fm

A really nice interactive timeline of data from ten years of scrobbling music to Last.fm.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

Paris and the Data Mind - The Morning News

Craig writes about the hologram of his quantified self.

Why Instagram Works — Rainypixels

It’s all about the signalling.

Apple’s .mobi insanity - QuirksBlog

Wow. This might be the stupidest behaviour from a browser that I’ve ever come across: mobile Safari behaves differently depending on the top level domain of the site! Madness!

Mind you… it’s kind of poetic justice for having a ridonkulous .mobi domain in the first place.

Responsive Web Design Patterns | This Is Responsive

A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.

Complex Navigation Patterns for Responsive Design | Brad Frost Web

Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.

Mobile Navigation Icons | TimKadlec.com

Tim shows how to make a scalable three-line navicon in CSS.

Why the Little Printer is good – aka, someone on the internet is wrong, a response. |

Dan makes a very good point about Little Printer: it’s not the “printer” part that matters; it’s the “little”.

Distant Shape: 10 Years of Daring Fireball

A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.

Oh, and happy birthday, Daring Fireball.

The Evolution of the Web

A nice timeline visualisation of recent history.

KyleBean.co.uk - Portfolio: Mobile Evolution

Kyle’s Matryoshka phones are as cool as they are cute.

LukeW | Off Canvas Multi-Device Layouts

Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

Myself, quantified | Extenuating Circumstances

Dan writes about how data saved his life. That is not an exaggeration.

He describes how, after receiving some very bad news from his doctor, he dived into the whole “quantified self” thing with his health data. Looking back on it, he concludes:

If I were still in the startup game, I have a pretty good idea of which industry I’d want to disrupt.

Scalable Navigation Patterns in Responsive Web Design | Palantir.net

An case study that tackles complex navigation in a responsive site.

A Time-Lapse Map of Every Nuclear Explosion Since 1945 - by Isao Hashimoto - YouTube

A beautiful and disturbing piece of data visualisation. The numbers are quite astonishing.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

The world’s undersea internet cables - interactive | Technology | guardian.co.uk

Explore the shape of the underwater world of internet backbones.

Thoughts on Responsive Navigation

Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

Responsive Navigation Patterns | Brad Frost Web

Brad does a great job of rounding up various design patterns used for navigation in responsive sites.

Gardens and Zoos – Blog – BERG

A lovely piece from Matt examining agency and behaviour in the things we surround ourselves with: frying pans, houseplants, pets, and robots.

These are the droids you are looking for.

angry, productive birds (tecznotes)

Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.

Position: fixed revisited - QuirksBlog

PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.

Occupy George

A stroke of genius: turning money itself into the carrier for infographics on wealth distribution in America.

10 Charts About Sex « OkTrends

This is may just be the best thing on the internet about data visualisation and statistics. And sex.

Responsive design and JavaScript - QuirksBlog

Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:

Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.

That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).

The Tink Tank » Marking up the current page with HTML5 links

Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.

See something or say something - a set on Flickr

These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.

Coding Horror: Suspension, Ban or Hellban?

A nice little round-up of some techniques for dealing with trolls in online communities. I must remember some of this stuff for The Session.

The Science of Why We Don’t Believe Science | Mother Jones

A look at our inbuilt confirmation biases.

Experience Is What We Make It | UX Magazine

The Riegers are like emissaries from Planet Smart and we mere mortals are fortunate that they take the time to give us great articles like this.

Tell-all telephone | Data Protection | Digital | ZEIT ONLINE

A dataviz demo of creepiness: displaying the movements of Malte Spitz by correlating her phone activity and web usage.

Tidy Street electricity usage | Flickr - Photo Sharing!

I really like this idea: one street in Brighton is openly displaying its electricity usage over time.

Tidy Street electricity usage

a world of tweets

A very pretty visualisation of tweets on a map using canvas.

MTA.ME

The New York subway schedule converted into sound by treating each line as a string.

YouTube - Tracking 18th-century “social network” through letters

Visualising the Republic of Letters.

City Crawlers Berlin

This looks like it could be a good book: a collaborative project to find patterns and stories in the data of one city.

Oh, and the site is lovely and responsive.

Victorian Infographics - a set on Flickr

Some beautiful pieces of data visualisation.

Ben Bashford - Notebook of Things - Emoticomp

How does an object’s character and/or behaviour tie in with communicating its purpose in life, how it looks and how it should be used?

Notabilia – Visualizing Deletion Discussions on Wikipedia

Visualisations of the history of controversial Wikipedia articles.

300 Songs

David Lowery is chronicling the history of Camper Van Beethoven and Cracker, song by song …with accompanying MP3s. It seems too wonderful to be true

Shanzai! (Wired UK)

Bobbie documents the work of Jan Chipchase, currently looking into the design decisions behind counterfeit goods on sale in Shanghai.

Time Zones

A very handy tool for planning intercontinental communication.

Romance has lived too long upon this river

A glanceable indication of the current Thames tide, from James Bridle.

Google Prediction API - Google Code

An interesting, if necessarily somewhat complicated-looking, API from Google: analyse your user's past behaviour to predict future outcomes.

Mashup Breakdown - Girl Talk

A visual representation of each track on the new Girl Talk album.

Journalism in the Age of Data: A Video Report on Data Visualization by Geoff McGhee

Telling stories with data — the video.

Did you have a nice day? - Made by Rattle

A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.

Periodic Table of the Elements - Josh Duck

Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).

Polymaps

A JavaScript/SVG library for displaying maps in a variety of interesting ways.

BBC - Dimensions - Index

New from BERG: superimposing historical events onto familiar landscapes.

prettymaps

Beautiful map visualisations by Aaron Straup-Cope.

flickr shapetiles / july 2010

Aaron's lovely visualisation of Flickr's shapetiles.

Geonames Maps « optional.is/required

Brian documents his beautiful Geonames SVG maps.

Understanding Graphics — Design For The Human Mind

A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.

Rise and Fall

Mike Stenhouse has graphed civilisation longevity: a nice bit of long zoom perspective.

If San Francisco Crime was Elevation | Doug McCune

Beautiful mapping visualisations of crime data.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

Bruce Lawson’s personal site : HTML5 details element, built-in and bolt-on accessibility

An excellent piece by Bruce on why the details element needs to be in HTML5.

Building Social Web Applications

The blog of the book by Gavin Bell.

A Practical Guide to Designing with Data

Excellent news: Brian is writing a book.

ride, rise, roar :: premiering in march at sxsw

Hillman Curtis's new film about David Byrne and Brian Eno will be premiering at Southby. Should be fun.

The Case For An Older Woman « OkTrends

A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!

MikeMake

Beatles infographics.

Digital Podge 2009 - Measurable Fun | 17th December 2009

This is a gorgeous-looking website. I have no idea what it's about.

Redesigning the Boarding Pass - Journal - Boarding Pass / Fail

The redesign of everyday things.

The Landscape of Music

The geography of musicians.

Humanising data: introducing “Chernoff Schools” for Ashdown – Blog – BERG

Matt gets an opportunity to use the Chernoff effect for visualising school data.