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.