Using Javascript to export CSV to HTML

Question

So I found some javascript library that converts csv into a table in HTML:

https://bl.ocks.org/ndarville/7075823

To test this, I copied their code and attempted with my csv file, that didn't work so I just tried theirs to see if I could produce the same results. Nothing popped up in my index.html upon opening it in the browser. My teacher was able to open his and it worked producing the same thing. He then zipped the file and sent it to me, I opened his files and nothing worked for that either. I've tried importing the JS from their site as well as downloading and running it locally. Neither worked, so I started to think that maybe it's an error with Windows 10?

This is their code that should convert the following file into a table index.html :

<!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="http://d3js.org/d3.v3.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.csv.parseRows(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>

Here's the data.csv file:

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

Can anyone help me with this? Greatly appreciated!

Edit: I went to http://d3js.org/d3.v3.min.js and the library pops up, so that's not an issue

Answer 1

I copied both files:

tmp
|- index.html
|- data.csv

Then I started a server on this folder with http-server

http-server .

And here is the result on http://localhost:8080 on Chrome/Edge/Firefox (Windows 10):

In order to allow d3 to access data.csv you need a route on your server that allows it to be downloaded at http://whatever/data.csv . Opening index.html from the file system will not work on Chrome/Edge, but it works on Firefox.

Using Javascript to export CSV to HTML

Question

1 answers

solution1
0 2016-11-02 01:38:02

Using Javascript to export CSV to HTML

Question

1 answers

solution1 0 2016-11-02 01:38:02

solution1
0 2016-11-02 01:38:02