Ejes funcionales

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

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