user3709119 user3709119 - 4 months ago 20x
CSS Question

D3 javascript not running in html div

I'm trying to run a d3 javascript file that I got from: I posted the code I'm trying to run below. I'm very new to html, css, bootstrap and javascript, but from my understanding, the script should run inside this section of my html. However, whenever I load the page, the content of the javascript is displayed to the right of the green square (shown below). Is there any reason why the javascript file is not running inside the green square?

<!DOCTYPE html>
<script src="../d3/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
.graph_options {
<div class="graph_options row-fluid">
<div class="col-sm-3">
<script type="text/javascript" src="../javascript/collision.js" ></script>

enter image description here?


In the collision.js file you use, there is this line:

var svg ="body").append("svg")
    .attr("width", width)
    .attr("height", height);

The <body> is selected and at the end of this element, an <svg> element is added. Afterwards, the <svg> is filled with the chart. If you want to add the chart element to your <div>, you can select it instead of the body. Add a unique id to the <div> and adapt the JavaScript code. The collision.js can be added to the HTML right after the injection of D3.js. You don't need to add it on the place you want to have the chart, because you are selecting the <div> by a selector.


<div id="chart"></div>


var svg ="#chart").append("svg")
    .attr("width", width)
    .attr("height", height);