chart = {
const margin = { top: 20, right: 10, bottom: 40, left: 30 };
const w = Math.min(width, 700);
const h = w / 1.618;
const svg = DOM.svg(w, h);
const x = d3
.scaleLinear()
.domain([30, 140])
.rangeRound([margin.left, w + margin.left]);
const y = d3
.scaleLinear()
.domain([1.3, 2])
.rangeRound([h - margin.bottom, margin.top]);
let g = d3.select(svg).append('g');
drawBMI(0.1, 18.5, "#e5ffef", "Underweight", 55);
drawBMI(18.5, 25, '#88eaac', "Normal", 88);
drawBMI(25, 30, '#ffbb63', "Overweight", 110);
drawBMI(30, 99.9, '#ff7c69', "Obese", 130);
g.append('g')
.attr('transform', `translate(0, ${h - margin.bottom})`)
.call(d3.axisBottom(x))
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'end')
.attr('x', w - 20)
.attr('y', 0)
.attr('dy', -12)
.text("Weight (kg)");
g.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).ticks(5))
.append('text')
.attr('fill', 'black')
.attr('transform', 'rotate(-90)')
.attr('y', 20)
.attr('x', -20)
.text('Height (meters)');
function drawBMI(minBMI, maxBMI, color, label, pos) {
const area = d3
.area()
.x(d => x(d))
.y0(d => Math.min(h - margin.bottom, y(height(d, minBMI))))
.y1(d => Math.min(h - margin.bottom, y(height(d, maxBMI))));
g.append('path')
.datum(x.ticks(100))
.attr('fill', color)
.attr('d', area);
g.append('text')
.attr('font-family', 'sans-serif')
.attr('font-size', 11)
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.attr('x', x(pos))
.attr('y', 20)
.text(label);
}
return svg;
}