radiusBarChart = {
const margin = {top: 20, right: 30, bottom: 40, left: 90},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const x = d3.scaleBand()
.range([0, width])
.domain(data.map(d => d.name))
.padding(0.2);
svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.radius)])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
svg.selectAll("mybar")
.data(data)
.enter()
.append("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.radius))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.radius))
.attr("fill", "#69b3a2");
return svg.node();
}