Skip to content

Instantly share code, notes, and snippets.

@geohuz

geohuz/index.html

Created April 16, 2018 16:25
Show Gist options
  • Save geohuz/96aca70763d13006bd2ecb72f98ddd9c to your computer and use it in GitHub Desktop.
Save geohuz/96aca70763d13006bd2ecb72f98ddd9c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/zaguzej
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>
<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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment