2b:null 2c:["$","title",null,{"children":"CHI Papers visualization | Saugat Malla's Workspace | Observable"}] 31:[{"id":"e6dee50fedd8710299f652a0454db99922d6ea3d308e2b7f3b7cb193e789bbbc4db5aabf8db816d35acf20de85b771af2b0a1dc4c156d26580d353963bc67ccd","href":"https://static.observableusercontent.com/files/e6dee50fedd8710299f652a0454db99922d6ea3d308e2b7f3b7cb193e789bbbc4db5aabf8db816d35acf20de85b771af2b0a1dc4c156d26580d353963bc67ccd","name":"CHI_2024_program.json","type":"application/json","lastModified":1712629631804.18,"size":7249964}] 2f:{"id":"b152038f758d5966","slug":null,"title":"CHI Papers visualization","thumbnail":"14118e5d49866192fe003a97456cfa4d5e7bf913962bdc0f14208601ecf3e8a8","access_level":"public","create_time":"$D2024-04-09T02:27:11.804Z","update_time":"$D2024-04-12T00:40:58.188Z","view_time":null,"first_public_time":"$D2024-04-12T00:05:01.670Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"145121404cd63b11","login":"saugat-malla-ws","name":"Saugat Malla's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/624bc39e4c2faaa5577e24f36e806ceef5e458e27c10640d0611a724076e00ce","tier":"starter_2024","bio":""},"version":648,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"27e4a15f287f7f65","login":"saugat-malla","name":"Saugat Malla","avatar_url":"https://avatars-next.observableusercontent.com/f663020ab675fc61d7418e4a58d7c8017d3cd7c1c4335f10903ced1b053512c2","tier":null,"bio":""}],"members":[{"type":"individual","id":"27e4a15f287f7f65","login":"saugat-malla","name":"Saugat Malla","avatar_url":"https://avatars-next.observableusercontent.com/f663020ab675fc61d7418e4a58d7c8017d3cd7c1c4335f10903ced1b053512c2","tier":null,"role":"editor"},{"type":"team","id":"145121404cd63b11","login":"saugat-malla-ws","name":"Saugat Malla's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/624bc39e4c2faaa5577e24f36e806ceef5e458e27c10640d0611a724076e00ce","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CHI Papers visualization","cells":[{"id":0,"value":"# CHI Papers visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"papers = FileAttachment(\"CHI_2024_program.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"filteredPapers = papers.contents.slice(0, maxPapers);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof maxPapersConfusing = {\n // Custom input\n // 1. It returns an html element\n // 2. That element has a .value attrib\n // 3. Listens/Emits input events\n\n let value = 10;\n const inRange = htl.html``;\n const outRange = htl.html``;\n const target = htl.html`${inRange}val: ${outRange}`;\n\n const onInput = () => {\n value = +inRange.value;\n outRange.innerHTML = value;\n target.value= value;\n };\n inRange.addEventListener(\"input\", onInput)\n \n onInput();\n \n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"viewof maxPapers = Inputs.range([0, papers.contents.length], {\n label: \"Max Papers to show\",\n value: 10,\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"maxPapers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"papers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"### Exercise\n\n* Fork the notebook\n* Find all the types of contents\n* Create a input checkbox that allows me to select which ones to show\n* Filter the papers with respect to that input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"contentNames = {\n\n const contentNames = papers.contentTypes.map(paper => paper.name);\n\n return contentNames;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"viewof papersCheckbox = Inputs.checkbox(contentNames,{label:\"Paper Names\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"papersCheckbox","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"selectedPapers = {\n const selectedPapers = papers.contentTypes.filter(paper => papersCheckbox.includes(paper.name));\n return selectedPapers\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"--\n## Saugat\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"saugat = html`\n

Papers (Saugat)

\n\n

\n ${filteredPapers.slice(0,10).map(content => {\n return(`

\n ${content.title}\n

${content.abstract.slice(0, 20)}

`)\n })}\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"SaugatInput = ({value = 0} = {}) => {\n\n const output = htl.html``;\n\n const node = htl.html`

\n \n \n Value ${output}\n

`;\n\n \n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"viewof example = SaugatInput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"