geohuz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
var w = 500;
var h = 500;

var svg = d3.select('body').append('svg')
  .attr('width', w)
  .attr('height', h);

var data = [1,2,3,4,5,6,7,8,9,10];

var circles = svg.selectAll('circle')
  .data(data);

var escala = function(m) {
  return d3.scale
    .linear()
    .domain([d3.min(data), d3.max(data)])
    .range([50, m - 50]);
}

var ancho = escala(w);
var alto = escala(h);
var radio = d3.scale
  .linear()
  .domain([d3.min(data), d3.max(data)])
  .range([10, 50]);

var color = function(d) {
  return d3.hsl(d*10,1,0.5);
};

var circle_set = function(c) {
  c
  .attr('r', radio)
  .attr('cx', ancho)
  .attr('cy', alto)
  .style('fill', color);
};

// UPDATE
circles
.call(circle_set);

// ENTER
circles.enter()
.append('circle')
.call(circle_set);
</script>


<script id="jsbin-source-javascript" type="text/javascript">var w = 500;
var h = 500;

var svg = d3.select('body').append('svg')
  .attr('width', w)
  .attr('height', h);

var data = [1,2,3,4,5,6,7,8,9,10];

var circles = svg.selectAll('circle')
  .data(data);

var escala = function(m) {
  return d3.scale
    .linear()
    .domain([d3.min(data), d3.max(data)])
    .range([50, m - 50]);
}

var ancho = escala(w);
var alto = escala(h);
var radio = d3.scale
  .linear()
  .domain([d3.min(data), d3.max(data)])
  .range([10, 50]);

var color = function(d) {
  return d3.hsl(d*10,1,0.5);
};

var circle_set = function(c) {
  c
  .attr('r', radio)
  .attr('cx', ancho)
  .attr('cy', alto)
  .style('fill', color);
};

// UPDATE
circles
.call(circle_set);

// ENTER
circles.enter()
.append('circle')
.call(circle_set);</script></body>
<script src="index.js"></script>

</script>
</html>

## jsbin.zaguzej.js
var w = 500;
var h = 500;

var svg = d3.select('body').append('svg')
  .attr('width', w)
  .attr('height', h);

var data = [1,2,3,4,5,6,7,8,9,10];

var circles = svg.selectAll('circle')
  .data(data);

var escala = function(m) {
  return d3.scale
    .linear()
    .domain([d3.min(data), d3.max(data)])
    .range([50, m - 50]);
}

var ancho = escala(w);
var alto = escala(h);
var radio = d3.scale
  .linear()
  .domain([d3.min(data), d3.max(data)])
  .range([10, 50]);

var color = function(d) {
  return d3.hsl(d*10,1,0.5);
};

var circle_set = function(c) {
  c
  .attr('r', radio)
  .attr('cx', ancho)
  .attr('cy', alto)
  .style('fill', color);
};

// UPDATE
circles
.call(circle_set);

// ENTER
circles.enter()
.append('circle')
.call(circle_set);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	var w = 500;
	var h = 500;

	var svg = d3.select('body').append('svg')
	.attr('width', w)
	.attr('height', h);

	var data = [1,2,3,4,5,6,7,8,9,10];

	var circles = svg.selectAll('circle')
	.data(data);

	var escala = function(m) {
	return d3.scale
	.linear()
	.domain([d3.min(data), d3.max(data)])
	.range([50, m - 50]);
	}

	var ancho = escala(w);
	var alto = escala(h);
	var radio = d3.scale
	.linear()
	.domain([d3.min(data), d3.max(data)])
	.range([10, 50]);

	var color = function(d) {
	return d3.hsl(d*10,1,0.5);
	};

	var circle_set = function(c) {
	c
	.attr('r', radio)
	.attr('cx', ancho)
	.attr('cy', alto)
	.style('fill', color);
	};

	// UPDATE
	circles
	.call(circle_set);

	// ENTER
	circles.enter()
	.append('circle')
	.call(circle_set);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var w = 500;
	var h = 500;

	var svg = d3.select('body').append('svg')
	.attr('width', w)
	.attr('height', h);

	var data = [1,2,3,4,5,6,7,8,9,10];

	var circles = svg.selectAll('circle')
	.data(data);

	var escala = function(m) {
	return d3.scale
	.linear()
	.domain([d3.min(data), d3.max(data)])
	.range([50, m - 50]);
	}

	var ancho = escala(w);
	var alto = escala(h);
	var radio = d3.scale
	.linear()
	.domain([d3.min(data), d3.max(data)])
	.range([10, 50]);

	var color = function(d) {
	return d3.hsl(d*10,1,0.5);
	};

	var circle_set = function(c) {
	c
	.attr('r', radio)
	.attr('cx', ancho)
	.attr('cy', alto)
	.style('fill', color);
	};

	// UPDATE
	circles
	.call(circle_set);

	// ENTER
	circles.enter()
	.append('circle')
	.call(circle_set);</script></body>
	<script src="index.js"></script>

	</script>
	</html>