CodeFlow is a browser‑only tool that, with just one HTML file, visualizes a project's dependency graph, calculates the explosion radius of code changes, identifies code owners, runs security scans, and exports detailed reports, all without installing software or uploading source code.
This article presents a concise overview of ten popular open‑source data visualization tools—including Echarts, D3.js, Grafana, Plotly, Redash, Metabase, Superset, Kibana, AntV, and Pyecharts—highlighting their main features, typical use cases, and visual examples to help readers choose the right solution for their needs.
This article explains how to build a SpringBoot‑MyBatis interceptor that captures SQL execution, constructs a hierarchical call tree, and visualizes it with D3.js, providing real‑time performance monitoring and debugging for complex business systems.
This article presents a SpringBoot‑MyBatis solution that captures SQL execution via an interceptor, builds a hierarchical call tree, visualizes it with D3.js, and provides REST APIs for real‑time monitoring, performance statistics, and configuration, helping developers debug complex queries and identify slow SQL.
This article demonstrates how to build a SpringBoot‑based SQL call‑tree visualization system using a MyBatis interceptor, D3.js front‑end, and thread‑local context to capture, organize, display and analyze SQL execution hierarchies, performance metrics and slow‑SQL detection for complex business applications.
This guide shows how to create a Spring Boot and MyBatis interceptor that captures SQL execution, builds a hierarchical call tree, and visualizes it with D3.js, providing performance monitoring, statistics, and thread‑safe management for complex query debugging.
This article demonstrates how to convert Chinese characters into SVG paths using Batik, then creates a D3.js animation that morphs one character into another, addressing path length mismatches with a FIFO‑style point‑by‑point transition and adding a swing effect via setInterval.
The article introduces d3blocks, a Python library that extends D3.js's interactive visualization capabilities to Python, demonstrating how to create interactive scatter, network, Sankey, and image slider charts with just a few lines of code and offering examples with code snippets and GIF illustrations.
This curated newsletter presents a series of technical articles and resources covering frontend architecture, low‑code debugging, D3.js visualizations, CSS Flex layout, VS Code extensions, public APIs, and browser top‑layer concepts, offering insights and practical guidance for developers.
This article explains the fundamentals of D3.js force-directed graph layouts, covering the underlying physics-inspired algorithms, node initialization, quad-tree collision detection, Barnes-Hut optimization, link forces, and simulation steps, and provides practical code examples and tips for handling common rendering issues.
This article details Meituan's end‑to‑end practice of knowledge‑graph visualization, covering basic concepts, scenario analysis, D3.js‑based architecture, layout optimization, visual‑noise reduction, rich interaction features, 3D extensions, real‑world deployments and future research directions.
This article introduces several powerful Python data‑visualization libraries—including Plotly, Cufflinks, Folium, Altair, and the JavaScript‑based D3.js—explains their strengths, provides installation commands, and offers practical code examples for creating interactive charts, maps, and 3D visualizations within Jupyter notebooks.
This article introduces Coco, an open‑source R&D efficiency tool that visualizes a project's layered architecture by counting code lines with CLOC and rendering interactive diagrams using D3.js, offering step‑by‑step installation, configuration, analysis, and real‑world examples.
This article explains D3.js fundamentals—including its selection, join, and scale modules—then walks through a step‑by‑step implementation of a fully customized bar chart using SVG, demonstrating how to bind data, create axes, and add interactive tooltips.
This article explains how to use d3.js to create interactive resource topology diagrams, covering SVG basics, d3 selections, data binding, enter/update/exit patterns, force‑directed layout, path calculations, and various optimizations such as text centering, arrow markers, and intersection handling.
