sampaioletti/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas Scatterplot</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://d3js.org/d3.v4.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
	<style type="text/css">
		.hiddenCanvas{
			display: none;
		}

		div#tooltip {
			position: absolute;
			display: inline-block;
			padding: 10px;
			font-family: 'Open Sans' sans-serif;
			color: #000;
			background-color: #fff;
			border: 1px solid #999;
			border-radius: 2px;
		    pointer-events: none;
			opacity: 0;
			z-index: 1;
		}
	</style>

</head>
<body>
<div id="container"></div>
<div id="tooltip"></div>

<script type="text/javascript">
	var data = [];
	d3.range(10).forEach(function(el){
		data.push({ x: d3.randomNormal(5,3)(), y: d3.randomNormal(5,3)(), r: d3.randomNormal(3,1)() });
	});
	var width = 1400,
		height = 750;
  var x = d3.scaleLinear()
		.domain([2, 8])
		.range([0, width]);

	var y = d3.scaleLinear()
		.domain([2,8])
		.range([height, 0]);


	// main canvas
	var mainCanvas = d3.select('#container')
		.append('canvas')
		.classed('mainCanvas', true)
		.attr('width', width)
		.attr('height', height);

	var canvas=new fabric.Canvas(mainCanvas.node())
  var f=0
  data.forEach((d)=>{
      var c=new fabric.Circle({radius: Math.abs(d.r), fill: 'green', left: x(d.x), top: y(d.y)})
      canvas.add(c)
  })


</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Canvas Scatterplot</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://d3js.org/d3.v4.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
	<style type="text/css">
	.hiddenCanvas{
	display: none;
	}

	div#tooltip {
	position: absolute;
	display: inline-block;
	padding: 10px;
	font-family: 'Open Sans' sans-serif;
	color: #000;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 2px;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
	}
	</style>

	</head>
	<body>
	<div id="container"></div>
	<div id="tooltip"></div>

	<script type="text/javascript">
	var data = [];
	d3.range(10).forEach(function(el){
	data.push({ x: d3.randomNormal(5,3)(), y: d3.randomNormal(5,3)(), r: d3.randomNormal(3,1)() });
	});
	var width = 1400,
	height = 750;
	var x = d3.scaleLinear()
	.domain([2, 8])
	.range([0, width]);

	var y = d3.scaleLinear()
	.domain([2,8])
	.range([height, 0]);




	// main canvas
	var mainCanvas = d3.select('#container')
	.append('canvas')
	.classed('mainCanvas', true)
	.attr('width', width)
	.attr('height', height);

	var canvas=new fabric.Canvas(mainCanvas.node())
	var f=0
	data.forEach((d)=>{
	var c=new fabric.Circle({radius: Math.abs(d.r), fill: 'green', left: x(d.x), top: y(d.y)})
	canvas.add(c)
	})


	</script>

	</body>
	</html>