Skip to content

Instantly share code, notes, and snippets.

@peterlozano

peterlozano/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Save peterlozano/3a483263b58a35625532 to your computer and use it in GitHub Desktop.
Save peterlozano/3a483263b58a35625532 to your computer and use it in GitHub Desktop.
Download ZIP
Testing jsbin and d3.
Raw
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>
</body>
<script src="index.js"></script>
</script>
</html>
Raw
index.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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment