Playing with D3.js

This took about 15 minutes to get running, start to finish. It was just to test drive a data visualization. The pie chart is super boring, but it was incredibly easy to get going — and ChatGPT even provided realistic mock data without being asked.

I asked ChatGPT to write a D3.js pie chart showing eye color distribution. The code came back on the first try, ran immediately, and even included hover effects that expand each slice. Here's the live result:

The interesting part wasn't just that it worked — it was how it worked. ChatGPT didn't just dump boilerplate code; it made sensible choices throughout: using d3.schemeCategory10 for colors, centering the chart with a group transform, adding mouseover transitions. It felt like reviewing code from a capable junior developer who understood the goal.

What would have taken me an hour of reading D3 documentation and debugging took 15 minutes. The only thing I had to do was copy the code in and add the D3 script tag. This kind of productivity multiplier is what makes AI tools genuinely exciting, not just as a curiosity but as a real part of a development workflow.

The code

For reference, here's roughly what ChatGPT produced:

const data = [
  { color: "Blue",  value: 20 },
  { color: "Brown", value: 35 },
  { color: "Green", value: 15 },
  { color: "Hazel", value: 10 },
  { color: "Grey",  value:  5 },
  { color: "Other", value: 15 },
];

const width = 500, height = 500;
const radius = Math.min(width, height) / 2.2;

const svg = d3.select("#chart").append("svg")
  .attr("width", width).attr("height", height);

const g = svg.append("g")
  .attr("transform", `translate(${width/2},${height/2})`);

const color = d3.scaleOrdinal(d3.schemeCategory10);
const pie = d3.pie().value(d => d.value);
const arc = d3.arc().innerRadius(0).outerRadius(radius);

g.selectAll("path")
  .data(pie(data)).enter().append("path")
  .attr("fill", d => color(d.data.color))
  .attr("d", arc)
  .on("mouseover", function(event, d) {
    d3.select(this).transition().duration(200)
      .attr("d", d3.arc().innerRadius(0).outerRadius(radius * 1.1)(d));
  })
  .on("mouseout", function(event, d) {
    d3.select(this).transition().duration(200).attr("d", arc(d));
  });

g.selectAll("text")
  .data(pie(data)).enter().append("text")
  .attr("transform", d => `translate(${arc.centroid(d)})`)
  .attr("text-anchor", "middle")
  .text(d => d.data.color);