timeline2 = {
const startY = makeDate("0800-01-01 BC").toJSDate();
const localEvents = wikidata_war.map(e => {
return {...e, start: makeDate(e.start).toJSDate(), end: makeDate(e.end).toJSDate()}
}).filter(e => e.end > startY);
//const localPoi = poi.filter(p => p.end > startY);
const ydomain = d3.sort(localEvents, e => e.start).map(e => e.label);
const tline = d3.select(Plot.plot({
marginLeft: 120,
width: width*.8,
height: 8000,
x: {domain: [startY, new Date("2040")]},
//color: {domain: ["war"], range: ["darkred"]},
y: {
axis: null,
domain: ydomain,
},
marks: [
// century bars
Plot.barX(centSpans.map(x=> x.map(makeDate)), {x1: d => d[0], x2: d=> d[1], fill: "#f7f7f7"}),
Plot.ruleX([makeDate("0000-01-01")]),
//Plot.ruleY(eras, {x1: "start", x2: "end", y: () => "Cold War", stroke: 'name'}),
Plot.barX(d3.sort(localEvents, e=> e.start), {x1: "start", x2: "end", y: "label", fill: "#f22"}),
Plot.text(localEvents.filter(e => e.type != "inner"), {
x: "start",
y: "label",
//fill: "label",
text: "label",
textAnchor: "end",
href: e => `https://en.wikipedia.org/wiki/${e.label.replace(" ", "_")}`,
dx: -6
}),
]
}));
tline
.selectAll("a")
.attr("target", "_blank");
return tline.node()
}
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.
