2

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

Speakmore
  • 69
  • 2
  • 11
  • Loading local files in chrome is a different issue. This issue is documented here: http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Andrew Reid Nov 08 '16 at 04:58
  • Are you running a server to serve the data.csv file, e.g. `python -m http.server` in the same directory as your files and navigating to `localhost:8000`? That's probably what your teacher is doing that you're not. – ggorlen May 11 '22 at 02:26

2 Answers2

2

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.
Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
  • I tried the original (I believe it was `.v3`) and that didn't work, so I went to the site, saw an updated version and swapped it to `.v4` --- Anyways, let me keep the same .v4 and try the new code to see if that works. Thanks for the headsup – Speakmore Nov 08 '16 at 04:40
  • When I copied your code and csv and loaded it, I got the error: "d3.csv.parseRows is not a function" , which supports the conclusion that d3.csvParseRows should be used. Upon changing it your coded executed without errors. I'm stumped if this is not the cause. – Andrew Reid Nov 08 '16 at 04:48
  • I changed the one line, and didn't fix anything. I found something that may help someone help me though, going to edit the main topic right now. Not sure if it actually helps or not, but hopefully! – Speakmore Nov 08 '16 at 04:50
  • Created a plunker to demonstrate/test (takes a second to load): http://plnkr.co/edit/8UAZuVBpAPjwGxHXL1Zz?p=preview – Andrew Reid Nov 08 '16 at 05:19
0

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

Suyash
  • 9
  • 1