# d3 Published articles for d3. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## PCBRouteAgent: How Close Are LLM Agents to Becoming PCB Routing Engineers? DevFeed: [PCBRouteAgent: How Close Are LLM Agents to Becoming PCB Routing Engineers?]() Original publisher: [Read original article]() Author: Yue Zhang, Jilei Sun, Liqiang Jing, Yijie Wei, Ruohan Yang Published: 2026-11-06T05:00:00Z Content type: article Language: en Sources: [arXiv: Artificial Intelligence]() Topics: [agentic workflows](), [Multi Agent Systems](), [kicad](), [harvestbench]() Tags: [abstract](), [agent](), [agents](), [arxiv](), [best](), [board](), [bounded](), [can](), [circuit](), [combines](), [complex](), [connectivity](), [cs-ai](), [d2](), [d3](), [engineers](), [llm](), [llm-agents](), [pcb](), [pcb-routing](), [routing]() ### AI overview PCBRouteAgent pairs board-level planning with local routing execution: its Global Routing Planner uses board images and structured electrical and geometric data to choose connection topology, routing order, corridors, and layer transitions. A Detailed Routing Executor implements those guides through KiCad's native routing engine, attempts bounded local recovery, and returns unresolved failures as structured feedback for targeted guide revisions while preserving accepted routes. Across 247 synthetic and real-world boards, reported clean-pass rates were 100% on D2, 94.9% on D3-A, 100% on D3-B, and 40% on D3-C. On the three real-world subsets, it exceeded the best evaluated baseline by 13.9, 36, and 10 percentage points, respectively. Results vary substantially across test splits. ### Source excerpt arXiv:2611.08175v1 Announce Type: new Abstract: Automating printed circuit board (PCB) routing requires coordinating board-level connectivity decisions with geometric execution under strict design rules. Although recent agents can interact with native routing tools, reliable routing on complex boards remains challenging. We present PCBRouteAgent, a multimodal PCB routing agent inspired by how human engineers coordinate global strategy with local execution. A Global Routing Planner combines board images and structured electrical and geometric information to specify connection topology, routing order, corridors, and layer transitions. A Detailed Routing Executor realizes these guides through KiCad's native routing engine and performs bounded local recovery. Unresolved failures are returned as structured feedback, enabling targeted guide revisions while preserving accepted routes. We evaluate PCBRouteAgent on 247 synthetic and real-world boards from four PCBWorld-Bench test splits. It achieves clean-pass rates of 100%, 94.9%, 100%, and 40% on D2, D3-A, D3-B, and D3-C, respectively. On the three real-world subsets, PCBRouteAgent outperforms the best evaluated baseline in clean-pass rate by 13.9, 36, and 10 percentage points, respectively. ## Generating running routes with GPT-6 Astra and ChatGPT Work DevFeed: [Generating running routes with GPT-6 Astra and ChatGPT Work]() Original publisher: [Read original article]() Author: Simon Willison Published: 2026-09-12T23:56:42Z Content type: opinion Language: en Sources: [Simon Willison](), [Simon Willison's Weblog]() Topics: [ChatGPT](), [Large Language Model](), [GeoJSON](), [Code](), [d3.js]() Tags: [agent](), [ai](), [ai-2-235](), [chatgpt](), [chatgpt-204](), [code](), [d3](), [d3-15](), [generative-ai](), [generative-ai-1-981](), [geospatial](), [geospatial-85](), [gpt](), [gpt-6-astra](), [gpt-6-astra-9](), [llms](), [llms-1-947](), [map](), [openai](), [openai-463](), [python](), [skills](), [skills-15](), [work]() ### AI overview The article describes using ChatGPT Work with GPT-6 Astra to generate 5K and 10K running routes from OpenStreetMap data, producing an embedded visualization and downloadable GPX and GeoJSON files. It also criticizes the lack of visibility into the generated Python code and the loss of that code after thread compaction. ### Source excerpt Here's a neat thing I had ChatGPT Work with GPT-6 Astra (Max) do this morning: I live at . Figure out 5K and 10K running routes from me that loop from my house. Use OSM data. It worked for 27 minutes and produced exactly what I'd asked for, as both an embedded visualization and downloadable GPX file and GeoJSON files. Here's that 5K route: When I asked it how it had created the route, it replied: I used Nominatim to locate the address and Overpass to download local OpenStreetMap roads and trails, then calculated the loops locally. Frustratingly, the actual code it ran and exact details of what it did weren't visible to me in the ChatGPT UI. I see this lack of transparency is an anti-feature. By the time I thought to ask for a copy of the Python code it had used, ChatGPT was unable to provide it. This appears to be because the thread had been compacted. I think any LLM system that uses compaction needs to both preserve the pre-compacted text and make that text available via agent tool calls, to protect against this kind of problem. As for displaying the map to me, that used the visualize skill. It created a file called /workspace/el-granada-5k-share.html to embed directly into the ChatGPT UI. Here's a copy of that HTML, which starts like this:

El Granada harbor loop

5.1 km
Map data © OpenStreetMap contributors
) Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-07-31T06:00:00Z Content type: opinion Language: en Sources: [Robin Wieruch]() Topics: [agentic-coding](), [Programming](), [implementation](), [Application Development]() Tags: [abstraction](), [agentic-coding](), [ai-coding-agents](), [ai-engineer](), [animation](), [animations](), [api](), [behavior](), [build-vs-buy-components](), [charts](), [components](), [d3](), [d3-vs-recharts](), [design-system](), [design-tokens](), [flexibility](), [implementation](), [library](), [low-level](), [math](), [react](), [rendering](), [styling](), [svg]() ### AI overview In a one-hour comparison building matching React chart components, D3's math primitives with React-rendered SVG matched the design system and supported animations, crosshair tooltips, and legend filtering without library workarounds. Recharts reached about 80% of the target faster, but the remaining customization needed custom SVG code; its entrance animation also froze in the project's React stack, with disabling animation the only workaround described. The author frames high-level libraries as prepackaged implementation labor that trades flexibility for convenience, and argues agentic coding changes the cost of building on primitives you control. The excerpt ends during a discussion of wrappers and patches, so it does not establish the article's full argument. ### Source excerpt Agentic coding collapses the cost of implementation labor. Why the rational bet is moving from high-level libraries back to primitives you own. ## DependenTree, Graph Visualization Library DevFeed: [DependenTree, Graph Visualization Library]() Original publisher: [Read original article]() Author: Amogh Kambale Published: 2022-03-23T19:00:00Z Content type: article Language: en Sources: [Square Corner]() Topics: [Library](), [Data visualization](), [Graphs]() Tags: [canvas](), [d3](), [data-lineage](), [dependencies](), [dependency](), [dependency-graph](), [engineering](), [graph](), [graph-visualization](), [library](), [scale](), [visualization]() ### AI overview DependenTree presents large dependency graphs as collapsible tidy trees so users can focus on a root and expand only the branches they need. To handle Block's 14,000 ETLs, it builds graph pointers and downstream mappings in the browser; the reported payload fell from 100 MB for a partial mapping to 5 MB for the full lineage set. It limits traversal by cutting off nodes that exceed a chosen depth or form cycles, using clones without further dependencies to prevent repeated traversal and infinite loops. The depth cutoff requires judgment. SVG is straightforward to animate but can drop frames as trees grow. Canvas was faster per node in the author's timing test (25 μs versus 2,005 μs for SVG), but its repeated full redraw keeps frame rates low for large trees, and reproducing D3's enter/update/exit transitions proved difficult. The canvas approach was abandoned; the author expects typical use to display only a few dozen moving nodes. ### Source excerpt Visualize dependency graphs at scale ## Visualizing an Assassin Puzzle DevFeed: [Visualizing an Assassin Puzzle]() Original publisher: [Read original article]() Published: 2018-07-24T08:00:09Z Content type: tutorial Language: en Sources: [Jeremy Kun]() Topics: [Computing](), [Programming](), [d3.js](), [Demo](), [Library](), [Software]() Tags: [article](), [code](), [computing](), [d3](), [demo](), [javascript](), [library](), [mathematics](), [programming](), [software](), [torus](), [visualization]() ### AI overview This tutorial presents a visualization of an assassin puzzle in which shots bounce around a square like billiards and guards must block possible paths to a target. It explains the d3-based visualization and the geometric functions used to trace bouncing rays and calculate guard positions. ### Source excerpt Over at Math3ma, Tai-Danae Bradley shared the following puzzle, which she also featured in a fantastic (spoiler-free) YouTube video. If you're seeing this for the first time, watch the video first. Consider a square in the xy-plane, and let A (an "assassin") and T (a "target") be two arbitrary-but-fixed points within the square. Suppose that the square behaves like a billiard table, so that any ray (a.k.a "shot") from the assassin will bounce off the sides of the square, with the angle of incidence equaling the angle of reflection. ## Integrating React and D3.js for Data Visualization DevFeed: [Integrating React and D3.js for Data Visualization]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-04-21T17:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [React](), [Data visualization](), [JavaScript](), [User Interfaces](), [Document Object Model (DOM)](), [Library]() Tags: [d3](), [d3-js](), [data-visualization](), [declarative](), [interfaces](), [javascript](), [libraries](), [react](), [user-interfaces](), [web-applications]() ### AI overview This tutorial explains how React and D3.js can be used together for data visualization. It contrasts React's virtual DOM and reusable UI components with D3's direct DOM manipulation and data-focused utilities, and discusses React's role in building client-side interfaces. ### Source excerpt D3 is great at data visualizations, but it manipulates the DOM directly to display that data. Rendering DOM elements is where React shines. It uses a virtual representation of the DOM (virtual DOM) and a super performant diffing algorithm in order to determine the fastest way to update the DOM. We want to leverage React's highly efficient, declarative, and reusable components with D3's data utility functions. At this point, we can safely say that React is the preferred JavaScript library for building user interfaces. It is used practically everywhere and is almost as pervasive as jQuery. It has an API that is simple, powerful, and easy to learn. Its performance metrics are really impressive thanks to the Virtual DOM and its clever diff algorithm between state changes. Nothing, however, is perfect, and React too has its limitations. One of React's greatest strengths is the ease with which it integrate third-party libraries, but some libraries, especially opinionated ones, are more difficult to integrate than others. An extremely popular library that can be tricky to integrate with React is D3.js. D3 is an excellent data visualization library with a rich and powerful API. It is the gold standard of data visualizations. However, Because this library is opinionated about data, it is no trivial endeavour to get it to work with React. A few simple strategies permit these two libraries to work together in very powerful ways. Editor's Note: Check out our upcoming workshop, React and D3, a crash course in learning how to create data visualizations with these two in demand libraries. Reserve your spot now on Eventbrite and get 20% off admission. Learn more at the Eventbrite page What is React? React is an open-source JavaScript library for creating user interfaces that addresses the challenges of building large applications with data that changes over time. Originally developed at Facebook, it is now seen in many of the most commonly used web applications including Instagram, ## Plotting Reddit post frequencies with d3 DevFeed: [Plotting Reddit post frequencies with d3]() Original publisher: [Read original article]() Published: 2016-02-20T00:00:00Z Content type: tutorial Language: en Sources: [Adam Bard]() Topics: [d3.js](), [plotting](), [data](), [Code]() Tags: [charts](), [code](), [d3](), [d3-js](), [data](), [graphs](), [plotting]() ### AI overview A tutorial describing how the author added a 7x24 color-coded grid plot to Later's Reddit post timing analysis page using D3.js. The chart represents posting frequency across hours and days of the week, providing a more precise view than separate bar charts. ### Source excerpt This week I added a better graph to Later (for Reddit)'s post timing analysis page. Previously, the most common time and the most common day were plotted on separate bar charts. However, I noticed that I got called out on this in this article on Medium, which offered a pretty sensible alternative that I wasted no time in ripping off wholesale. I still have the bar graphs in, but I also added a 7x24 color-coded grid plot, allowing for a more accurate view of exactly when the most popular posts were posted. ## Welcome to Square! Let's Learn D3! DevFeed: [Welcome to Square! Let's Learn D3!]() Original publisher: [Read original article]() Author: Square Engineering Published: 2014-10-13T16:07:00Z Content type: tutorial Language: en Sources: [Square Corner]() Topics: [Learning](), [Tutorial]() Tags: [analytics](), [contributions](), [cube](), [d3](), [d3-js](), [engineering](), [examples](), [github](), [learning](), [neo](), [onboarding](), [pull-requests](), [square](), [teaching](), [tutorial](), [visualization]() ### AI overview Square's Intro to D3.js tutorial grew from notes Zach Margolis prepared while teaching the company's three-week new engineer onboarding program. It offers an example-based introduction intended to help learners with D3.js's steep learning curve, and Square invited contributions through its square/intro-to-d3 GitHub project. ### Source excerpt Our internal tutorial for learning D3. ## Introducing the New GitHub Graphs DevFeed: [Introducing the New GitHub Graphs]() Original publisher: [Read original article]() Author: Justin Palmer Published: 2012-04-26T03:09:40Z Content type: release Language: en Sources: [GitHub Blog]() Topics: [GitHub](), [plotting](), [Graph Mining]() Tags: [d3](), [feature](), [github](), [graphs](), [news-insights](), [repositories](), [the-library]() ### AI overview GitHub has revamped its repository graphs and added views of contributors, annual commit activity, lifetime additions and deletions, and commit timing. The historical update notes that the Impact graph is no longer a GitHub feature. The graphs are built with the d3 library. ### Source excerpt Translations: Ukrainian. We've revamped our existing graphs and added three new graphs to help you discover even more about GitHub hosted repositories. Contributors See who's contributing to a project and... ## Ember and D3: Building responsive analytics DevFeed: [Ember and D3: Building responsive analytics]() Original publisher: [Read original article]() Author: Square Engineering Published: 2012-04-04T16:01:00Z Content type: article Language: en Sources: [Square Corner]() Topics: [Ember](), [Handlebars](), [data-engineering](), [Business, Industry, Usability, User Experience, User Research, Web Strategy]() Tags: [analytics](), [d3](), [data](), [ember](), [engineering](), [responsive](), [web]() ### AI overview Square's analytics panel used Ember.js to coordinate data and views, with D3.js rendering charts and tables; merchants could explore payment counts by date, weekday, hour, and amount, filtering groupings in real time. The team sent all payments to the browser, which strained servers and JavaScript. It switched to Yajl for streaming JSON with lower memory use, delivered data in chunks, and fetched payment metadata on demand. In the browser, Crossfilter updated five other views when users changed filters. CSS, DOM, and animation tuning helped make responses near-instant for large merchants; the article reports a two-orders-of-magnitude performance improvement over two weeks. The excerpt also notes that Ember's MVC structure improved testability and that its Jasmine test suite ran quickly and integrated continuously. ### Source excerpt How we bult our web analytics panel with Ember and D3. ## Cube: Time Series Visualization DevFeed: [Cube: Time Series Visualization]() Original publisher: [Read original article]() Author: Square Engineering Published: 2011-09-15T16:00:00Z Content type: release Language: en Sources: [Square Corner]() Topics: [Data visualization](), [Time Series](), [Temporal data](), [d3.js]() Tags: [aggregate](), [analysis](), [analyze](), [browser](), [charts](), [cube](), [d3](), [dashboards](), [data-visualization](), [engineering](), [events](), [exploration](), [interaction](), [linking](), [metrics](), [mongodb](), [monitor](), [monitoring](), [node](), [open-source](), [time-series]() ### AI overview Cube is an open-source system built with MongoDB, Node, and D3 for visualizing timestamped events as real-time aggregate metrics. Events can include optional structured data and come from different systems, letting users compare related measures such as website traffic and database load. The excerpt says browser dashboards can be assembled with simple queries and by dragging charts onto the screen. This initial release has only basic visualization components; coordinated views, dynamic filtering, brushing, and linking are described as planned features. ### Source excerpt Announcing an open-source system for visualizing time series data, built with MongoDB, Node, and D3.