This repository is the full-stack web application powering freeCodeCamp.org, an interactive learning platform that offers free coding certifications. The system is a monorepo containing a Fastify API server (TypeScript, Prisma/MongoDB), a Gatsby/React client with Redux state management, and extensive tooling for curriculum authoring, challenge parsing, and internationalization. Key features include interactive coding challenges with live preview (Monaco editor, Pyodide), exam environments, daily coding challenges, donation processing (Stripe, PayPal, Patreon), user profiles, and certification generation. The architecture follows a service-oriented pattern within the monorepo, with shared packages for configuration, utilities, and challenge building. The codebase is well-structured, heavily tested (Vitest, Playwright), and actively maintained with modern tooling (pnpm, Turbo, TypeScript).
Recharts is a composable React charting library that renders SVG-based charts using declarative components. It provides a wide range of chart types including line, bar, area, scatter, pie, radar, radial bar, funnel, treemap, sunburst, sankey, and composed charts. The library is built on a Redux-based internal state management system with memoized selectors (reselect) for efficient rendering. It features a theming system with light/dark/auto themes, CSS transitions and custom interpolation for animations, zoom/pan controls, tooltips, legends, and responsive containers. The architecture is component-driven: each chart type (e.g., LineChart, BarChart) wraps a shared CartesianChart or PolarChart base that sets up the Redux store, data context, and event handling. External dependencies include React, Redux Toolkit, Immer, reselect, d3-shape, and victory-vendor/d3-scale. The library is published as an npm package and includes extensive unit tests, visual regression tests (Playwright), and a Storybook documentation site.
Star History is a web application that visualizes GitHub repository star growth over time through interactive charts and embeddable SVG badges. The system consists of a Next.js 14 frontend with D3-based chart rendering, a Hono backend that generates SVG charts and Open Graph cards on demand, and a shared code library used by both. A data pipeline (gh/) fetches repository metadata from the GitHub API and weekly activity stats from BigQuery (GitHub Archive), stores them in SQLite, and exports JSON files consumed by the frontend for leaderboards, weekly rankings, and star count pyramids. The application also includes a blog with curated open-source project roundups, a sponsor system, and a Chrome extension for quick chart viewing. Architecturally, the frontend uses URL hash-based state management to persist chart configurations (repos, timeline mode, log scale) and supports embedding via iframe or SVG. The backend caches star data, SVG charts, and OG cards using LRU caches with TTL and size limits, and rotates GitHub API tokens with cooldown to handle rate limits. The shared chart utilities (axis drawing, labels, legend, watermark) are used both server-side (via JSDOM) and client-side, demonstrating a clean separation of rendering logic. External dependencies include the GitHub REST API, BigQuery for weekly stats, GH Archive for event data, D3.js for chart rendering, JSDOM and Satori for server-side SVG/OG card generation, and SVGO for SVG optimization. The project is deployed with Docker containers (frontend on Cloudflare Pages, backend on GKE) and uses GitHub Actions for weekly data refreshes and deployments. While primarily an application, the repo has a strong data pipeline component that ingests, transforms, and exports structured data about GitHub repositories. This hybrid nature is evident in the gh/ directory, which functions as an ETL pipeline, and the blog content that analyzes open-source trends using star history data.
This is the d3/d3 monorepo — the umbrella package for D3.js v7.9.0, the canonical JavaScript library for bespoke data visualization. The repository's src/index.js is a pure re-export barrel: it aggregates 28 individual D3 modules (d3-array, d3-axis, d3-scale, d3-selection, d3-shape, d3-geo, d3-hierarchy, d3-force, d3-transition, etc.) and re-exports their entire public APIs. There is no application logic, no DOM code, and no data processing in this repo itself — all implementation lives in the individual submodule packages listed under dependencies. The repo's real content is its documentation site (VitePress-based, in docs/), its test suite (mocha tests verifying the barrel exports), and its build configuration (rollup.config.js bundles the modules into UMD and ESM distributions in dist/). The docs/ directory contains comprehensive, interactive API documentation for every submodule, with live Vue components rendering visualizations using D3 and Observable Plot. The test suite is minimal but meaningful: d3-test.js verifies that every named export from each submodule is present on the d3 namespace, and docs-test.js crawls the markdown documentation to verify that all internal links resolve to existing anchors. The CI pipeline runs tests, linting, bundle builds, and doc builds on every push to main.
C3.js is a D3-based charting library that provides a high-level, configurable API for generating interactive SVG charts directly in the browser. The library supports a wide range of chart types including line, bar, area, pie, donut, gauge, scatter, spline, step, and the specialized Stanford diagram. It handles data ingestion from multiple formats (JSON, CSV, TSV, rows, columns) and offers features such as zooming, subcharts (brush), legends, tooltips, grid lines, regions, and animated transitions. The core is driven by a single configuration object passed to c3.generate(), which controls all visual and behavioral aspects. Architecturally, C3.js follows a classic prototype-extension pattern: the ChartInternal class holds the rendering logic, and each chart type and API method is added via prototype extensions. The public API is exposed through a Chart instance returned by the factory function. The library is self-contained, depending only on D3.js (v5) and runs entirely client-side. It includes polyfills for older browsers (SVGPathSeg, String.padEnd, Object.assign) and has been tested with Jasmine/Karma in a headless browser environment. The codebase exhibits good modularity within a single-bundle approach: internal modules (e.g., data conversion, color scales, axis rendering, tooltip) are logically separated in the source directory. However, the bundled output is monolithic, making tree-shaking difficult. The project is well-documented with sample pages and a documentation site built with Middleman (Ruby). Maintenance has been stable but slow; the latest version is 0.7.20 with no major releases in recent years. The dependency on D3 v5 (instead of v7) and the presence of IE-specific polyfills indicate some technical drift. Despite this, the code is functional, well-tested, and still widely used. It demonstrates a strong real-world application of D3 for reusable chart components.
Three-forcegraph is a reusable JavaScript library for creating 3D force-directed graph visualizations using Three.js. It implements a reactive component that takes graph data (nodes and links) and renders them in 3D space using either d3-force-3d or ngraph.forcelayout for physics simulation. The library provides extensive customization options for node/link appearance, behavior, and layout constraints including DAG modes, directional arrows, and particle effects. Built with the Kapsule pattern for state management, it follows a modular architecture separating core logic, utilities, and Three.js object management. The library handles proper resource disposal to prevent WebGL memory leaks and offers both imperative and declarative APIs for integration into web applications.
phylotree.js is a JavaScript library for phylogenetic tree visualization and analysis, designed for web-based applications. It provides robust parsing of multiple tree formats (Newick, PhyloXML, NEXUS, NEXML, BEAST), interactive SVG rendering via D3, and a suite of analytical utilities including metrics (Sackin's index, pairwise distances, root-to-tip regression), clustering algorithms (Cluster Picker, PhyloPart), and tree construction (neighbor joining). The library is modular, with separate modules for formats, rendering, metrics, and clustering, and includes CLI tools for common operations like rerooting, tagging, and validation. It is used in production at phylotree.hyphy.org and supports real-world phylogenetic workflows in molecular epidemiology and evolutionary biology. While the codebase demonstrates solid engineering with reusable patterns like an event emitter and a robust Newick parser, it shows signs of technical drift with legacy dependencies (underscore, lodash, moment) and some unused code.
SkillSet is a single-page browser application that transforms a JSONResume skills section into an interactive D3 force-directed graph. The user uploads a JSON file, the front-end parses the skills array (categories with keywords and proficiency levels), and D3 renders a node-link diagram where category nodes connect to keyword nodes, with edge thickness reflecting proficiency. The visualization supports drag, click to highlight nodes, and double-click to reset. The architecture is a classic static-site front-end: HTML loads three script tags (D3 library, core visualization logic in `viz.js`, and UI/business logic in `app.js`), with a modern-ish CSS layout using CSS custom properties and grid. A Webpack build step exists but the production deployment still uses the unbundled script approach. The code is functional and clean for a demo, but lacks modularity, tests, and error-handling sophistication. It is a straightforward, well-documented showcase of D3 force layout applied to a common resume format, suitable for portfolio demos but not for production reuse without significant refactoring.