SimpleD3ScatterplotWithFilter

by Simon Raper

JavaScript

//Add data

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 d[0];
})])
    .range([padding, w - padding]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[1];
})])
    .range([padding, h - 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")
    .filter(function(d){ return d[0] < 5; })
    .attr("cx", function (d) {
    return xScale(d[0]);
})
    .attr("cy", function (d) {
    return yScale(d[1]);
})
    .attr("r", 5)