GoShip
How It WorksChallengesPricingEmployers
Sign InGet Started
0developers
0companies
0assessments scored
How It Works
|Pricing
|Challenges
|Employers
|Privacy
|Terms
GoShip© 2026
Get updates
Twitter·GitHub
Systems nominal
BUILDJUNIOR

Build a Heatmap Calendar

30 minutes
0 completed
svgdata-visualizationcalendarreact

Description

Build a Heatmap Calendar

Build a GitHub-style contribution heatmap that can visualize any time-series data.

Requirements

  • Render a full-year heatmap grid (7 rows x 52 columns) like GitHub's contribution graph
  • Accept data as JSON: array of {date, value} objects
  • Color intensity based on value (5 levels: none, low, medium, high, max)
  • Hover tooltip showing date and exact value
  • Customizable color themes (green, blue, purple, red)
  • Month labels along the top, day labels on the left
  • Responsive: scrollable on mobile
  • Technical Notes

    Render using SVG or CSS Grid. Each cell is a small square. Calculate color intensity using quantile-based thresholds.

    Bonus Points

  • Click a day to see details
  • Year selector for multi-year data
  • Animated fill-in on load
  • You will be guided through MCP setup before the timer starts