Core D3 format / Scatterplot

<!DOCTYPE html>

/*css*/

body {
		font-family: arial, sans;
		font-size: 9px;
		width: 960px;
		margin: 0px auto;
	}

.axis path {
		display: none;
	}
	.axis line {
	    stroke-width: 1px;
	    stroke: #ccc;
	    stroke-dasharray: 5px 3px;
	    shape-rendering: crispEdges;
	}

</style>
</head>

<body>

</body>

// d3 margin convention
var margin = {top: 20, right: 20, bottom: 20, left: 40};
var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

// create scales with range (output) defined
// svg 0,0 origin is top left, so yScale range is flipped
var xScale = d3.scale.linear()
	.range([0,width]);
var yScale = d3.scale.linear()
	.range([height,0]);

// create axes
var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");
var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(-width)
	.orient("left");

// append svg and inner g (svg group selection) as per margin convention
// svg variable will point to the appended g, not the svg itself
var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// load external data, if needed
d3.tsv("group1.tsv", ready);

function ready(error, data) {
	if (error) return console.warn(error);

// convert to numbers
	data.forEach(function(d) {
		d.x = +d.x;
		d.y = +d.y;
	});

// update domains based on extrema
	xScale.domain(d3.extent(data, function(d) { return d.x; }));
	yScale.domain(d3.extent(data, function(d) { return d.y; }));

// append axes
	svg.append("g")
		.call(xAxis)
		.attr("class", "axis xAxis")
		.attr("transform", "translate(0," + height + ")");
	svg.append("g")
		.call(yAxis)
		.attr("class", "axis yAxis");

// for convenience, append g's to which we add circles
	// data join used in conjunction with selectAll
	// preselect elements that are not yet created
	var dataGroup = svg.selectAll('g.container')
		.data(data)
		.enter()
		.append('g')
		.attr('class', 'container')
		.attr('transform', function (d) { 
			return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')'
		});

dataGroup.append('circle')
		.attr('r', 3);
}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js