D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jaegerka
Full window
Github gist
Grade Visualization
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <div class= "legend" id="legend"> <script> // Feel free to change or delete any of the code you see in this editor! var body = d3.select("body") .attr("width", 100000) .attr("height", 100000) var svg = d3.select("body").append("svg") .attr("width", 1000) .attr("height", 100000) d3.json("grades", function(err, mydata) {d3.select("svg").selectAll("rect") var rectGroup = d3.select("svg").selectAll("g") .data(mydata) .enter() rectGroup.append("rect") .attr("x", 2) .attr("y", function (d) { if (d.semester == 0) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 32} else if (d.semester == 1) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 32} else if (d.semester == 2) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 32} else if (d.semester == 3) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 12} else if (d.semester == 4) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 28} else if (d.semester == 5) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 23}}) .attr("width", function (d) { if (d.grade == "A+") {return 900} if (d.grade == "A") {return 900} else if (d.grade == "A-") {return 825} else if (d.grade =="B+") {return 750} else if (d.grade =="B") {return 675} else if (d.grade =="B-") {return 600} else if (d.grade == "C+") {return 525} else if (d.grade == "C") {return 450} else if (d.grade == "C-") {return 375} else if (d.grade == "D+") {return 300} else if (d.grade == "D") {return 225} else if (d.grade == "D-") {return 150} else if (d.grade == "F") {return 75} }) .attr("height", 20) .attr("fill", function (d) {if (d.category == "Major") {return "#1e9aff"} else if (d.category == "Chemistry") {return "#01e44c "} else if (d.category == "Math") {return "#e40108"} else if (d.category == "ISAT") {return "#fda101"} else if (d.category == "Gened") {return "#fff01e"}}) .attr("stroke", "black") .attr("stroke-width", 3) rectGroup.append("text") .text(function (d) {return d.class}) .attr("fill", "black" ) .attr("x", 5) .attr("y", function (d) { if (d.semester == 0) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 1) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 2) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 3) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 26} else if (d.semester == 4) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 12} else if (d.semester == 5) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 7}}) rectGroup.append("text") .text(function (d) {return d.grade}) .attr("fill", "black" ) .attr("x", function (d) { if (d.grade == "A+") {return 900 + 5} if (d.grade == "A") {return 900 + 5} else if (d.grade == "A-") {return 825 + 5} else if (d.grade =="B+") {return 750 + 5} else if (d.grade =="B") {return 675 + 5} else if (d.grade =="B-") {return 600 + 5} else if (d.grade == "C+") {return 525 + 5} else if (d.grade == "C") {return 450 + 5} else if (d.grade == "C-") {return 375 + 5} else if (d.grade == "D+") {return 300 + 5} else if (d.grade == "D") {return 225 + 5} else if (d.grade == "D-") {return 150 + 5} else if (d.grade == "F") {return 75 + 5}}) .attr("y", function (d) { if (d.semester == 0) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 1) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 2) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 46} else if (d.semester == 3) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) + 26} else if (d.semester == 4) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 12} else if (d.semester == 5) {return (d.semester * 100) + (d.semester * 20) + (d.orientation) - 7}}) rectGroup.append("text") .text(function (d) { if (d.semester == 0) {return "Fall 2014"} else if (d.semester == 1) {return "Spring 2014"} else if (d.semester == 2) {return "Fall 2015"} else if (d.semester == 3) {return "Spring 2015"} else if (d.semester == 4) {return "Fall 2016"} else if (d.semester == 5) {return "Spring 2016"} }) .attr("x", 5) .attr("y", function (d) { if (d.semester == 0) {return (d.semester * 100) + (d.semester * 20) + 26.5} if (d.semester == 1) {return (d.semester * 100) + (d.semester * 20) + 26.5} if (d.semester == 2) {return (d.semester * 100) + (d.semester * 20) + 26.5} else if (d.semester == 3) {return (d.semester * 100) + (d.semester * 20) + 6} else if (d.semester == 4) {return (d.semester * 100) + (d.semester * 20) - 32} else if (d.semester == 5) {return (d.semester * 100) + (d.semester * 20) - 30} }) .attr("fill", "black") svg.append("rect") .attr("x", 705) .attr("y", 250) .attr("width", 240) .attr("height", 295) .attr("stroke", "black") .attr("stroke-width", 3) .attr("fill", "white") svg.append("text") .text("Course Type") .attr("fill", "black") .attr("x", 780) .attr("y", 275) svg.append("text") .text("Biology") .attr("fill", "black") .attr("x", 720) .attr("y", 300) svg.append("rect") .attr("x", 870) .attr("y", 290) .attr("width", 50) .attr("height", 10) .attr("fill", "#1e9aff") .attr("stroke", "black") .attr("stroke-width", 2) svg.append("text") .text("Chemistry") .attr("fill", "black") .attr("x", 720) .attr("y", 350) svg.append("rect") .attr("x", 870) .attr("y", 340) .attr("width", 50) .attr("height", 10) .attr("fill", "#01e44c") .attr("stroke", "black") .attr("stroke-width", 2) svg.append("text") .text("Mathematics") .attr("fill", "black") .attr("x", 720) .attr("y", 400) svg.append("rect") .attr("x", 870) .attr("y", 390) .attr("width", 50) .attr("height", 10) .attr("fill", "#e40108") .attr("stroke", "black") .attr("stroke-width", 2) svg.append("text") .text("ISAT") .attr("fill", "black") .attr("x", 720) .attr("y", 450) svg.append("rect") .attr("x", 870) .attr("y", 440) .attr("width", 50) .attr("height", 10) .attr("fill", "#fda101") .attr("stroke", "black") .attr("stroke-width", 2) svg.append("text") .text("General Education") .attr("fill", "black") .attr("x", 720) .attr("y", 500) svg.append("rect") .attr("x", 870) .attr("y", 490) .attr("width", 50) .attr("height", 10) .attr("fill", "#fff01e" ) .attr("stroke", "black") .attr("stroke-width", 2) svg.append("text") .text("Cumulative GPA = 2.78") .attr("fill", "black") .attr("x", 745) .attr("y", 540) }) </script> </body>
https://d3js.org/d3.v4.min.js