304 North Cardinal St.
Dorchester Center, MA 02124
304 North Cardinal St.
Dorchester Center, MA 02124
Final yr I collaborated with GitHub to design the 2021 State of the Octoverse report. GitHub’s Octoverse analyzes real-world knowledge from thousands and thousands of builders and repositories with a purpose to current the yr’s software program improvement business insights. The 2021 report covers three main developments: enhancing efficiency and well-being by creating code, creating documentation, and supporting communities in a better, extra sustainable method.
Because the undertaking’s inventive liaison, it was my job to help the GitHub crew in making the data-heavy report simple to know. Utilizing knowledge visualization, I designed 20+ charts, maps, and graphs to assist readers unravel the data that GitHub knowledge scientists collected.
On this knowledge visualization case examine, I clarify my design course of, showcase the web site I helped to create for GitHub’s Octoverse, and share key learnings from the undertaking.
State of the Octoverse 2021 is a sprawling report, with knowledge collected from over 73 million GitHub builders and greater than 61 million new repositories. It’s additionally the primary time a survey on respondent demographics has been included. Making sense of the info required an in depth design effort.
Our modest crew, which included developer Jose Luis Garrido and undertaking supervisor Miquel Lopez, was tasked with synthesizing this immense quantity of data for readers. Regardless of a delayed begin and different simultaneous initiatives, we delivered.
The primary stage of my knowledge visualization design course of was discovery. GitHub’s knowledge scientists collected and analyzed info from builders and repositories by means of Excel information, PowerPoint shows, and different knowledge units.
With this info, together with GitHub’s preliminary knowledge visualization sketches and a 60-page context doc, I started to consider how finest for example every knowledge set. Then, I set about designing every chart, map, and diagram for max person engagement and an intuitive person expertise.
There are three key factors to selecting an efficient knowledge visualization:
Knowledge may be represented in quite a few methods–bar charts, line graphs, heatmaps, waterfall charts, and extra. Every chart serves a function, and it’s necessary to make use of the fitting one to make sure that a transparent and correct message is conveyed.
For instance, if you wish to current the distinction between two portions, use a bar chart. If you wish to present a pattern over time, use a line graph.
You additionally want to concentrate on your customers’ means to learn and analyze knowledge. Most of us are accustomed to pie, bar, and line charts. We see them all over the place, and we all know how you can learn them.
However, fewer folks know how you can learn field plots, that are utilized in many analysis publications to summarize a number of knowledge variables into one chart.
If you happen to current customers with unfamiliar visualizations, they’ll have a tough time decoding the info.
Is the info visualization clear and concise, or is there an excessive amount of noise? Bar charts may be a good way to show knowledge, however not if there are 100 bars with particular person labels. Likewise, streamgraphs are stunning and purposeful, however solely when there’s a transparent knowledge sample. Generally much less is extra.
All through the 2021 State of the Octoverse report, you’ll discover a wide range of knowledge visualizations which have been fastidiously composed in accordance with the corresponding knowledge perception.
On the Overview web page, I wanted to design an infographic for 2 units of information—displaying the place respondents labored earlier than the pandemic and after it. GitHub offered me with two pie charts that every mapped out 4 knowledge factors: collocated, hybrid, totally distant, and never relevant. Nevertheless, pie charts are usually not notably efficient when evaluating two units of information.
As a substitute, I opted for a butterfly chart. Butterfly charts plot the info as two horizontal bars aspect by aspect, resembling butterfly wings. These charts clearly present the distinction between two teams that share the identical parameters, and make evaluating two units of information a lot simpler.
One other efficient knowledge visualization is the bump chart. We used this chart to current the data on the preferred pc programming languages utilized by builders over the previous eight years. Bump charts are nice for displaying adjustments in rank over a time period, and so they have turn into a staple within the Octoverse report.
I wanted for example the completely different sectors to which respondents contribute code. The ultimate resolution got here right down to pie charts versus treemaps.
Pie charts are helpful when you could have three or 4 sectors and when the portions are clearly completely different. Nevertheless, our brains don’t course of angles properly, so when there’s a pie chart with plenty of equally sized wedges, folks have a tough time deciphering which is greater.
In distinction, treemaps enable customers to simply evaluate segments to one another, in addition to to the entire. The most important rectangles are positioned within the high left, adopted by progressively smaller rectangles. It’s simpler to evaluate straight strains than it’s to match wedges or angles.
Lastly, I wanted for example the geographical distribution of organizations utilizing GitHub in 2021 by area or nation. For this, I used a inhabitants cartogram. Cartograms are maps wherein the geometry is distorted to accommodate a selected financial, social, political, or environmental function.
On this knowledge visualization, the scale of the squares signifies the inhabitants dimension. Moreover, the saturation of the sq.’s coloration signifies what number of organizations in that space are utilizing GitHub.
Along with designing knowledge visualizations, I additionally helped the GitHub crew produce a web site for Octoverse 2021. This website was a hub for customers to learn, discover, and work together with the report’s knowledge insights.
To encourage person engagement, we opted for a completely responsive web site that will adapt the location’s rendering to completely different sized viewports. GitHub requested us to pay particular consideration to the desktop model after discovering that bigger gadgets drove the vast majority of Octoverse visits.
When designing the responsive website, I adopted these finest practices:
As a result of I designed the web site with completely different gadgets in thoughts from the beginning, most charts rendered properly on all display sizes. I solely wanted to make minor changes for optimum viewability, corresponding to to the round dendrogram on the finish of the “Sustainable communities” part.
I explored completely different choices for the web site’s info structure. I didn’t need to overwhelm customers with an excessive amount of info, however I additionally didn’t need the location to be scattered or troublesome to navigate.
With this in thoughts, I began by designing an extended scrolling web site, with all of the content material on the identical web page. When that grew to become visually overwhelming, I attempted putting every chart on a separate web page. To assist with navigation, I added a aspect navigation menu to every web page with a desk of contents, much like what you may discover in a guide. The ultimate design on the Octoverse web site consists of separate webpages for the three important developments, plus a homepage that serves as a abstract of crucial knowledge.
After deciding on the data structure, I moved on to designing the location’s content material construction, navigation move, pictures, and graphics. I created wireframes to map out the content material and present paths between completely different pages.
To fulfill GitHub’s request for a fascinating, dynamic web site, we added interactive parts. As an illustration, beneath the highest navigation bar, I designed a scroll progress indicator so guests may hold observe of the place they had been on the location. As readers scroll down a web page, the indicator bar scales incrementally, and every web page has a special fill coloration for the bar: grey, purple, blue, or inexperienced.
To maintain the web site from wanting flat, we determined to animate the part headers. I created the illustrations and our crew’s developer animated them. We additionally animated the hero picture for the homepage and every subsection, and their corresponding chapter playing cards on the backside of every webpage.
We additionally made a few of the static knowledge visualization charts interactive. For instance, as you scroll over a line within the bump chart, the road thickens to emphasise the corresponding knowledge level. It’s a easy however efficient animation that lets website guests work together with the info and shortly evaluate languages.
Knowledge is simply helpful if you may make sense of it, and the method of designing data-heavy content material that customers can simply decipher is difficult. However, this collaboration with GitHub broadened my information in knowledge visualization design. Listed below are crucial takeaways from this knowledge visualization case examine: