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, i) => x(i))
.attr("y", d => y(d.upper_bound))
.attr("ry",x.bandwidth()*bandajdust/2)
.attr("xy",x.bandwidth()*bandajdust/2)
.attr("height", d => y(d.lower_bound)-y(d.upper_bound))
.attr("width", x.bandwidth()*bandajdust)
.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, i) => x(i)+x.bandwidth()*bandajdust/2)
.attr("cy", d => y(d.ml))
.attr("fill", "white")
.attr("stroke", "#ccc")
.attr("r", x.bandwidth()*bandajdust/2)
const states = svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.text(d => d.state)
.attr("transform", (d,i) => "translate("+x(i)+" "+y(d.ml)+")")
.attr("text-anchor", "start")
.style("font", "12px sans-serif")
.attr("dx", ".30em")
.attr("dy", ".30em")
.attr("fill", d => (d.ml > 1) ? negativeColor: positiveColor)
states.append("title")
.attr("class", "tootlip")
.text(d => `state: ${d.state}\nupper: ${d.upper_bound}\nmean: ${d.ml}\nlower: ${d.lower_bound}`)
svg.append("g")
.call(yAxis);
return svg.node();
}