Created
October 3, 2019 05:17
-
-
Save JackyLiu97/46a7e74dadeb429de4c8d4b8e5866838 to your computer and use it in GitHub Desktop.
Csc 59969 Visualization // source https://jsbin.com/gapunej
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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