Designing the Octoverse: A GitHub Knowledge Visualization Case Research

Final 12 months I collaborated with GitHub to design the 2021 State of the Octoverse report. GitHub’s Octoverse analyzes real-world information from hundreds of thousands of builders and repositories with a purpose to current the 12 months’s software program improvement trade insights. The 2021 report covers three main traits: 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 workforce in making the data-heavy report simple to know. Utilizing information visualization, I designed 20+ charts, maps, and graphs to assist readers unravel the data that GitHub information scientists collected.

On this information visualization case research, 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 Partaking Digital Experiences With Knowledge Visualization

State of the Octoverse 2021 is a sprawling report, with information 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 information required an in depth design effort.

Our modest workforce, which included developer Jose Luis Garrido and undertaking supervisor Miquel Lopez, was tasked with synthesizing this immense quantity of knowledge for readers. Regardless of a delayed begin and different simultaneous initiatives, we delivered.

Kicking Off the Design Course of

The primary stage of my information visualization design course of was discovery. GitHub’s information scientists collected and analyzed data from builders and repositories by means of Excel information, PowerPoint shows, and different information units.

With this data, together with GitHub’s preliminary information visualization sketches and a 60-page context doc, I started to consider how finest for instance every information set. Then, I set about designing every chart, map, and diagram for optimum consumer engagement and an intuitive consumer expertise.

Selecting Your Chart

There are three key factors to picking an efficient information visualization:

1. Determine the Chart’s Function

Knowledge will 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 correct 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 development over time, use a line graph.

2. Contemplate the Finish Person

You additionally want to pay attention to your customers’ capacity to learn and analyze information. Most of us are accustomed to pie, bar, and line charts. We see them in all places, and we all know how one can learn them.

Alternatively, fewer individuals know how one can learn field plots, that are utilized in many analysis publications to summarize a number of information variables into one chart.

For those who current customers with unfamiliar visualizations, they’ll have a tough time deciphering the information.

3. Design With Readability

Is the information visualization clear and concise, or is there an excessive amount of noise? Bar charts will be an effective way to show information, however not if there are 100 bars with particular person labels. Likewise, streamgraphs are lovely and practical, however solely when there’s a transparent information sample. Generally much less is extra.

Designing Excellent Knowledge Visualizations

All through the 2021 State of the Octoverse report, you’ll discover quite a lot of information visualizations which have been rigorously composed in accordance with the corresponding information perception.

The Butterfly Chart

On the Overview web page, I wanted to design an infographic for 2 units of knowledge—exhibiting the place respondents labored earlier than the pandemic and after it. GitHub supplied me with two pie charts that every mapped out 4 information factors: collocated, hybrid, totally distant, and never relevant. Nevertheless, pie charts aren’t notably efficient when evaluating two units of knowledge.

As a substitute, I opted for a butterfly chart. Butterfly charts plot the information as two horizontal bars facet by facet, resembling butterfly wings. These charts clearly present the distinction between two teams that share the identical parameters, and make evaluating two units of knowledge a lot simpler.

The Bump Chart

One other efficient information 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 grow to be a staple within the Octoverse report.

The Treemap

I wanted for instance 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 have got three or 4 sectors and when the portions are clearly completely different. Nevertheless, our brains don’t course of angles nicely, so when there’s a pie chart with a lot of equally sized wedges, individuals have a tough time deciphering which is greater.

In distinction, treemaps permit customers to simply evaluate segments to one another, in addition to to the entire. The most important rectangles are positioned within the prime left, adopted by progressively smaller rectangles. It’s simpler to evaluate straight traces than it’s to check wedges or angles.

The Cartogram

Lastly, I wanted for instance 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 specific financial, social, political, or environmental characteristic.

On this information visualization, the scale of the squares signifies the inhabitants measurement. Moreover, the saturation of the sq.’s colour signifies what number of organizations in that space are utilizing GitHub.

Responsive Web site Design For GitHub’s Octoverse 2021

Along with designing information visualizations, I additionally helped the GitHub workforce produce a web site for Octoverse 2021. This website was a hub for customers to learn, discover, and work together with the report’s information insights.

To encourage consumer engagement, we opted for a completely responsive web site that may adapt the positioning’s rendering to completely different sized viewports. GitHub requested us to pay particular consideration to the desktop model after discovering that bigger units 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 prime navigation bar that adapts its structure to the viewport measurement.

As a result of I designed the web site with completely different units in thoughts from the beginning, most charts rendered nicely on all display screen sizes. I solely wanted to make minor changes for optimum viewability, reminiscent of to the round dendrogram on the finish of the “Sustainable communities” part.

Organizing the Info Structure

I explored completely different choices for the web site’s data structure. I didn’t wish to overwhelm customers with an excessive amount of data, however I additionally didn’t need the positioning to be scattered or tough 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 facet 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 foremost traits, plus a homepage that serves as a abstract of crucial information.

After deciding on the data structure, I moved on to designing the positioning’s content material construction, navigation movement, photos, 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 an enticing, dynamic web site, we added interactive parts. As an illustration, below the highest navigation bar, I designed a scroll progress indicator so guests may preserve monitor of the place they had been on the positioning. As readers scroll down a web page, the indicator bar scales incrementally, and every web page has a unique fill colour for the bar: grey, purple, blue, or inexperienced.

Animated Headers, Pictures, and Knowledge Visualization

To maintain the web site from trying flat, we determined to animate the part headers. I created the illustrations and our workforce’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 information visualization charts interactive. For instance, as you scroll over a line within the bump chart, the road thickens to emphasise the corresponding information level. It’s a easy however efficient animation that lets website guests work together with the information and shortly evaluate languages.

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

Knowledge is simply helpful if you can also 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 information visualization design. Listed here are crucial takeaways from this information visualization case research:

• Know the model: Being accustomed to a model’s core type tips—reminiscent of ​​its use of kind, colour, and pictures—quickens 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 rather a lot about GitHub’s model earlier than the collaboration, and I used to be ready to make use of this information to tell my designs.
• Select the correct forms of information visualizations: Choosing the right visualization to characterize a knowledge level is crucial. An incorrect illustration could cause confusion or convey the flawed message.
• Use colour correctly: The best colour mixture will information the reader’s eye and draw consideration to a specific information level.
• Keep curious: If you’re making an attempt to inform a compelling information story, you’re sure to come across advanced design issues, so it’s necessary to be open to unusual options and steady studying.