Public
Edited
Jun 23, 2020
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
height = (weight, bmi) => {
return Math.sqrt(weight / bmi);
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more