CODEWITHSUNDEEP
javascripthtmlexcelcsvd3.js
Speakmore
Speakmore

Reputation: 69

Using D3 To Parse My CSV

I'm attempting to use D3 to parse a CSV excel file into a table. I know the code "works" because this worked on my teacher's browser (also it's code online, so it worked for others); but when I try to run the same code, no table pops up in my browser. I've tried on Chrome and Edge. My teacher ran it on Chrome and it worked for him (he had Mac, I have Windows 10). Anyways, looking for some assistance as to why this may not be working. Considering this isn't working, is there anyway someone can help me parse the data of the excel sheet other than this?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
            }

            td {
                border: 1px black solid;
                padding: 5px;
            }
        </style>
    </head>
    <body>

         <script src="https://d3js.org/d3.v4.min.js"></script>
<!--        <script src="d3.min.js?v=3.2.8"></script>-->

        <script type="text/javascript"charset="utf-8">
            d3.text("data.csv", function(data) {
                var parsedCSV = d3.csvParseRows(data);

                var container = d3.select("body")
                    .append("table")

                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

                    .selectAll("td")
                        .data(function(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });
        </script>
    </body>
</html>

CSV file:

data.csv
car name,miles/gallon,cylinders,displacement,horsepower,weight,acceleration,model year,origin
"chevrolet chevelle malibu",18,8,307,130,3504,12,70,1
"buick skylark 320",15,8,350,165,3693,11.5,70,1
"plymouth satellite",18,8,318,150,3436,11,70,1

I've also just tried downloading the .js files locally, changing the code for local installation of the javascript files, and it still didn't work. So neither of the two options have worked for me. The site is: d3js

Edit: So I have now opened index.html into my web browser with the updated code as commented below. Nothing popped up as usual, so I Right-Clicked: Inspect and the tab pops up. At the top right I noticed the x with a 2, so obviously seems like I have 2 errors. I click it and I got the following:

XMLHttpRequest cannot load: file:///C:/Users/John/Desktop/table/data.csv Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property 'length' of null

Both in d3.v4.min.js:6

Upvotes: 2

Views: 3261

Answers (2)

Suyash
Suyash

Reputation: 9

Try running in with local server rather than C:// or file://. i.e. opening html file through browser.

Issue described in other post: "Cross origin requests are only supported for HTTP." error when loading a local file

Upvotes: 0

Andrew Reid
Andrew Reid

Reputation: 38171

I cannot be certain as to the identical-ness of the code tried in others browsers; however, I believe that you have made one change, using d3.js v4

         <script src="https://d3js.org/d3.v4.min.js"></script>

which has a slightly different namespace than:

         <script src="d3.min.js?v=3.2.8"></script>

While using d3v4 you should use:

d3.csvParseRows

Rather than:

d3.csv.parseRows

From https://github.com/d3/d3/blob/master/CHANGES.md :

every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap.

  • I am assuming your csv file does not include the "data.csv" text on the first line as that would then be a malformed csv file.

Upvotes: 2

Related Questions