bar chart d3 circles under the bars

Question

I need to put circles under each column of my bar graph like this:

I have managed to make the ends of the bars of each one round, but I don't know how I can place each circle under each bar

This would be my code

// set the dimensions and margins of the graph
var margin = {
    top: 10,
    right: 30,
    bottom: 20,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 250 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3
  .select("#my_chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
var data = [{
    group: "0",
    Nitrogen: "10"
  },
  {
    group: "1",
    Nitrogen: "30"
  },
  {
    group: "2",
    Nitrogen: "50"
  },
];
data.columns = ["group", "Nitrogen"];

// List of subgroups = header of the csv files = soil condition here
var subgroups = data.columns.slice(1);
console.log(data);
// List of groups = species here = value of the first column called group -> I show them on the X axis
var groups = d3
  .map(data, function(d) {
    return d.group;
  })
  .keys();

// Add X axis
var x = d3
  .scaleBand()
  .domain(groups)
  .range([0, width])
  .padding([0.2]);
svg
  .append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).tickSize(0))
  .attr("font-size", "0.9rem")
  .attr("font-weight", "400")
  .attr("color", "lightgray");

// Add Y axis
var y = d3
  .scaleLinear(25)
  .domain([0, 75])
  .range([height, 0])

;

svg
  .append("g")
  .call(d3.axisLeft(y))
  .attr("font-size", "0.9rem")
  .attr("font-weight", "400")
  .attr("color", "lightgray")
  .attr("style", "transform: translate(0px, -12px);");

// Another scale for subgroup position?
var xSubgroup = d3
  .scaleBand()
  .domain(subgroups)
  .range([0, x.bandwidth()])
  .padding([0.05]);

// color palette = one color per subgroup
var color = d3.scaleOrdinal().domain(subgroups).range(["#93B6F8"]);

// gridlines in y axis function
function make_y_gridlines() {
  return d3.axisLeft(y).ticks(10);
}

// add the Y gridlines
svg
  .append("g")
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat(""));

// Show the bars
svg
  .append("g")
  .selectAll("g")
  // Enter in data = loop group per group
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + x(d.group) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return subgroups.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr(
    "style",
    "padding-bottom: 8px; transform: translate(0px, -6px);"
  )
  .attr("x", function(d) {
    return xSubgroup(d.key);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", xSubgroup.bandwidth())
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .attr("fill", function(d) {
    return color(d.key);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="my_chart"></div>

and I show it this way:

And I would also like if it is not too much trouble, someone explains to me how to make the bars have a maximum width

Answer 1

Consider the following. I've taken the code from this example, kept it into the same structure, but reduced the bar height a bit and added circles on the bottom:

var dataString = `salesperson,sales
Bob,33
Robin,12
Anne,41
Mark,16
Joe,59
Eve,38
Karen,21
Kirsty,25
Chris,30
Lisa,47
Tom,5
Stacy,20
Charles,13
Mary,29`;

// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
  .range([0, width])
  .padding(0.5);
var y = d3.scaleLinear()
  .range([height, 0]);

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

var data = d3.csvParse(dataString);

// format the data
data.forEach(function(d) {
  d.sales = +d.sales;
});

// Scale the range of the data in the domains
x.domain(data.map(function(d) {
  return d.salesperson;
}));
y.domain([0, d3.max(data, function(d) {
  return d.sales;
})]);

// append the rectangles for the bar chart
var barGroup = svg.selectAll(".bar")
  .data(data)
  .enter()
  // Not rect, but g, we create one group per rect+circle combination
  .append("g")
  .attr("class", "bar");

barGroup
  .append("rect")
  .attr("x", function(d) {
    return x(d.salesperson);
  })
  .attr("width", x.bandwidth())
  .attr("y", function(d) {
    return y(d.sales);
  })
  .attr("rx", 5) // Some rounded corners
  .attr("height", function(d) {
    // Subtract a little bit of height,
    // because we need to draw the circles underneath
    // return height - y(d.sales);
    return height - x.bandwidth() - y(d.sales);
  });

var circlePadding = 4; //pixels
barGroup
  .append("circle")
  .attr("cx", function(d) {
    return x(d.salesperson) + x.bandwidth() / 2;
  })
  .attr("cy", function(d) {
    return height - x.bandwidth() / 2;
  })
  .attr("r", x.bandwidth() / 2 - circlePadding);

// add the x Axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
  .call(d3.axisLeft(y));

.bar {
  fill: steelblue;
}

<script src="https://d3js.org/d3.v4.min.js"></script>