Custom Data Visualisation for Designers Using AI and D3
Pre-built charting libraries are practical and well-documented, but they constrain what you can build. When your data doesn't fit a bar chart or scatterplot, you either force it into a format that doesn't serve it, or you write a spec and wait for engineering. This is the story of a third option — using AI-assisted development to prototype something genuinely bespoke, directly from design research to working interactive chart.
The bubble chart that needed to do something bubble charts don't do
We needed a tool for lenders to explore the existing loan landscape — which loans were active, when they were expiring, and at what APR. The goal was to help lenders spot opportunities: loans about to mature, underserved market segments, gaps in the offer landscape.
A bubble chart was the right starting point. Timeline along the x-axis, APR on the y-axis, bubble size representing loan amount. Three dimensions in a single view. But the standard implementation fell apart immediately with real data: collection offers in NFT lending generate many loans at identical coordinates — same amount, same APR. On a standard bubble chart, these stack invisibly. You see one bubble where there are thirty.
Pre-built charting libraries don't solve this. You can't configure your way out of it with Chart.js or Recharts. This needed something bespoke.
Why AI can't solve the visual problem
Here's where it's important to be honest about what AI can and can't do. I didn't ask Cursor to "find me a chart that handles overlapping bubbles." AI is not good at visual discernment. It's the equivalent of that viral clip where someone asks AI to help them with fashion and it tells them they look great while they're wearing the most ridiculous outfit imaginable. If you rely on AI to make visual judgments for you, you're going to end up in a bad place.
What I did was go to Observable — the showcase and documentation site for D3 — and spend time browsing examples. Looking at how other people had solved density and overlap problems. I came across D3's packSiblings method, a circle-packing algorithm that forces overlapping circles to spread apart and cluster around each other rather than stacking. It was designed for a different purpose, but I could see that the underlying behaviour was exactly what I needed.
That's the part that requires a designer's eye and judgment. No AI suggested this. I saw it, understood the visual behaviour, and recognised how it could be adapted to solve my specific problem.
Where AI accelerated the work
Once I knew what I wanted to build, AI became extremely useful. Implementing a D3 force simulation with packSiblings, managing the packing algorithm's edge cases, handling tooltip interactions on individually packed bubbles — this is where Cursor accelerated the work dramatically. The implementation mechanics that would have taken me days of reading D3 documentation and debugging were compressed into hours.
The result is a chart where clustered loans spread apart visually, each bubble remains individually inspectable, and the density of clusters communicates where market activity is concentrated. It's a bespoke solution that no pre-built library offers, but it was built and validated in under a week — from first concept to working interactive prototype with real loan data.
The takeaway for designers: AI won't tell you what to build. It won't make good visual choices for you. But it frees you from the implementation bottleneck that used to prevent you from exploring bespoke ideas. Previously, if you had a concept that went beyond what a standard charting library offered, you either had to be a strong D3 developer yourself or write a spec and wait for engineering. Now, if you do the design research — browse Observable, study examples, understand the visual behaviour you need — you can prototype the solution yourself and validate it with real users before anyone else touches it.
What designers should understand about AI's limitations
The bubble chart illustrates one side of working with AI as a designer.
AI was useless for the creative problem-solving. It couldn't browse Observable for me, recognise the visual potential of packSiblings, or decide that circle packing was the right approach for overlapping loan data. That required design research, visual judgment, and the ability to see an algorithm's behaviour and imagine it applied to a different context. AI accelerated the implementation of that idea, but the idea itself came from doing the work that designers have always done — looking at how other people solve visual problems and adapting those approaches to your own context.
Knowing when AI will help and when it won't is a skill in itself. As a general rule: if the problem is about what to build or how something should look, do your own research. If the problem is about implementing a decision you've already made, AI can compress that work dramatically.
For a broader look at how AI-assisted prototyping compresses the product cycle and what it means for teams, see What Happens When Designers Can Build, Not Just Design.
Tools used: D3.js (with packSiblings), Cursor (AI-assisted development), Observable (D3 showcase and documentation)