SimpleD3ScatterplotMoveableLabels

by Simon Raper

CSS

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

JavaScript

//Add data

var dataset = [
    [100, 235, "Microtech"],
    [345, 120, "Datalab"],
    [65, 420, "Nanomesh"],
    [110, 112, "Squilch"],
    [701, 77, "Red Mango"],
    [203, 303, "Blue Gerbil"]
];


//Set constants

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


//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([h - padding, padding]);

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

var drag = d3.behavior.drag().on("drag", dragmove);

function dragmove(d) {
  d3.select(this)
      .attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y)
      .attr("dx",0).attr("dy",0)
  ;
}

//Add in circles for each data point
svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .append("circle")
    .attr("cx", function (d) {
    return xScale(d[0]);
})
    .attr("cy", function (d) {
    return yScale(d[1]);
})
    .attr("r", 5);

//Add in the labels
svg.selectAll("g").append("text").attr("class", "label")
    .attr("x", function (d) {
    return xScale(d[0]);
})
    .attr("y", function (d) {
    return yScale(d[1]);
})
.attr("dx", 10).attr("dy", 10)
.text(function (d) {
    return d[2]
});


d3.selectAll(".label").call(drag);


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