Public
Edited
Mar 7, 2023
{
let htmlElements = [
`<h1 class="article-name">${
text || "text"
}</h1><div class="timeline"><div class="entries">`
];
let lastYear = "";
if (timeLine !== undefined && timeLine.length === 0)
return html`<h3 class="article-name">Article not found, please enter a valid title</h3>`;
timeLine.forEach((t) => {
if (isNaN(t.date)) {
className = "big";
} else {
var century = t.date[0] + "" + t.date[1];
var className = "";
if (lastYear !== century) {
lastYear = century;
className = " big";
}
}
htmlElements.push(`
<div class="entry">
<div class="title ${className}">${t.date}</div>
<div class="body">${t.sentence}</div>
</div>
`);
});
htmlElements.push("</div></div>");
return html`${htmlElements.join("")}`;
}
findBestMatch = function (ri, e) {
let index = null;
if (ri.query.searchinfo.totalhits === 0) return index;
if (e.out(its.type) === "simpleADJ" && !e.out(its.value).match(/^[A-Z]/))
return index;
// Extract normalized text of custom entity and split on spaces and rejoin on vertical bar to form regex.
const rgx = RegExp(e.out(its.normal).split(/\s+/).join("|"), "i");
for (let k = 0; k < ri.query.search.length; k += 1) {
const riqsk = ri.query.search[k];
if (riqsk.title.match(rgx) || riqsk.snippet.match(rgx))
return { pageid: riqsk.pageid, title: riqsk.title };
}
return null;
}
searchAllTerms = async function (terms) {
const allResults = [];
for (var i = 0; i < terms.length; i += 1) {
Promises.delay(30); // Be nice to Wikipedia
const r = await search(terms[i]);
allResults.push(r);
}
return allResults;
}
search = async function (term) {
const url = `https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&list=search&srsearch=${term}`;
const response = await fetch(url); // d3.json
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
(isDateTime["DATE"] = true)
(isDateTime["TIME"] = true)
doc = nlp.readDoc(text)
winkNLP = (await import("https://cdn.skypack.dev/wink-nlp")).default
model = (await import("https://cdn.skypack.dev/wink-eng-lite-web-model"))
.default
nlp = winkNLP(model)
its = nlp.its
as = nlp.as
<style>
.article-name {
text-align: center;
color: #6C307D;
background-color: white;
margin: 0 auto;
display: block;
}
mark {
background-color: #fc3;
}
.timeline {
max-height: 100vh;
margin: 0;
overflow: hidden;
margin-bottom: 100px;
}
.timeline:before {
content: '';
position: absolute;
top: 110px;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 4px;
background-color: #6C307D;
}
.timeline .entries {
width: calc(100% - 80px);
max-width: 800px;
margin: auto;
position: relative;
left: -5px;
}
.timeline .entries .entry {
width: calc(50% - 44px);
float: left;
padding: 20px;
clear: both;
text-align: right;
}
.timeline .entries .entry:not(:first-child) {
margin-top: -60px;
}
.timeline .entries .entry .title {
font-size: 18px;
margin-bottom: 4px;
position: relative;
color: #222;
font-weight: bold;
}
.timeline .entries .entry .title.big {
font-size: 24px;
}
.timeline .entries .entry .title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid #6C307D;
background-color: white;
border-radius: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -37px;
z-index: 1000;
}
.timeline .entries .entry .title.big:before {
width: 24px;
height: 24px;
-webkit-transform: translate(8px, -50%);
transform: translate(8px, -50%);
}
.timeline .entries .entry .timeline {
color: #aaa;
}
.timeline .entries .entry .timeline p {
line-height: 1.4em;
}
.timeline .entries .entry:nth-child(2n) {
text-align: left;
float: right;
}
.timeline .entries .entry:nth-child(2n) .title:before {
left: -27px;
}
.timeline .entries .entry:nth-child(2n) .title.big:before {
-webkit-transform: translate(-7px, -50%);
transform: translate(-7px, -50%);
}
</style>
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.
