lordliquid/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from lordliquid's block: Fresh Start
forked from lordliquid's block: Practice.

  
## 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; }
  </style>
</head>

<body>
  <script>
        var width = 960,
        height = 700,
        data = [10, 20, 30],
        t = d3.transition().duration(750).ease(d3.easeLinear),
    		svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height),
        g = svg.append('g')
          .attr('transform', `translate(${width / 2}, ${height / 2})`),
        droppable1 = g.append('g'),
        droppable2 = g.append('g'),
        position = d3.local();

    function started() {
      var dragObj = d3.select(this).classed('dragging', true);
      var circle = dragObj.select('circle');

      d3.event
        .on('drag', dragged)
        .on('end', ended);

      function dragged(d) {
        var raised = dragObj.raise();
        var droppables = d3.selectAll('.droppable').nodes();

        raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)


        droppables.forEach(elem => {
          let datum;
          var x = parseInt(d3.event.x);
          var y = parseInt(d3.event.y);
          var curr = d3.select(elem);
          var currX = parseInt(curr.attr('cx'));
          var currY = parseInt(curr.attr('cy'));
          var radius = parseInt(curr.attr('r'));
          var pop = curr.select('text');

          let dx = x - currX;
          let dy = y - currY;
          let dist = Math.sqrt(dx*dx+dy*dy);

          if (dist < radius) {
            console.log('Collide')
            curr.attr('fill', 'white')
            curr.attr('stroke', 'black')
          } else {
            curr.attr('fill', curr.attr('origFill'))
            curr.attr('stroke', curr.attr('origStroke'))
          }
        });
      }

      function ended() {
        var raised = dragObj.raise();
        var droppables = d3.selectAll('.droppable').nodes();

        raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)


        circle.classed('dragging', false);
        droppables.forEach(elem => {
          let datum;
          var x = parseInt(d3.event.x);
          var y = parseInt(d3.event.y);
          var curr = d3.select(elem);
          var currX = parseInt(curr.attr('cx'));
          var currY = parseInt(curr.attr('cy'));
          var radius = parseInt(curr.attr('r'));

          let dx = x - currX;
          let dy = y - currY;
          let dist = Math.sqrt(dx*dx+dy*dy);

          if (dist < radius) {
            curr.data(dragObj.data());
            curr.append('text')
              .text(d => d)
              .attr('transform', `translate(${currX}, ${currY})`)
              .attr('cursor', 'default')
            	.attr('text-anchor', 'middle');

          } else {
            curr.data([undefined])
            curr.select('text').remove();
          }
        })
      }

    }

    function makeDroppable(droppable) {
      return droppable
      	.attr('class', 'droppable');
    }

   	droppable1 = makeDroppable(droppable1);
    droppable2 = makeDroppable(droppable2);

    droppable1 = droppable1
      .attr('fill', 'blue')
      .attr('origFill', 'blue')
      .attr('stroke', 'white')
      .attr('origStroke', 'white')
      .attr('r', 50)
      .attr('cx', -400)
      .attr('cy', 0)

    droppable1
    	.data(d => d || [undefined]);

    droppable1
    	.append('circle')
    	.attr('r', droppable1.attr('r'))
    	.attr('cx', droppable1.attr('cx'))
    	.attr('cy', droppable1.attr('cy'));

    droppable2 = droppable2
      .attr('fill', 'blue')
      .attr('origFill', 'blue')
      .attr('stroke', 'white')
      .attr('origStroke', 'white')
      .attr('r', 50)
      .attr('cx', 400)
      .attr('cy', 0)

    let drop2 = droppable2
    	.data(d => d || [undefined]);

    droppable2
    	.append('circle')
    	.attr('r', droppable2.attr('r'))
    	.attr('cx', droppable2.attr('cx'))
    	.attr('cy', droppable2.attr('cy'));


    var draggable = g.append('g')
    	.attr('class', 'draggable')
    	.attr('fill', 'orange')
    	.attr('stroke', 'green')
    	.call(d3.drag().on('start', started));

    draggable
    	.data(data);

    var circle = draggable
    	.append('circle')
    	.attr('r', 25)
    	.attr('cx', 0)
    	.attr('cy', 0);

    var text = draggable
    	.append('text')
    	.text(d => d)
    	.attr('transform', 'translate(-10, 6)')
    	.attr('cursor', 'default');


  </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; }
	</style>
	</head>

	<body>
	<script>
	var width = 960,
	height = 700,
	data = [10, 20, 30],
	t = d3.transition().duration(750).ease(d3.easeLinear),
	svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height),
	g = svg.append('g')
	.attr('transform', `translate(${width / 2}, ${height / 2})`),
	droppable1 = g.append('g'),
	droppable2 = g.append('g'),
	position = d3.local();

	function started() {
	var dragObj = d3.select(this).classed('dragging', true);
	var circle = dragObj.select('circle');

	d3.event
	.on('drag', dragged)
	.on('end', ended);

	function dragged(d) {
	var raised = dragObj.raise();
	var droppables = d3.selectAll('.droppable').nodes();

	raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)


	droppables.forEach(elem => {
	let datum;
	var x = parseInt(d3.event.x);
	var y = parseInt(d3.event.y);
	var curr = d3.select(elem);
	var currX = parseInt(curr.attr('cx'));
	var currY = parseInt(curr.attr('cy'));
	var radius = parseInt(curr.attr('r'));
	var pop = curr.select('text');

	let dx = x - currX;
	let dy = y - currY;
	let dist = Math.sqrt(dxdx+dydy);

	if (dist < radius) {
	console.log('Collide')
	curr.attr('fill', 'white')
	curr.attr('stroke', 'black')
	} else {
	curr.attr('fill', curr.attr('origFill'))
	curr.attr('stroke', curr.attr('origStroke'))
	}
	});
	}

	function ended() {
	var raised = dragObj.raise();
	var droppables = d3.selectAll('.droppable').nodes();

	raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)


	circle.classed('dragging', false);
	droppables.forEach(elem => {
	let datum;
	var x = parseInt(d3.event.x);
	var y = parseInt(d3.event.y);
	var curr = d3.select(elem);
	var currX = parseInt(curr.attr('cx'));
	var currY = parseInt(curr.attr('cy'));
	var radius = parseInt(curr.attr('r'));

	let dx = x - currX;
	let dy = y - currY;
	let dist = Math.sqrt(dxdx+dydy);

	if (dist < radius) {
	curr.data(dragObj.data());
	curr.append('text')
	.text(d => d)
	.attr('transform', `translate(${currX}, ${currY})`)
	.attr('cursor', 'default')
	.attr('text-anchor', 'middle');

	} else {
	curr.data([undefined])
	curr.select('text').remove();
	}
	})
	}

	}

	function makeDroppable(droppable) {
	return droppable
	.attr('class', 'droppable');
	}

	droppable1 = makeDroppable(droppable1);
	droppable2 = makeDroppable(droppable2);

	droppable1 = droppable1
	.attr('fill', 'blue')
	.attr('origFill', 'blue')
	.attr('stroke', 'white')
	.attr('origStroke', 'white')
	.attr('r', 50)
	.attr('cx', -400)
	.attr('cy', 0)

	droppable1
	.data(d => d \|\| [undefined]);

	droppable1
	.append('circle')
	.attr('r', droppable1.attr('r'))
	.attr('cx', droppable1.attr('cx'))
	.attr('cy', droppable1.attr('cy'));

	droppable2 = droppable2
	.attr('fill', 'blue')
	.attr('origFill', 'blue')
	.attr('stroke', 'white')
	.attr('origStroke', 'white')
	.attr('r', 50)
	.attr('cx', 400)
	.attr('cy', 0)

	let drop2 = droppable2
	.data(d => d \|\| [undefined]);

	droppable2
	.append('circle')
	.attr('r', droppable2.attr('r'))
	.attr('cx', droppable2.attr('cx'))
	.attr('cy', droppable2.attr('cy'));


	var draggable = g.append('g')
	.attr('class', 'draggable')
	.attr('fill', 'orange')
	.attr('stroke', 'green')
	.call(d3.drag().on('start', started));

	draggable
	.data(data);

	var circle = draggable
	.append('circle')
	.attr('r', 25)
	.attr('cx', 0)
	.attr('cy', 0);

	var text = draggable
	.append('text')
	.text(d => d)
	.attr('transform', 'translate(-10, 6)')
	.attr('cursor', 'default');


	</script>
	</body>