2b:null 2c:["$","title",null,{"children":"How to visualize timeline of a Wiki article? | Abacus | Observable"}] 31: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 ) }32:T76e,33:[] 2f:{"id":"ec8b25382e4c0309","slug":null,"title":"How to visualize timeline of a Wiki article?","thumbnail":"6b8546f96a7195b593cbe30d0140684008a64aeb239ab3b2faaf9aaf2a7afde9","access_level":"public","create_time":"$D2023-07-02T21:18:33.370Z","update_time":"$D2023-07-02T21:18:33.370Z","view_time":null,"first_public_time":"$D2023-07-02T21:18:33.370Z","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":"7fba11dd1bf4e5a2","login":"abacus1","name":"Abacus","avatar_url":"https://avatars-next.observableusercontent.com/dec7b689409a254f1e963a32cdcef0aa683801581b1c7e1c380aaf57c85f831e","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"912b68ba5cc3a7eb","login":"abacus","name":"sadasjhkdasjhk","avatar_url":"https://avatars-next.observableusercontent.com/20a1b8ca09a2a057b6c76c8763638806886df71b6df82d1a530c03aeb94b8845","tier":null}],"members":[{"type":"individual","id":"912b68ba5cc3a7eb","login":"abacus","name":"sadasjhkdasjhk","avatar_url":"https://avatars-next.observableusercontent.com/20a1b8ca09a2a057b6c76c8763638806886df71b6df82d1a530c03aeb94b8845","tier":null,"role":"editor"},{"type":"team","id":"7fba11dd1bf4e5a2","login":"abacus1","name":"Abacus","avatar_url":"https://avatars-next.observableusercontent.com/dec7b689409a254f1e963a32cdcef0aa683801581b1c7e1c380aaf57c85f831e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":255,"value":"**Enter the title of the Wikipedia article:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","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":"$31","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":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":"$32","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":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"