Simple scatter transition

Simple Scatter Transition

This is tweaked code building upon the examples given by Scott Murray @alignedleft

forked from jalapic's block: Simple scatter transition

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  		<title>D3: Scatterplot!</title>
		<script type="text/javascript" src="d3.js"></script>
		<style type="text/css">

body {
				background-color: #ccc;
			}

.buttonContainer {
				margin: 10px;
			}

svg {
				background-color: white;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

circle.special {
      stroke: black;
      stroke-width: 5;
      fill: white;
      }
      
		</style>
	</head>
	<body>

//Width and height
			var w = 500;
			var h = 300;
			var padding = 40;
			
			//Dynamic, random dataset
			var dataset = [];											//Initialize empty array
			var numDataPoints = 50;										//Number of dummy data points to create
			var maxRange = Math.random() * 1000;						//Max range of new values
			for (var i = 0; i < numDataPoints; i++) {					//Loop numDataPoints times
				var newNumber1 = Math.floor(Math.random() * maxRange);	//New random integer
				var newNumber2 = Math.floor(Math.random() * maxRange);	//New random integer
				dataset.push([newNumber1, newNumber2]);					//Add new number to array
			}

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

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

//Define X axis
			var xAxis = d3.svg.axis()
							  .scale(xScale)
							  .orient("bottom")
							  .ticks(5);

//Define Y axis
			var yAxis = d3.svg.axis()
							  .scale(yScale)
							  .orient("left")
							  .ticks(5);

//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Create circles
			svg.append("g")
			   .attr("id", "circles")
			   .selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
       //  .attr("class", "special")
			   .classed("special", function(d,i){
         if(i==0) {return true;}
         else {return false;}
         })
			   .attr("cx", function(d) {
					return xScale(d[0]);
			   })
			   .attr("cy", function(d) {
					return yScale(d[1]);
			   })
			   .attr("r", 4)
         .attr("fill", function(d) {
        
           if(xScale(d[0]) < w/2)
             return "#0043ff"
           else { return "#FF0000"}  
             }
              
     );
			
			//Create X axis
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + (h - padding + 5) + ")")
				.call(xAxis);
			
			//Create Y axis
			svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding - 5) + ",0)")
				.call(yAxis);

//On click, update with new data			
			d3.select("input")
				.on("click", function() {

//New values for dataset
					var numValues = dataset.length;						 		//Count original length of dataset
					var maxRange = Math.random() * 1000;						//Max range of new values
					dataset = [];  						 				 		//Initialize empty array
					for (var i = 0; i < numValues; i++) {				 		//Loop numValues times
						var newNumber1 = Math.floor(Math.random() * maxRange);	//New random integer
						var newNumber2 = Math.floor(Math.random() * maxRange);	//New random integer
						dataset.push([newNumber1, newNumber2]);					//Add new number to array
					}
					
					//Update scale domains
					xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
					yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);

//Update all circles
					svg.selectAll("circle")
					   .data(dataset)
					   .transition()
					   .duration(2000)
					   .attr("cx", function(d) {
							return xScale(d[0]);
					   })
					   .attr("cy", function(d) {
							return yScale(d[1]);
					   })
           .attr("fill", function(d) {
        
           if(xScale(d[0]) < w/2)
             return "#0043ff"
           else { return "#FF0000"}  
             })
            ;

//Update X axis
					svg.select(".x.axis")
						.transition()
						.duration(2000)
						.call(xAxis);
					
					//Update Y axis
					svg.select(".y.axis")
						.transition()
						.duration(2000)
						.call(yAxis);

});

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js