Designing the Octoverse: A GitHub Knowledge Visualization Case Examine


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.

Designing Participating Digital Experiences With Knowledge Visualization

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.

Kicking Off the Design Course of

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.

Selecting Your Chart

There are three key factors to selecting an efficient knowledge visualization:

1. Establish the Chart’s Goal

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.

2. Take into account the Finish Person

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.

3. Design With Readability

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.

Designing Excellent Knowledge Visualizations

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.

The Butterfly Chart

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.

A butterfly chart for GitHub's Octoverse report showing two sets of data side by side. The data compares where respondents worked before (left) and after (right) the pandemic. There are four data points: collocated, hybrid, fully remote, and not applicable for both data sets.
GitHub offered me with two pie charts that recognized the place respondents labored earlier than and after the pandemic. I felt it was more practical to supply a butterfly chart, which shows two units of information subsequent to one another for straightforward comparability.

The Bump Chart

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.

A bump chart for GitHub's Octoverse report that shows the most popular computer programming languages used by developers over the past eight years. Each language is represented by a different colored line. There are 10 languages in total.
For this knowledge visualization, I used an interactive bump chart to indicate the preferred pc programming languages utilized by builders over the previous eight years.

The Treemap

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.

A treemap for GitHub's Octoverse report illustrates the different sectors to which respondents contributed code during 2021. Each sector is represented by a rectangle.  The largest rectangles are placed in the top left, followed by progressively smaller rectangles. Each rectangle is a different color.
I used a treemap to current the completely different sectors to which the respondents had contributed code. In some circumstances, treemaps are preferable to pie charts as a result of it’s simpler to match rectangles than slices.

The Cartogram

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.

A population cartogram for GitHub's Octoverse report represents the geographical distribution of organizations in 2021. This map alters the reality of physical location in order to better visualize a particular factor, in this case business. The saturation of the square's color indicates how many organizations are using GitHub, with lighter shades representing fewer and darker shades representing more.
Cartograms are nice for thematic mapping, if you need to emphasize info aside from bodily location, corresponding to an financial, social, political, or environmental function.

Responsive Web site Design For GitHub’s Octoverse 2021

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:

  • Composing textual content with desktop-friendly and mobile-friendly typefaces. This included selecting optimum font sizes, typefaces, and line size and top, and refining how the textual content appears at completely different breakpoints.
  • Laying out the visible parts on every web page to encourage scrolling.
  • Designing a user-friendly high navigation bar that adapts its structure to the viewport dimension.

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.

A circular dendrogram for GitHub's Octoverse report. Each circle represents one of the 20 largest repositories by category and repository contributors. Each sector is represented by a different color.
Dendrograms are a good way to indicate the relationships between classes. You may click on on the circles inside this interactive dendrogram to find the variety of repository contributors and % of contributors with account age <2 years.

Organizing the Data Structure

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.

Making the Web site Interactive

The Scroll Progress Indicator

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.

A portion of the
Refined touches of interactivity: The scroll progress indicator bar adjustments from gentle grey to inexperienced as you scroll down the web page.

Animated Headers, Photographs, and Knowledge Visualization

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.

Animated gif of the three chapter cards that can be found at the bottom of each webpage in GitHub's Octoverse website. They are: Writing and shipping code faster (with an interactive purple header), Creating documentation to support developers (with an interactive blue header), and Supporting sustainable communities (with an interactive green header.
On the backside of every webpage, you could find animated chapter playing cards for every of the three important developments introduced in GitHub’s Octoverse.

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.

Creating Profitable Knowledge Visualizations and Digital Designs for GitHub: Key Learnings

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:

  • Know the model: Being accustomed to a model’s core type pointers—corresponding to ​​its use of sort, coloration, and pictures—hurries up the design course of as a result of it frees designers to maneuver on to the inventive course of. I used to be fortunate that I knew loads about GitHub’s model earlier than the collaboration, and I used to be in a position to make use of this data to tell my designs.
  • Select the fitting kinds of knowledge visualizations: Choosing the proper visualization to symbolize a knowledge level is crucial. An incorrect illustration may cause confusion or convey the mistaken message.
  • Use coloration properly: The appropriate coloration mixture will information the reader’s eye and draw consideration to a selected knowledge level.
  • Keep curious: While you’re making an attempt to inform a compelling knowledge story, you’re certain to come across advanced design issues, so it’s necessary to be open to unusual options and steady studying.


Leave a Reply