D3.js Examples

Here are some classic D3.js visualization examples to get you started:

📊 Bar Chart

A fundamental example demonstrating data binding and axis creation:

d3.select("body")
  .selectAll("div")
  .data([30, 60, 90])
  .enter()
  .append("div")
  .style("width", d => `${d}px`)
  .style("height", "20px")
  .style("margin", "5px")
  .style("background-color", "steelblue");

View detailed implementation

📈 Line Chart

Showing how to create a dynamic line chart with tooltips:

d3.select("svg")
  .append("path")
  .datum(data)
  .attr("d", d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
  );

Explore line chart documentation

🍪 Pie Chart

Creating a responsive pie chart with arc generation:

d3.select("svg")
  .selectAll("path")
  .data(pieData)
  .enter()
  .append("path")
  .attr("d", d3.arc()
    .innerRadius(0)
    .outerRadius(radius)
    .startAngle(d => d.startAngle)
    .endAngle(d => d.endAngle)
  );

Check pie chart examples

For more advanced techniques, see our D3.js Best Practices Guide