Final 12 months I collaborated with GitHub to design the 2021 State of the Octoverse report. GitHub’s Octoverse analyzes real-world information from tens of millions of builders and repositories with a view to current the 12 months’s software program improvement business insights. The 2021 report covers three main tendencies: bettering efficiency and well-being by growing code, creating documentation, and supporting communities in a wiser, extra sustainable manner.
Because the venture’s inventive liaison, it was my job to help the GitHub group in making the data-heavy report straightforward 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 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 venture.
Designing Participating Digital Experiences With Information 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 info required an intensive design effort.
Our modest group, which included developer Jose Luis Garrido and venture supervisor Miquel Lopez, was tasked with synthesizing this immense quantity of data for readers. Regardless of a delayed begin and different simultaneous tasks, 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 via Excel information, PowerPoint displays, 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 as an example 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 Objective
Information will be represented in quite a few methods–bar charts, line graphs, heatmaps, waterfall charts, and extra. Every chart serves a objective, and it’s vital to make use of the appropriate 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. Take into account the Finish Consumer
You additionally want to concentrate on your customers’ capacity to learn and analyze information. Most of us are conversant in pie, bar, and line charts. We see them in all places, and we all know find out how to learn them.
However, fewer individuals know find out how to learn field plots, that are utilized in many analysis publications to summarize a number of information variables into one chart.
Should you current customers with unfamiliar visualizations, they’ll have a tough time deciphering the info.
3. Design With Readability
Is the info 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 stunning and useful, however solely when there’s a transparent information sample. Generally much less is extra.
Designing Good Information Visualizations
All through the 2021 State of the Octoverse report, you’ll discover quite a lot of information visualizations which have been fastidiously 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 information—exhibiting the place respondents labored earlier than the pandemic and after it. GitHub offered me with two pie charts that every mapped out 4 information factors: collocated, hybrid, totally distant, and never relevant. Nevertheless, pie charts will not be significantly 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.
The Bump Chart
One other efficient information visualization is the bump chart. We used this chart to current the data on the most well-liked laptop programming languages utilized by builders over the previous eight years. Bump charts are nice for displaying modifications in rank over a time period, they usually have turn into a staple within the Octoverse report.
The Treemap
I wanted as an example the completely different sectors to which respondents contribute code. The ultimate determination got here all the way down to pie charts versus treemaps.
Pie charts are helpful when you might have 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 number of equally sized wedges, individuals 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 check wedges or angles.
The Cartogram
Lastly, I wanted as an example the geographical distribution of organizations utilizing GitHub in 2021 by area or nation. For this, I used a inhabitants cartogram. Cartograms are maps by which the geometry is distorted to accommodate a specific financial, social, political, or environmental characteristic.
On this information visualization, the dimensions of the squares signifies the inhabitants measurement. Moreover, the saturation of the sq.’s coloration 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 group produce an internet site for Octoverse 2021. This web site 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 totally 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 web site, 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 peak, and refining how the textual content appears to be like at completely different breakpoints.
- Laying out the visible components on every web page to encourage scrolling.
- Designing a user-friendly high navigation bar that adapts its format 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 sizes. I solely wanted to make minor changes for optimum viewability, akin to to the round dendrogram on the finish of the “Sustainable communities” part.
Organizing the Data Structure
I explored completely different choices for the web site’s data structure. I didn’t need 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 a protracted scrolling web site, with all of the content material on the identical web page. When that turned 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, just like what you may discover in a e-book. The ultimate design on the Octoverse web site consists of separate webpages for the three major tendencies, 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 move, photographs, 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 components. As an example, below the highest navigation bar, I designed a scroll progress indicator so guests might 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 special fill coloration for the bar: grey, purple, blue, or inexperienced.
Animated Headers, Pictures, and Information Visualization
To maintain the web site from wanting flat, we determined to animate the part headers. I created the illustrations and our group’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 web site guests work together with the info and rapidly evaluate languages.
Creating Profitable Information Visualizations and Digital Designs for GitHub: Key Learnings
Information 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 data in information visualization design. Listed here are crucial takeaways from this information visualization case examine:
- Know the model: Being conversant in a model’s core type pointers—akin 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 quite a bit about GitHub’s model earlier than the collaboration, and I used to be in a position to make use of this information to tell my designs.
- Select the appropriate sorts of information visualizations: Deciding on the right visualization to signify a knowledge level is crucial. An incorrect illustration could cause confusion or convey the improper message.
- Use coloration properly: The precise coloration 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 vital to be open to unusual options and steady studying.