Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                div
  svg#network(height="300", width="500")
              
            
!

CSS

              
                .links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
              
            
!

JS

              
                var networkStructure = { "nodes": [ {
            "id": "Student1",
            "group": "Arts"
        },
        {
            "id": "Student2",
            "group": "Business"
        },
        {
            "id": "Student3",
            "group": "Engineering"
        },
        {
            "id": "Student4",
            "group": "Business"
        },
        {
            "id": "Student5",
            "group": "Engineering"
        },
        {
            "id": "Student6",
            "group": "Engineering"
        },
        {
            "id": "Student7",
            "group": "Engineering"
        },
        {
            "id": "Student8",
            "group": "Arts"
        },
        {
            "id": "Student9",
            "group": "Business"
        },
        {
            "id": "Student10",
            "group": "Business"
        },
        {
            "id": "Student11",
            "group": "Business"
        },
        {
            "id": "Student12",
            "group": "Arts"
        },
        {
            "id": "Student13",
            "group": "N/A"
        },
        {
            "id": "Student14",
            "group": "N/A"
        },
        {
            "id": "Student15",
            "group": "N/A"
        },
        {
            "id": "Student16",
            "group": "N/A"
        },
        {
            "id": "Student17",
            "group": "N/A"
        },
        {
            "id": "Student18",
            "group": "N/A"
        },
        {
            "id": "Student19",
            "group": "N/A"
        },
        {
            "id": "Student20",
            "group": "N/A"
        },
        {
            "id": "Student21",
            "group": "N/A"
        },
        {
            "id": "Student22",
            "group": "N/A"
        }
    ],
    "links": [
        {
            "source": "Student13",
            "target": "Student3",
            "value": 3
        },
        {
            "source": "Student13",
            "target": "Student14",
            "value": 3
        },
        {
            "source": "Student13",
            "target": "Student2",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student15",
            "value": 2
        },
        {
            "source": "Student13",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student7",
            "value": 2
        },
        {
            "source": "Student13",
            "target": "Student17",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student16",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student5",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student18",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student13",
            "target": "Student6",
            "value": 1
        },
        {
            "source": "Student3",
            "target": "Student14",
            "value": 4
        },
        {
            "source": "Student3",
            "target": "Student2",
            "value": 1
        },
        {
            "source": "Student3",
            "target": "Student15",
            "value": 3
        },
        {
            "source": "Student3",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student3",
            "target": "Student7",
            "value": 3
        },
        {
            "source": "Student3",
            "target": "Student18",
            "value": 1
        },
        {
            "source": "Student3",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student3",
            "target": "Student6",
            "value": 2
        },
        {
            "source": "Student3",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student14",
            "target": "Student2",
            "value": 1
        },
        {
            "source": "Student14",
            "target": "Student15",
            "value": 3
        },
        {
            "source": "Student14",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student14",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student14",
            "target": "Student6",
            "value": 2
        },
        {
            "source": "Student14",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student2",
            "target": "Student15",
            "value": 1
        },
        {
            "source": "Student2",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student15",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student15",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student15",
            "target": "Student6",
            "value": 2
        },
        {
            "source": "Student15",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student4",
            "target": "Student21",
            "value": 1
        },
        {
            "source": "Student4",
            "target": "Student20",
            "value": 1
        },
        {
            "source": "Student7",
            "target": "Student14",
            "value": 3
        },
        {
            "source": "Student7",
            "target": "Student18",
            "value": 1
        },
        {
            "source": "Student7",
            "target": "Student15",
            "value": 2
        },
        {
            "source": "Student7",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student7",
            "target": "Student6",
            "value": 2
        },
        {
            "source": "Student7",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student9",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student13",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student17",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student16",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student5",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student8",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student21",
            "value": 1
        },
        {
            "source": "Student1",
            "target": "Student20",
            "value": 1
        },
        {
            "source": "Student9",
            "target": "Student13",
            "value": 1
        },
        {
            "source": "Student9",
            "target": "Student17",
            "value": 1
        },
        {
            "source": "Student9",
            "target": "Student16",
            "value": 1
        },
        {
            "source": "Student9",
            "target": "Student5",
            "value": 1
        },
        {
            "source": "Student9",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student17",
            "target": "Student16",
            "value": 1
        },
        {
            "source": "Student17",
            "target": "Student5",
            "value": 1
        },
        {
            "source": "Student17",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student16",
            "target": "Student5",
            "value": 1
        },
        {
            "source": "Student16",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student5",
            "target": "Student11",
            "value": 1
        },
        {
            "source": "Student18",
            "target": "Student14",
            "value": 1
        },
        {
            "source": "Student18",
            "target": "Student15",
            "value": 1
        },
        {
            "source": "Student18",
            "target": "Student19",
            "value": 1
        },
        {
            "source": "Student18",
            "target": "Student6",
            "value": 1
        },
        {
            "source": "Student19",
            "target": "Student6",
            "value": 1
        },
        {
            "source": "Student6",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student4",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student21",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student20",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student3",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student7",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student14",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student15",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student6",
            "value": 1
        },
        {
            "source": "Student8",
            "target": "Student10",
            "value": 1
        },
        {
            "source": "Student21",
            "target": "Student20",
            "value": 1
        },
        {
            "source": "Student12",
            "target": "Student22",
            "value": 1
          }, 
      {
            "source": "Student12",
            "target": "Student11",
            "value": 1
          }
    ]}; 

networkStructure = JSON.stringify(networkStructure);
networkStructure = JSON.parse(networkStructure);

var svg = d3.select("svg");
var width = +svg.attr("width");
				var height = +svg.attr("height");

				var color = d3.scaleOrdinal(d3.schemeCategory20);

				var simulation = d3.forceSimulation()
					.force("link", d3.forceLink().id(function(d) { return d.id; }))
					.force("charge", d3.forceManyBody())
					.force("center", d3.forceCenter(width / 2, height / 2));

				var link = svg.append("g")
					.attr("class", "links")
					.selectAll("line")
					.data(networkStructure.links)
					.enter().append("line")
					.attr("stroke-width", function(d) { return Math.sqrt(d.value); });

				var node = svg.append("g")
					.attr("class", "nodes")
					.selectAll("circle")
					.data(networkStructure.nodes)
					.enter().append("circle")
					.attr("r", 5)
					.attr("fill", function(d) { return color(d.group); })
					.on("click", clicked)
					.call(d3.drag()
						.on("start", dragstarted)
						.on("drag", dragged)
						.on("end", dragended));

				node.append("title")
					.text(function(d) { return d.id; });

				simulation
					.nodes(networkStructure.nodes)
					.on("tick", ticked);

				simulation.force("link")
					.links(networkStructure.links);

				function ticked() {
					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("cx", function(d) { return d.x; })
						.attr("cy", function(d) { return d.y; });
				}
				function clicked(d){
					console.log(d);
				}
				function dragstarted(d) {
				if (!d3.event.active) simulation.alphaTarget(0.3).restart();
				d.fx = d.x;
				d.fy = d.y;
				}

				function dragged(d) {
				d.fx = d3.event.x;
				d.fy = d3.event.y;
				}

				function dragended(d) {
				if (!d3.event.active) simulation.alphaTarget(0);
				d.fx = null;
				d.fy = null;
				}
              
            
!
999px

Console