title: This D3 code is showing <!DOCTYPE> on running. What's the error can not find
body: <p>This D3 code is showing just <code>&lt;!DOCTYPE&gt;</code> on running. What's the error can not find. Can't find any error. It reads the data from the JSON file. </p>
  
  <pre><code>&lt; !DOCTYPE&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;script&gt;        
          d3.json("data-02.json"), function(data){
          var x1 = 0,
          y1 = 0,
          x2 = 0,
          y2 = 0,
          total = [],
          totalRadius = 20;
  
      //executing svg
      var svg = d3.select("#tradingChart")
          .append("svg")
          .attr("width", 1000)
          .1ttr("height",600);    
  
      //division
      var div = d3.select("#tradingChart").append("div")
      .attr("class","tooltip")
      .style("opacity",0);
  
      //define tooltip
      var tooltip = d3.select("#tradingChart")
      .append("div")
      .style("position","absolute")
      .style("z-index", "10")
      .style("visibility","hidden");
  
      //making connections with trading values
      data.links.forEach(function(connectingData){
      var source = connectingData.node01;
      var target = connectingData.node02;
  
      data.nodes.forEach(function(dataNode){
          if (dataNode.id === source){
              x1 = node.dataNode.x;
              y1 = node.dataNode.y;           
              }
  
          if (dataNode.id === target){
              x2 = dataNode.x;
              y2 = dataNode.y;
              }
      }
  
      svg.append("line")
          .attr("x1", x1)
          .attr("y1", y1)
          .attr("x2", y2)
          .on("mouseover", function(){
              return tooltip.html(connectingData.node01 + "to" + connectingData.node02 + "&lt;br/&gt; Trading Values:" + connectingData.amount)
                  .style("visibility","visible");})
          .on("mouseover", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
          .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
          .on("mouseout",function(){
              return tooltip.style("visibility","hidden");}
              )
          .attr("stroke","#ccc")
          .attr("strke-width", connectingData.amount / 50);   
          }); 
  
      //making nodes based on total trading values
          data.nodes.forEach(function(dataNode){
          var siteName = dataNode.id;
          total[siteName] = 0;
  
          data.links.forEach(function(dataNode){
              if(connectingData.node01 ===siteName || connectingData.node02 === siteName){
                  total[siteName] = total[siteName] + connectingData.amount;
                  }
  
          });
  
          var circle = svg.append("circle")
              .attr("cx", dataNode.x)
              .attr("cy", dataNode.y)
              .attr("r", calculateRadius(connectingData.id))
                  .on("mouseover", function(){
                      return tooltop.html(dataNode.id + "&lt;br/&gt;Trading Value:" + total[dataNode.id])
                          .style("visibility", "visible");})
                  .on("mousemove",function(){return tooltip.style("top", (event.pageY-10)+"px").style("left", (event.pageX+10)+"px");})
                  .on("mouseout", function(){
                      return tooltip.style("visibility","hidden");})
              .attr("fill","#027c96");        
  
                  });
          function calculateRadius(id){
              return total[id] * totalRadius/1000;
          }
          });
  
  
  
  
  });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>