adamjanes

var data0 = [
        { gpa: 3.42, height: 138 },
        { gpa: 3.54, height: 153 },
        { gpa: 3.14, height: 148 },
        { gpa: 2.76, height: 164 },
        { gpa: 2.95, height: 162 },
        { gpa: 3.36, height: 143 }
]

var data1 = [

adamjanes

// Update our circles
var circles = g.selectAll("circle")
    .data(data);

circles.exit().transition(t)
    .attr("fill-opacity", 0.1)
    .attr("cy", y(0))
    .remove()

circles.transition(t)

adamjanes

// Update our axes
xAxis.transition(t).call(xAxisCall);
yAxis.transition(t).call(yAxisCall);

adamjanes

// Standard transition for our visualization
var t = d3.transition().duration(750);

adamjanes

// ENTER new elements present in new data.
circles.enter().append("circle")
    .attr("cx", function(d){ return x(d.gpa) })
    .attr("cy", function(d){ return y(d.height) })
    .attr("r", 5)
    .attr("fill", "grey");

adamjanes

// UPDATE old elements present in new data.
circles
    .attr("cx", function(d){ return x(d.gpa) })
    .attr("cy", function(d){ return y(d.height) })

adamjanes

// EXIT old elements not present in new data.
circles.exit().remove()

adamjanes

// JOIN new data with old elements.
var circles = g.selectAll("circle")
    .data(data);

adamjanes

// Scales
var x = d3.scaleLinear()
    .range([0, width]);
var y = d3.scaleLinear()
    .range([height, 0]);

// Axes
var xAxisCall = d3.axisBottom(x)
var xAxis = g.append("g")
    .attr("class", "x-axis")

adamjanes

var flag = true;

// Run this code every second...
d3.interval(function(){
    // Flick between our two data arrays
    data = flag ? data0 : data1;
    
    // Update our chart with new data
    update(data);