CODEWITHSUNDEEP
d3.js
jubjub
jubjub

Reputation: 107

Trouble loading CSV data in D3

I'm brand new to D3.js, so my apologies in advance if I'm overlooking something obvious, but I cannot for the life of me figure out what's not working here...

I've been inching my way through Scott Murray's Interactive Data Visualization for the Web and I've hit a block at Chapter 7. My goal is to load some simple data from a csv document, parse the first column as Date data, and then display. The head of the csv looks like this...

Date, Amount
9/15/17, 26
11/9/17, 31
11/30/17, 23
12/21/17, 26
2/7/18, 23

I run the code below (which comes directly from the book!) and...none of that seems to be happening. When I enter "dataset" into the console, it only seems to include the final row: 

{Date: "01/31/17", Amount: "23"}
Amount: "23"
Date: "01/31/17"

I'm perplexed since, again, the code itself comes from the book. I've been working through previous chapters just fine until now. And yes, I'm running a local server. Any idea what I'm doing wrong here? Thanks very much in advance!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Time scale</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;
            var padding = 40;

            var dataset, xScale, yScale; 

            //For converting strings to Dates
            var parseTime = d3.timeParse("%m/%d/%y");

            //Function for converting CSV values from strings to Dates and numbers
            var rowConverter = function(d) {
                return {
                    Date: parseTime(d.Date),
                    Amount: parseInt(d.Amount)
                };
            }

            //Load in the data
            d3.csv("time_scale_data.csv", rowConverter, function(data) {

                //Copy data into global dataset
                dataset = data;

                //Create scale functions
                xScale = d3.scaleTime()
                               .domain([
                                    d3.min(dataset, function(d) { return d.Date; }),
                                    d3.max(dataset, function(d) { return d.Date; })
                                ])
                               .range([padding, w - padding]);

                yScale = d3.scaleLinear()
                               .domain([
                                    d3.min(dataset, function(d) { return d.Amount; }),
                                    d3.max(dataset, function(d) { return d.Amount; })
                                ])
                               .range([h - padding, padding]);

                //Create SVG element
                var svg = d3.select("body")
                            .append("svg")
                            .attr("width", w)
                            .attr("height", h);

                //Generate date labels first, so they are in back
                svg.selectAll("text")
                   .data(dataset)
                   .enter()
                   .append("text")
                   .text(function(d) {
                        return formatTime(d.Date);
                   })
                   .attr("x", function(d) {
                        return xScale(d.Date) + 4;
                   })
                   .attr("y", function(d) {
                        return yScale(d.Amount) + 4;
                   })
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "11px")
                   .attr("fill", "#bbb");

                //Generate circles last, so they appear in front
                svg.selectAll("circle")
                   .data(dataset)
                   .enter()
                   .append("circle")
                   .attr("cx", function(d) {
                        return xScale(d.Date);
                   })
                   .attr("cy", function(d) {
                        return yScale(d.Amount);
                   })
                   .attr("r", 2);

            });

        </script>
    </body>
</html>

Upvotes: 1

Views: 1309

Answers (1)

Saurav Singh
Saurav Singh

Reputation: 21

Instead of :

 d3.csv("time_scale_data.csv", rowConverter, function(data) {
--- your code --- 
});

Try this :

 d3.csv("time_scale_data.csv", rowConverter).then(data){
--- your code --- 
});

Upvotes: 2

Related Questions