function render(words) {
const margin = {
top: 10,
right: 10,
bottom: 30,
left: 25
};
const height = width * 0.5;
const svg = d3.select(DOM.svg(width, height));
const x = d3
.scaleTime()
.domain(d3.extent(data.map((d) => new Date(`${d.month}-01`))))
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([d3.max(data, (d) => d.position), d3.min(data, (d) => d.position)])
.range([height - margin.bottom, margin.top]);
const xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
const yAxis = (g) =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
words.forEach((word, i) => {
const line = d3
.line()
.x((d) => x(new Date(`${d.month}-01`)))
.y((d) => y(d.position))
.curve(d3.curveMonotoneX);
const g = svg.append("g");
g.append("path")
.datum(data.filter((d) => d.word === word))
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke", google10c(i))
.attr("d", line);
});
return svg.node();
}