Public
Edited
Dec 7, 2022
Insert cell
Insert cell
data = FileAttachment("words-cleaned-arranged.json").json()
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
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();
}
Insert cell
render(["война", "путин", "говно"])
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