CoppeliaScatterPlot

CSS

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

JavaScript

//Add data

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


//Set constants

var w = 600,
    h = 600,
    padding=80;


//Create adaptable scales

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

var yScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d3.max([d[0], d[1]]); })])
                     .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[0]);
})
    .attr("cy", function (d) {
    return yScale(d[1]);
})
    .attr("r", 5)
    .attr("opacity", function (d) {
    return d[2]/10;
})



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


//Create axis labels

svg.append("text")      // text label for the x axis
.attr("transform", "translate(" + (w / 2) + " ," + (h-padding/3) + ")")
        .style("text-anchor", "middle")
        .text("X Axis Label");

 svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 + padding/3)
        .attr("x",0 - (h / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Y Axis Label");