ojassvi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from ojassvi's block: fresh block

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      border: 1px solid red;
    }
    circle {
      fill: none;
    }
  </style>
</head>

<body>
  <script>
    var width = 400,
        height = 400,
        padding = 1, // separation between same-color nodes
        radius = 6;

    var n = 100, // total number of nodes
        m = 5; // number of distinct clusters

    var nodes = [ { size: 10 }, { size: 20}, { size: 30 } ]

    var force = d3.forceSimulation()
	   .nodes(nodes)
     .force('charge', d3.forceManyBody().strength(-10))
     .force('collide', d3.forceCollide().radius(d => d.size + 10).strength(5))
			.force('x', d3.forceX(width / 2).strength(0.1))
   	.force('y', d3.forceY(height / 2).strength(0.1))

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

    var node = svg.selectAll('.node')
	   .data(nodes)

    var node_enter = node.enter().append('g')
   		.attr('class', 'node')

    node_enter.append('circle')
     .attr('r', function(d){ return d.size })
     .attr('stroke', 'blue')

    force.on('tick', function(){
       svg.selectAll('.node')
          .attr('transform', function(d){
             return 'translate(' + d.x + ',' + d.y + ')' })
    })

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg {
	border: 1px solid red;
	}
	circle {
	fill: none;
	}
	</style>
	</head>

	<body>
	<script>
	var width = 400,
	height = 400,
	padding = 1, // separation between same-color nodes
	radius = 6;

	var n = 100, // total number of nodes
	m = 5; // number of distinct clusters

	var nodes = [ { size: 10 }, { size: 20}, { size: 30 } ]

	var force = d3.forceSimulation()
	.nodes(nodes)
	.force('charge', d3.forceManyBody().strength(-10))
	.force('collide', d3.forceCollide().radius(d => d.size + 10).strength(5))
	.force('x', d3.forceX(width / 2).strength(0.1))
	.force('y', d3.forceY(height / 2).strength(0.1))

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

	var node = svg.selectAll('.node')
	.data(nodes)

	var node_enter = node.enter().append('g')
	.attr('class', 'node')

	node_enter.append('circle')
	.attr('r', function(d){ return d.size })
	.attr('stroke', 'blue')

	force.on('tick', function(){
	svg.selectAll('.node')
	.attr('transform', function(d){
	return 'translate(' + d.x + ',' + d.y + ')' })
	})

	</script>
	</body>