e1jo · January 3, 2020 14:44
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      padding: 0;
      height: 100vh;
      background-color: #009688b8;
      display: flex;
      align-items: center;
    }
    .test {
      flex: 1 1 100%;
      height: 400px;
      background-color: #838f04b8;
 /*    padding: 50px; */
    }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
 </head>

 <body>
  
  <section class="test">
     <svg></svg>
  </section>
 
  
  
  <script>
    
    
    const data = [100,250,175,200,150,50,40,30,64,295],
    			rW = 960 / data.length, //960px - width window (stroke - not to consider !!!)
          rH = 300; 
          
    const svg = d3.select('svg');

    svg.selectAll('rect') //iteration by each rect
    								.data(data) // bind data to iteration rectangle
    
    								.enter().append('rect')		// dynamic append rect to svg						
    
    								.attr('x', (d,i) => i * rW) //i -> index iteration
    								.attr('y', (d) => rH - d) //d -> data value selected itm
                    .attr("width", rW) // calc fixed val ->  wide / quantity colums
                    .attr("height", (d) => d) // d
    								.attr('stroke', '#ff19eb')
    								.attr('fill', 'blue'); 
        
    console.info(rect);

  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;
	padding: 0;
	height: 100vh;
	background-color: #009688b8;
	display: flex;
	align-items: center;
	}
	.test {
	flex: 1 1 100%;
	height: 400px;
	background-color: #838f04b8;
	/* padding: 50px; */
	}
	svg {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>

	<section class="test">
	<svg></svg>
	</section>



	<script>


	const data = [100,250,175,200,150,50,40,30,64,295],
	rW = 960 / data.length, //960px - width window (stroke - not to consider !!!)
	rH = 300;

	const svg = d3.select('svg');

	svg.selectAll('rect') //iteration by each rect
	.data(data) // bind data to iteration rectangle

	.enter().append('rect') // dynamic append rect to svg

	.attr('x', (d,i) => i * rW) //i -> index iteration
	.attr('y', (d) => rH - d) //d -> data value selected itm
	.attr("width", rW) // calc fixed val -> wide / quantity colums
	.attr("height", (d) => d) // d
	.attr('stroke', '#ff19eb')
	.attr('fill', 'blue');

	console.info(rect);

	</script>
	</body>