Scatterplot - Murray

by Nivaldo

CSS

body {
    background-color: #ccc;
}
svg {
    background-color: white;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//Width and height
var w = 500;
var h = 300;
var padding = 40;

//Dynamic, random dataset
var dataset = []; //Initialize empty array
var numDataPoints = 50; //Number of dummy data points to create
var maxRange = Math.random() * 1000; //Max range of new values
for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
    var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
    var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
    dataset.push([newNumber1, newNumber2]); //Add new number to array
}

//Create scale functions
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]);

//Define X axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

//Create SVG element
var svg = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h);

//Create circles
svg.append("g")
    .attr("id", "circles")
    .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", 2);

//Create X axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h - padding + 5) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (padding - 5) + ",0)")
    .call(yAxis);