CSV to HTML table using d3 and an external javascript file

Question

I'm found on the internet a simple example (http://bl.ocks.org/ndarville/7075823) how to convert a .csv file into a table in HTML. I implemented the same example inside a container and it works really well. So, I decided to put its javascript code in an external file in order to be implemented in my application, but it is not working. I'm wondering why does don't work. I would appreciate id anyone could help me because I don't have any kind of experience with D3.

//-------------------------file myscript.js -------------------------------------//
function sTest(){


        d3.text("data.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("#dataTable")
                .append("table")

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

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
}

//----------------------------file index.html -------------------------
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"     href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <script src="myscript.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <div class="w3-container w3-cell-row w3-lobster">
            <p class="w3-xxlarge">Data Table:</p>
        </div> //container where should be contained a table
        <div style="height:350px;" class="w3-cell-row">
            <div id="dataTable" class="w3-container w3-cell w3-center w3-cell-middle  w3-border w3-border-blue w3-round-xlarge"> 
            </div>
            <div style="width:320px;" class="w3-container w3-cell w3-cell-middle w3-border w3-border-green w3-round-xlarge">
                 <table class="w3-table w3-bordered">
                    <tr>
                        <th>$$Resistor\,(R):$$</th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Res" value="0" >
                        <label  style="font:16px">$$\Omega$$</label></center></td>
                    </tr>
                    <tr>
                        <th>$$Resistor\,(R_B):$$<th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Resb" value="0">
                        <label  style="font:16px">$$\Omega$$</label></center></td>
                    </tr>
                    <tr>
                        <th>$$Resistor\,(R_C):$$</th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Resc" value="0">
                        <label  style="font:16px">$$\Omega$$</label></center></p></td>
                    </tr>
                 </table>
            </div>
        </div>
        <p align="center"><input type="button" name="start"  id="start" value="Start" onclick="sTest()" style="color:#00cc00">
    </body>
</html>

Put "myscript.js" at the **bottom** of the body, **after** the div with `dataTable` ID. — Gerardo Furtado, May 13 '17 at 14:44

score 0 · Accepted Answer · edited May 23 '17 at 10:31

Swap the order of the javascript references around. myscript.js (where you have the code invoking d3 methods) is dependent on the d3js library so ensure that the d3js library is loaded first as follows:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="myscript.js"></script>

For additional explanation on loading js libraries, read the accepted answer on this SO question: load and execute order of scripts

CSV to HTML table using d3 and an external javascript file

1 Answers1