JimShady · February 23, 2016 16:27
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html>
  <head>
    <!-- Load D3 from site -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
 
    <!-- CSS (Styling) -->
    <style type="text/css">
            /* Format X and Y Axis */
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
    </style>
    <!-- End CSS (Styling) -->
 
  <body>
    <h2>D3 Scatterplot </h2>
    <p>This is a data visualization using transitions with a scatterplot</p>
    <h4>Click on this text to update chart with new values</h4>
    <h3></h3>
  
  <!-- Begin D3 Javascript -->
  <script type="text/javascript">
  
    // Setup data
            var dataset = [[9.37,25.71],
                          [9.37,25.71],
                          [26.68,34.88],
                          [11.79,34.88],
                          [11.79,34.88],
                          [11.79,34.88],
                          [17.65,30.47],
                          [17.65,30.47]];  // Initialize empty array
            

            // Setup settings for graphic
            var canvas_width = 500;
            var canvas_height = 300;
            var padding = 30;  // for chart edges

            // Create scale functions
            var xScale = d3.scale.linear()  // xScale is width of graphic
                            .domain([0, d3.max(dataset, function(d) {
                                return d[0];  // input domain
                            })])
                            .range([padding, canvas_width - padding * 2]); // output range

            var yScale = d3.scale.linear()  // yScale is height of graphic
                            .domain([0, d3.max(dataset, function(d) {
                                return d[1];  // input domain
                            })])
                            .range([canvas_height - padding, padding]);  // remember y starts on top going down so we flip

            // 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("h3")  // This is where we put our vis
                .append("svg")
                .attr("width", canvas_width)
                .attr("height", canvas_height)

            // Create Circles
            svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")  // Add circle svg
                .attr("cx", function(d) {
                    return xScale(d[0]);  // Circle's X
                })
                .attr("cy", function(d) {  // Circle's Y
                    return yScale(d[1]);
                })
                .attr("r", 2);  // radius

            // Add to X axis
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (canvas_height - padding) +")")
                .call(xAxis);

            // Add to Y axis
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding +",0)")
                .call(yAxis);
            
            // On click, update with new data
            d3.select("h4")
                .on("click", function() {
                    
                    var dataset = [[15.37,25.71],
                          [38.37,25.71],
                          [5.68,34.88],
                          [54.79,34.88],
                          [109.79,34.88],
                          [10.79,34.88],
                          [17.65,30.47],
                          [17.65,30.47]];  // Initialize empty 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 circles
                    svg.selectAll("circle")
                        .data(dataset)  // Update with new data
                        .transition()  // Transition from old to new
                        .duration(1000)  // Length of animation
                        .each("start", function() {  // Start animation
                            d3.select(this)  // 'this' means the current element
                                .attr("fill", "red")  // Change color
                                .attr("r", 5);  // Change size
                        })
                        .delay(function(d, i) {
                            return i / dataset.length * 500;  // Dynamic delay (i.e. each item delays a little longer)
                        })
                        //.ease("linear")  // Transition easing - default 'variable' (i.e. has acceleration), also: 'circle', 'elastic', 'bounce', 'linear'
                        .attr("cx", function(d) {
                            return xScale(d[0]);  // Circle's X
                        })
                        .attr("cy", function(d) {
                            return yScale(d[1]);  // Circle's Y
                        })
                        .each("end", function() {  // End animation
                            d3.select(this)  // 'this' means the current element
                                .transition()
                                .duration(500)
                                .attr("fill", "black")  // Change color
                                .attr("r", 2);  // Change radius
                        });

                        // Update X Axis
                        svg.select(".x.axis")
                            .transition()
                            .duration(1000)
                            .call(xAxis);

                        // Update Y Axis
                        svg.select(".y.axis")
                            .transition()
                            .duration(100)
                     .call(yAxis);
                });
 
  </script>
  </body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<!-- Load D3 from site -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>

	<!-- CSS (Styling) -->
	<style type="text/css">
	/* Format X and Y Axis */
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	<!-- End CSS (Styling) -->

	<body>
	<h2>D3 Scatterplot </h2>
	<p>This is a data visualization using transitions with a scatterplot</p>
	<h4>Click on this text to update chart with new values</h4>
	<h3></h3>

	<!-- Begin D3 Javascript -->
	<script type="text/javascript">

	// Setup data
	var dataset = [[9.37,25.71],
	[9.37,25.71],
	[26.68,34.88],
	[11.79,34.88],
	[11.79,34.88],
	[11.79,34.88],
	[17.65,30.47],
	[17.65,30.47]]; // Initialize empty array


	// Setup settings for graphic
	var canvas_width = 500;
	var canvas_height = 300;
	var padding = 30; // for chart edges

	// Create scale functions
	var xScale = d3.scale.linear() // xScale is width of graphic
	.domain([0, d3.max(dataset, function(d) {
	return d[0]; // input domain
	})])
	.range([padding, canvas_width - padding * 2]); // output range

	var yScale = d3.scale.linear() // yScale is height of graphic
	.domain([0, d3.max(dataset, function(d) {
	return d[1]; // input domain
	})])
	.range([canvas_height - padding, padding]); // remember y starts on top going down so we flip

	// 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("h3") // This is where we put our vis
	.append("svg")
	.attr("width", canvas_width)
	.attr("height", canvas_height)

	// Create Circles
	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle") // Add circle svg
	.attr("cx", function(d) {
	return xScale(d[0]); // Circle's X
	})
	.attr("cy", function(d) { // Circle's Y
	return yScale(d[1]);
	})
	.attr("r", 2); // radius

	// Add to X axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (canvas_height - padding) +")")
	.call(xAxis);

	// Add to Y axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding +",0)")
	.call(yAxis);

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

	var dataset = [[15.37,25.71],
	[38.37,25.71],
	[5.68,34.88],
	[54.79,34.88],
	[109.79,34.88],
	[10.79,34.88],
	[17.65,30.47],
	[17.65,30.47]]; // Initialize empty 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 circles
	svg.selectAll("circle")
	.data(dataset) // Update with new data
	.transition() // Transition from old to new
	.duration(1000) // Length of animation
	.each("start", function() { // Start animation
	d3.select(this) // 'this' means the current element
	.attr("fill", "red") // Change color
	.attr("r", 5); // Change size
	})
	.delay(function(d, i) {
	return i / dataset.length * 500; // Dynamic delay (i.e. each item delays a little longer)
	})
	//.ease("linear") // Transition easing - default 'variable' (i.e. has acceleration), also: 'circle', 'elastic', 'bounce', 'linear'
	.attr("cx", function(d) {
	return xScale(d[0]); // Circle's X
	})
	.attr("cy", function(d) {
	return yScale(d[1]); // Circle's Y
	})
	.each("end", function() { // End animation
	d3.select(this) // 'this' means the current element
	.transition()
	.duration(500)
	.attr("fill", "black") // Change color
	.attr("r", 2); // Change radius
	});

	// Update X Axis
	svg.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);

	// Update Y Axis
	svg.select(".y.axis")
	.transition()
	.duration(100)
	.call(yAxis);
	});

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