Link tags: visual

180

sparkline

The Deep Sea

After showing us the size of space, here’s a fascinating intereactive visualisation of the ocean depths.

The Size of Space

Celestial objects ordered by size, covering a scale from one astronaut to the observable universe.

Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com

Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!

How using component-based design helps us build faster

A case study from Twitter on the benefits of using a design system:

With component-based design, development becomes an act of composition, rather than constantly reinventing the wheel.

I think that could be boiled down to this:

Component-based design favours composition over invention.

I’m not saying that’s good. I’m not saying that’s bad. I’m also not saying it’s neutral.

Spurious Correlations

Correlation does not imply causation.

Lights at sea

Lighthouses of the world, mapped.

Complexity Explorables

A cornucopia of interactive visualisations. You control the horizontal. You control the vertical. Networks, flocking, emergence, diffusion …it’s all here.

Earth day at Clearleft

Isn’t this just lovely?

Cassie made a visualisation of the power we’re getting from the solar panels we installed on the roof of the Clearleft building.

I highly recommend reading her blog post about the process too. She does such a great job of explaining how she made API calls, created SVGs, and calculated animations.

Brendan Dawes - The Art of Cybersecurity

Some lovely data visualisation by Brendan:

The work features three main components — the threats, represented by black obelisk style objects, the system which detects and deals with these threats, represented by an organic mesh like structure, and finally the creativity that is allowed to flow because the threats have been neutralised.

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

  • Root elements
  • Scripting
  • Interactive elements
  • Document metadata
  • Edits
  • Tabular data
  • Grouping content
  • Embedded content
  • Forms
  • Sections
  • Text-level semantics

Sparkline Sound-Off – Chris Burnell

Chris has made sonic sparklines on his site too, but they’re far more musical than mine. Here’s his explanation of how he did it.

Tinnitus Tracker

Rob has turned his exhaustive spreadsheet of all the concerts he has attended into a beautiful website. Browse around—it’s really quite lovely!

Rob’s also writing about the making of the site over on his blog.

CodePen - Solar System 3D Animation (Pure CSS)

This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.

Exclusive Design

Vasilis has published his magnificent thesis online. It’s quite lovely:

You can read this thesis in a logical order, which is the way that I wrote it. It starts with a few articles that explore the context of my research. It then continues with four chapters in which I describe the things I did. I end the thesis with four posts with findings, conclusions and recommendations.

  1. Everybody’s paradox
  2. The defaults suck
  3. Flipping things
  4. Fuckup’s mama
  5. More death to more bullshit
  6. Design like it’s 1999
  7. Invisible Animations
  8. Semantics schmemantics
  9. Stress cases
  10. Coders should learn how to design
  11. Add nonsense
  12. Conclusion

WALL·E | Typeset In The Future

A deep dive into Pixar’s sci-fi masterpiece, featuring entertaining detours to communist propaganda and Disney theme parks.

Barely Maps

Minimalist cartography.

Stats: Creating (Phil Gyford’s website)

I quite like Phil’s idea of having charts like this. It might be a fun project for Homebrew Website Club to do something like this for my site.

CSS Border-Radius Can Do That? | IO 9elements

This is the trick that Charlotte used to get the nifty blobby effect on last year’s UX London site. Now there’s a tool to help you do the same.