davidbjourno/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Force layout showing star network topology.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Traditional star network topology</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.min.css" />
  <style>

    body {
      height: auto;
      margin: 0;
      background-color: #2E163D;
    }

    svg {
      display: block;
    }

    .node {
      cursor: pointer;
      stroke: #E5F1B6;
      stroke-width: 5;
      fill: rgba(229, 241, 182, 0.67);
    }

    #server {
      cursor: auto;
    }

    .node text {
      pointer-events: none;
      font-family: "FontAwesome";
      font-size: 2.5em;
      stroke-width: 0;
      fill: #444;
    }

    .edge {
      stroke: #E5F1B6;
      stroke-width: 5;
    }

  </style>
</head>
<body>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <script>

    // Dimensions
    var width = 960,
        height = 500,
        aspect = width / height;

    // Original data
    var dataset = {
      nodes: [
        { name: "Server" },
        { name: "Client 0" },
        { name: "Client 1" },
        { name: "Client 2" },
        { name: "Client 3" },
        { name: "Client 4" },
        { name: "Client 5" },
        { name: "Client 6" },
        { name: "Client 7" },
      ],
      edges: [
        { source: 0, target: 1 },
        { source: 0, target: 2 },
        { source: 0, target: 3 },
        { source: 0, target: 4 },
        { source: 0, target: 5 },
        { source: 0, target: 6 },
        { source: 0, target: 7 },
        { source: 0, target: 8 }
      ]
    };

    // Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("id", "graph")
                .attr("preserveAspectRatio", "xMidYMid")
                .attr("viewBox", "0 0 " + width + " " + height);

    // Initialize a default force layout, using the nodes and edges in dataset
    var force = d3.layout
                  .force()
                  .nodes(dataset.nodes)
                  .links(dataset.edges)
                  .size([width, height])
                  .gravity(.05)
                  .distance(200)
                  .charge(-400)
                  .start();

    // Create edges as lines
    var edge = svg.selectAll(".edge")
                  .data(dataset.edges)
                  .enter()
                  .append("line")
                  .attr("class", "edge");

    // Create nodes
    var node = svg.selectAll(".node")
                  .data(dataset.nodes)
                  .enter()
                  .append("g")
                  .attr("class", "node")
                  .attr("id", function(d) {
                    if (d.name == "Server") {
                      return "server";
                    }
                  })
                  .call(force.drag);

    // Draw node circles
    node.append("circle")
        .attr("r", 33)
        .append("title")
        .text(function(d) {
          return d.name;
        });

    // Add node icons
    node.append("text")
        .attr("dx", -19)
        .attr("dy", 15)
        .text(function(d) {
          if (d.name == "Server") {
            return "\uf233";
          } else {
            return "\uf108";
          }
        });

    // Nullify drag event on server node
    d3.select("g#server")
      .on("mousedown.drag", null);

    // Every time the simulation "ticks", this will be called
    force.on("tick", function() {
           edge.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("transform", function(d) {
    				     return "translate(" + d.x + "," + d.y + ")";
    			     });
         });

    // Scale on window resize
    $(window).on("resize", function() {
               var graph = $("#graph"),
                   container = graph.parent(),
                   targetWidth = container.width();

               graph.attr("width", targetWidth);
               graph.attr("height", targetWidth / aspect);
             })
             .trigger("resize");

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Traditional star network topology</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.min.css" />
	<style>

	body {
	height: auto;
	margin: 0;
	background-color: #2E163D;
	}

	svg {
	display: block;
	}

	.node {
	cursor: pointer;
	stroke: #E5F1B6;
	stroke-width: 5;
	fill: rgba(229, 241, 182, 0.67);
	}

	#server {
	cursor: auto;
	}

	.node text {
	pointer-events: none;
	font-family: "FontAwesome";
	font-size: 2.5em;
	stroke-width: 0;
	fill: #444;
	}

	.edge {
	stroke: #E5F1B6;
	stroke-width: 5;
	}

	</style>
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>

	// Dimensions
	var width = 960,
	height = 500,
	aspect = width / height;

	// Original data
	var dataset = {
	nodes: [
	{ name: "Server" },
	{ name: "Client 0" },
	{ name: "Client 1" },
	{ name: "Client 2" },
	{ name: "Client 3" },
	{ name: "Client 4" },
	{ name: "Client 5" },
	{ name: "Client 6" },
	{ name: "Client 7" },
	],
	edges: [
	{ source: 0, target: 1 },
	{ source: 0, target: 2 },
	{ source: 0, target: 3 },
	{ source: 0, target: 4 },
	{ source: 0, target: 5 },
	{ source: 0, target: 6 },
	{ source: 0, target: 7 },
	{ source: 0, target: 8 }
	]
	};

	// Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("id", "graph")
	.attr("preserveAspectRatio", "xMidYMid")
	.attr("viewBox", "0 0 " + width + " " + height);

	// Initialize a default force layout, using the nodes and edges in dataset
	var force = d3.layout
	.force()
	.nodes(dataset.nodes)
	.links(dataset.edges)
	.size([width, height])
	.gravity(.05)
	.distance(200)
	.charge(-400)
	.start();

	// Create edges as lines
	var edge = svg.selectAll(".edge")
	.data(dataset.edges)
	.enter()
	.append("line")
	.attr("class", "edge");

	// Create nodes
	var node = svg.selectAll(".node")
	.data(dataset.nodes)
	.enter()
	.append("g")
	.attr("class", "node")
	.attr("id", function(d) {
	if (d.name == "Server") {
	return "server";
	}
	})
	.call(force.drag);

	// Draw node circles
	node.append("circle")
	.attr("r", 33)
	.append("title")
	.text(function(d) {
	return d.name;
	});

	// Add node icons
	node.append("text")
	.attr("dx", -19)
	.attr("dy", 15)
	.text(function(d) {
	if (d.name == "Server") {
	return "\uf233";
	} else {
	return "\uf108";
	}
	});

	// Nullify drag event on server node
	d3.select("g#server")
	.on("mousedown.drag", null);

	// Every time the simulation "ticks", this will be called
	force.on("tick", function() {
	edge.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("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	});
	});

	// Scale on window resize
	$(window).on("resize", function() {
	var graph = $("#graph"),
	container = graph.parent(),
	targetWidth = container.width();

	graph.attr("width", targetWidth);
	graph.attr("height", targetWidth / aspect);
	})
	.trigger("resize");

	</script>
	</body>
	</html>