arda-d3.js

// Define the size of the canvas above so we can re-use it later to generate co-ordinates
		var width = 1000;
		var height = 1000;

		// create our canvas
		var canvas = d3.select("body").append("svg")
			.attr("width", width)
			.attr("height", height);

		// Helper function to help generate coords.
		// It generates random x,y coords used to draw circles
		function generateCoords() {
			var x = Math.floor(Math.random() * width) + 1;
			var y = Math.floor(Math.random() * height) + 1;
			return [x, y];
		}

		d3.json("likes_on_external_sites.json", function (data) {
			// Some specs for the circles
			var elem = canvas
				.selectAll("g title")
				.data(data.other_likes.splice(0, 30)); // use the first 30 datapoints

			// Create a container for each circle
			var container = elem.enter()
				.append("g")
				.attr("transform", function (d) {
					return "translate(" + generateCoords()[0] + "," + generateCoords()[1] + ")";
				})

			// Create and add a circle
			var cir