d3 - scatter plot

by ordette

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
    margin-right: 2px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//var dataset = [5,10,15,20,25];
//d3.selectAll("div").data(dataset).enter().append("div").attr("class","bar").style("height", function(d) {var barHeight = d*5; return barHeight+"px"});
var w = 500;
var h = 300;
var barPadding = 1;
var radius = 5;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
/*
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d,i) { return i*w/dataset.length;})
.attr("y", function(d) {return h-d*5})
.attr("width", function(d){ return w/dataset.length-1;})
.attr("height", function(d){ return d*5+"px";})
.attr("fill", "teal");

var scale = d3.scale.linear()
                    .domain([100, 500])
                    .range([10, 350]);
                    */
var padding = 30;
var dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ];
var scaleX = d3.scale.linear().domain([0, d3.max(dataset, function (d) { return d[0];} )]).range([padding, w - padding * 2]);
var scaleY = d3.scale.linear().domain([0, d3.max(dataset, function (d) { return d[1];} )]).range([h - padding, padding]);

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function (d) { return scaleX(d[0]) + radius; })
    .attr("cy", function (d) { return scaleY(d[1]); })
    .attr("r", radius);

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function (d) { return d[0] + "," + d[1]; })
    .attr("x", function(d) { return scaleX(d[0]); })
    .attr("y", function(d) { return scaleY(d[1]); })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "red");

var xAxis = d3.svg.axis().scale(scaleX).orient("bottom").ticks(5);
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

var yAxis =...