3e:null 3f:["$","title",null,{"children":"How to visualize timeline of a Wiki article? | Fred Lu | Observable"}] 45:T52f,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.46:T6e4,timeLine = { const response = await fetch( `https://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=${WikiArticleTitle || '2022 United Nations Climate Change Conference'}&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(); let eventDate = e.out(); if ( isNaN( eventDate[ 0 ] ) ) eventDate = '1 ' + eventDate; timeline.push({ date: e.out(), unixTime: new Date( eventDate ).getTime() / 1000, sentence: e.parentSentence().out( its.markedUpText ) }) }); return timeline.sort( ( a, b ) => a.unixTime - b.unixTime ) }47:T76e,48:[] 43:{"id":"7a9bd462fce1c55a","slug":null,"title":"How to visualize timeline of a Wiki article?","thumbnail":"5cdd296492c4841190d287ca1c721ffa899516dc67ced4b3b9f7df6d0376dba3","access_level":"public","create_time":"$D2023-01-24T08:26:09.551Z","update_time":"$D2023-01-24T08:26:09.551Z","view_time":null,"first_public_time":"$D2023-01-24T08:26:09.551Z","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":"17521a73b4bf5369","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":"starter_2024","bio":"","following":false},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92c6c0b7fc90056e","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"92c6c0b7fc90056e","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"**Enter the title of the Wikipedia article:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"viewof WikiArticleTitle = Inputs.text({label: \"\", value:'2022 United Nations Climate Change Conference'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"The code may take _couple of seconds to draw_ the timeline as the article is fetched in realtime from the Wikipedia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"{\n let htmlElements = [ `

${WikiArticleTitle || '2022 United Nations Climate Change Conference'}

` ];\n let lastYear = '';\n if ( timeLine !== undefined && timeLine.length === 0 ) return html`

Article not found, please enter a valid title

`;\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"---\n### Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"**`// Load winkNLP.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"**`// Load winkNLP's language model.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"**`// Instantiate winkNLP using the language model.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"nlp = winkNLP( model );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"**`// Obtain winkNLP's its helper.`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"its = nlp.its;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"**`// CSS`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"$47","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"