D3 Examples - Grade Visualization

xxxxxxxxxx
 
<!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>
​
    