eggheadio-projects/use-d3-v3-to-build-interactive-charts-with-javascript: null

.DS_Store

# use-d3-v3-to-build-interactive-charts-with-javascript

body {
			padding-top: 20px;
			padding-left: 15px;
            font-family: Helvetica;
		}

		#chartArea {
			width: 400px;
			height: 300px;
			background-color: #CCC;
		}

		.dot {
			fill: teal;
			fill-opacity: 0.7;
			stroke: black;
		}

		.axis path, .axis line {
			fill: none;
			stroke: #000;
			stroke-width: 1px;
			shape-rendering: crispEdges;
		}

<!DOCTYPE html>
<html>
<head>
	<title>D3 - Data Driven Documents</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

</head>
<body>
  
<div id="chartArea"></div>
<script src="script.js"></script>
<link rel=“stylesheet” href=“app.css”>
</body>
</html>

var dataset = _.map(_.range(25), function (i) {
		return {
			x: Math.round(Math.random() * 100),
			y: Math.round(Math.random() * 100),
			r: Math.round(5 + Math.random() * 10)
		};
	});

	var margin = {top: 20, right: 20, bottom: 40, left: 40};
	var w = 400 - margin.left - margin.right,
		h = 300 - margin.top - margin.bottom;

	var svg = d3.select('#chartArea').append('svg')
		.attr('width', w + margin.left + margin.right)
		.attr('height', h + margin.top + margin.bottom)
		.append('g')
		.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

	var xScale = d3.scale.linear()
		.domain([0, 100])
		.range([0, w]);

	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient('bottom')
		.ticks(5)
		.innerTickSize(6)
		.outerTickSize(12)
		.tickPadding(12);

	svg.append('g')
		.attr('class', 'x axis')
		.attr('transform', 'translate(0, '+ (h + 0) + ')')
		.call(xAxis);

	var yScale = d3.scale.linear()
		.domain([0, 100])
		.range([h, 0]);

	var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient('left');

	svg.append('g')
		.attr('class', 'y axis')
		.attr('transform', 'translate(0, 0)')
		.call(yAxis);

	svg.selectAll('circle')
		.data(dataset)
		.enter()
		.append('circle')
		.attr('class', 'dot')
		.attr('cx', function (d) {
			return xScale(d.x);
		})
		.attr('cy', function (d) {
			return yScale(d.y);
		})
		.attr('r', function (d) {
			return d.r;
		});