json - Django d3.js in HTML file not loading unless I manually open HTML file -

I am trying to implement a bubble chart on a web page using the Django framework and the D3.js framework . I have an HTML file, and my data is stored in a JSON file.

Accessing the JSON file looks okay, because when I manually open the HTML file in my browser, it works / loads fine, however, when I use the webpage through Django Hit the URL Endpoint, the D3 part of the page just shows the blank (the console says "the node is undefined"). I'm using the example code given.

Any help would be greatly appreciated thanks.

D3 JS Code:

  & lt; Script src = "http://d3js.org/d3.v3.min.js" & gt; & Lt; / Script & gt; & Lt; Div class = "cloud" & gt; & Lt; Script & gt; Var diameter = 960, format = d3.format (", d"), color = d3.scale.category20c (); Var Bubble = D3 layout.Pack () .Sort (faucet). Size ([diameter, diameter]). Padding (1.5); ("Width", diameter) .attr ("height", diameter) .attr ("class", "bubble"); Var svg = d3.select ("body"). D3.json ("cloud.json", function (error, root) {var node = svg.selectAll (".node") .data (bubble.Node (classes) .filter (function (d) {return ("Class", "node") .attr ("transform", function (d) {return "translate" (+ dx + ")", + + + + ")";}); node.append ("title ") .text (function (d) {return d.className +": "+ format (d.value);}); node enclosed (" circle ") .attr (" r ", function (d) {return dr Style ("filling", function (d) {return color (d.packageName);}); node.append ("text") .attr ("dy", ".3em"). Style (" Text-anchor "," middle ") .text (function (d) {return d.className.substring (0, dr / 3);});}); // all under the root Returns a flattened hierarchy with the leaves of the leaves: function square (root) {var class = []; function recurs (name, node) {if (node. Children) node, child. Pre (function (child) {recurse ( Node name, child);} else classes.push ({packageName: name, className: node.name, value: node.size});} recurs (empty, root); return {children: class};} D3.select (self.frameElement). Style ("height", diameter + "px"); & Lt; / Script & gt;