Data Visualization

Page linkhttp://angeloportfolio.co.nf/DataVisuals.html

This project shows my interpretation on how a set of data can be represented.

Coding

var c;
var a;
var b;
var d;

function background(){
xc = 500;
yc = 0;
xd = 250;
yd = 0;
xe = 250;
ye = 0;
xf = 250;
yf = 0;

c = document.getElementById(“image”).getContext(“2d”);

c.fillStyle=”#000000″;
c.fillRect(0,0,1000,1000);

c.fillStyle=”#004e8a”;

c.beginPath();
c.moveTo(xc,yc);
c.lineTo(xc-5,yc+500);
c.lineTo(xc, yc+1000);
c.lineTo(xc+5,yc+500);
c.closePath();
c.stroke();
c.fill();

c.beginPath();
c.moveTo(xc-500,yc+500);
c.lineTo(xc,yc+505);
c.lineTo(xc+500,yc+500);
c.lineTo(xc,yc+495);
c.closePath();
c.stroke();
c.fill();

c.fillStyle=”#468ec5″;

c.beginPath();
c.moveTo(xd,yd);
c.lineTo(xd+240,yd+495);
c.lineTo(xd+500,yd+1000);
c.lineTo(xd+260,yd+515);
c.closePath();
c.stroke();
c.fill();

c.beginPath();
c.moveTo(xd+500,yd);
c.lineTo(xd+250,yd+495);
c.lineTo(xd,yd+1000);
c.lineTo(xd+250,yd+515);
c.closePath();
c.stroke();
c.fill();

c.fillStyle=”#6aa9d9″;

c.beginPath();
c.moveTo(xe-250,ye);
c.lineTo(xe+250,ye+505);
c.lineTo(xe+800,ye+1000);
c.lineTo(xe+250,ye+495);
c.closePath();
c.stroke();
c.fill();

c.beginPath();
c.moveTo(xe+750,ye);
c.lineTo(xe+250,ye+505);
c.lineTo(xe-250,ye+1000);
c.lineTo(xe+250,ye+495);
c.closePath();
c.stroke();
c.fill();

c.fillStyle=”#a7d0ef”;

c.beginPath();
c.moveTo(xf-250,yf+250);
c.lineTo(xf+250,yf+495);
c.lineTo(xf+750,yf+750);
c.lineTo(xf+250,yf+505);
c.closePath();
c.stroke();
c.fill();

c.beginPath();
c.moveTo(xf+750,yf+250);
c.lineTo(xf+250,yf+495);
c.lineTo(xf-250,yf+750);
c.lineTo(xf+250,yf+505);
c.closePath();
c.stroke();
c.fill();
}

function holder(){
c = document.getElementById(“image”).getContext(“2d”);

xhttp = new XMLHttpRequest();
xhttp.open(“POST”, “sample.xml”, false);
xhttp.send();
xdoc = xhttp.responseXML;

sample = xdoc.getElementsByTagName(“dataset”);
for (i=0; i” + xvalue;

yvalue = parseInt(sample[i].getElementsByTagName(“int2”)[0].childNodes[0].nodeValue);
document.getElementById(“values”).innerHTML +=”
” + yvalue;

lineUsed = parseFloat(sample[i].getElementsByTagName(“float”)[0].childNodes[0].nodeValue);
document.getElementById(“values”).innerHTML +=”
” + lineUsed;

angle = sample[i].getElementsByTagName(“string”)[0].childNodes[0].nodeValue;
document.getElementById(“values”).innerHTML +=”
” + angle;

angleChange = sample[i].getElementsByTagName(“bool”)[0].childNodes[0].nodeValue;
document.getElementById(“values”).innerHTML +=”

” + angleChange;

if (lineUsed

<body>
<canvas id=”image” width=1000 height=1000></canvas><br>
<input type=button value=”Draw” onclick=”background()”><br>
<input type=button value=”Get Data” onclick=”holder()”>

</body>

 

Advertisements
This entry was posted in Interactive and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s