D3ScatterplotAddDropdowns

by Simon Raper

HTML

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


        [{
            "name": "ape man",
                "physicalstrength": 20,
                "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": "the freak",
                "physicalstrength": 9,
                "fearfactor": 2,
                "killingpower": 1,
                "horrorrating": 17

        },
    {
            "name": "dracula",
                "physicalstrength": 4,
                "fearfactor": 17,
                "killingpower": 5,
                "horrorrating": 16

        }, {
            "name": "the hangman",
                "physicalstrength": 2,
                "fearfactor": 4,
                "killingpower": 13,
                "horrorrating": 8

        }, {
            "name": "incredible melting man",
                "physicalstrength": 3,
                "fearfactor": 8,
                "killingpower": 15,
                "horrorrating": 6

        }, 
    {
            "name": "the thing",
                "physicalstrength": 19,
                "fearfactor": 4,
                "killingpower": 11,
                "horrorrating": 7

        }]

</script>

<body>
    <div id="container" style="width:800px">
        <div id="header">
             <h2>Interactive Scatterplot</h1>
        </div>
        <div id="menu">
X-axis:
<select id="xAxisVar" onchange="reDraw()" >
  <option></option>
  <option value="physicalstrength" selected="selected">physical strength</option>
  <option value="fearfactor" >fear factor</option>  
  <option...

CSS

body {
    font: .625em/1.2"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif!important;
    background-color:#0f7fa8;
    color: white;
}
h2 {
    color:white;
}
#header {
    width:800px;
    height: 50px;
}
#menu {
    height:400px;
    width:150px;
    float:left;
}
#content {
    background-color:#ffffff;
    height:400px;
    width:650px;
    float:left;
}
#footer {
    clear:both;
    text-align:center;
}

.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);


//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("#content")
    .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);




//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);

function reDraw(){

    xVar = document.getElementById('xAxisVar').value;
    yVar = document.getElementById('yAxisVar').value;
    
d3.selectAll("circle")
    .transition()
    .duration(1000)
    .attr("cx", function (d) {
    return eval("xScale(d." + xVar + ");");
})
    .attr("cy", function (d) {
    return eval("yScale(d." + yVar + ");");
});
    
}