console
var app = document.getElementById('app');
function f(x) {
return [x, -0.04*x*x + 3.2*x + 10];
}
function exchangePos(pos) {
return [200 + pos[0], 200 - pos[1]];
}
function draw(pos) {
var div = document.createElement('div');
div.className = 'item abs';
div.style.left = pos[0] + 'px';
div.style.top = pos[1] + 'px';
app.appendChild(div);
}
var range = [-100, 200];
!function(range){
for(var i=range[0]; i<=range[1]; i+=0.01){
draw(exchangePos(f(i)));
}
}(range)
<div id="app">
<div class="x abs"></div>
<div class="y abs"></div>
</div>
*{
margin:0px;
padding:0px;
}
#app{
width:400px;
height:400px;
border:solid 1px #ddd;
margin: 100px auto;
position:relative;
}
.abs{
position:absolute;
}
.x{
width:800px;
height:1px;
background:black;
top:200px;
left:-150px;
}
.y{
width:1px;
height:800px;
background:black;
left:200px;
top:-200px;
}
.item{
width:1px;
height:1px;
background:blue;
}