diff --git a/src/visualizacion.html b/src/visualizacion.html index 85661f4539ecc5a87d2d6d002af6179d2caad14b..ca75922469138af4248f71b86a1b254a4919342f 100644 --- a/src/visualizacion.html +++ b/src/visualizacion.html @@ -12,8 +12,5 @@ <!-- En esta seccion la leyenda --> <!-- Interaccion con D3 para modificar HTML aqui --> </div> - <svg> - - </svg> </body> </html> \ No newline at end of file diff --git a/src/visualizacion.js b/src/visualizacion.js index c73bab2187c447b0870292a81b42035d8fced804..de222dd0165d6150fb6bb0fe28f11108567c2106 100644 --- a/src/visualizacion.js +++ b/src/visualizacion.js @@ -29,6 +29,7 @@ const consolaColores = { /** * Diccionario de correspondencia de una desarrolladora con su color correspondiente. * 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 = { Capcom: "#C75450", @@ -53,20 +54,31 @@ const developerColors = { }; +const width = 700; +const height = 700; +const margin_x = 32; +const margin_y = 20; + + +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); + svg.append("g").attr("class", "yAxis").call(yAxis); +} d3.csv('files/games-data.csv').then((data) => { - let set = []; - let count = {}; - for (let i = 0; i < data.length; i++) { - let options = data[i].developer.split(','); - for(let option of options){ - if(count[option]) count[option]++; - else count[option] = 1; - } - } + createAxis(data); +}); + + + + + - const pares = Object.entries(count); - pares.sort(([, a], [, b]) => b - a); - const claves = pares.map(([clave]) => clave); -}) \ No newline at end of file