krish85/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<style>
			.axis path,
			.axix line{
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

		</style>
	</head>
<body>
		<script>
			var w = 500;
			var h = 300;
			var padding = 70;
			var color = d3.scale.category10();

			var dataset =[  { x: 9.14, y: 228513, z:309.34,  label:"US" },
					        { x: 16.37, y: 85292, z:141.92,  label:"Russia" },
					        { x: 9.327, y: 66239, z:1337,  label:"China" },
					        { x: 9.09, y: 58345, z:34.12,  label:"Canada" },
					        { x: 8.45, y: 29817, z:194.94,  label:"Brazil" },
					        { x: 7.68, y: 8615, z:22.29,  label:"Australia" },
					        { x: 2.97, y: 63974, z:1224.61,  label:"India" },
					        { x: 2.73, y: 25023, z:40.41,  label:"Argentina" },
					        { x: 1.94, y: 26704, z:113.42,  label:"Mexico" },
					        { x: 1.21, y: 22051, z:49.99,  label:"SA" },
					        { x: .547, y: 33608, z:65.07,  label:"France" },
					        { x: .241, y: 31471, z:62.23,  label:"U.K" },
					        { x: .348, y: 33708, z:81.77,  label:"Germany" },
					        { x: .364, y: 20035, z:127.45,  label:"Japan" },
					        { x: .995, y: 5195, z:81.12,  label:"Egypt" },
					        { x: .743, y: 5352, z:17.11,  label:"Chile" }];
			var xScale = d3.scale.linear()
							.domain([0,d3.max(dataset, function(d){ return d.x;})])
							.range([padding, w - padding ]);
			var yScale = d3.scale.linear()
							.domain([0,250000])
							.range([h - padding ,padding]);
			var rScale = d3.scale.linear()
							.domain([d3.min(dataset, function(d){ return d.z;}), d3.max(dataset, function(d){ return d.z;})])
							.range([8,25]);
			var xAxis  = d3.svg.axis().scale(xScale).orient("bottom").ticks(10);
			var yAxis  = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickFormat(function (d) {
      									  var prefix = d3.formatPrefix(d);
     									  return prefix.scale(d) + prefix.symbol;
    									});

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

			svg.selectAll("circle").data(dataset).enter().append("circle")
			   .attr("cx", function(d) {return xScale(d.x) + 10;})
			   .attr("cy", function(d) {return yScale(d.y) - 10;})
			   .attr("r", function(d) {return rScale(d.z);})
			   .attr("fill", function(d,i){return color(i);});

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

			svg.append("text").attr("transform","translate(" + w/2 + "," + (h - 10) +")").style("text-anchor","middle").text("Land Area (mn sq. km)");
			svg.append("text").attr("x",-150).attr("y",15).attr("transform", "rotate(-90)").style("text-anchor","middle").text("Rail Lines (km)");
		</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style>
	.axis path,
	.axix line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<script>
	var w = 500;
	var h = 300;
	var padding = 70;
	var color = d3.scale.category10();

	var dataset =[ { x: 9.14, y: 228513, z:309.34, label:"US" },
	{ x: 16.37, y: 85292, z:141.92, label:"Russia" },
	{ x: 9.327, y: 66239, z:1337, label:"China" },
	{ x: 9.09, y: 58345, z:34.12, label:"Canada" },
	{ x: 8.45, y: 29817, z:194.94, label:"Brazil" },
	{ x: 7.68, y: 8615, z:22.29, label:"Australia" },
	{ x: 2.97, y: 63974, z:1224.61, label:"India" },
	{ x: 2.73, y: 25023, z:40.41, label:"Argentina" },
	{ x: 1.94, y: 26704, z:113.42, label:"Mexico" },
	{ x: 1.21, y: 22051, z:49.99, label:"SA" },
	{ x: .547, y: 33608, z:65.07, label:"France" },
	{ x: .241, y: 31471, z:62.23, label:"U.K" },
	{ x: .348, y: 33708, z:81.77, label:"Germany" },
	{ x: .364, y: 20035, z:127.45, label:"Japan" },
	{ x: .995, y: 5195, z:81.12, label:"Egypt" },
	{ x: .743, y: 5352, z:17.11, label:"Chile" }];
	var xScale = d3.scale.linear()
	.domain([0,d3.max(dataset, function(d){ return d.x;})])
	.range([padding, w - padding ]);
	var yScale = d3.scale.linear()
	.domain([0,250000])
	.range([h - padding ,padding]);
	var rScale = d3.scale.linear()
	.domain([d3.min(dataset, function(d){ return d.z;}), d3.max(dataset, function(d){ return d.z;})])
	.range([8,25]);
	var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10);
	var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickFormat(function (d) {
	var prefix = d3.formatPrefix(d);
	return prefix.scale(d) + prefix.symbol;
	});

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

	svg.selectAll("circle").data(dataset).enter().append("circle")
	.attr("cx", function(d) {return xScale(d.x) + 10;})
	.attr("cy", function(d) {return yScale(d.y) - 10;})
	.attr("r", function(d) {return rScale(d.z);})
	.attr("fill", function(d,i){return color(i);});

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

	svg.append("text").attr("transform","translate(" + w/2 + "," + (h - 10) +")").style("text-anchor","middle").text("Land Area (mn sq. km)");
	svg.append("text").attr("x",-150).attr("y",15).attr("transform", "rotate(-90)").style("text-anchor","middle").text("Rail Lines (km)");
	</script>
	</body>
	</html>