Tags: visualisation

98

sparkline

Thursday, August 3rd, 2017

Presenting the new d3.loom chart form plugin - Visual Cinnamon

Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.

Monday, July 31st, 2017

The Evolution of Trust

Such a great primer on game theory—well worth half an hour of your time.

The Pudding

A Weekly Journal of Visual Essays

Some lovely data visualisation here.

Tuesday, July 18th, 2017

SolarBeat

Luke just demoed this at Codebar. It’s a lovely audio/visualisation of the solar system—a sonic orrery that you can tweak and adjust.

Hypnotic.

ARP Observatory (@ArpObservatory) | Twitter

In July we started receiving audio signals from outside the solar system, and we’ve been studying them since.

Tweets contain sound samples on Soundcloud, data visualisations, and notes about life at the observatory …all generated by code.

ARP is a fictional radio telescope observatory, it’s a Twitter & SoundCloud bot which procedurally generates audio, data-visualisations, and the tweets (and occasionally long-exposure photography) of an astronomer/research scientist who works at ARP, who is obsessive over the audio messages, and who runs the observatory’s Twitter account.

Sunday, June 4th, 2017

Month maps

One of the topics I enjoy discussing at Indie Web Camps is how we can use design to display activity over time on personal websites. That’s how I ended up with sparklines on my site—it was the a direct result of a discussion at Indie Web Camp Nuremberg a year ago:

During the discussion at Indie Web Camp, we started looking at how silos design their profile pages to see what we could learn from them. Looking at my Twitter profile, my Instagram profile, my Untappd profile, or just about any other profile, it’s a mixture of bio and stream, with the addition of stats showing activity on the site—signs of life.

Perhaps the most interesting visual example of my activity over time is on my Github profile. Halfway down the page there’s a calendar heatmap that uses colour to indicate the amount of activity. What I find interesting is that it’s using two axes of time over a year: days of the month across the X axis and days of the week down the Y axis.

I wanted to try something similar, but showing activity by time of day down the Y axis. A month of activity feels like the right range to display, so I set about adding a calendar heatmap to monthly archives. I already had the data I needed—timestamps of posts. That’s what I was already using to display sparklines. I wrote some code to loop over those timestamps and organise them by day and by hour. Then I spit out a table with days for the columns and clumps of hours for the rows.

Calendar heatmap on Dribbble

I’m using colour (well, different shades of grey) to indicate the relative amounts of activity, but I decided to use size as well. So it’s also a bubble chart.

It doesn’t work very elegantly on small screens: the table is clipped horizontally and can be swiped left and right. Ideally the visualisation itself would change to accommodate smaller screens.

Still, I kind of like the end result. Here’s last month’s activity on my site. Here’s the same time period ten years ago. I’ve also added month heatmaps to the monthly archives for my journal, links, and notes. They’re kind of like an expanded view of the sparklines that are shown with each month.

From one year ago, here’s the daily distribution of

And then here’s the the daily distribution of everything in that month all together.

I realise that the data being displayed is probably only of interest to me, but then, that’s one of the perks of having your own website—you can do whatever you feel like.

Hertzsprung-Russell diagram animation | ESA/Hubble

When I was in Düsseldorf for this year’s excellent Beyond Tellerrand conference, I had the pleasure of meeting Nadieh Bremer, data visualisation designer extraordinaire. I asked her a question which is probably the equivalent of asking a chef what their favourite food is: “what’s your favourite piece of data visualisation?”

There are plenty of popular answers to this question—the Minard map, Jon Snow’s cholera map—but we had just been chatting about Nadieh’s previous life in astronomy, so one answer popped immediately to mind: the Hertzsprung-Russell diagram.

Thursday, April 27th, 2017

Font Map · An AI Experiment by IDEO

Fontlandia is yours to explore.

By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.

Wednesday, February 1st, 2017

Stuff in Space

A gorgeous visualisation of satellites in Earth orbit. Click around to grasp the scale of the network.

Friday, January 6th, 2017

A Day in the Life of Americans | FlowingData

Watching this data visualisation on its high speed setting is quite hypnotic.

Monday, November 21st, 2016

29 Bullets

Russell wrote an article for Wired magazine all about PowerPoint, but this extended director’s cut on his own site is the real deal.

Who knew that the creator of PowerPoint was such an enthusiast for the concertina?

Wednesday, November 16th, 2016

Our World In Data

If you’re in need of some long-term perspective right now—because, let’s face it, the short-term outlook is looking pretty damn bleak—then why not explore some of Max Roser’s data visualisations? Have a look at some of the global trends in inequality, disease, hunger, and conflict.

Sunday, August 7th, 2016

The Future of Browser History — Free Code Camp

I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.

Sunday, May 8th, 2016

The Joy of Sparks

This is so cool! The logs of the Indie Web Camp IRC channel visualised as a series of sparklines in the style of Joy Division/Jocelyn Bell Burnell.

Monday, October 12th, 2015

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

Sunday, August 23rd, 2015

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Tuesday, July 28th, 2015

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

Wednesday, July 22nd, 2015

NTH-TEST | nth-child and nth-of-type Tester

A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.

Wednesday, December 17th, 2014

28 Months on Mars - NYTimes.com

Curiosity’s journey so far, nicely visualised.

Saturday, October 4th, 2014

Tabletop Whale

Beautiful visualisations of science and nature.

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