Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement