chart= {
const target= html`<svg viewBox="0 0 ${width} ${height}">`;
const svg= d3.select(target);
const g= svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate( ${margin.left}, ${margin.top})`);
g.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.top - margin.bottom })`)
.append("text")
.attr("class", "axisLabel")
.style("fill", "black")
.attr("transform", `translate( ${width - margin.left - margin.right}, 30)`)
.style("text-anchor", "end");
g.append("g")
.attr("class", "yAxis")
.append("text")
.attr("transform", `translate(10, -20)`)
.attr("class", "axisLabel")
.style("fill", "black")
.style("text-anchor", "middle");
g.select(".xAxis")
.call(d3.axisBottom(x));
g.select(".yAxis")
.call(d3.axisLeft(y));
g.selectAll(".bar")
.data(grouped_data)
.join("rect")
.attr("class", "bar")
.attr("x", grp => x(grp[0]))
.attr("width", x.bandwidth())
.attr("height", gr => iheight - y(gr[1].length))
.attr("y", grp => y(grp[1].length))
.style("fill", "blue");
g.selectAll(".value")
.data(grouped_data)
.join("text")
.attr("class", "value")
.attr("x", grp => x(grp[0] + x.bandwidth() / 2 ))
.attr("y", grp => y(grp[1].length ) - 10)
.text(gr => gr[1].length)
.style("fill", "black");
return target;
}