Chapter 40: D3.js
Step 1: What Exactly is D3.js? (Very Simple & Clear Definition)
D3.js (or just D3) stands for Data-Driven Documents.
It is a free, open-source JavaScript library that lets you:
- Take any data (numbers, names, dates, geographic coordinates…)
- Bind that data to web page elements (SVG shapes, HTML tags, Canvas…)
- Use that data to drive position, size, color, text, animation, interaction…
In simple words: D3.js is the tool that says: “Give me your data → I will turn it into any visual shape or story you can imagine on a web page — exactly the way you want it.”
Think of D3 as:
- A very smart data-to-pixel translator
- A Swiss Army knife for web graphics
- The difference between “good chart” and “award-winning interactive visualization”
Official website (still the best place): https://d3js.org GitHub: https://github.com/d3/d3
Current version in February 2026: D3 v7.x (v7 released 2021, still dominant; v8 in beta/preview stage with some modern improvements)
Step 2: Why is D3.js So Special & Still Used in 2026?
Most charting libraries (Chart.js, Plotly, Highcharts) give you ready-made chart types (bar, line, pie…).
D3.js gives you almost nothing ready-made — instead it gives you building blocks so you can create exactly what you want, even if no library has that chart yet.
Big advantages (2026 perspective):
- Total freedom — create completely custom visuals (Sankey diagrams with curved links, force-directed networks, radial trees, animated geographic transitions, brushable timelines…)
- Data-binding power — change data → visual updates automatically (enter-update-exit pattern)
- Full SVG control — every shape is a DOM element → you can add click/hover events, transitions, CSS
- Used by serious organizations — The New York Times, The Guardian, BBC, Financial Times, NASA, Google, Microsoft, scientific journals
- Still the gold standard for highly custom, storytelling visualizations
Disadvantages (be honest):
- Steep learning curve (takes 2–4 weeks to become comfortable)
- You write more code than Chart.js/Plotly
- Not ideal for quick dashboards (use those libraries instead)
Step 3: Core Concept of D3 – The Data Join (Enter – Update – Exit)
The most famous and powerful idea in D3 is the data join:
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// You have data const data = [30, 80, 120, 200, 50]; // You select some empty placeholders d3.selectAll("circle") .data(data) // ← bind data to selection .enter() // ← for new data points (enter) .append("circle") // ← create new circles .attr("cx", (d, i) => i * 60 + 60) .attr("cy", 100) .attr("r", d => d) // radius = data value .attr("fill", "steelblue"); |
Three magic phases:
- Enter → new data points → create new elements
- Update → existing data points → modify existing elements
- Exit → data points that disappeared → remove elements
This pattern is what makes D3 feel “alive” — data changes → visuals smoothly update.
Step 4: Your First D3.js Chart – Copy-Paste & Run (Bar Chart)
Create d3-hello.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My First D3.js Bar Chart</title> <script src="https://d3js.org/d3.v7.min.js"></script> <style> body { margin: 0; padding: 60px; background: #f8f9fa; font-family: Arial; text-align: center; } h1 { color: #2c3e50; } svg { background: white; border: 2px solid #3498db; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } </style> </head> <body> <h1>My First D3.js Bar Chart – IPL 2025 Runs</h1> <svg width="800" height="400"></svg> <script> // 1. Data (top 5 IPL 2025 run scorers – pretend numbers) const data = [ { player: "Virat Kohli", runs: 741 }, { player: "Suryakumar Yadav", runs: 682 }, { player: "Travis Head", runs: 658 }, { player: "KL Rahul", runs: 612 }, { player: "Jos Buttler", runs: 589 } ]; // 2. Set dimensions & margins const width = 800; const height = 400; const margin = { top: 60, right: 40, bottom: 100, left: 80 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 3. Create SVG & group const svg = d3.select("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // 4. Scales (map data to pixels) const xScale = d3.scaleBand() .domain(data.map(d => d.player)) .range([0, innerWidth]) .padding(0.3); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.runs) * 1.1]) .range([innerHeight, 0]); // 5. Axes g.append("g") .call(d3.axisLeft(yScale)) .selectAll("text") .style("font-size", "14px"); g.append("g") .attr("transform", `translate(0, ${innerHeight})`) .call(d3.axisBottom(xScale)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-45)") .style("font-size", "14px"); // 6. Bars (the magic data join) g.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", d => xScale(d.player)) .attr("y", d => yScale(d.runs)) .attr("width", xScale.bandwidth()) .attr("height", d => innerHeight - yScale(d.runs)) .attr("fill", "#3498db") .attr("rx", 6) // rounded corners .on("mouseover", function(event, d) { d3.select(this).attr("fill", "#e74c3c"); svg.append("text") .attr("id", "tooltip") .attr("x", xScale(d.player) + xScale.bandwidth()/2) .attr("y", yScale(d.runs) - 10) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text(`${d.runs} runs`); }) .on("mouseout", function() { d3.select(this).attr("fill", "#3498db"); d3.select("#tooltip").remove(); }); // Title svg.append("text") .attr("x", width/2) .attr("y", 40) .attr("text-anchor", "middle") .style("font-size", "28px") .style("font-weight", "bold") .text("IPL 2025 – Top 5 Run Scorers"); </script> </body> </html> |
Open this file — you should see a nice, interactive bar chart with hover tooltips!
Step 5: Quick Summary Table (Keep This Handy!)
| Feature | What D3.js lets you do | Example Use in 2026 | Difficulty |
|---|---|---|---|
| Data Binding | Bind data to SVG/HTML elements | Almost every visualization | Core skill |
| Scales | Map data values to pixels (linear, log, time…) | Every axis & position | Medium |
| Axes | Automatic x/y axes with ticks | Most charts | Easy |
| Transitions & Animations | Smooth enter/update/exit animations | Animated bar races, morphing charts | Medium |
| Interactions | Click, hover, drag, zoom, brush | Brushing timelines, clickable maps | Medium–Hard |
| Geo & Maps | Draw maps, projections, paths | Election maps, migration flows | Hard |
| Force Simulation | Node-link diagrams, network layouts | Social networks, org charts | Hard |
Final Teacher Words (February 2026 Reality)
D3.js = the most powerful and flexible JavaScript library for turning data into custom, interactive, beautiful web visuals.
- Want a standard bar/line/pie chart? → Use Chart.js or Plotly (faster)
- Want something completely unique, highly interactive, or storytelling-focused? → D3.js is still the king
In Hyderabad 2026 D3.js is still used heavily:
- Data journalism (The Hindu, Indian Express interactive pieces)
- Scientific visualizations
- Advanced dashboards
- Academic research & presentations
- Custom interactive maps & networks
Got the big picture now? 🔥
Questions?
- Want a live animated bar race (IPL run scorers over seasons)?
- Full India state-wise population choropleth map?
- How to use D3 in React (with hooks)?
- Difference D3.js vs Chart.js vs Plotly.js vs Three.js?
Just tell me — next class is ready! 🚀
