Tarea3

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

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js