A Tutorial Example of Enter, Update, Exit

With a few limitations...for example, Exit is not really being set.

CSS

.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}

text {
    stroke: none;
    fill: #666666;
    font-size: .6em;
    font-family: "Helvetica Neue"
}

.label {
    fill: #414241;
}
.node {
    cursor:pointer;
}

.dot {
    opacity: .7;
    cursor: pointer;
}

JavaScript

var chocolates =  [
        {
            "name": "Dairy Milk",
            "manufacturer": "cadbury",
            "price": 45,
            "rating": 2
        },
        {
            "name": "Galaxy",
            "manufacturer": "Nestle",
            "price": 42,
            "rating": 3
        },
        {
            "name": "Lindt",
            "manufacturer": "Lindt",
            "price": 80,
            "rating": 4
        },
        {
            "name": "Hershey",
            "manufacturer": "Hershey",
            "price": 40,
            "rating": 1
        },
        {
            "name": "Dolfin",
            "manufacturer": "Lindt",
            "price": 90,
            "rating":5
        },
        {
            "name": "Bournville",
            "manufacturer": "cadbury",
            "price": 70,
            "rating":2
        }
    ];

var margins = {"left":40, "right":30, "top":30, "bottom":30};
var step = 0;
var width = 500;
var height = 500;

var x = d3.scale.linear()
    .domain(d3.extent(chocolates, function (d) {
        return d.price;
    }))
    .range([0, width - margins.left - margins.right]);


var y = d3.scale.linear()
    .domain(d3.extent(chocolates, function (d) {
        return d.rating;
    }))
    .range([height - margins.top - margins.bottom, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickPadding(2);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickPadding(2);

var svg = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + margins.left + "," + margins.top + ")");

svg
  .append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y.range()[0] + ")")
    .call(xAxis);

var colors = d3.scale.category10();

svg
  .append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg
  .append("text")
    .attr("fill", "#414241")
    .attr("text-anchor", "end")
    .attr("x",...