63anp3ca/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
  </style>
</head>

<body>
  <h1> Gerardo Perez </h1>

  <svg width=200
       height=200
       id="viz">

  </svg>
  <div> Primer ejemplo D3 😂</div>

  <script>


    let svg = d3.select("#viz"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" +margin.left + "," +margin.top +")");

    g.append ("g")
     .attr("class","x axis");
    g.append ("g")
     .attr("class","y axis");

    let myData = [
      {name :"jhon",     age:23,height:1.93},
      {name :"Ivan",     age:22,height:1.70},
      {name :"Gerardo",  age:27,height:1.60},
      {name :"Roger",    age:73,height:1.92}
    ];

    let x=  d3.scaleLinear ()
    		.range([0, width]);

    let y=  d3.scaleLinear ()
    		.range([0, height]);

    function update (myData){
      x.domain([0, d3.max(myData, d=> d.age)]);
      y.domain([0, d3.max(myData, d=> d.height)]);

      let points = g.selectAll(".point")
      .data(myData); //update


      pointsEnter= points
      .enter()
      .append("circle")
      .attr("class","point");

      points.merge(pointsEnter) //Enter + Uddate
      .attr("cx", d=> x(d.age) )
      .attr("cy", d=> y(d.height) )
      .attr("r",3.5);

      points.exit()
        .remove();

    }
    update(myData)


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	</style>
	</head>

	<body>
	<h1> Gerardo Perez </h1>

	<svg width=200
	height=200
	id="viz">

	</svg>
	<div> Primer ejemplo D3 😂</div>

	<script>


	let svg = d3.select("#viz"),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" +margin.left + "," +margin.top +")");

	g.append ("g")
	.attr("class","x axis");
	g.append ("g")
	.attr("class","y axis");

	let myData = [
	{name :"jhon", age:23,height:1.93},
	{name :"Ivan", age:22,height:1.70},
	{name :"Gerardo", age:27,height:1.60},
	{name :"Roger", age:73,height:1.92}
	];

	let x= d3.scaleLinear ()
	.range([0, width]);

	let y= d3.scaleLinear ()
	.range([0, height]);

	function update (myData){
	x.domain([0, d3.max(myData, d=> d.age)]);
	y.domain([0, d3.max(myData, d=> d.height)]);

	let points = g.selectAll(".point")
	.data(myData); //update


	pointsEnter= points
	.enter()
	.append("circle")
	.attr("class","point");

	points.merge(pointsEnter) //Enter + Uddate
	.attr("cx", d=> x(d.age) )
	.attr("cy", d=> y(d.height) )
	.attr("r",3.5);

	points.exit()
	.remove();

	}
	update(myData)



	</script>
	</body>