fogonwater/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from emeeks's block: pack enclose tests

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <style>svg {overflow: visible;}</style>
</head>
<body>
    <svg width=960 height=500>
    </svg>
    <script src="https://d3js.org/d3.v5.js"></script>

    <script>
      console.clear()
    var svg = d3.select("svg"),
        width = 1000,
        height = 500,
        g = svg.append('g')

    var color = {
      "a": "#cfd0d0",
      "b": "#F24236"
    }
    let groups = ["embedded", "dedicated"]

    const nodes = d3.range(5000).map((d,i) => {
      if (i < 500) {
        return { color: "b", embedded: false, dedicated: true, center: 515 }
      }
        return { color: "a", embedded: true, dedicated: false, center: 0 }

    })

    var simulation = d3.forceSimulation()
       .force("collision", d3.forceCollide(6).iterations(2))
       .force("x", d3.forceX(a => a.center).strength(0.05))
       .force("y", d3.forceY(0).strength(0.05))
       .force("center", d3.forceCenter(width / 2, height / 2))
       .alphaDecay(0.005)
       .alpha(0.25)
        .nodes(nodes)
        .on("tick", ticked)
       .stop()

       simulation.tick()

      var node = svg.append("g")
          .attr("class", "nodes")
        .selectAll("circle")
        .data(nodes)
        .enter().append("circle")
          .attr("r", 2)
          //.style("stroke", "black")
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
          .style("fill", d => color[d.color])

  setTimeout(() => { simulation.restart() }, 250);

    let points = groups.map(p => nodes
      .filter(d => d[p])
      .map(d => ({ x: d.x, y: d.y, r: 5 })))

    var circle = points.map( p => d3.packEnclose(p))

    var bounds = g.selectAll(".bounds")
        .data(circle)//, 260])
      .enter().append("circle")
        .attr("cx", (d) => d.x)
        .attr("cy", (d) => d.y)
        .attr("r", (d) => d.r)
        .attr("fill", 'whitesmoke')
    		.attr("opacity", 0.85)

      function ticked() {
        node
            .attr("cx", (d) => d.x)
            .attr("cy", (d) => d.y)
        points = groups.map(p => nodes
          .filter(d => d[p])
          .map(d => ({ x: d.x, y: d.y, r: 5 })))

        circle = points.map( p => d3.packEnclose(p))

        bounds.data(circle).transition()
          .duration(80)
          .attr("cx", (d) => d.x)
          .attr("cy", (d) => d.y)
          .attr("r", (d) => d.r)
      }


    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>svg {overflow: visible;}</style>
	</head>
	<body>
	<svg width=960 height=500>
	</svg>
	<script src="https://d3js.org/d3.v5.js"></script>

	<script>
	console.clear()
	var svg = d3.select("svg"),
	width = 1000,
	height = 500,
	g = svg.append('g')

	var color = {
	"a": "#cfd0d0",
	"b": "#F24236"
	}
	let groups = ["embedded", "dedicated"]

	const nodes = d3.range(5000).map((d,i) => {
	if (i < 500) {
	return { color: "b", embedded: false, dedicated: true, center: 515 }
	}
	return { color: "a", embedded: true, dedicated: false, center: 0 }

	})

	var simulation = d3.forceSimulation()
	.force("collision", d3.forceCollide(6).iterations(2))
	.force("x", d3.forceX(a => a.center).strength(0.05))
	.force("y", d3.forceY(0).strength(0.05))
	.force("center", d3.forceCenter(width / 2, height / 2))
	.alphaDecay(0.005)
	.alpha(0.25)
	.nodes(nodes)
	.on("tick", ticked)
	.stop()

	simulation.tick()

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(nodes)
	.enter().append("circle")
	.attr("r", 2)
	//.style("stroke", "black")
	.attr("cx", d => d.x)
	.attr("cy", d => d.y)
	.style("fill", d => color[d.color])

	setTimeout(() => { simulation.restart() }, 250);

	let points = groups.map(p => nodes
	.filter(d => d[p])
	.map(d => ({ x: d.x, y: d.y, r: 5 })))

	var circle = points.map( p => d3.packEnclose(p))

	var bounds = g.selectAll(".bounds")
	.data(circle)//, 260])
	.enter().append("circle")
	.attr("cx", (d) => d.x)
	.attr("cy", (d) => d.y)
	.attr("r", (d) => d.r)
	.attr("fill", 'whitesmoke')
	.attr("opacity", 0.85)

	function ticked() {
	node
	.attr("cx", (d) => d.x)
	.attr("cy", (d) => d.y)
	points = groups.map(p => nodes
	.filter(d => d[p])
	.map(d => ({ x: d.x, y: d.y, r: 5 })))

	circle = points.map( p => d3.packEnclose(p))

	bounds.data(circle).transition()
	.duration(80)
	.attr("cx", (d) => d.x)
	.attr("cy", (d) => d.y)
	.attr("r", (d) => d.r)
	}



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