chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bandajdust = 0.8
const bars = svg.append("g")
.attr("fill-opacity", 0.5)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.lower_bound))
.attr("y", (d, i) => y(i))
.attr("ry",y.bandwidth()*bandajdust/2)
.attr("xy",y.bandwidth()*bandajdust/2)
.attr("height", y.bandwidth()*bandajdust)
.attr("width", d => -x(d.lower_bound)+x(d.upper_bound))
.attr("fill", d => (d.ml > 1) ? negativeColor : positiveColor)
.on("mousemove click touchmove", function() {
d3.select(this).attr("fill-opacity", 1)
})
.on("mouseout", function() {
d3.select(this).attr("fill-opacity", 0.5)
})
const circles = svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.ml))
.attr("cy", (d, i) => y(i)+y.bandwidth()*bandajdust/2)
.attr("fill", "white")
.attr("stroke", "#ccc")
.attr("r", y.bandwidth()*bandajdust/2)
const states = svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.text(d => d.state)
.attr("transform", (d,i) => `translate(${x(d.ml)-10} ${y(i)+15})`)
.attr("text-anchor", "start")
.style("font", "12px sans-serif")
.attr("fill", d => (d.ml > 1) ? negativeColor: positiveColor)
svg.append("g")
.call(xAxis);
return svg.node();
}