chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-100, -100, width + 200, height + 200]);
svg.append("g").attr("transform", "translate(30, 0)")
.call(d3.axisLeft().scale(yScale))
svg.append("g").attr("transform", "translate(0, 480)")
.call(d3.axisBottom().scale(xScale))
svg.selectAll("rect")
.data(pricerange_count)
.join(enter => enter.append("rect"))
.attr("x", d => xScale(d.key))
.attr("y", d => yScale(d.value))
.attr("fill", "steelblue")
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(0) - yScale(d.value))
const xlabel = svg
.append("text")
.attr("class", "chart_title")
.attr("x", width / 2)
.attr("y", height + 50)
.text(`Price Range Ranking`)
.style("text-anchor", "middle");
const ylabel = svg
.append("text")
.attr("y", margin.left / 2 - 50)
.attr("x", -250)
.text(`Frequency`)
.attr('transform', "rotate(-90)")
.style("text-anchor", "middle");
return svg.node()
}