README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3 Graphic</title>
  <style>
	.axis path,
	.axis line {
	    fill: none;
	    stroke: black;
	    shape-rendering: crispEdges;
	}
	.axis text {
	    font-family: sans-serif;
	    font-size: 11px;
	}
  </style>
</head>
<body>
<h2>Scale</h2>
<div id="scale"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="script.js"></script>
</body>
</html>

## script.js
//Create SVG element
	  	var w = 600;
	  	var h = 400;
		var padding = 30;

//Dynamic, random dataset
		var dataset = [];
		var numDataPoints = 20;
		var xRange = Math.random() * 1000;
		var yRange = Math.random() * 1000;
		for (var i = 0; i < numDataPoints; i++) {
		    var newNumber1 = Math.round(Math.random() * xRange);
		    var newNumber2 = Math.round(Math.random() * yRange);
		    dataset.push([newNumber1, newNumber2]);
		}

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

		var yScale = d3.scale.linear()
		     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
		     .range([h - padding, padding]);

		var rScale = d3.scale.linear()
		     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
		     .range([2, 5]);


		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
			.ticks(5);  //Set rough # of ticks

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

//Create SVG element


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


//Create circles
		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 rScale(d[1]);
			});


//Create labels
		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 yScale(d[1]);
		   })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "11px")
		   .attr("fill", "red");

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

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