Untitled

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> Pre-attentive Visualizations </title>
<script type="text/javascript" src="d3/d3.min.js"></script>

<style>
.axis text {
	font: 15px sans-serif;
	}

.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
</style>

</head>

<body>

<div>
    <label for="number">Number of elements to visualize: <span id="numberField"></span></label>
    <input type="range" min="1" max="100" name="number" id="number" />
</div>
<div>
    <label for="ms">Number of ms to see: <span id="numberMs"></span></label>
    <input type="range" min="100" max="1000" step="100" name="ms" id="ms" />
</div>
<div>
    <label for="shows">Number of shows: <span id="numberShows"></span></label>
    <input type="range" name="shows" min="1" max="10" id="shows" />
</div>
<div>
    <input type="button" value="Run applet" id="run">
</div>

<script>
    var numberSlider = document.getElementById("number");
    var outputField = document.getElementById("numberField");
    outputField.innerHTML = numberSlider.value;

    numberSlider.oninput = function() {
        outputField.innerHTML = this.value;
    };

    var msSlider = document.getElementById("ms");
    var outputMs = document.getElementById("numberMs");
    outputMs.innerHTML = msSlider.value;

    msSlider.oninput = function() {
        outputMs.innerHTML = this.value;
    };

    var showsSlider = document.getElementById("shows");
    var outputShows = document.getElementById("numberShows");
    outputShows.innerHTML = showsSlider.value;

    showsSlider.oninput = function() {
        outputShows.innerHTML = this.value;
    };
//1

var width = 600;
var height = 600;

let svg = d3.select('body').append("svg")
    .attr("width", width)
    .attr("height", height);

function createNonCollidingPoints(width, height, radius, numPoints){
	var points = [];
    let aantalGeplaatst = 0;

    while(numPoints > aantalGeplaatst){
        nok = true;
        let xVal;
        let yVal;
        while(nok){
            nok = false;
            xVal = Math.random() * width;
            yVal = Math.random() * height;
            for(let point of points) {
                let dist = Math.sqrt((point.x - xVal)*(point.x - xVal) + (point.y - yVal)*(point.y - yVal));
                if(dist < 2*radius){
                    nok = true;
                    break;
                }
            }
        }
        points.push({x: xVal,y: yVal});
        aantalGeplaatst++;
    }
	return points;
}

//2 join the points with the svg circles, how does a circle now its color? (red or gray)
function scatterPlot(pointData, radius, width, height){
    var xScale = d3.scaleLinear()
        .domain([-1*radius, width + radius])
        .range([0, width]);

    var yScale = d3.scaleLinear()
        .domain([-1*radius, width + radius])
        .range([0, width]);

    var scatter = svg.selectAll("circle").data(pointData).enter();

    scatter.append("circle")
        .attr("cx", punt => xScale(punt.x))
        .attr("cy", punt => yScale(punt.y))
        .attr("r", radius)
        .attr("stroke", "black")
        .attr("fill", "red");
    let rodeCirkel = svg.selectAll("circle").filter(function(d, i) { return i == 0; })
    let getal = Math.round(Math.random()*1000);
    if (getal % 2 == 0){
        rodeCirkel.attr("fill","blue");
        return true;
    }
    return false;
}

function drawPoints(radius, numberOfPoints){
    let points = createNonCollidingPoints(width,height,radius,numberOfPoints);
    return scatterPlot(points,radius,width,height);
}

//3 use setTimeOut and setInterval to control the blinking of the applet

function blinking(aantalMS,aantalCirkels) {
    svg.selectAll("text").remove();
    let isPresent = drawPoints(10,aantalCirkels);
    setTimeout(function() {clearSVG(isPresent);},aantalMS);
}

function clearSVG(isPresent) {
    svg.selectAll("circle").remove();
    console.log(isPresent);
    writeText(isPresent);
}
function writeText(isPresent) {
    let tekst = isPresent ? "Present" : "Absent";
    svg.append("text")
        .attr("text-anchor", "middle")
        .attr("x", width/2)
        .attr("y", height/2)
        .attr("font-size",30)
        .text(tekst)
}


//4 make the visualization configurable from the brower.
//  a useful tutorial is: http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

document.getElementById('run').onclick = function () {
    document.getElementById('run').disabled = true;
    let aantalShows = showsSlider.value;
    let aantalMS = parseInt(msSlider.value);
    let aantalCirkels = parseInt(numberSlider.value);
    blinking(aantalMS,aantalCirkels);
    var timer = setInterval(function () {blinking(aantalMS,aantalCirkels);},1000+aantalMS); // laat uitkomst altijd 1 sec zien
    setTimeout(function (){
        svg.selectAll("text").remove();
        document.getElementById('run').disabled = false;
        clearInterval(timer);
    }, (999+aantalMS)*(aantalShows))
};


</script>


</body>