Updated visualizacion.js

src/visualizacion.js

@@ -31,7 +31,7 @@ const consolaColores = {
  * Si una desarrolladora no está dentro del diccionario tomará un color gris claro #BBBBBB
  * En este diccionario solo aparecen los 20 desarrolladores que más aparecen
  */
-const developerColors = {
+const developerColores = {
     Capcom:             "#C75450",
     TelltaleGames:      "#6A9CCB",
     EASports:           "#65A879",
@@ -54,25 +54,46 @@ const developerColors = {
 };
 
 
-const width = 700;
-const height = 700;
+const width = 800;
+const height = 600;
 const margin_x = 32;
 const margin_y = 20;
-
+const svg = d3.select('body').append('svg')
+    .attr("width", width + 2 * margin_x).attr("height", height + 2 * margin_y)
+    .append('g').attr("transform", `translate(${margin_x},${margin_y})`);
 
 function createAxis(data) {
-    const x = d3.scaleLinear().domain([0, data.length]).range([0, width]);
-    const y = d3.scaleLinear().domain([0, 100]).range([height, 0]);
-    const xAxis = d3.axisBottom(x).ticks(5);
-    const yAxis = d3.axisLeft(y).ticks(5);
-    const svg = d3.select('body').append('svg')
-        .attr("width", width + 2 * margin_x).attr("height", height + 2 * margin_y)
-        .append('g').attr("transform", "translate(" + margin_x + "," + margin_y + ")");
-    svg.append("g").attr("class", "xAxis").attr("transform", "translate(0," + height + ")").call(xAxis);
+    let min_x = 10;
+    let max_x = 0;
+    let min_y = 10;
+
+
+    for (const elem of data) {
+        if (elem["user-score"] < min_x) min_x = elem["user-score"];
+        if (elem["user-score"] > max_x) max_x = elem["user-score"];
+        if (elem["score"] < min_y)      min_y = elem["score"];
+    }
+
+    const x = d3.scaleLinear().domain([max_x, min_x]).range([0, width]);
+    const y = d3.scaleLinear().domain([min_y, 10]).range([height, 0]);
+    const xAxis = d3.axisBottom(x).ticks(10);
+    const yAxis = d3.axisLeft(y).ticks(10);
+
+    svg.append("g").attr("class", "xAxis").attr("transform", `translate(0,${height})`).call(xAxis);
     svg.append("g").attr("class", "yAxis").call(yAxis);
 }
 
 d3.csv('files/games-data.csv').then((data) => {
+    
+    
+
+    data.forEach(d => {
+        d["user-score"] = +d["user-score"];
+        d["score"] = +d["score"] / 10; 
+        // Los datos estan entre 0 y 100, asi que normalizo a entre 0 y 10
+        d["critics"] = +d["critics"];
+    })
+
     createAxis(data);
 });