scatter plot based on tutorial, with axis

based on scott murray's tutorials

by hrabinowitz

CSS

.xAxis path,
.xAxis line,
.yAxis path,
.yAxis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.xAxis text,
.yAxis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//Width and height
			var w = 500;
			var h = 300;
			var padding = 40;
			
			var dataset = [
							[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
							[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
						  ];

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

            var colorScale = d3.scale.linear()
                                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
								 //.range(["hsl(0, 50%, 50%)", "hsl(300, 50%, 50%)"]);            
								 .range(["red", "blue"]);            

			var yScale = d3.scale.linear()
								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
								 .range([h - padding, padding]);
	
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

            svg.append("rect")
                .attr("width", "100%")
                .attr("height", "100%")
                .attr("fill", "beige");

			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", function(d) {
			   		return Math.sqrt(d[1]);
			   })
                .attr("fill", function(d) {
                    return colorScale(d[0]);
                });
               /*
               .attr("fill", function(d) {
                   return "hsl(" + 360*(d[0]/d3.max(dataset, function(d) { return d[0];})) + ", 50%, 50%)";
               });
               */

			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d[0] + "," + d[1];
			   })
			   .attr("x", function(d) {
			   		return xScale(d[0]);
			   })
			   .attr("y", function(d) {
			   		return...