Learn D3.js Data Handling — Complete Guide to Loading CSV, JSON & Aggregation

Q: How does `d3.group()` differ from `d3.rollup()`?

d3.group() creates groups of elements. d3.rollup() creates groups and aggregates each group into a single value.

Q: Can I load multiple files at once?

Yes. Use Promise.all(): Promise.all([d3.csv("a.csv"), d3.json("b.json")]).then(function([csvData, jsonData]) { ... }).

Frontend Development

D3.js

D3.js Data Handling — Complete Guide to Loading CSV, JSON & Aggregation

DodaTech Updated Jun 6, 2026 11 min read

D3.js provides powerful utilities for loading, parsing, transforming, and aggregating data before visualization.

What You’ll Learn

By the end of this tutorial, you will be able to:

Load data from CSV, TSV, JSON, and text files
Parse data strings into usable arrays
Convert string values to numbers and dates
Use D3’s arrays API for statistics (min, max, mean, sum)
Group and aggregate data with d3.group() and d3.rollup()
Build a complete data-to-chart pipeline

Why Data Handling Matters

Charts are only as good as the data behind them. When Durga Antivirus Pro loads a CSV report of 10,000 scanned files and needs to group them by threat level, it uses D3’s data utilities. When DodaZIP displays compression statistics for each file type, it aggregates data with d3.rollup(). Getting data into D3 is the first step of every visualization — and doing it correctly separates functioning charts from broken ones.

Learning Path

    flowchart LR
    A["D3.js Basics"] --> B["D3.js SVG"]
    B --> C["D3.js Scales & Axes"]
    C --> D["D3.js Charts"]
    D --> E["D3.js Interactions"]
    D --> F["D3.js Data Handling"]
    E --> G["D3.js Advanced"]
    F --> G
    G --> H["D3.js Reference"]
    F:::current
    
    classDef current fill:#4CAF50,color:#fff,stroke:#333,stroke-width:2px

Prerequisites: You should understand the data join pattern from the D3.js Basics tutorial. Basic JavaScript array knowledge is helpful.

Loading External Data

D3 uses modern JavaScript Promises (.then() / await) to load data asynchronously. This means the data isn’t available immediately — you must wait for it.

CSV Files — The Most Common Format

CSV (comma-separated values) is the standard format for tabular data:

d3.csv("/data/sales.csv").then(function(data) {
    console.log(data); // Array of objects
});

If your CSV file looks like this:

month,revenue,profit
Jan,12000,2400
Feb,15000,3200
Mar,13500,2800

Then data will be an array of objects:

[
    { month: "Jan", revenue: "12000", profit: "2400" },
    { month: "Feb", revenue: "15000", profit: "3200" },
    // ...all values are strings!
]

TSV and JSON Files

// TSV (tab-separated)
d3.tsv("/data/data.tsv").then(function(data) { ... });

// JSON (native JavaScript)
d3.json("/api/data.json").then(function(data) { ... });

// Plain text
d3.text("/data/readme.txt").then(function(text) { ... });

Parsing from Strings

What if your data is embedded in the page (not a file)? Use the parse functions:

var csvString = "name,age\nAlice,30\nBob,25";
var data = d3.csvParse(csvString);
// [{ name: "Alice", age: "30" }, { name: "Bob", age: "25" }]

var tsvString = "name\tage\nAlice\t30\nBob\t25";
var data = d3.tsvParse(tsvString);

// Convert back to string
var csv = d3.csvFormat(data);
var tsv = d3.tsvFormat(data);

Type Conversion — The Critical Step You Always Forget

CSV values are always strings. This is the #1 cause of bugs. “12000” is not 12000. If you try to compute a sum on strings, you’ll get “1200024003200” instead of 40200.

Fix it with a row conversion function:

d3.csv("/data/sales.csv", function(d) {
    return {
        month: d.month,
        revenue: +d.revenue,        // + converts string to number
        profit: +d.profit,
        date: d3.timeParse("%b")(d.month)  // parse "Jan" → Date object
    };
}).then(function(data) {
    console.log(data); // numbers instead of strings
});

The + trick: +"12000" → 12000. It’s a concise way to convert a numeric string to a number in JavaScript.

Arrays API — Statistics Without Loops

D3 extends JavaScript arrays with statistical methods. Instead of writing for loops to find min, max, sum, and mean, use D3’s built-in functions.

Basic Statistics

var arr = [10, 20, 30, 40, 50];

d3.min(arr);               // 10
d3.max(arr);               // 50
d3.extent(arr);            // [10, 50] (min and max together)
d3.sum(arr);               // 150
d3.mean(arr);              // 30
d3.median(arr);            // 30
d3.deviation(arr);         // standard deviation (~15.8)
d3.quantile(arr, 0.5);     // 30 (median)
d3.quantile(arr, 0.25);    // first quartile (17.5)
d3.variance(arr);          // variance (250)

With Accessor Functions (For Arrays of Objects)

var data = [
    { name: "A", value: 10 },
    { name: "B", value: 20 },
    { name: "C", value: 30 }
];

d3.max(data, function(d) { return d.value; });   // 30
d3.sum(data, function(d) { return d.value; });   // 60
d3.mean(data, function(d) { return d.value; });  // 20
d3.extent(data, function(d) { return d.value; }); // [10, 30]

Why accessor functions matter: d3.max(data) on an array of objects would try to compare objects (not meaningful). The accessor tells D3 which field to use.

d3.range — Generating Sequential Values

d3.range(5);                 // [0, 1, 2, 3, 4]
d3.range(1, 5);             // [1, 2, 3, 4]
d3.range(0, 10, 2);         // [0, 2, 4, 6, 8]
d3.range(10, 0, -2);        // [10, 8, 6, 4, 2]

Useful for generating test data, tick values, and loop indices.

Searching and Sorting

var arr = [10, 50, 30, 20, 40];

d3.least(arr);              // 10 (minimum value)
d3.greatest(arr);           // 50 (maximum value)
d3.leastIndex(arr);         // 0 (index of minimum)
d3.greatestIndex(arr);      // 1 (index of maximum)

// Stable sort (unlike Array.sort())
d3.sort(arr);               // [10, 20, 30, 40, 50]

// With accessor (sort objects by a field)
d3.sort(data, function(d) { return d.value; });

Why d3.sort over Array.sort: JavaScript’s native Array.sort() is not guaranteed to be stable (equal items may change order). D3’s sort is stable, which matters when you sort by one field and want to preserve order of equal items.

Binning (Histograms)

Group continuous values into discrete bins:

var values = [1, 2, 2, 3, 3, 3, 4, 4, 5, 6, 7, 8, 9, 10];

var binGenerator = d3.bin()
    .domain([0, 10])        // range to bin
    .thresholds(5);          // number of bins

var bins = binGenerator(values);
// Array of bins, each with x0 (lower bound), x1 (upper bound), and .length (count)

Grouping and Aggregating Data

Real-world data rarely comes in the exact shape you need. You’ll often need to group and aggregate.

d3.group — Group by a Key

var data = [
    { category: "A", region: "North", value: 10 },
    { category: "A", region: "South", value: 20 },
    { category: "B", region: "North", value: 15 },
    { category: "B", region: "South", value: 25 },
    { category: "A", region: "North", value: 30 }
];

// Group by category
var grouped = d3.group(data, function(d) { return d.category; });
// Map { "A" => [item1, item2, item5], "B" => [item3, item4] }

// Two-level grouping
var grouped2 = d3.group(data,
    function(d) { return d.category; },
    function(d) { return d.region; }
);

d3.rollup — Group and Aggregate

This is the most useful function. It groups data and reduces each group to a single value:

var rolled = d3.rollup(data,
    function(v) { return d3.sum(v, function(d) { return d.value; }); },
    function(d) { return d.category; }
);
// Map { "A" => 60, "B" => 40 }

How rollup works: The first argument is the reduce function — it receives an array of items in each group and should return a single value. The second argument is the key function that defines groups.

Version Warning

Version	API	Status
v5 and earlier	`d3.nest()`	Removed
v6+	`d3.group()`, `d3.rollup()`	Current

If you’re upgrading from D3 v5, d3.nest() no longer exists. Use d3.group() and d3.rollup() instead.

The Data-to-Chart Pipeline

Here’s how all the pieces fit together:

Raw Data (CSV/JSON)
    │
    ▼
Parse + Type Convert  ← d3.csvParse(), row conversion with +value
    │
    ▼
Filter / Clean        ← Array.filter(), d3.shuffle()
    │
    ▼
Group / Aggregate     ← d3.group(), d3.rollup(), d3.bin()
    │
    ▼
Transform for Chart   ← d3.stack(), scales
    │
    ▼
Bind to DOM           ← .data(data).enter()

Common Mistakes

1. Forgetting to Convert String Values to Numbers

CSV parses everything as strings. "12000" + "2400" = "120002400" (string concatenation), not 14400. Always use +value or parseInt(value, 10) in the row conversion function.

2. Not Handling Async Data Loading

// WRONG — data is undefined below the call
var data;
d3.csv("file.csv").then(function(d) { data = d; });
processData(data);  // undefined!

// RIGHT — process inside .then()
d3.csv("file.csv").then(function(data) {
    processData(data);
});

3. Using `d3.nest()` in D3 v6+

d3.nest() was removed in v6. Use d3.group() for grouping and d3.rollup() for grouped aggregation. The API is slightly different but more powerful.

4. Ignoring Null/Undefined Values

d3.min() and d3.max() return undefined if any value is invalid. d3.sum() and d3.mean() skip nulls. Always filter or clean your data first:

var cleanData = data.filter(function(d) { return d.value != null; });

5. Using `d3.map()` When a Plain Object Works

d3.map() is useful for dynamic keys, but for simple cases, a plain JavaScript object {} is simpler and more familiar.

6. Not Handling CORS Errors

Loading data from a different domain requires CORS headers. If you get CORS errors in Doda Browser, either use a proxy, serve the data from the same domain, or use a CDN that supports CORS.

Practice Questions

Question 1

Why are CSV values always strings, and how do you fix it?

Answer: The CSV format doesn’t have types — everything is text. D3 reads “12000” as the string "12000". Fix it with a row conversion function: revenue: +d.revenue converts the string to a number.

Question 2

What is the difference between d3.group() and d3.rollup()?

Answer: d3.group() groups elements into arrays — each group is a key mapped to an array of matching items. d3.rollup() groups and then reduces each group to a single aggregated value (like sum, mean, or count).

Question 3

How do you load multiple data files at once?

Answer: Use Promise.all():

Promise.all([d3.csv("a.csv"), d3.json("b.json")])
    .then(function([csvData, jsonData]) { ... });

Question 4

What does d3.bin() do?

Answer: It creates histogram bins from continuous data — it divides a value range into bins and counts how many data points fall into each bin. Each bin has x0 (lower bound), x1 (upper bound), and a length (count).

Question 5

When would you use d3.least() vs d3.min()?

Answer: d3.min() returns the minimum numeric value. d3.least() returns the element itself (useful for objects). For example, d3.least(people, d => d.age) returns the person object with the lowest age.

Challenge

Create a data processing pipeline that: (1) Creates an inline CSV string of 20 cities with population and area, (2) Parses it with d3.csvParse() and converts types, (3) Computes density for each city, (4) Groups by country using d3.rollup() to get total population per country, (5) Sorts by population descending.

FAQ

How does d3.group() differ from d3.rollup()?

d3.group() creates groups of elements. d3.rollup() creates groups and aggregates each group into a single value.

Can I load multiple files at once?

Yes. Use Promise.all(): Promise.all([d3.csv("a.csv"), d3.json("b.json")]).then(function([csvData, jsonData]) { ... }).

What is d3.csvParse() for?

It parses a CSV string (not file) into an array of objects. Use it when CSV data comes from an API response or is embedded in the page.

How do I preserve leading zeros in CSV data?

CSV treats all values as strings during parse. D3’s row conversion function receives the raw string. Convert to number only when needed.

What is d3.bin() used for?

It creates histogram bins from continuous data. It calculates bin boundaries and counts values in each bin.

Try It Yourself

This complete example loads inline CSV data (simulating a real data load) and builds a bar chart with aggregation:

<!DOCTYPE html>
<html>
<head>
    <title>CSV Data Dashboard — Try It Yourself</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        pre { background: #f5f5f5; padding: 10px; border-radius: 4px; max-height: 200px; overflow: auto; }
    </style>
</head>
<body>
    <h2>City Population Dashboard</h2>
    <div id="summary"></div>
    <svg width="500" height="250" id="chart"></svg>
    <h3>Raw Data</h3>
    <pre id="rawData"></pre>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
        var csvString = `city,population,area,country
Tokyo,37400068,2194,Japan
Delhi,32226000,1484,India
Shanghai,28516000,6341,China
Sao Paulo,22237000,1521,Brazil
Mumbai,22120000,603,India
Beijing,21540000,16411,China
Cairo,21323000,528,Egypt
Dhaka,21006000,368,Bangladesh
Osaka,19110000,225,Japan
New York,18819000,7834,USA`;

        var data = d3.csvParse(csvString, function(d) {
            return {
                city: d.city,
                population: +d.population,
                area: +d.area,
                country: d.country,
                density: Math.round(+d.population / +d.area)
            };
        });

        d3.select("#rawData").text(csvString);

        var totalPop = d3.sum(data, function(d) { return d.population; });
        var avgDensity = d3.mean(data, function(d) { return d.density; });
        var maxPop = d3.greatest(data, function(d) { return d.population; });

        d3.select("#summary").html(
            data.length + " cities | Total: " + d3.format(",.0f")(totalPop) +
            " | Avg density: " + d3.format(",.0f")(avgDensity) + "/km²" +
            " | Largest: " + maxPop.city
        );

        var byCountry = d3.rollup(data,
            function(v) { return d3.sum(v, function(d) { return d.population; }); },
            function(d) { return d.country; }
        );

        var sorted = d3.sort(data, function(d) { return -d.population; });
        var margin = { top: 20, right: 20, bottom: 60, left: 50 };
        var w = 500, h = 250;
        var innerW = w - margin.left - margin.right;
        var innerH = h - margin.top - margin.bottom;

        var svg = d3.select("#chart")
            .append("g").attr("transform", "translate("+margin.left+","+margin.top+")");

        var x = d3.scaleBand()
            .domain(sorted.map(function(d) { return d.city; }))
            .range([0, innerW]).padding(0.2);

        var y = d3.scaleLinear()
            .domain([0, d3.max(sorted, function(d) { return d.population; })])
            .range([innerH, 0]);

        var color = d3.scaleOrdinal(d3.schemeSet3);

        svg.selectAll("rect").data(sorted).enter().append("rect")
            .attr("x", function(d) { return x(d.city); })
            .attr("y", function(d) { return y(d.population); })
            .attr("width", x.bandwidth())
            .attr("height", function(d) { return innerH - y(d.population); })
            .attr("fill", function(d) { return color(d.country); });

        svg.append("g").attr("transform", "translate(0,"+innerH+")")
            .call(d3.axisBottom(x))
            .selectAll("text").attr("transform", "rotate(-45)").style("text-anchor", "end");

        svg.append("g").call(d3.axisLeft(y));
    </script>
</body>
</html>

Try this: Modify the CSV string to add more cities. Change the rollup function to compute average density per country instead of total population.

What’s Next

You can now load, parse, and aggregate data. Apply these skills:

Tutorial	What You’ll Learn
D3.js Advanced	Maps, force graphs, and hierarchies
D3.js Reference	Complete API cheatsheet

Related topics: JavaScript, Node.js, Data Visualization, SQL, JSON

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — bringing secure, high-performance software to your digital life.

What’s Next

Congratulations on completing this D3Js Data tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous D3.js Interactions — Complete Guide to Transitions, Animations, Drag & Zoom Next D3.js Advanced — Geographies, Force Layout & Hierarchies Explained

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse D3.js

D3.js Data Handling — Complete Guide to Loading CSV, JSON & Aggregation

What You’ll Learn

Why Data Handling Matters

Learning Path

Loading External Data

CSV Files — The Most Common Format

TSV and JSON Files

Parsing from Strings

Type Conversion — The Critical Step You Always Forget

Arrays API — Statistics Without Loops

Basic Statistics

With Accessor Functions (For Arrays of Objects)

d3.range — Generating Sequential Values

Searching and Sorting

Binning (Histograms)

Grouping and Aggregating Data

d3.group — Group by a Key

d3.rollup — Group and Aggregate

Version Warning

The Data-to-Chart Pipeline

Common Mistakes

1. Forgetting to Convert String Values to Numbers

2. Not Handling Async Data Loading

3. Using d3.nest() in D3 v6+

4. Ignoring Null/Undefined Values

5. Using d3.map() When a Plain Object Works

6. Not Handling CORS Errors

Practice Questions

Question 1

Question 2

Question 3

Question 4

Question 5

Challenge

FAQ

Try It Yourself

What’s Next

What’s Next

3. Using `d3.nest()` in D3 v6+

5. Using `d3.map()` When a Plain Object Works