2b:null 2c:["$","title",null,{"children":"How to visualize timeline of a Wiki article? | cadasa | Observable"}] 31:T5a4,Automatic generation of the timeline — a graphical representation of a time period, on which important events are marked — from a Wikipedia article is a fascinating idea and very useful in quickly grasping the historical perspective. This notebook creates a well formatted timeline from any Wikipedia article using [**WinkNLP’s**](https://github.com/winkjs/wink-nlp) API and named entity detection feature. The approach is outlined below: 1. Fetch the article contents and convert them into a [**WinkNLP’s**](https://github.com/winkjs/wink-nlp) [document](https://winkjs.org/wink-nlp/document.html). 1. Iterate through detected [entities](https://winkjs.org/wink-nlp/entities.html) and only filter DATEs. 1. Use [shapes](https://winkjs.org/wink-nlp/its-as-helper.html) of dates to convert them into standard Unix time. 1. Using [parentSentence()](https://winkjs.org/wink-nlp/parent-sentence.html) API, extract the sentence containing the date; also [markup()](https://winkjs.org/wink-nlp/markup.html) the date to highlight it in the corresponding sentence. 1. Collect each unix time and sentence pair in an array and sort them on Unix time. 1. Converts this array into a well formatted timeline using Observable capabilities along with some CSS. The above approach is realized in less than **30** lines of code. The code may take _couple of seconds to draw_ the timeline as the article is fetched in realtime from the Wikipedia.32:T63b,timeLine = { const response = await fetch( `https://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=${WikiArticleTitle}&explaintext=1&formatversion=2&format=json&origin=*` ); const body = await response.json(); const text = body.query.pages[ 0 ].extract; var doc = nlp.readDoc( text ); var timeline = []; doc .entities() .filter( ( e ) => { var shapes = e.tokens().out( its.shape ); // We only want dates that can be converted to an actual // time using new Date() return ( e.out( its.type ) === 'DATE' && ( shapes[ 0 ] === 'dddd' || ( shapes[ 0 ] === 'Xxxxx' && shapes[ 1 ] === 'dddd' ) || ( shapes[ 0 ] === 'Xxxx' && shapes[ 1 ] === 'dddd' ) || ( shapes[ 0 ] === 'dd' && shapes[ 1 ] === 'Xxxxx' && shapes[ 2 ] === 'dddd' ) || ( shapes[ 0 ] === 'dd' && shapes[ 1 ] === 'Xxxx' && shapes[ 2 ] === 'dddd' ) || ( shapes[ 0 ] === 'd' && shapes[ 1 ] === 'Xxxxx' && shapes[ 2 ] === 'dddd' ) || ( shapes[ 0 ] === 'd' && shapes[ 1 ] === 'Xxxx' && shapes[ 2 ] === 'dddd' ) ) ); }) .each( ( e ) => { e.markup(); timeline.push({ date: e.out(), unixTime: new Date( e.out() ).getTime() / 1000, sentence: e.parentSentence().out( its.markedUpText ) }) }); return timeline.sort( ( a, b ) => a.unixTime - b.unixTime ) }33:T76e,34:[] 2f:{"id":"10893ef2e133dea6","slug":null,"title":"How to visualize timeline of a Wiki article?","thumbnail":"1067dd5e66be4222d8be8ccea4d87636c4871b1fab682f5e3be7da82dbd5bc97","access_level":"public","create_time":"$D2022-11-29T22:00:20.001Z","update_time":"$D2023-08-23T08:06:11.252Z","view_time":null,"first_public_time":"$D2023-08-23T07:59:46.508Z","has_unpublished_edits":null,"fork":{"id":"248a85ae4c3f9fe6","slug":"how-to-visualize-timeline-of-a-wiki-article","title":"How to visualize timeline of a Wiki article?","owner":{"id":"062de6e3e5a0d590","login":"winkjs","name":"WinkJS"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f2c21786e0c9f50c","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":"starter_2024"},"version":255,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d335f8179e5150bf","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":null}],"members":[{"type":"individual","id":"d335f8179e5150bf","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"How to visualize timeline of a Wiki article?","cells":[{"id":0,"value":"# How to visualize timeline of a Wiki article?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"viewof WikiArticleTitle = Inputs.text({\n submit: true,\n label: \"Wiki article title:\",\n value: \"J. Robert Oppenheimer\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n let htmlElements = [ `

${WikiArticleTitle}

` ];\n let lastYear = '';\n timeLine.forEach( ( t ) => {\n if ( isNaN( t.date ) ) {\n className = 'big';\n } else {\n var century = t.date[ 0 ]+ ''+ t.date[ 1 ];\n var className = '';\n if ( lastYear !== century ) {\n lastYear = century;\n className = ' big'\n }\n }\n\n htmlElements.push(`\n

${t.date}

${t.sentence}

\n `);\n });\n\n htmlElements.push( '

' );\n return html`${htmlElements.join( '' )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"---\n### Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"**`// Build an array containing pairs of sentence & Unix time,`**
\n**`// which is sorted on Unix time.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"\n**`// Title of Wikipedia Article, for example \"New York City\"; beware`**
\n**`// some of these articles can create extraordinarily long timelines!`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"WikiArticleTitle2 = '2022 United Nations Climate Change Conference';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"**`// Load winkNLP.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"winkNLP = (await import('https://cdn.skypack.dev/wink-nlp')).default;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"**`// Load winkNLP's language model.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"model = (await import('https://cdn.skypack.dev/wink-eng-lite-web-model')).default;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"**`// Instantiate winkNLP using the language model.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"nlp = winkNLP( model );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"**`// Obtain winkNLP's its helper.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"its = nlp.its;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"**`// CSS`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"---\n### About\n[**WinkNLP**](https://winkjs.org/) is a **developer friendly** JavaScript library for Natural Language Processing (NLP). It can easily process large amount of raw text at speeds over **650,000 tokens/second** on a M1 Macbook Pro in both browser and Node.js environments. It even runs smoothly on a low-end smartphone's browser. \n\nIt is built ground up with a lean code base that has [**no external dependency**](https://snyk.io/test/github/winkjs/wink-nlp?tab=dependencies). A test coverage of [**~100%**](https://coveralls.io/github/winkjs/wink-nlp?branch=master) and compliance with the [**Open Source Security Foundation best practices**](https://bestpractices.coreinfrastructure.org/en/projects/6035) make winkNLP the ideal tool for building production grade systems with confidence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"