jorgeehernandez/.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>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!


var nodes=[
	{name:"John", age:35, city:"Pereira", x:20, y:20},
	{name:"Jose", age:53, city:"Bogotá", x:40, y:100},
	{name:"Mafe", age:15, city:"Pereira", x:80, y:150},
	{name:"Mario", age:23, city:"Bogotá", x:250, y:20},
	{name:"Pedro", age:45, city:"Neiva", x:200, y:20},
	{name:"Jose", age:22, city:"Neiva", x:250, y:300},
	{name:"Karla", age:12, city:"Bogotá", x:400, y:100}
];
var links = [];

var width=500,
	height=500;

var svg = d3.select("#chart")
	.append("svg")
  .attr("width", width)
  .attr("height", height);

var rScale = d3.scaleLinear()
	.range([5, 30]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var valueline = d3.line()
    .curve(d3.curveCatmullRomOpen)
    .x(function(d) { return d.x })
    .y(function(d) { return d.y });


function update(nodes, links) {

  	rScale.domain(d3.extent(nodes,
  	function (d) {
    	return d.age;
    }));

  	var nodesSel = svg.selectAll(".nodes")
  	.data(nodes);

  	var nodesEnter = nodesSel.enter()
  	.append("g")
    .attr("class","nodes");

  	nodesEnter.append("circle")
    .attr("r", function (d) {
    	return rScale(d.age);
    })
    .style("fill", function (d) {
    	return color('curveBasis');
    })
    .attr("cx", function (d) {
    	return d.x;
    })
    .attr("cy", function (d) {
    	return d.y;
    });

    var linkSel = svg.selectAll(".path")
  	.data(nodes);

  	var linkEnter = linkSel.enter()
    .append("g")
    .attr("class","line")

    linkEnter.append('path')
    .style("stroke", function(d) {return  color(d.age); })
    .attr("d",valueline(nodes));

}

update(nodes, links);


  </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; }
	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}
	</style>
	</head>

	<body>
	<div id="chart"></div>
	<script>
	// Feel free to change or delete any of the code you see in this editor!


	var nodes=[
	{name:"John", age:35, city:"Pereira", x:20, y:20},
	{name:"Jose", age:53, city:"Bogotá", x:40, y:100},
	{name:"Mafe", age:15, city:"Pereira", x:80, y:150},
	{name:"Mario", age:23, city:"Bogotá", x:250, y:20},
	{name:"Pedro", age:45, city:"Neiva", x:200, y:20},
	{name:"Jose", age:22, city:"Neiva", x:250, y:300},
	{name:"Karla", age:12, city:"Bogotá", x:400, y:100}
	];
	var links = [];

	var width=500,
	height=500;

	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var rScale = d3.scaleLinear()
	.range([5, 30]);

	var color = d3.scaleOrdinal(d3.schemeCategory10);

	var valueline = d3.line()
	.curve(d3.curveCatmullRomOpen)
	.x(function(d) { return d.x })
	.y(function(d) { return d.y });


	function update(nodes, links) {

	rScale.domain(d3.extent(nodes,
	function (d) {
	return d.age;
	}));

	var nodesSel = svg.selectAll(".nodes")
	.data(nodes);

	var nodesEnter = nodesSel.enter()
	.append("g")
	.attr("class","nodes");

	nodesEnter.append("circle")
	.attr("r", function (d) {
	return rScale(d.age);
	})
	.style("fill", function (d) {
	return color('curveBasis');
	})
	.attr("cx", function (d) {
	return d.x;
	})
	.attr("cy", function (d) {
	return d.y;
	});

	var linkSel = svg.selectAll(".path")
	.data(nodes);

	var linkEnter = linkSel.enter()
	.append("g")
	.attr("class","line")

	linkEnter.append('path')
	.style("stroke", function(d) {return color(d.age); })
	.attr("d",valueline(nodes));

	}

	update(nodes, links);




	</script>
	</body>