arthurwelle/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    hello markdown

forked from arthurwelle's block: teste de bolinhas

  
## index.html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
 		<script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var arc = d3.arc();

    var halfcircle = function(x,y,rad) {
    	return svg.append('path')
    	.attr('transform', 'translate('+[x,y]+')')
      .attr('d', arc({
      		innerRadius: 0,
      		outerRadius: rad,
      		startAngle: -Math.PI*0.5,
      		endAngle: Math.PI*0.5
    	}));
    }

    d3.range(30,400,50).forEach(function(y) {
      d3.range(10).forEach(function() {
        var x = Math.random() * 400 + 50;
        var rad = Math.random() * 40 + 10;

        halfcircle(x,y,rad)
        	.style('opacity', 0.5);
      })
    })

var rc = rough.svg('svg');

d3.selectAll('.halfcircle').select('path')
	.attr('visibility', 'hidden')

d3.selectAll('.halfcircle').each(function() {
    let gParent = this
    d3.select('svg').select('path').each(function() {
      gParent.appendChild(
      rc.path(d3.select(this).node().getAttribute('d'), {
      stroke: 'red',
      fillStyle: 'hachure',
      strokeWidth: 0.95,
      roughness: 5.5,
        })
      )
    })
  })

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	var arc = d3.arc();

	var halfcircle = function(x,y,rad) {
	return svg.append('path')
	.attr('transform', 'translate('+[x,y]+')')
	.attr('d', arc({
	innerRadius: 0,
	outerRadius: rad,
	startAngle: -Math.PI*0.5,
	endAngle: Math.PI*0.5
	}));
	}

	d3.range(30,400,50).forEach(function(y) {
	d3.range(10).forEach(function() {
	var x = Math.random() * 400 + 50;
	var rad = Math.random() * 40 + 10;

	halfcircle(x,y,rad)
	.style('opacity', 0.5);
	})
	})

	var rc = rough.svg('svg');

	d3.selectAll('.halfcircle').select('path')
	.attr('visibility', 'hidden')

	d3.selectAll('.halfcircle').each(function() {
	let gParent = this
	d3.select('svg').select('path').each(function() {
	gParent.appendChild(
	rc.path(d3.select(this).node().getAttribute('d'), {
	stroke: 'red',
	fillStyle: 'hachure',
	strokeWidth: 0.95,
	roughness: 5.5,
	})
	)
	})
	})

	</script>
	</body>