Plot a Circle on a Graph

by Adam Smith

HTML

<div class="graph top-right" id="plot"></div>
<div class="graph bottom-left"></div>

CSS

.graph {
  position: absolute;
  width: 50%;
  height: 50%;
  border: dotted black 1px;
}
.top-right {
  top: 0;
  right: 0;
  border-width: 0 0 1px 1px;
}
.bottom-left {
  bottom: -1px;
  left: -1px;
  border-width: 1px 1px 0 0;
}
.dot {
  background-color: black;
  width: 1px;
  height: 1px;
  position: absolute;
  transform: translate(-1px, 1px);
}

JavaScript

var r = 180, rs = Math.pow(r,2), x, y, coords = '';
for (var i=-r; i<=r; i+=0.01) {
	x = i;
  y = Math.sqrt(rs - Math.pow(x,2));
  if (!isNaN(x + y))
  	coords +=
    	'<div class="dot" style="left:'+x+'px;bottom:'+y+'px;"></div>'+
      '<div class="dot" style="left:'+x+'px;bottom:'+(-y)+'px;"></div>'
    ;
}
$('#plot').html(coords);