# 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.

## Generating running routes with GPT-6 Astra and ChatGPT Work

DevFeed: [Generating running routes with GPT-6 Astra and ChatGPT Work](<https://devfeed.tech/articles/generating-running-routes-with-gpt-6-astra-and-chatgpt-work-30507.md>)

Original publisher: [Read original article](<https://simonwillison.net/2026/Sep/12/astra-running-routes/>)

Author: Simon Willison

Published: 2026-09-12T23:56:42Z

Content type: opinion

Language: en

Sources: [Simon Willison](<https://devfeed.tech/sources/simon-willison.md>), [Simon Willison's Weblog](<https://devfeed.tech/sources/simon-willison-s-weblog.md>)

Topics: [ChatGPT](<https://devfeed.tech/topics/chatgpt.md>), [Large Language Model](<https://devfeed.tech/topics/llm.md>), [GeoJSON](<https://devfeed.tech/topics/geojson.md>), [Code](<https://devfeed.tech/topics/code.md>), [d3](<https://devfeed.tech/topics/d3.md>)

Tags: [agent](<https://devfeed.tech/tags/agent.md>), [ai](<https://devfeed.tech/tags/ai.md>), [ai-2-235](<https://devfeed.tech/tags/ai-2-235.md>), [chatgpt](<https://devfeed.tech/tags/chatgpt.md>), [chatgpt-204](<https://devfeed.tech/tags/chatgpt-204.md>), [code](<https://devfeed.tech/tags/code.md>), [d3](<https://devfeed.tech/tags/d3.md>), [d3-15](<https://devfeed.tech/tags/d3-15.md>), [generative-ai](<https://devfeed.tech/tags/generative-ai.md>), [generative-ai-1-981](<https://devfeed.tech/tags/generative-ai-1-981.md>), [geospatial](<https://devfeed.tech/tags/geospatial.md>), [geospatial-85](<https://devfeed.tech/tags/geospatial-85.md>), [gpt](<https://devfeed.tech/tags/gpt.md>), [gpt-6-astra](<https://devfeed.tech/tags/gpt-6-astra.md>), [gpt-6-astra-9](<https://devfeed.tech/tags/gpt-6-astra-9.md>), [llms](<https://devfeed.tech/tags/llms.md>), [llms-1-947](<https://devfeed.tech/tags/llms-1-947.md>), [map](<https://devfeed.tech/tags/map.md>), [openai](<https://devfeed.tech/tags/openai.md>), [openai-463](<https://devfeed.tech/tags/openai-463.md>), [python](<https://devfeed.tech/tags/python.md>), [skills](<https://devfeed.tech/tags/skills.md>), [skills-15](<https://devfeed.tech/tags/skills-15.md>), [work](<https://devfeed.tech/tags/work.md>)

### 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 <my address>. 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: <div id="eg-share-loop"> <div class="viz-row"><h3>El Granada harbor loop</h3><span class="text-small">5.1 km</span></div> <div id="eg-share-stage"></div> <div class="text-small text-muted">Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap contributors</a></div> <style> #eg-share-loop { width:100%; } #eg-share-loop #eg-share-stage { width:100%; margin:8px 0; } #eg-share-loop .eg-share-map { display:block; width:100%; touch-action:none; } #eg-share-loop .eg-share-map text { fill:var(--foreground); font-size:12px; font-weight:400; } #eg-share-loop .eg-share-label { paint-order:stroke; stroke:var(--background); stroke-width:3px; stroke-linejoin:round; } </style> <s

## Galaxies of the Guardian: the formation of an irregular org chart

DevFeed: [Galaxies of the Guardian: the formation of an irregular org chart](<https://devfeed.tech/articles/galaxies-of-the-guardian-the-formation-of-an-irregular-org-chart-19960.md>)

Original publisher: [Read original article](<https://www.theguardian.com/info/2023/feb/03/galaxies-of-the-guardian-the-formation-of-an-irregular-org-chart>)

Author: Frederick O'Brien

Published: 2023-02-03T13:05:39Z

Content type: article

Language: en

Sources: [Guardian](<https://devfeed.tech/sources/guardian.md>)

Topics: [Graphs](<https://devfeed.tech/topics/graphs.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Software Engineering](<https://devfeed.tech/topics/software-engineering.md>)

Tags: [d3](<https://devfeed.tech/tags/d3.md>), [graphs](<https://devfeed.tech/tags/graphs.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [prototype](<https://devfeed.tech/tags/prototype.md>), [software-engineering](<https://devfeed.tech/tags/software-engineering.md>), [structure](<https://devfeed.tech/tags/structure.md>)

### AI overview

The Guardian's Product & Engineering department built Galaxies, a force-directed visualization of interconnected people, teams, and streams intended to present organizational structure in a beautiful, intuitive, non-hierarchical form. The project grew from learning data visualization with D3 and experimenting with d3-force.

### Source excerpt

'Who does what and where?' is an age-old question. We in Product & Engineering have tried to answer it with Galaxies, a data visualisation of interconnected people, teams, and streams We all feel a little lost at times. Who am I? What is my purpose? Who's the best person to speak to about setting up my AWS credentials? Anyone who says they aren't occasionally haunted by these questions is lying to you. A common way to try to answer these kinds of questions is through organisational charts. Org charts aren't the first things that come to mind when thinking of something inspiring, which is a shame because the information they're trying to convey can be fascinating - it just needs to be presented in the right way. Continue reading...

## Week 4: Hobbies, a Plastic-Waste Visualization, and Messaging Apps

DevFeed: [Week 4: Hobbies, a Plastic-Waste Visualization, and Messaging Apps](<https://devfeed.tech/articles/week-4-35575.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/week-4>)

Author: Monica Dinculescu

Published: 2021-01-25T00:00:00Z

Content type: opinion

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [d3](<https://devfeed.tech/topics/d3.md>), [data](<https://devfeed.tech/topics/data.md>), [deprecated](<https://devfeed.tech/topics/deprecated.md>), [iphone](<https://devfeed.tech/topics/iphone.md>)

Tags: [d3](<https://devfeed.tech/tags/d3.md>), [data](<https://devfeed.tech/tags/data.md>), [deprecated](<https://devfeed.tech/tags/deprecated.md>), [iphone](<https://devfeed.tech/tags/iphone.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

A personal week note covering winter activities, hobbies, reading, a plastic-waste visualization made with d3, and frustrations with messaging apps including Hangouts, Chat, WhatsApp, and Signal.

### Source excerpt

Tahoe (where we currently live during this pannie-d) got a ton of snow this week, so I've been in winter mode. Went skiing on Friday, went snowshoeing on Sunday. My calves are on fire. Skiing is pretty safe; everyone is wearing masks, they've closed all the lodges, and tbh nobody should be within 6 feet of me skiing on a good day. I can tell when I accidentally overdo it with the hobbies (which is every time I get excited about a new hobby) because I rapidly swing in the other direction. I painted nothing this week, and I spent all weekend watching the entire season of Bling Empire in one day instead. I knitted most of a hat and then unravelled it all because it had accumulated too many mistakes. It's a really fun knit so I'm not too bothered. I spent a lot of evenings frantically working on a visualization about plastic waste (new hobby alert) that nobody asked for. It started as "lemme do a quick thing to get better at d3 and at asking questions about the data" and it's now a good 8+ hours of work in. Sure wish I would've half assed it, because now it's not done and I don't really want to finish it. Still reading "Because Internet"; also started The Travelling Cat Chronicles. I am really irritated and confused by this Hangouts/Chat situation. I am on an iPhone, and want to send Frances stupid links, hot takes and photos. We can't use our respective phone's Messages app (because hers is over SMS which shits the bed on photos, and mine is Apple proprietary). We were using Hangouts, but it's deprecated, and wanted to use Chat, but it's ... enterprise only and peons can't start new conversations? Also Whatsapp is evil and Signal spams all my contacts when I install it. What the fuck, I just want to talk to non-Apple friends in 2021. February is a perfect calendar rectangle and that is satisfying. Are week notes the new LiveJournal but without comments? Discuss.

## Visualizing an Assassin Puzzle

DevFeed: [Visualizing an Assassin Puzzle](<https://devfeed.tech/articles/visualizing-an-assassin-puzzle-40422.md>)

Original publisher: [Read original article](<https://www.jeremykun.com/2018/07/24/visualizing-an-assassin-puzzle/>)

Published: 2018-07-24T08:00:09Z

Content type: tutorial

Language: en

Sources: [Jeremy Kun](<https://devfeed.tech/sources/jeremy-kun.md>)

Topics: [Computing](<https://devfeed.tech/topics/computing.md>), [Programming](<https://devfeed.tech/topics/programming.md>), [d3](<https://devfeed.tech/topics/d3.md>), [Demo](<https://devfeed.tech/topics/demo.md>), [Library](<https://devfeed.tech/topics/library.md>), [Software](<https://devfeed.tech/topics/software.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [code](<https://devfeed.tech/tags/code.md>), [computing](<https://devfeed.tech/tags/computing.md>), [d3](<https://devfeed.tech/tags/d3.md>), [demo](<https://devfeed.tech/tags/demo.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [mathematics](<https://devfeed.tech/tags/mathematics.md>), [programming](<https://devfeed.tech/tags/programming.md>), [software](<https://devfeed.tech/tags/software.md>), [torus](<https://devfeed.tech/tags/torus.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### 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](<https://devfeed.tech/articles/playing-with-react-and-d3-21863.md>)

Original publisher: [Read original article](<https://reactjsnews.com/playing-with-react-and-d3>)

Author: Zach Silveira

Published: 2016-04-21T17:00:00Z

Content type: tutorial

Language: en

Sources: [ReactJS News](<https://devfeed.tech/sources/reactjs-news.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Data visualization](<https://devfeed.tech/topics/data-visualization.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [User Interfaces](<https://devfeed.tech/topics/user-interfaces.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Library](<https://devfeed.tech/topics/library.md>)

Tags: [d3](<https://devfeed.tech/tags/d3.md>), [d3-js](<https://devfeed.tech/tags/d3-js.md>), [data-visualization](<https://devfeed.tech/tags/data-visualization.md>), [declarative](<https://devfeed.tech/tags/declarative.md>), [interfaces](<https://devfeed.tech/tags/interfaces.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [react](<https://devfeed.tech/tags/react.md>), [user-interfaces](<https://devfeed.tech/tags/user-interfaces.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### 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](<https://devfeed.tech/articles/plotting-reddit-post-frequencies-with-d3-32151.md>)

Original publisher: [Read original article](<https://adambard.com/blog/plotting-reddit-post-frequencies-with-d3/>)

Published: 2016-02-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [Adam Bard](<https://devfeed.tech/sources/adam-bard.md>)

Topics: [d3.js](<https://devfeed.tech/topics/d3-js.md>), [plotting](<https://devfeed.tech/topics/plotting.md>), [data](<https://devfeed.tech/topics/data.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [charts](<https://devfeed.tech/tags/charts.md>), [code](<https://devfeed.tech/tags/code.md>), [d3](<https://devfeed.tech/tags/d3.md>), [d3-js](<https://devfeed.tech/tags/d3-js.md>), [data](<https://devfeed.tech/tags/data.md>), [graphs](<https://devfeed.tech/tags/graphs.md>), [plotting](<https://devfeed.tech/tags/plotting.md>)

### 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!](<https://devfeed.tech/articles/welcome-to-square-let-s-learn-d3-15956.md>)

Original publisher: [Read original article](<https://developer.squareup.com/blog/welcome-to-square-lets-learn-d3>)

Author: Square Engineering

Published: 2014-10-13T16:07:00Z

Content type: tutorial

Language: en

Sources: [Square Corner Blog](<https://devfeed.tech/sources/square-corner-blog-medium.md>), [Square Corner Blog RSS Feed](<https://devfeed.tech/sources/square-corner-blog-rss-feed.md>)

Topics: [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [Learning](<https://devfeed.tech/topics/learning.md>), [Code](<https://devfeed.tech/topics/code.md>), [NEO](<https://devfeed.tech/topics/neo.md>), [GitHub](<https://devfeed.tech/topics/github.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [d3](<https://devfeed.tech/tags/d3.md>), [d3-js](<https://devfeed.tech/tags/d3-js.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [examples](<https://devfeed.tech/tags/examples.md>), [github](<https://devfeed.tech/tags/github.md>), [pull-requests](<https://devfeed.tech/tags/pull-requests.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

Square introduces an internal tutorial for learning D3.js, created for its NEO engineer onboarding program. The tutorial grew from teaching notes and includes examples, with source available on GitHub for contributions.

### Source excerpt

Our internal tutorial for learning D3.

## Ember and D3: Building responsive analytics

DevFeed: [Ember and D3: Building responsive analytics](<https://devfeed.tech/articles/ember-and-d3-building-responsive-analytics-15622.md>)

Original publisher: [Read original article](<https://developer.squareup.com/blog/ember-and-d3-building-responsive-analytics>)

Author: Square Engineering

Published: 2012-04-04T16:01:00Z

Content type: tutorial

Language: en

Sources: [Square Corner Blog](<https://devfeed.tech/sources/square-corner-blog-medium.md>), [Square Corner Blog RSS Feed](<https://devfeed.tech/sources/square-corner-blog-rss-feed.md>)

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [data](<https://devfeed.tech/topics/data.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [mvc](<https://devfeed.tech/topics/mvc.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [analytics](<https://devfeed.tech/tags/analytics.md>), [browser](<https://devfeed.tech/tags/browser.md>), [building](<https://devfeed.tech/tags/building.md>), [code](<https://devfeed.tech/tags/code.md>), [d3](<https://devfeed.tech/tags/d3.md>), [data](<https://devfeed.tech/tags/data.md>), [discovery](<https://devfeed.tech/tags/discovery.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [interface](<https://devfeed.tech/tags/interface.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [metrics](<https://devfeed.tech/tags/metrics.md>), [payments](<https://devfeed.tech/tags/payments.md>), [performance](<https://devfeed.tech/tags/performance.md>), [prototyping](<https://devfeed.tech/tags/prototyping.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [research](<https://devfeed.tech/tags/research.md>), [structure](<https://devfeed.tech/tags/structure.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

Square describes how it built a responsive web analytics panel for merchants using Ember.js for page-level coordination and D3.js for rendering visualizations of payments data. The article covers user research, exploratory analytics, real-time filtering, and testing practices.

### Source excerpt

How we bult our web analytics panel with Ember and D3.

## Cube: Time Series Visualization

DevFeed: [Cube: Time Series Visualization](<https://devfeed.tech/articles/cube-time-series-visualization-15593.md>)

Original publisher: [Read original article](<https://developer.squareup.com/blog/cube-time-series-visualization>)

Author: Square Engineering

Published: 2011-09-15T16:00:00Z

Content type: release

Language: en

Sources: [Square Corner Blog](<https://devfeed.tech/sources/square-corner-blog-medium.md>), [Square Corner Blog RSS Feed](<https://devfeed.tech/sources/square-corner-blog-rss-feed.md>)

Topics: [Cube engine](<https://devfeed.tech/topics/cube-engine.md>), [Time Series](<https://devfeed.tech/topics/time-series.md>), [Data visualization](<https://devfeed.tech/topics/data-visualization.md>), [MongoDB](<https://devfeed.tech/topics/mongodb.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>)

Tags: [d3](<https://devfeed.tech/tags/d3.md>), [data-visualization](<https://devfeed.tech/tags/data-visualization.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [mongodb](<https://devfeed.tech/tags/mongodb.md>), [node](<https://devfeed.tech/tags/node.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [time-series](<https://devfeed.tech/tags/time-series.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

Square announces Cube, an open-source system for visualizing time series data with MongoDB, Node, and D3. Cube accepts timestamped events and can produce realtime visualizations of aggregate metrics and browser-based dashboards.

### Source excerpt

Announcing an open-source system for visualizing time series data, built with MongoDB, Node, and D3.