D3ScatterplotAddJSON

by Simon Raper

HTML

<script type="application/json" id="points">


        [{
            "name": "ape man",
                "physicalstrength": 11,
                "fearfactor": 7,
                "killingpower": 12,
                "horrorrating": 4

        }, {
            "name": "godzilla",
                "physicalstrength": 3,
                "fearfactor": 5,
                "killingpower": 4,
                "horrorrating": 8

        }, {
            "name": "the ghoul",
                "physicalstrength": 7,
                "fearfactor": 12,
                "killingpower": 2,
                "horrorrating": 7

        }, {
            "name": "diablo",
                "physicalstrength": 8,
                "fearfactor": 7,
                "killingpower": 5,
                "horrorrating": 6

        }]

</script>

CSS

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

JavaScript

//Parse JSON

var unparsed = document.getElementById('points').innerHTML;
dataset = JSON.parse(unparsed);

//var dataset = [
//   [1, 3],
//   [3, 12],
//   [6, 4],
//   [11, 1],
//   [7, 7],
//   [2, 3]
//];


//Set constants

var w = 420,
    h = 400,
    padding = 30;


//Create adaptable scales

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]);
})])
    .range([padding, w - padding]);

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


//Set up the svg

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


//Add in circles for each data point

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
    return xScale(d.physicalstrength);
})
    .attr("cy", function (d) {
    return yScale(d.fearfactor);
})
    .attr("r", 5);

//Swap the axes

d3.selectAll("circle")
    .transition()
    .duration(1000)
    .attr("cx", function (d) {
    return xScale(d.fearfactor);
})
    .attr("cy", function (d) {
    return yScale(d.physicalstrength);
});


//Set up the axes

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);