D3 violation in separate HTML, JS and CSS files does not work

Most examples D3

have tags HTML

, JavaScript

and CSS

in one file. Using this example http://bl.ocks.org/d3noob/5028304 I am trying to split them into separate files (this way I can embed D3 into the site, placing the files in the appropriate places).

When everything is in one file, let's say index.html

everything works as it should. When I share this for 3 file: index.html

, sankey_create.js

and style.css

, the title HTML

(which I put in <h1>Title</h1>

), but SVG does not.

Possible problem # 1: Link to file

Everything is in the same folder and I think I was referencing the individual files correctly in header

( console

in Firefox

says all files are uploaded):

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="sankey.js"></script>
<script src="sankey_create.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

      

        
        
        
      

    

Possible problem # 2: binding to an external element HTML

The way this example works, there is an element <p id="chart">

that is bound D3

SVG

to:

var svg = d3.select("#chart").append("svg") // This line is in sankey_create.js

      

        
        
        
      

    

I'm not sure if I now need to reference the element differently if they are in separate files.

I've only included code that I think might be causing the problem since then, but I can provide more code / information if needed.