updated bar chart labels

Lelseac · Dec 2, 2024 · c9372a6 · c9372a6
1 parent 39754b3
commit c9372a6
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/projects/d3_bar_chart/index.html b/projects/d3_bar_chart/index.html
@@ -51,17 +51,40 @@
                 .attr("height", d => scaleY.bandwidth())
                 .attr("fill", "red");
 
+            // X axis (bottom)
             svg.append("g")
-                .attr("transform",`translate(${margin.left},${height - margin.bottom})` )
+                .attr("transform",`translate(${margin.left},${height - margin.bottom})` ) //moves it in place
                 .call(d3.axisBottom(scaleX))
                 .selectAll("text")
-                // .attr("transform", "rotate(-60)")
+                // .attr("transform", "rotate(-60)") //Rotates the bottom labels if you need it
                 .attr("text-anchor", "middle");
 
 
+            // this is the x axis label 
+            svg.append("g")
+               .attr("transform",`translate(${(width-margin.left)/2 + margin.left},${height - margin.bottom + 35})` )
+               .append("text")
+               .attr("text-anchor", "middle")
+               .attr("font-size", "12px")
+               .attr("font-family", "helvetica")
+               .attr("font-weight", 600)
+               .text("Number of Deaths")
+
+
             svg.append("g")
                 .attr("transform",`translate(${margin.left},${margin.top})` )
                 .call(d3.axisLeft(scaleY));
+
+            //this is the y axis label 
+            svg.append("g")
+               .attr("transform",`translate(35,${(height - margin.bottom)/2})` )
+               .append("text")
+               .attr("transform", "rotate(-90)")
+               .attr("text-anchor", "middle")
+               .attr("font-size", "12px")
+               .attr("font-family", "helvetica")
+               .attr("font-weight", 600)
+               .text("Cause of Death")
         })
 
         //how do i add a title and label fo x and y axis? how do I upload to github?