aaronsmulktis/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
  /*css to go here*/
  svg {border: 1px solid red; overflow: visible;}
  .domain {
    fill: none;
    stroke: steelblue;
  }
</style>

<body>
  <h3>guess</h3>
  <div id="graphContainer"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

  <script>
    var data = [
        {"x": 10,"y":	9.14},
        {"x": 8,"y":	8.14},
        {"x": 13,"y":	8.74},
        {"x": 9,"y":	8.77},
        {"x": 11,"y":	9.26},
        {"x": 14,"y":	8.1},
        {"x": 6,"y":	6.13},
        {"x": 4,"y":	3.1},
        {"x": 12,"y":	9.13},
        {"x": 7,"y":	7.26},
        {"x": 5,"y":	4.74}
      ],

      body = d3.select("body"),
      width = 600,
      height= 300,
      graphContainer = d3.select("#graphContainer"),
      container = graphContainer.append("div").attr("id","graph"),
      svg = container.append("svg").attr("width", width).attr("height", height),
      blue = "#0066ff",
      radius = 5,

      xMin = d3.min(data, function(d) {return d.x}),
      xMax = d3.max(data, function(d) {return d.x}),

      yExtent = d3.extent(data, function(d) {return d.y}),

      xScale = d3.scale.linear().range([0, width]).domain([xMin,xMax]),
      yScale = d3.scale.linear().range([height, 0]).domain([0,10]),

      xAxis = d3.svg.axis().scale(xScale).tickSize(height).orient("bottom")

      ;

    svg.selectAll(".hot")
       .data(data)
       .enter()
       .append("circle")
       .attr("r", radius)
       .attr("cx", function(d) {return xScale(d.x);})
       .attr("cy", function(d) {return yScale(d.y);})
       .attr("fill", blue);

    svg.append("g").call(xAxis);

  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">
	/css to go here/
	svg {border: 1px solid red; overflow: visible;}
	.domain {
	fill: none;
	stroke: steelblue;
	}
	</style>

	<body>
	<h3>guess</h3>
	<div id="graphContainer"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>
	var data = [
	{"x": 10,"y": 9.14},
	{"x": 8,"y": 8.14},
	{"x": 13,"y": 8.74},
	{"x": 9,"y": 8.77},
	{"x": 11,"y": 9.26},
	{"x": 14,"y": 8.1},
	{"x": 6,"y": 6.13},
	{"x": 4,"y": 3.1},
	{"x": 12,"y": 9.13},
	{"x": 7,"y": 7.26},
	{"x": 5,"y": 4.74}
	],

	body = d3.select("body"),
	width = 600,
	height= 300,
	graphContainer = d3.select("#graphContainer"),
	container = graphContainer.append("div").attr("id","graph"),
	svg = container.append("svg").attr("width", width).attr("height", height),
	blue = "#0066ff",
	radius = 5,

	xMin = d3.min(data, function(d) {return d.x}),
	xMax = d3.max(data, function(d) {return d.x}),

	yExtent = d3.extent(data, function(d) {return d.y}),

	xScale = d3.scale.linear().range([0, width]).domain([xMin,xMax]),
	yScale = d3.scale.linear().range([height, 0]).domain([0,10]),

	xAxis = d3.svg.axis().scale(xScale).tickSize(height).orient("bottom")

	;

	svg.selectAll(".hot")
	.data(data)
	.enter()
	.append("circle")
	.attr("r", radius)
	.attr("cx", function(d) {return xScale(d.x);})
	.attr("cy", function(d) {return yScale(d.y);})
	.attr("fill", blue);

	svg.append("g").call(xAxis);

	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	</body>