Skip to content

Instantly share code, notes, and snippets.

@lingyielia

lingyielia/HW1_Task1.html

Last active February 17, 2018 20:41
Show Gist options
  • Save lingyielia/e334c798ee5a495a127b09ddee3d5568 to your computer and use it in GitHub Desktop.
Save lingyielia/e334c798ee5a495a127b09ddee3d5568 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/yicezud
Raw
HW1_Task1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://serv.cusp.nyu.edu/~hvo/files/nyc_grads.js" type="text/javascript"></script>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
var data = grads
.filter((grad) => {
return (grad.Cohort === "2002" || grad.Cohort === "2004" || grad.Cohort === "2006") && grad.Type === "Borough Total"
})
.map((grad) => {
return [grad.Advanced / grad.Total, grad.DroppedOut / grad.Total, grad.Cohort
];
});
var axisvalue = ["5%","10%","15%","20%","25%"];
var colortype = {"2002":"SteelBlue", "2004":"SeaGreen", "2006":"IndianRed"};
var legendvalue = ["2002","2004","2006"];
function addElementSVG(parent, name, props={}) {
let svgNamespace = "http://www.w3.org/2000/svg";
var element = document.createElementNS(svgNamespace, name);
for (var key in props) {
element.setAttributeNS(null, key, props[key]);
}
parent.appendChild(element);
return element;
};
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {"width":"400", "height":"400"});
var background = addElementSVG(canvas, "rect", {"x":50, "y":40, "height":260, "width":330, "fill":"white"});
data.forEach(function (d, i){
var circle = addElementSVG(canvas, "circle", {
"cx":50+d[0]*1000, "cy":300-d[1]*1000, "r":"5", "fill":colortype[d[2]], "stroke": "black"});
var xaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"380", "y2":"300", "stroke-width":"2", "stroke":"black"});
var yaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"50", "y2":"40", "stroke-width":"2", "stroke":"black"});
});
axisvalue.forEach(function(d, i){
var xvalue = addElementSVG(canvas, "text", {"x": i*50+95, "y": 312, "font-size": 10}).textContent = d;
var yvalue = addElementSVG(canvas, "text", {"x": 30, "y": 250-i*50, "font-size": 10}).textContent = d;
var xtick = addElementSVG(canvas, "path", {"d":"M100 300 V305 M150 300 V305 M200 300 V305 M250 300 V305 M300 300 V305", "stroke-width":"2", "stroke":"black"});
var ytick = addElementSVG(canvas, "path", {"d":"M50 250 H45 M50 200 H45 M50 150 H45 M50 100 H45 M50 50 H45", "stroke-width":"2", "stroke":"black"});
});
var lengendedge = addElementSVG(canvas, "rect", {"x": 318, "y":45, "height":56, "width":56, "fill":"rgba(193, 189, 189, 0.35)", "stroke": "black"});
legendvalue.forEach(function(d, i){
var value = addElementSVG(canvas, "text", {"x": 340, "y":60+i*18, "font-size":14}).textContent = d;
var square = addElementSVG(canvas, "rect", {"x": 322, "y":50+i*18, "height":10, "width":10, "fill":colortype[d], "stroke": "black"});
});
var xlabel = addElementSVG(canvas, "text", {"x": 130, "y":327}).textContent = "Advanced Regents (%)";
var ylabel = addElementSVG(canvas, "text", {"x": 85, "y":300, "transform": "rotate(-90 2,280)"}).textContent = "Dropped Out (%)";
var title = addElementSVG(canvas, "text", {"x":90, "y":20}).textContent = "NYC High School Graduate Statistics";
</script>
<script id="jsbin-source-javascript" type="text/javascript">var data = grads
.filter((grad) => {
return (grad.Cohort === "2002" || grad.Cohort === "2004" || grad.Cohort === "2006") && grad.Type === "Borough Total"
})
.map((grad) => {
return [grad.Advanced / grad.Total, grad.DroppedOut / grad.Total, grad.Cohort
];
});
var axisvalue = ["5%","10%","15%","20%","25%"];
var colortype = {"2002":"SteelBlue", "2004":"SeaGreen", "2006":"IndianRed"};
var legendvalue = ["2002","2004","2006"];
function addElementSVG(parent, name, props={}) {
let svgNamespace = "http://www.w3.org/2000/svg";
var element = document.createElementNS(svgNamespace, name);
for (var key in props) {
element.setAttributeNS(null, key, props[key]);
}
parent.appendChild(element);
return element;
};
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {"width":"400", "height":"400"});
var background = addElementSVG(canvas, "rect", {"x":50, "y":40, "height":260, "width":330, "fill":"white"});
data.forEach(function (d, i){
var circle = addElementSVG(canvas, "circle", {
"cx":50+d[0]*1000, "cy":300-d[1]*1000, "r":"5", "fill":colortype[d[2]], "stroke": "black"});
var xaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"380", "y2":"300", "stroke-width":"2", "stroke":"black"});
var yaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"50", "y2":"40", "stroke-width":"2", "stroke":"black"});
});
axisvalue.forEach(function(d, i){
var xvalue = addElementSVG(canvas, "text", {"x": i*50+95, "y": 312, "font-size": 10}).textContent = d;
var yvalue = addElementSVG(canvas, "text", {"x": 30, "y": 250-i*50, "font-size": 10}).textContent = d;
var xtick = addElementSVG(canvas, "path", {"d":"M100 300 V305 M150 300 V305 M200 300 V305 M250 300 V305 M300 300 V305", "stroke-width":"2", "stroke":"black"});
var ytick = addElementSVG(canvas, "path", {"d":"M50 250 H45 M50 200 H45 M50 150 H45 M50 100 H45 M50 50 H45", "stroke-width":"2", "stroke":"black"});
});
var lengendedge = addElementSVG(canvas, "rect", {"x": 318, "y":45, "height":56, "width":56, "fill":"rgba(193, 189, 189, 0.35)", "stroke": "black"});
legendvalue.forEach(function(d, i){
var value = addElementSVG(canvas, "text", {"x": 340, "y":60+i*18, "font-size":14}).textContent = d;
var square = addElementSVG(canvas, "rect", {"x": 322, "y":50+i*18, "height":10, "width":10, "fill":colortype[d], "stroke": "black"});
});
var xlabel = addElementSVG(canvas, "text", {"x": 130, "y":327}).textContent = "Advanced Regents (%)";
var ylabel = addElementSVG(canvas, "text", {"x": 85, "y":300, "transform": "rotate(-90 2,280)"}).textContent = "Dropped Out (%)";
var title = addElementSVG(canvas, "text", {"x":90, "y":20}).textContent = "NYC High School Graduate Statistics";</script></body>
</html>
Raw
jsbin.yicezud.js
var data = grads
.filter((grad) => {
return (grad.Cohort === "2002" || grad.Cohort === "2004" || grad.Cohort === "2006") && grad.Type === "Borough Total"
})
.map((grad) => {
return [grad.Advanced / grad.Total, grad.DroppedOut / grad.Total, grad.Cohort
];
});
var axisvalue = ["5%","10%","15%","20%","25%"];
var colortype = {"2002":"SteelBlue", "2004":"SeaGreen", "2006":"IndianRed"};
var legendvalue = ["2002","2004","2006"];
function addElementSVG(parent, name, props={}) {
let svgNamespace = "http://www.w3.org/2000/svg";
var element = document.createElementNS(svgNamespace, name);
for (var key in props) {
element.setAttributeNS(null, key, props[key]);
}
parent.appendChild(element);
return element;
};
var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {"width":"400", "height":"400"});
var background = addElementSVG(canvas, "rect", {"x":50, "y":40, "height":260, "width":330, "fill":"white"});
data.forEach(function (d, i){
var circle = addElementSVG(canvas, "circle", {
"cx":50+d[0]*1000, "cy":300-d[1]*1000, "r":"5", "fill":colortype[d[2]], "stroke": "black"});
var xaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"380", "y2":"300", "stroke-width":"2", "stroke":"black"});
var yaxis = addElementSVG(canvas, "line", {"x1":"50", "y1":"300", "x2":"50", "y2":"40", "stroke-width":"2", "stroke":"black"});
});
axisvalue.forEach(function(d, i){
var xvalue = addElementSVG(canvas, "text", {"x": i*50+95, "y": 312, "font-size": 10}).textContent = d;
var yvalue = addElementSVG(canvas, "text", {"x": 30, "y": 250-i*50, "font-size": 10}).textContent = d;
var xtick = addElementSVG(canvas, "path", {"d":"M100 300 V305 M150 300 V305 M200 300 V305 M250 300 V305 M300 300 V305", "stroke-width":"2", "stroke":"black"});
var ytick = addElementSVG(canvas, "path", {"d":"M50 250 H45 M50 200 H45 M50 150 H45 M50 100 H45 M50 50 H45", "stroke-width":"2", "stroke":"black"});
});
var lengendedge = addElementSVG(canvas, "rect", {"x": 318, "y":45, "height":56, "width":56, "fill":"rgba(193, 189, 189, 0.35)", "stroke": "black"});
legendvalue.forEach(function(d, i){
var value = addElementSVG(canvas, "text", {"x": 340, "y":60+i*18, "font-size":14}).textContent = d;
var square = addElementSVG(canvas, "rect", {"x": 322, "y":50+i*18, "height":10, "width":10, "fill":colortype[d], "stroke": "black"});
});
var xlabel = addElementSVG(canvas, "text", {"x": 130, "y":327}).textContent = "Advanced Regents (%)";
var ylabel = addElementSVG(canvas, "text", {"x": 85, "y":300, "transform": "rotate(-90 2,280)"}).textContent = "Dropped Out (%)";
var title = addElementSVG(canvas, "text", {"x":90, "y":20}).textContent = "NYC High School Graduate Statistics";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment