chart = () => {
const svg = d3.create("svg")
.attr("class", "chart")
.attr("width", chartwidth + margin.left + margin.right)
.attr("height", chartheight + margin.top + margin.bottom);
svg.append("style").html(css);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
const rect = g.selectAll("rect")
.data(dataFunding)
.enter().append("rect")
.classed("highlight", d => d.technology === "Geothermal")
.attr("width", d => x(d.funding))
.attr("height", barHeight)
.attr("y", d => y(d.technology));
const labelText = g.selectAll(".label")
.data(dataFunding)
.enter().append("text")
.attr("class", "label")
.attr("dy", y.bandwidth() / 2 + 2)
.attr("x", -margin.left)
.attr("y", d => y(d.technology))
.classed("highlight", d => d.technology === "Geothermal")
.html((d, i) => labelFormat(d.technology, i))
.selectAll("tspan")
.attr("x", -margin.left)
.attr("dy", (_, i) => i * 16);
const valueText = g.selectAll(".value")
.data(dataFunding)
.enter().append("text")
.attr("class", "value")
.attr("dx", 5)
.attr("dy", y.bandwidth() / 2 + 2)
.attr("x", d => x(d.funding))
.attr("y", d => y(d.technology))
.text(d => valueFormat(d.funding))
.classed("highlight", d => d.technology === "Geothermal")
return svg.node();
}