How to avoid bars in bar graph getting overlapped with legend - d3.js

Question

Below is the code which display 'grouped bars' using D3.
the graph also displays a legend at top-right corner.
Bars are overlapping the legend, so, How I can avoid legend getting overlapped with bars, no matter, whatsoever the height of the bars height are?
when I increase the field values, the bars are not growing too high, but they are still overlapping with legend.
var data = [
{
model_name: "f1",
field1: 19,
field2: 83,
},
{
model_name: "f2",
field1: 67,
field2: 200,
},
{
model_name: "f3",
field1: 200,
field2: 56,
},
];
var margin = { top: 30, right: 10, bottom: 10, left: 50 },
width = 500,
height = 300,
barPadding = 0.2,
axisTicks = { outerSize: 0 };
var svg = d3
.select("body")
.append("svg")
.attr("viewBox", [0, 0, width, height]);
var xScale0 = d3
.scaleBand()
.range([margin.left, width - margin.right])
.padding(barPadding);
var xScale1 = d3.scaleBand();
xScale0.domain(data.map((d) => d.model_name));
xScale1.domain(["field1", "field2"]).range([0, xScale0.bandwidth()]);
var yScale = d3
.scaleLinear()
.range([height - margin.top - margin.bottom, margin.top]);
yScale.domain([
0,
d3.max(data, (d) => (d.field1 > d.field2 ? d.field1 : d.field2)),
]);
var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
var yAxis = d3
.axisLeft(yScale)
.tickSize(0)
.tickFormat(function(d) {
return d + "%";
});
svg
.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
.call(xAxis);
svg
.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis)
.call((g) => g.select(".domain").remove());
var model_name = svg
.selectAll(".model_name")
.data(data)
.enter()
.append("g")
.attr("class", "model_name")
.attr("transform", (d) => `translate(${xScale0(d.model_name)},0)`);
model_name
.selectAll(".bar.field1")
.data((d) => [d])
.enter()
.append("rect")
.attr("class", "bar field1")
.style("fill", "skyblue")
.attr("x", () => xScale1("field1"))
.attr("y", (d) => yScale(d.field1))
.attr("width", xScale1.bandwidth())
.attr("height", (d) => {
return height - margin.bottom - margin.top - yScale(d.field1);
});
model_name
.selectAll(".bar.field2")
.data((d) => [d])
.enter()
.append("rect")
.attr("class", "bar field2")
.style("fill", "orange")
.attr("x", () => xScale1("field2"))
.attr("y", (d) => yScale(d.field2))
.attr("width", xScale1.bandwidth())
.attr("height", (d) => {
return height - margin.bottom - margin.top - yScale(d.field2);
});
var legend_symbol_width = 30;
var legend_symbol_height = 5;
var keys = ["title", "title"];
var color = d3
.scaleOrdinal()
.domain(keys)
.range(["skyblue", "orange"]);
var legend = svg
.append("g")
.attr("transform", "translate(" + (width - 20) + ",0)");
keys.forEach(function(key, i) {
var legendRow = legend
.append("g")
// seperating each row of a legend by y axis 20
.attr("transform", "translate(0, " + i * 20 + ")");
legendRow
.append("rect")
.attr("x", -150)
.attr("y", 10)
.attr("width", legend_symbol_width)
.attr("height", legend_symbol_height)
.attr("fill", color(i));
legendRow
.append("text")
.attr("x", -100)
.attr("y", 10 + legend_symbol_height * 1.4)
.style("text-transform", "capitalize")
.text(key);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 1

You only need to increase the value of the margin.top to, for example, 50. This gives more empty space on top of your bars, you there is enough space for the legend.
var data = [
{
model_name: "f1",
field1: 19,
field2: 83,
},
{
model_name: "f2",
field1: 67,
field2: 200,
},
{
model_name: "f3",
field1: 200,
field2: 56,
},
];
var margin = { top: 50, right: 10, bottom: 10, left: 50 },
width = 500,
height = 300,
barPadding = 0.2,
axisTicks = { outerSize: 0 };
var svg = d3
.select("body")
.append("svg")
.attr("viewBox", [0, 0, width, height]);
var xScale0 = d3
.scaleBand()
.range([margin.left, width - margin.right])
.padding(barPadding);
var xScale1 = d3.scaleBand();
xScale0.domain(data.map((d) => d.model_name));
xScale1.domain(["field1", "field2"]).range([0, xScale0.bandwidth()]);
var yScale = d3
.scaleLinear()
.range([height - margin.top - margin.bottom, margin.top]);
yScale.domain([
0,
d3.max(data, (d) => (d.field1 > d.field2 ? d.field1 : d.field2)),
]);
var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
var yAxis = d3
.axisLeft(yScale)
.tickSize(0)
.tickFormat(function(d) {
return d + "%";
});
svg
.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
.call(xAxis);
svg
.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis)
.call((g) => g.select(".domain").remove());
var model_name = svg
.selectAll(".model_name")
.data(data)
.enter()
.append("g")
.attr("class", "model_name")
.attr("transform", (d) => `translate(${xScale0(d.model_name)},0)`);
model_name
.selectAll(".bar.field1")
.data((d) => [d])
.enter()
.append("rect")
.attr("class", "bar field1")
.style("fill", "skyblue")
.attr("x", () => xScale1("field1"))
.attr("y", (d) => yScale(d.field1))
.attr("width", xScale1.bandwidth())
.attr("height", (d) => {
return height - margin.bottom - margin.top - yScale(d.field1);
});
model_name
.selectAll(".bar.field2")
.data((d) => [d])
.enter()
.append("rect")
.attr("class", "bar field2")
.style("fill", "orange")
.attr("x", () => xScale1("field2"))
.attr("y", (d) => yScale(d.field2))
.attr("width", xScale1.bandwidth())
.attr("height", (d) => {
return height - margin.bottom - margin.top - yScale(d.field2);
});
var legend_symbol_width = 30;
var legend_symbol_height = 5;
var keys = ["title", "title"];
var color = d3
.scaleOrdinal()
.domain(keys)
.range(["skyblue", "orange"]);
var legend = svg
.append("g")
.attr("transform", "translate(" + (width - 20) + ",0)");
keys.forEach(function(key, i) {
var legendRow = legend
.append("g")
// seperating each row of a legend by y axis 20
.attr("transform", "translate(0, " + i * 20 + ")");
legendRow
.append("rect")
.attr("x", -150)
.attr("y", 10)
.attr("width", legend_symbol_width)
.attr("height", legend_symbol_height)
.attr("fill", color(i));
legendRow
.append("text")
.attr("x", -100)
.attr("y", 10 + legend_symbol_height * 1.4)
.style("text-transform", "capitalize")
.text(key);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>