Inline Javascript in HTML won't load

Question

I understand that it's generally bad practice to inline javascript in html, but I have to work around Squarespace's content managing system, and this seems to be the best way forward. In short, I have a .js file and .json file that I need to write into my .html file. I wanted to take this one step at a time, so I tried to inline just the .js file, but I can't seem to get the inline .js to work (the code is meant to implement an interactive network visualization in d3.js):

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript">  
    var w = 960,
        h = 500,
        fill = d3.scale.category20();

    var vis = d3.select(".sqs-block-content")
      .append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("cites.json", function(json) {
      var force = d3.layout.force()
          .charge(-125)
          .linkDistance(50)
          .nodes(json.nodes)
          .links(json.links)
          .size([w, h])
          .start();

      var link = vis.selectAll("line.link")
          .data(json.links)
        .enter().append("svg:line")
          .attr("class", "link")
          .style("stroke-width", function(d) { return Math.sqrt(d.value); })
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

      var node = vis.selectAll("g.node")
          .data(json.nodes)
        .enter().append("svg:g")
          .attr("class", "node")

            node.append("svg:circle")
          .attr("r", 5)
          .style("fill", function(d) { return fill(d.group); })
          .call(force.drag);

      node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 10)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });

      node.append("svg:title")
        .text(function(d) { return d.name; });

      vis.style("opacity", 1e-6)
        .transition()
          .duration(1000)
          .style("opacity", 1);

      force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
      });
    });
    </script>
    <script type="text/javascript" src="d3/d3.geom.js"></script>
    <script type="text/javascript" src="d3/d3.layout.js"></script>
    <link type="text/css" rel="stylesheet" href="d3/force.css"/>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="cites.js"></script>
  </body>
</html>

I'm sorry to ask such a benighted question, but I've been tinkering and reading around for a few hours and don't seem to be getting anywhere. Does anyone see what I'm missing? Here is the directory containing the other files (including the cites.html file which renders properly, and which I'm trying to replicate using the inline page test.html, the code from which is posted above).

JLRishe · Accepted Answer · 2014-05-25 06:00:36Z

2

I'm not familiar with d3, but it looks like you are trying to both (a) Use the d3 library before you have loaded it, and (b) access DOM elements before they have been loaded. I recommend changing the order of your script elements:

<script type="text/javascript" src="d3/d3.geom.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<script type="text/javascript">  
var w = 960,
...
</script>

And put your actions in an onload event:

window.onload = function() {
   var vis = d3.select(".sqs-block-content")
      .append("svg:svg")
      .attr("width", w)
      .attr("height", h);

  ...
};

I think that will at least get you started in the right direction.

answered May 25, 2014 at 6:00

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

duhaime Over a year ago

Wow I feel like a space cadet. Thank you! Fixed the problem in a jiffy. I think I'd better get some sleep before I try to inline the json! Thanks again for your help.

Collectives™ on Stack Overflow

Inline Javascript in HTML won't load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related