diff --git a/src/visualizacion.js b/src/visualizacion.js index de222dd0165d6150fb6bb0fe28f11108567c2106..d50aaf82bf0849dfc1e6f2405dc0c9325cb38611 100644 --- a/src/visualizacion.js +++ b/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); });