Skip to content

Instantly share code, notes, and snippets.

@JackyLiu97

JackyLiu97/index.html

Created October 3, 2019 05:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JackyLiu97/46a7e74dadeb429de4c8d4b8e5866838 to your computer and use it in GitHub Desktop.
Save JackyLiu97/46a7e74dadeb429de4c8d4b8e5866838 to your computer and use it in GitHub Desktop.
Download ZIP
Csc 59969 Visualization // source https://jsbin.com/gapunej
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://serv.cusp.nyu.edu/~hvo/files/nyc_grads.js" type="text/javascript">
</script>
<title>Csc 59969 Visualization</title>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
8
function addElementSVG(parent, name, attrs={}) {
let SVGNS = "http://www.w3.org/2000/svg";
let element = document.createElementNS(SVGNS, name);
for (key in attrs)
element.setAttributeNS(null, key, attrs[key]);
parent.appendChild(element);
return element;
}
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
"width": "500",
"height": "500"
});
var temp = grads.filter(item => { return item.Cohort === '2002' ||
item.Cohort === '2004' ||
item.Cohort === '2006'; })
.filter( item => {
return item.Type == "Borough Total"})
var data = temp.map(row => {
return [row.Advanced/row.Total,row.DroppedOut/row.Total, row.Cohort]
})
//creating the base chart I have no idea what im doing
addElementSVG(canvas,"rect", {"x":0,"y":0,"width":500, "height":500,"fill":"Lightgray"})
addElementSVG(canvas,"line", {"x1":100,"y1":100,"x2":100,"y2":401,"stroke":"Black","stroke-width":2})
addElementSVG(canvas,"line", {"x1":100,"y1":400,"x2":400,"y2":400,"stroke":"Black","stroke-width":2})
// creating the legend
addElementSVG(canvas,"rect",{"x":370,"y":60,"width":80,"height":80,"fill":"white"})
//
addElementSVG(canvas,"rect",{"x":380,"y":70, "width":15,"height":15,"fill":"SteelBlue"})
addElementSVG(canvas,"text",{"x":405,"y":85}).textContent = "2002"
addElementSVG(canvas,"rect",{"x":380,"y":95, "width":15,"height":15,"fill":"SeaGreen"})
addElementSVG(canvas,"text",{"x":405,"y":107}).textContent = "2004"
addElementSVG(canvas,"rect",{"x":380,"y":120, "width":15,"height":15,"fill":"IndianRed"})
addElementSVG(canvas,"text",{"x":405,"y":133}).textContent = "2006"
var title = addElementSVG(canvas, "text",
{"x": 100, "y": 50});
title.textContent = "NYC High School Graduate Statistics";
var ylabel = addElementSVG(canvas,"text",{"x":10+(1.5*1),"y":285+(1.5*1),"transform":"rotate(-90,16.5,285.5)"});
ylabel.textContent = "Dropped Out (%)"
var xlabel = addElementSVG(canvas,"text", {"x":100+(1.1*70),"y":489})
xlabel.textContent = "Advanced Regents (%)"
// y-axis
for(var i=0;i<5; i++) {
if (i==0){
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":100+(i*80),"x2":100+(i*0.2),"y2":100+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":20,"y":105,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":80+(i*80),"x2":100+(i*0.2),"y2":80+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text",{"x":20+(i*1),"y":85+(i*80),"transform":""}).textContent = 20-(i*5)+ "%"
}
}
// x-axis
for (var j=0; j<5; j++) {
if (j == 0) {
addElementSVG(canvas,"line", {"x1":100+(j*70),"y1":400,"x2":100+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100,"y":465,"fill":"black"}).textContent = "0%"
}
else if (j==4) {
addElementSVG(canvas, "line",{"x1":119+(j*70),"y1":400,"x2":119+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":120+(j*70),"y":465,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas, "line",{"x1":110+(j*70),"y1":400,"x2":110+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100+(j*70),"y":465,"fill":"black"}).textContent = (j*5) + "%"
}
}
//d = data the elements in the array
// i = index, the index in the array
console.log(data)
data.forEach((d,i) => {
if (d[2] == '2002') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 350-d[1]*1000,"r":5,"fill":"SteelBlue","stroke":"black"
})
}
else if (d[2] =='2004') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 380-d[1]*1300,"r":5,"fill":"SeaGreen","stroke":"black"
})
}
else if (d[2]=='2006') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 345-d[1]*1000,"r":5,"fill":"IndianRed","stroke":"black"
})
}
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">8
function addElementSVG(parent, name, attrs={}) {
let SVGNS = "http://www.w3.org/2000/svg";
let element = document.createElementNS(SVGNS, name);
for (key in attrs)
element.setAttributeNS(null, key, attrs[key]);
parent.appendChild(element);
return element;
}
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
"width": "500",
"height": "500"
});
var temp = grads.filter(item => { return item.Cohort === '2002' ||
item.Cohort === '2004' ||
item.Cohort === '2006'; })
.filter( item => {
return item.Type == "Borough Total"})
var data = temp.map(row => {
return [row.Advanced/row.Total,row.DroppedOut/row.Total, row.Cohort]
})
//creating the base chart I have no idea what im doing
addElementSVG(canvas,"rect", {"x":0,"y":0,"width":500, "height":500,"fill":"Lightgray"})
addElementSVG(canvas,"line", {"x1":100,"y1":100,"x2":100,"y2":401,"stroke":"Black","stroke-width":2})
addElementSVG(canvas,"line", {"x1":100,"y1":400,"x2":400,"y2":400,"stroke":"Black","stroke-width":2})
// creating the legend
addElementSVG(canvas,"rect",{"x":370,"y":60,"width":80,"height":80,"fill":"white"})
//
addElementSVG(canvas,"rect",{"x":380,"y":70, "width":15,"height":15,"fill":"SteelBlue"})
addElementSVG(canvas,"text",{"x":405,"y":85}).textContent = "2002"
addElementSVG(canvas,"rect",{"x":380,"y":95, "width":15,"height":15,"fill":"SeaGreen"})
addElementSVG(canvas,"text",{"x":405,"y":107}).textContent = "2004"
addElementSVG(canvas,"rect",{"x":380,"y":120, "width":15,"height":15,"fill":"IndianRed"})
addElementSVG(canvas,"text",{"x":405,"y":133}).textContent = "2006"
var title = addElementSVG(canvas, "text",
{"x": 100, "y": 50});
title.textContent = "NYC High School Graduate Statistics";
var ylabel = addElementSVG(canvas,"text",{"x":10+(1.5*1),"y":285+(1.5*1),"transform":"rotate(-90,16.5,285.5)"});
ylabel.textContent = "Dropped Out (%)"
var xlabel = addElementSVG(canvas,"text", {"x":100+(1.1*70),"y":489})
xlabel.textContent = "Advanced Regents (%)"
// y-axis
for(var i=0;i<5; i++) {
if (i==0){
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":100+(i*80),"x2":100+(i*0.2),"y2":100+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":20,"y":105,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":80+(i*80),"x2":100+(i*0.2),"y2":80+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text",{"x":20+(i*1),"y":85+(i*80),"transform":""}).textContent = 20-(i*5)+ "%"
}
}
// x-axis
for (var j=0; j<5; j++) {
if (j == 0) {
addElementSVG(canvas,"line", {"x1":100+(j*70),"y1":400,"x2":100+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100,"y":465,"fill":"black"}).textContent = "0%"
}
else if (j==4) {
addElementSVG(canvas, "line",{"x1":119+(j*70),"y1":400,"x2":119+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":120+(j*70),"y":465,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas, "line",{"x1":110+(j*70),"y1":400,"x2":110+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100+(j*70),"y":465,"fill":"black"}).textContent = (j*5) + "%"
}
}
//d = data the elements in the array
// i = index, the index in the array
console.log(data)
data.forEach((d,i) => {
if (d[2] == '2002') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 350-d[1]*1000,"r":5,"fill":"SteelBlue","stroke":"black"
})
}
else if (d[2] =='2004') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 380-d[1]*1300,"r":5,"fill":"SeaGreen","stroke":"black"
})
}
else if (d[2]=='2006') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 345-d[1]*1000,"r":5,"fill":"IndianRed","stroke":"black"
})
}
})</script></body>
</html>
Raw
jsbin.gapunej.js
8
function addElementSVG(parent, name, attrs={}) {
let SVGNS = "http://www.w3.org/2000/svg";
let element = document.createElementNS(SVGNS, name);
for (key in attrs)
element.setAttributeNS(null, key, attrs[key]);
parent.appendChild(element);
return element;
}
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
"width": "500",
"height": "500"
});
var temp = grads.filter(item => { return item.Cohort === '2002' ||
item.Cohort === '2004' ||
item.Cohort === '2006'; })
.filter( item => {
return item.Type == "Borough Total"})
var data = temp.map(row => {
return [row.Advanced/row.Total,row.DroppedOut/row.Total, row.Cohort]
})
//creating the base chart I have no idea what im doing
addElementSVG(canvas,"rect", {"x":0,"y":0,"width":500, "height":500,"fill":"Lightgray"})
addElementSVG(canvas,"line", {"x1":100,"y1":100,"x2":100,"y2":401,"stroke":"Black","stroke-width":2})
addElementSVG(canvas,"line", {"x1":100,"y1":400,"x2":400,"y2":400,"stroke":"Black","stroke-width":2})
// creating the legend
addElementSVG(canvas,"rect",{"x":370,"y":60,"width":80,"height":80,"fill":"white"})
//
addElementSVG(canvas,"rect",{"x":380,"y":70, "width":15,"height":15,"fill":"SteelBlue"})
addElementSVG(canvas,"text",{"x":405,"y":85}).textContent = "2002"
addElementSVG(canvas,"rect",{"x":380,"y":95, "width":15,"height":15,"fill":"SeaGreen"})
addElementSVG(canvas,"text",{"x":405,"y":107}).textContent = "2004"
addElementSVG(canvas,"rect",{"x":380,"y":120, "width":15,"height":15,"fill":"IndianRed"})
addElementSVG(canvas,"text",{"x":405,"y":133}).textContent = "2006"
var title = addElementSVG(canvas, "text",
{"x": 100, "y": 50});
title.textContent = "NYC High School Graduate Statistics";
var ylabel = addElementSVG(canvas,"text",{"x":10+(1.5*1),"y":285+(1.5*1),"transform":"rotate(-90,16.5,285.5)"});
ylabel.textContent = "Dropped Out (%)"
var xlabel = addElementSVG(canvas,"text", {"x":100+(1.1*70),"y":489})
xlabel.textContent = "Advanced Regents (%)"
// y-axis
for(var i=0;i<5; i++) {
if (i==0){
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":100+(i*80),"x2":100+(i*0.2),"y2":100+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":20,"y":105,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas,"line", {"x1":60+(i*1),"y1":80+(i*80),"x2":100+(i*0.2),"y2":80+(i*80),"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text",{"x":20+(i*1),"y":85+(i*80),"transform":""}).textContent = 20-(i*5)+ "%"
}
}
// x-axis
for (var j=0; j<5; j++) {
if (j == 0) {
addElementSVG(canvas,"line", {"x1":100+(j*70),"y1":400,"x2":100+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100,"y":465,"fill":"black"}).textContent = "0%"
}
else if (j==4) {
addElementSVG(canvas, "line",{"x1":119+(j*70),"y1":400,"x2":119+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":120+(j*70),"y":465,"fill":"black"}).textContent = "20%"
}
else {
addElementSVG(canvas, "line",{"x1":110+(j*70),"y1":400,"x2":110+(j*70),"y2":435,"stroke":"black","stroke-width":2})
addElementSVG(canvas,"text", {"x":100+(j*70),"y":465,"fill":"black"}).textContent = (j*5) + "%"
}
}
//d = data the elements in the array
// i = index, the index in the array
console.log(data)
data.forEach((d,i) => {
if (d[2] == '2002') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 350-d[1]*1000,"r":5,"fill":"SteelBlue","stroke":"black"
})
}
else if (d[2] =='2004') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 380-d[1]*1300,"r":5,"fill":"SeaGreen","stroke":"black"
})
}
else if (d[2]=='2006') {
addElementSVG(canvas,"circle", {
"cx":d[0]*1000+100, "cy": 345-d[1]*1000,"r":5,"fill":"IndianRed","stroke":"black"
})
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment