Skip to content

Instantly share code, notes, and snippets.

@matsutakk

matsutakk/complete-graph.markdown

Last active February 23, 2019 17:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matsutakk/5eda5c905c5fe97c6740f263a39e17bd to your computer and use it in GitHub Desktop.
Save matsutakk/5eda5c905c5fe97c6740f263a39e17bd to your computer and use it in GitHub Desktop.
Download ZIP
Complete Graph
Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="viz"></div>
</body>
</html>
Raw
script.js
function drawing(num){
let i,radius=300,vertex_num=num;
let array_x = new Array(vertex_num);
let array_y = new Array(vertex_num);
let width = window.innerWidth;
let height = window.innerWidth;
let sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", width)
.attr("height",height);
sampleSVG.append("circle")
.style("stroke", "white")
.style("fill", "black")
.attr("r", radius)
.attr("cx", width/2)
.attr("cy", height/2)
for(i =0;i<vertex_num;i++){
array_x[i]=radius*Math.cos(2*Math.PI*i/vertex_num)+width/2;
array_y[i]=radius*Math.sin(2*Math.PI*i/vertex_num)+height/2;
}
for(i=0;i<vertex_num;i++){
sampleSVG.append("circle")
.style("stroke", "black")
.style("fill", "white")
.attr("r", 10)
.attr("cx", array_x[i])
.attr("cy", array_y[i])
}
for(i=0;i<vertex_num-1;i++){
for(j=0;j<vertex_num;j++){
sampleSVG.append("line")
.style("stroke", "white")
.style("fill", "white")
.attr("x1", array_x[i])
.attr("y1", array_y[i])
.attr("x2", array_x[j])
.attr("y2", array_y[j])
}
}
}
function drawingLoop(maxCount, i, num) {
if (i <= maxCount) {
d3.select("svg").remove();
drawing(num);
setTimeout(function(){drawingLoop(maxCount, ++i, ++num)}, 500);
}
}
drawingLoop(30, 0,0);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js"></script>
Raw
style.css
body{
background: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment