chart = {
const svg = d3.create("svg")
.attr("height", height)
.attr("width", width)
function draw1() {
const monthKeys = _.uniq(data.map(d => d.Month))
const max = d3.max(data, d => d.Length)
const xScale = d3.scaleBand()
.domain(monthKeys)
.range([0, width])
.padding(0.3);
const rScale = d3.scaleSqrt().domain([0, max]).range([0, 8])
const forceSimulation = d3.forceSimulation(data)
.force('forceX', d3.forceX().strength(2).x(d => xScale(d.Month)))
.force('forceY', d3.forceY().strength(0.2).y(height/2))
.force('collide', d3.forceCollide(d => rScale(d.Length) + 0.5))
const g = svg.selectAll(".nodes1")
.data(forceSimulation.nodes())
.join('g')
.attr('class', 'nodes1')
.call(g => g
.append('circle')
.attr("r", d => rScale(d.Length))
.style("fill", "#bdbdbd"));
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
const xAxis =
svg.append("g")
.call(xAxisGenerator)
.style("transform", `translate(-30px, ${height*0.6}px`)
.selectAll('text')
.attr('text-anchor', 'middle')
.style('font-size', '14px')
.attr('font-family', 'Freight')
forceSimulation
.on("tick", () => g.attr('transform', d => `translate(${ d.x },${ d.y })`) )
svg.selectAll('.domain')
.remove()
svg.selectAll('line')
.remove()
}
draw1()
return svg.node()
}