Skip to main content

​
Overview

GitScope’s Language Analytics feature provides a comprehensive visualization of programming languages used across a user’s repositories. Using an interactive pie chart and detailed breakdown, you can instantly understand a developer’s technology stack and expertise.
Language data is aggregated from the top 12 most recently updated repositories to provide accurate, up-to-date insights.

​
How It Works

The language analytics engine:
1

Fetches Language Data

Retrieves byte counts for each language from the user’s top 12 repositories
2

Aggregates Totals

Combines language usage across all repositories
3

Calculates Percentages

Computes the percentage share for each language
4

Renders Visualization

Displays the top 10 languages in a pie chart and legend

​
Data Aggregation

Languages are fetched and aggregated using smart caching:
LanguageChart.jsx
const cache = useRef({})

useEffect(() => {
  if (!repos.length) return
  setLoading(true)

  const top = repos.slice(0, 12)
  const fetches = top.map(r => {
    const key = `${username}/${r.name}`
    if (cache.current[key]) return Promise.resolve(cache.current[key])
    
    return getLanguages(username, r.name).then(d => {
      cache.current[key] = d
      return d
    }).catch(() => ({}))
  })

  Promise.all(fetches).then(results => {
    const totals = {}
    results.forEach(langs => {
      Object.entries(langs).forEach(([lang, bytes]) => {
        totals[lang] = (totals[lang] || 0) + bytes
      })
    })
    
    // Process and display top 10
  })
}, [repos, username])
The component caches language data to avoid redundant API calls when switching between users.

​
Percentage Calculation

Language percentages are computed from total byte counts:
LanguageChart.jsx
const sorted = Object.entries(totals).sort((a, b) => b[1] - a[1])
const total = sorted.reduce((s, [, v]) => s + v, 0)

const top10 = sorted.slice(0, 10).map(([name, val], i) => ({
  name,
  value: val,
  pct: Math.round((val / total) * 100),
  color: COLORS[i % COLORS.length],
}))
Percentages are rounded to whole numbers for cleaner display. Only the top 10 languages are shown.

​
Color Scheme

Languages are color-coded with a vibrant palette:
LanguageChart.jsx
const COLORS = [
  '#2563eb', // Blue
  '#10b981', // Green
  '#f59e0b', // Amber
  '#8b5cf6', // Purple
  '#ef4444', // Red
  '#06b6d4', // Cyan
  '#f97316', // Orange
  '#ec4899', // Pink
  '#84cc16', // Lime
  '#6366f1', // Indigo
]

Consistent Colors

Each language gets a consistent color position in the chart

High Contrast

Colors chosen for maximum visual distinction and accessibility

​
Interactive Pie Chart

The visualization uses Recharts for smooth, responsive graphics:
LanguageChart.jsx
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'

<ResponsiveContainer width="100%" height={200}>
  <PieChart>
    <Pie
      data={data}
      cx="50%"
      cy="50%"
      innerRadius={55}
      outerRadius={85}
      paddingAngle={2}
      dataKey="value"
    >
      {data.map((entry, i) => (
        <Cell key={entry.name} fill={entry.color} stroke="none" />
      ))}
    </Pie>
    <Tooltip content={<CustomTooltip />} />
  </PieChart>
</ResponsiveContainer>

​
Chart Features

Uses inner radius of 55 and outer radius of 85 for an elegant donut appearance.
2-pixel padding between segments for visual clarity.
Chart automatically adapts to container width while maintaining 200px height.
Hover over chart segments to see language name and exact percentage.

​
Custom Tooltip

Interactive tooltips display language details on hover:
LanguageChart.jsx
const CustomTooltip = ({ active, payload }) => {
  if (active && payload?.length) {
    const d = payload[0]
    return (
      <div className="tooltip">
        <span className="dot" style={{ background: d.payload.color }} />
        <span>{d.name}</span>
        <strong>{d.payload.pct}%</strong>
      </div>
    )
  }
  return null
}
Tooltips show a color-matched dot, language name, and percentage for quick reference.

​
Language Legend

A detailed legend complements the chart with progress bars:
LanguageChart.jsx
<ul className="legend">
  {data.map(d => (
    <li key={d.name} className="legend-item">
      <div className="legend-left">
        <span className="legend-dot" style={{ background: d.color }} />
        <span className="legend-name">{d.name}</span>
      </div>
      
      <div className="bar-wrap">
        <div
          className="bar"
          style={{ width: `${d.pct}%`, background: d.color }}
        />
      </div>
      
      <span className="legend-pct">{d.pct}%</span>
    </li>
  ))}
</ul>

​
Legend Components

Color Dot

Matches the language color in the pie chart

Language Name

Full name of the programming language

Progress Bar

Visual representation of language percentage

Percentage

Exact percentage rounded to whole number

​
Loading State

While fetching language data, skeleton loaders maintain layout:
LanguageChart.jsx
if (loading) return (
  <div className="card">
    <h3 className="title">Lenguajes más usados</h3>
    <div className="loading-grid">
      {[1,2,3,4,5].map(i => (
        <div key={i} className="skeleton sk-row" />
      ))}
    </div>
  </div>
)
Skeleton rows match the height of actual legend items for a smooth transition.

​
Empty State Handling

If no language data is available, the component doesn’t render:
LanguageChart.jsx
if (!data.length) return null
The language chart only appears when valid data is available. Users with no repositories or private-only repos may not see this section.

​
API Integration

Language data comes from GitHub’s Languages API:
useGitHub.js
const getLanguages = useCallback(
  (owner, repo) => request(`/repos/${owner}/${repo}/languages`),
  [request]
)

// Example response:
// {
//   "JavaScript": 12543,
//   "TypeScript": 8921,
//   "CSS": 3421
// }
The API returns byte counts for each language, which GitScope converts to percentages.

​
Performance Optimization

​
Caching Strategy

LanguageChart.jsx
const cache = useRef({})

const key = `${username}/${r.name}`
if (cache.current[key]) return Promise.resolve(cache.current[key])
Language data is cached per repository to minimize API calls and improve performance when revisiting users.

​
Parallel Fetching

const fetches = top.map(r => getLanguages(username, r.name))
Promise.all(fetches).then(results => { /* aggregate */ })

Concurrent Requests

All repositories fetched in parallel for faster loading

Error Resilience

Failed requests return empty objects without breaking the chart

​
Insights You Can Gain

1

Primary Technology

The largest slice shows the developer’s main programming language
2

Language Diversity

More evenly distributed slices indicate a polyglot developer
3

Technology Trends

Compare with repository update times to see recent language adoption
4

Specialization Level

A dominant language (>70%) suggests deep specialization

​
Use Cases

Quickly assess a candidate’s technical stack and language expertise before interviews.
Find developers who work in specific languages for collaboration opportunities.
Analyze language adoption patterns among leading developers in a field.
Track your own language diversity and identify areas for skill expansion.

​
Best Practices

Consider Context

Byte count doesn’t equal expertise—a small library might be more impactful than a large project

Check Recency

Combine with repository update dates to understand current vs. legacy skills

Review Top Repos

Star-sorted repositories show which languages are used in popular projects

Explore Commits

View commit history to validate active usage of displayed languages

​
Animation Effects

The chart animates in with a delayed fade: 
<div className="card fade-up fade-up-delay-2">
  {/* Chart content */}
</div>
The delay ensures the language chart appears after user info and repositories, creating a natural reading flow.

Repository Explorer

See which repositories contribute to each language

User Search

Search different users to compare language distributions

Build docs developers (and LLMs) love

Get started for freeTalk to us