D3 Animation - Scatter plot

by Eamonn Maguire

HTML

<h3>Visual Analytics Course - Oxford University</h3>
<p>Scatter plot with animation Example <span class="name">Eamonn Maguire</span></p>

<div id="scatter-animated">
</div>

CSS

body{
 font-family: "Helvetica Neue";
        color: #686765;
}
.name {
    float:right;   
    color:#27aae1;
}

.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 colors = d3.scale.category10();

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

    var y = calculateYScale(chocolates, height);

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

svg.append("text")
        .attr("fill", "#414241")
        .attr("text-anchor", "end")
        .attr("x", width/2)
        .attr("y", height-35)
        .text("Price in pence (ÂŁ)");   

update(chocolates);

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

function calculateYScale(data, width){
    var y = d3.scale.linear()
                .domain(d3.extent(data, function (d) {
                    return...