Se visualiza de forma sencilla un ejemplo de la visualizacion.

Falta añadir interactividad con el usuario y una mejor representacion de los colores.

src/visualizacion.js

@@ -54,7 +54,7 @@ const developerColores = {
 };
 
 
-const width = 800;
+const width = 1000;
 const height = 600;
 const margin_x = 32;
 const margin_y = 20;
@@ -62,39 +62,60 @@ 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) {
-    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);
+function createAxis(data) {
 
-    svg.append("g").attr("class", "xAxis").attr("transform", `translate(0,${height})`).call(xAxis);
-    svg.append("g").attr("class", "yAxis").call(yAxis);
+    
 }
-
+/**
+ * data {@type List} 
+ */
 d3.csv('files/games-data.csv').then((data) => {
     
-    
-
     data.forEach(d => {
-        d["user-score"] = +d["user-score"];
+        d["user score"] = +d["user score"];
+        if(!d["user score"]) d["critics"] = -14;
         d["score"] = +d["score"] / 10; 
         // Los datos estan entre 0 y 100, asi que normalizo a entre 0 y 10
         d["critics"] = +d["critics"];
-    })
+        d["users"] = +d["users"];
+    });
 
-    createAxis(data);
+    const xScale = d3.scaleLinear().domain(
+        [0, d3.max(data, d => d["user-score"]) || 10]
+    ).range([0, width]);
+    const yScale = d3.scaleLinear().domain([0, 10]).range([height, 0]);
+    const xAxis = d3.axisBottom(xScale).ticks(10);
+    const yAxis = d3.axisLeft(yScale).ticks(10);
+
+    const radiusScale = d3.scaleSqrt().range([5, 20])
+        .domain([0, d3.max(data, d => d["critics"]) || 1]);
+
+    svg.append("g").attr("class", "xAxis").attr("transform", `translate(0,${height})`).call(xAxis);
+    svg.append("g").attr("class", "yAxis").call(yAxis);
+    let elegibleData = data.sort((a, b) => {
+        return (b["critics"] + b["users"]) - (a["critics"] + a["users"])
+    }).slice(0, 50);
+    
+    svg.selectAll("circle")
+        .data(elegibleData)
+        .enter()
+        .append("circle")
+        .attr("cx", d => xScale(d["user score"]))
+        .attr("cy", d => yScale(d["score"]))
+        .attr("r",  d => radiusScale(d["critics"]))
+        .attr("fill", d => consolaColores[d["platform"]])
+        .attr("stroke", "#000000")
+        .attr("stroke-width", 1)
+        .append("title")
+        .text(d => `${d.name}\nPlataforma: ${d.platform}\n` + 
+            `Desarrollador: ${d.developer}\nJugadores: ${d.players}`)
+
+    
+
+
+    
 });