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>