D3 Examples - Tarea3

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.dot {
  stroke: #000;
}
  </style>
</head>
​
<body>
  <script>
    
var grades = [  {"code":23802620, "grade":4.85},    {"code":23802825, "grade":4.865},
    {"code":23801894, "grade":3.24},    {"code":23802926, "grade":5},   {"code":23800661, "grade":3.19},    {"code":23800768, "grade":3.98},    {"code":23800972, "grade":4.89},
    {"code":23801922, "grade":3.73},    {"code":23805498, "grade":4.795},   {"code":23805913, "grade":4.85},    {"code":23800311, "grade":2.81},    {"code":23806395, "grade":4.72},
    {"code":23808850, "grade":3.85},    {"code":23802872, "grade":2.16},    {"code":23802105, "grade":4.715},   {"code":23809880, "grade":4.92},    {"code":23802056, "grade":4.48},
    {"code":23807897, "grade":5.2}, {"code":23807916, "grade":5},   {"code":23801962, "grade":3.62},    {"code":23808246, "grade":4.61},    {"code":23802600, "grade":0.11},
    {"code":23808311, "grade":4.7}]; // datos
    
var margin = {top: 20, right: 20, bottom: 30, left: 40},// se establecen las margenes
    width = 960 - margin.left - margin.right, // que tan ancho va a ser SVG
    height = 500 - margin.top - margin.bottom; // que tan alto  va a ser SVG
​
var x = d3.scale.linear() // 
    .range([0, width]);
        
    // Feel free to change or delete any of the code you see in this editor!
var xAxis = d3.svg.axis(); // crear el eje en el que se va a trabajar
    xAxis.scale(x) // con que escala se va a trabajar por defecto esta abajo
    xAxis.orient("bottom"); // donde van las letras
    
    // Todo lo anterior se puede resumir en 
    //var xAxis = d3.svg.axis()
                  //.scale(xScale)
                  //.orient("bottom");
    
var svg = d3.select("body").append("svg") // agregar componente svg
    .attr("width", width + margin.left + margin.right) // ancho del svg
    .attr("height", height + margin.top + margin.bottom) // altura del svg
   .append("g") // se utiliza para agrupar figuras SVG en un grupo
                                //(se maneja como una unidad)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
    // mueve el grupo svg las margenes necesarias
​
x.domain(d3.extent(grades, function(d) { return d.grades; })).nice();
 
    
    //TEXTO ORIGINAL
svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .style("font-size", 36)
      .style("font-family", "monospace")
​
  </script>
</body>
​
    