working

BabaVasss · May 4, 2024 · e085fc0 · e085fc0
1 parent ee2b869
commit e085fc0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/4_2_mapbox/gender.js b/4_2_mapbox/gender.js
@@ -3,11 +3,10 @@ const width = window.innerWidth *.8 ;
 const height = 400;
 const margin = 20;
 
-d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then(data => {
+d3.csv('../data/MoMa_Gender.csv', d3.autoType).then(data => {
     console.log("data",data)
 
-
-    /* SCALES */
+  /* SCALES */
 
     //first add svg to container
     const svg = d3
@@ -26,9 +25,9 @@ d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then(data => {
 
     //add yscale for the bargraph // the error is in the yScale
     const yScale = d3.scaleBand()
-      .domain(data.map(d => d.Nationality))
+      .domain(data.map(d => d.Gender))
       .range([height - margin, margin]) 
-      .padding(0.1)
+      .padding(0.2)
 
 
 
@@ -53,9 +52,13 @@ d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then(data => {
       .join("rect")
       .attr("class", "bar")
       .attr("x", 0 + margin)
-      .attr("y", d => yScale(d.Nationality))
+      .attr("y", d => yScale(d.Gender))
       .attr("width", d => xScale(d.Count))
       .attr("height", yScale.bandwidth())
+      .style("fill", "purple")
 
 
-  });
+  });
+
+
+
diff --git a/4_2_mapbox/index.html b/4_2_mapbox/index.html
@@ -13,5 +13,8 @@ <h4> Introduction | Abstract | Purpose</h4>
     <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
     <script src="../lib/d3.js"></script>
     <script src="main.js"></script>
+
+    <div id="container"></div>
+    <script src="gender.js"></script>
   </body>
 </html>
diff --git a/4_2_mapbox/main.js b/4_2_mapbox/main.js
@@ -1,6 +1,6 @@
 //constants and globals for all graphs
-const width = window.innerWidth * 0.9,
-  height = window.innerHeight * 0.7;
+//const width = window.innerWidth * 0.9,
+  //height = window.innerHeight * 0.7;
 
 //Map Building
 mapboxgl.accessToken = 'pk.eyJ1IjoiYWtlZW1zaGVwaGVyZCIsImEiOiJjbHZianY3am4wOXZpMmpsNDR0enNwbWtyIn0.W-Bc7R2RIh11qf5f0EbA8A';