Eixos dinámicos e valores aleatorios

Primeiro exemplo en d3.js do libro de Scott Murray Interactive Data Visualization for the Web

Eixos dinámicos e valores aleatorios. O proxecto crea parellas de valores comprendidos entre a largura e a altura da pantalla para amosalos cunha sinxela animación.

Podes ver a Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Eixos dinámicos e valores aleatorios</title>
      <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
			</head>
	<body>
		<script>

var w = window.innerWidth;
			var h = window.innerHeight;
			var padding = 0;
			//Datos aleatorios
			var dataset = [];					
			var numDataPoints = 50;			
			var xRange = Math.random() * w;	
			var yRange = Math.random() * h;	
			for (var i = 0; i < numDataPoints; i++) {				
				var newNumber1 = Math.floor(Math.random() * xRange);	
				var newNumber2 = Math.floor(Math.random() * yRange);	
				dataset.push([newNumber1, newNumber2]);					
			}

//Escalas
			var xScale = d3.scale.linear()
								 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
								 .range([0, w]);

var yScale = d3.scale.linear()
								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
								 .range([0,h]);

var rScale = d3.scale.linear()
								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
								 .range([2, 5]);

//Eixos
			var xAxis = d3.svg.axis()
							  .scale(xScale)
							  .orient("bottom")

var yAxis = d3.svg.axis()
							  .scale(yScale)
							  .orient("right")

//Visualización
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Puntos+animación
			svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle").attr("cx",0).attr("cy",0)
      .transition().duration(7000).ease("elastic")
			   .attr("cx", function(d) {
			   		return xScale(d[0]);
			   })
			   .attr("cy", function(d) {
			   		return yScale(d[1]);
			   })
			   .attr("r", function(d) {
			   		return rScale(d[1]);
			   });

//Etiquetas
			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d[0] + "," + d[1];
			   }).attr("x",0).attr("y",0).transition().duration(5000).ease("elastic")
			   .attr("x", function(d) {
			   		return xScale(d[0]);
			   })
			   .attr("y", function(d) {
			   		return yScale(d[1]);
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "red");
			
			//EixoX
			svg.append("g")
				.attr("class", "axis")
				.call(xAxis);
			
			//EixoY
			svg.append("g")
				.attr("class", "axis")				
				.call(yAxis);

</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js