From 24502ba7f0dcecd8505f0d4fd606ed748830879f Mon Sep 17 00:00:00 2001
From: = <=>
Date: Tue, 3 Dec 2024 20:04:27 +0100
Subject: [PATCH] =?UTF-8?q?Se=20visualiza=20de=20forma=20sencilla=20un=20e?=
=?UTF-8?q?jemplo=20de=20la=20visualizacion.=20Falta=20a=C3=B1adir=20inter?=
=?UTF-8?q?actividad=20con=20el=20usuario=20y=20una=20mejor=20representaci?=
=?UTF-8?q?on=20de=20los=20colores.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/visualizacion.js | 67 +++++++++++++++++++++++++++++---------------
1 file changed, 44 insertions(+), 23 deletions(-)
diff --git a/src/visualizacion.js b/src/visualizacion.js
index d50aaf8..297cb1c 100644
--- a/src/visualizacion.js
+++ b/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}`)
+
+
+
+
+
});
--
GitLab