Fred is soft skills and professional development editor at Smashing Magazine pitch him and a software engineer at The Guardian. His interests include More aboutFrederick

United Nations Refugee Project

They say we are entering the Data Age. Theres certainly enough of the stuff about. Between analytics public records and the slow yet steady growth of the Semantic Web millions of data points are at our fingertips just waiting to have their stories told.

Google Web Developer

Telling captivating stories with data is easier said than done. Spreadsheets dont exactly get hearts singing. Big pieces of JSON dont inspire so much as they horrify. It doesnt need to be that way though. Data can dance. Data should dance.

This edition of Web Design Done Well showcases magnificent examples of data visualization on the web and closes with some of the countless resources available to those who want to learn to make their own. From wind maps to the seven terraces of Mount Purgatory data visualization can take you to some remarkable places.

Data doesnt have to be dusty and boring it can be vibrant and alive. This Wind Map showing wind patterns in the US is a stunning example of how data can transcend spreadsheets and become something beautiful. More importantly its intuitive to understand a true mark of quality data visualization. Thicker faster lines equate to stronger winds. Simple. It makes for a stunning at-a-glance picture with more granular detail available by hovering and zooming.

Website development

The site is a testament to the importance of publically available data this will be a running theme in this article. The numbers are pulled through from the National Digital Forecast Database which is updated hourly. As creators Fernanda Vigas and Martin Wattenberg put it this makes Wind Map a living portrait of wind patterns in the contiguous United States.

Financial Times Covid Chart

Meet TypeScript in 50 Lessons our shiny new guide to TypeScript. With detailed code walkthroughs hands-on examples and common gotchas all broken down into short manageable lessons. For developers who know enough JavaScript to be dangerous.

Data visualization isnt just about showing information its about showing the connections between information. DivineComedy.digital is a digital humanities tool which shows how Dantes Divine Comedy has manifested itself in the art across the seven centuries since it was published.

Web App Development

The sections of the book have been broken down into chapters and the chapters into passages. Each contains a wealth of artworks inspired by the text from over 70 museums by more than 90 authors. The project is a testament to Dantes original work the works it has since inspired and the power of digital tools to capture the true interconnectedness of things.

Speaking of the interconnectedness of things heres something I became aware of while researching the Semantic Web a couple of years ago. The Linked Open Data Cloud visualizes more that 16000 links between 1300 data sources on the Web.

Maintained by John Philip McCrae for the Insight Centre for Digital Analytics the graph is built using LOD Cloud Draw. Though D3s force-directed graph is perhaps a more mainstream equivalent. The LODC has come a long way since starting with 12 datasets in 2007.

The Pudding Explores The Pitch Of Pop Music

For those interested in learning more about linked data DPpedia is a fine place to start. Data visualization tools arent much good without data to work their magic on so networks like this and the ethos of openness and sharing behind them are vital.

I hope youve noticed a common theme so far. Data visualization carries extra weight when it has purpose when its more than just something nice to look at. The magic of data visualization is that it can take complex data sets about complex topics and present them in ways that almost anyone can understand. Data visualization can tell stories no other medium can. This stream chart of refugee movement in the 20th and 21st century is a stunning example of that packed with information yet accessible and clear.

This was commissioned by the United Nations Refugee Agency and masterminded by the brilliant Curran Kelleher more on him later. You can almost see the ebb and flow of a crowd of millions. Its powerful stuff and just as importantly it hasnt watered down the subject matter. Instead it has brought it to life.

Sometimes only a line chart will do. The Financial Times data visualization team knocked it out of the park with their tracking of Covid infections which became a major point of reference during the early days of the pandemic. It is a true team effort the culmination of work by developers designers and reporters.

Something I especially like about this example of data visualization is the amount of space dedicated to methodology and sources. It takes the time to explain the data and why its presented the way it is. Very occasionally these decisions speak for themselves but its best to default to transparency. Give readers the full context.

Data dashboards have become a lynchpin of the modern web. Singapores data.gov.sg is an especially good example of a government making data not just publically available but readable too. Its a vast explorable data dashboard one we can all learn from both in terms of design and accessibility.

With almost 2000 data sets on subjects ranging from property prices to short story programmes the site feels like a virtual library. Browsing is easy and intuitive. The data is accessible in every sense of the word trying to live up to its own data sharing principles

Its a question that keeps all of us awake at night are men singing at a higher pitch in pop music than they used to Luckily this project by data viz magicians The Pudding gives us the answer. Are Men Singing Higher in Pop Music uses vocal register data from Pandora to find the average pitch of every song featured in the Billboard Hot 100 since 1958. No really. They did.

What on the surface may seem a silly if fun idea quickly unfolds into a fascinating exploration of music trends weaving together audio video and god honest line graphs into one colorful package.

The piece is also an admittedly inverted glimpse into the possibilities of data sonification a concept hauntingly realized by data journalist Simon Huwiler with his covid deaths music box.

Masterminded by visual journalist Denise Lu this eclipse map by the Washington Post is both stunning and useful a winning data viz combination if ever there was one. The article asks for your year of birth then displays every solar eclipse in your lifetime provided you live to 100. How does it do this On the globe of course.

What by rights should appear extremely complicated is here made simple and intuitive. As is typical of the very best uses of data visualization you wonder how or why anyone would ever want to present the same information another way. And the globe screenshotted above is just the tip of the iceberg. The article goes on to explore all sorts of fascinating stuff from degrees of eclipse to the path of totality.

The seismic impact of the Covid pandemic has lent itself especially well to data visualization over the last couple of years. Infections hospitalisations deaths reinfections vaccinations all this and more add up to the story of the pandemic. And thats to say nothing of its impact on politics economies and culture. The amount of data available is overwhelming but as this dashboard by the German Federal Ministry of Health shows it can be wrangled into forms we can all understand.

Delving into vaccination data by region age group and even manufacturers the dashboard is its own little masterclass in data visualization. Its beautifully designed too with an appealing palette and impressive range of styles giving each visual a distinctive look and feel. Government data doesnt have to be boring or opaque. And again its all available to download.

I dont think we ever truly lose our childlike wonder for space exploration. Now more than ever humankind is reaching for the stars - but whos doing what And hows it going Lunar Open Architecture LOA seeks to answer those questions and a whole lot more. A collaboration between MIT Media Labs Space Exploration Initiative and the Open Lunar Foundation LOA includes a stunning outer space-like data visualization of missions since 1958.

By grouping missions together by organizations type and status the constellation of nodes gives you an immediate sense of how space exploration has evolved over time and how its likely to evolve in the future. As MIT put it the future of lunar exploration is getting crowded. Projects like this show that fact is something the masses can and should understand. Its not rocket science.

Theres an awful lot of bluster around when it comes to the will of the people. Many claim to know what it is yet seldom do they reach the same conclusions. Probably because they often dont consult the people themselves. The Nationscape Insights project a collaboration between the Democracy Fund Voter Study Group UCLA and USA Today is an attempt to strip away the rhetoric from politics and show what voters actually think.

Containing 80 weeks of survey data collected in the build up to the 2020 US election the Nationscapes Insights project allows you to explore public opinions on topics ranging from gun control to the Green New Deal with filters for region demographics and political party. Its a remarkable dataset. The interface is intuitive clear and I think impressively nonpartisan. The methodology is clear. You can see the questions interviewees were asked. It is data visualization that clarifies rather than clouds and thats always a worthy goal.

The data visualization examples shared here present but a fraction of whats possible. If a data set exists it can be expressed in fascinating informative ways. It just needs storytellers who show their methodology.

In the interests of furthering data visualization everywhere below is a selection of learning resources libraries articles websites and other resources to sink your teeth into. Explore play do the unexpected. Go make something beautiful.