diff --git a/projects/d3_bar_chart/index.html b/projects/d3_bar_chart/index.html index 403adbb..7aff4fd 100644 --- 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?