2d:null 2e:["$","title",null,{"children":"Pokemon DashBoard | Kasi Viswanath | Observable"}] 33:T594,display_img = (flag) => { let prefix_url = "https://raw.githubusercontent.com/rileynwong/pokemon-images-dataset-by-type/master/all/"; return filterd_data.map( (d, i) => "

${ flag ? "" : `${ d["name"][0].toUpperCase() + d["name"] .substring(1) .toLowerCase() .replace("♀", "-f") .replace("♂", "-m") .replace("'", "") .replace(". ", "") }` }

` ); }34:[{"id":"39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","href":"https://static.observableusercontent.com/files/39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","name":"pokemon.csv","type":"text/csv","lastModified":1651168001910.02,"size":160616}] 31:{"id":"581e34e8c3995c0b","slug":"pockemon-dashboard","title":"Pokemon DashBoard","thumbnail":"317876fea098244076f36613ed704780076aedc4de3a6ba9add6dc9c62223720","access_level":"public","create_time":"$D2022-04-28T06:29:35.670Z","update_time":"$D2022-05-06T06:02:44.386Z","view_time":null,"first_public_time":"$D2022-04-30T00:18:46.910Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":1285,"publish_version":1285,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null}],"members":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Pokemon DashBoard","cells":[{"id":0,"value":"# Pokemon DashBoard\n\n## PDP Project3 - Reactive programming\n### Features of the project\n#### a. Displays all Pokemon images\n#### b. Filters Pokemon based on their Type1, Type2, Abilities, Attack\n#### c. Pagination on pokemon images\n#### d. Creative addition: Animation on all pokemon images. All pokemon images transition randomly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"Dashboard = {\n return html`\n

\n ${viewof type1_view}\n

\n ${viewof type2_view}\n

\n\n

\n Abilities\n

\n\n ${viewof abilites_view}\n

Ex : Blaze, Flash Fire

\n\n

\nAttack\n

\n${viewof attack}\n

\n\n

\n\n\nImages\n\n\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"

\n The Total Filtered Records are : ${filterd_data.length}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":573,"value":"viewof display_html = {\n let page_number = 1;\n let img = () => display_img().slice((page_number - 1) * 16, page_number * 16);\n const onKeyPress = (evt) => {\n if (evt.key === \"ArrowRight\") {\n if (page_number > display_img().length / 16) {\n return;\n }\n page_number = page_number + 1;\n } else if (evt.key === \"ArrowLeft\") {\n if (page_number < 2) {\n return;\n }\n page_number = page_number - 1;\n }\n\n display.innerHTML = \"\";\n console.log(evt);\n display.appendChild(\n html`

${img()}

`\n );\n display.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n let display = html`

\n ${img()}\n

`;\n display.addEventListener(\"keydown\", onKeyPress);\n return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"### Creative addition: Random transition of pokemon images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1272,"value":"htl.html`$

${creativity_view}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"abilities_set = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"type1 = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"type2 = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"abilities_set","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof type1_view = {\n filter_view;\n return Inputs.checkbox(Array.from(type1), { label: \"Type1\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof type2_view = {\n filter_view;\n return Inputs.checkbox(Array.from(type2), { label: \"Type2\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"filterd_data = {\n type1_view;\n type2_view;\n abilites_view;\n attack;\n if (type1_view.length === 0 && type2_view.length === 0 && attack === 0) {\n return data;\n }\n return data.filter(\n (d) =>\n type1_view.map((ele) => ele.toLowerCase()).includes(d[\"type1\"]) ||\n type2_view.map((ele) => ele.toLowerCase()).includes(d[\"type2\"]) ||\n d[\"attack\"] < attack ||\n eval(d[\"abilities\"]).reduce(\n (ele_prev, ele_curr) =>\n ele_prev ||\n abilites_view.reduce(\n (prev, curr) => prev || curr.includes(ele_curr),\n false\n ),\n false\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"filter_view = {\n data.forEach((d) => {\n eval(d[\"abilities\"]).forEach((d) =>\n abilities_set.add(d[0].toUpperCase() + d.substring(1))\n );\n d[\"type1\"] != null\n ? type1.add(d[\"type1\"][0].toUpperCase() + d[\"type1\"].substring(1))\n : \"\";\n d[\"type2\"] != null\n ? type2.add(d[\"type2\"][0].toUpperCase() + d[\"type2\"].substring(1))\n : \"\";\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof abilites_view = {\n filter_view;\n return multiAutoSelect({\n options: Array.from(abilities_set),\n placeholder: \"Search for the abilities . . .\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = FileAttachment(\"pokemon.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"import { multiAutoSelect } from \"@john-guerra/multi-auto-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"creativity_view = {\n return display_img(\"true\")\n .map((d) => html`${d}`)\n .map((d) => {\n d.style.border = 0;\n d.style.margin = 0;\n d.style.padding = 0;\n d.style.width = \"50px\";\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"{\n return html`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"css_images = {\n return filterd_data.map((d) => {\n return `\n .${d[\"name\"].toLowerCase()}\n{\nanimation: fly-${d[\"name\"].toLowerCase()} 2s infinite;\nanimation-direction: alternate-reverse;\n}\n\n@keyframes fly-${d[\"name\"].toLowerCase()} {\n0% {transform:translateX(${\n 1 * Math.floor(Math.random() * 10)\n }px) rotate(360deg) translateY(${1 * Math.floor(Math.random() * 10)}px);}\n25% {transform:translateX(${\n 10 * Math.floor(Math.random() * 10)\n }px) rotate(360deg) translateY(${10 * Math.floor(Math.random() * 10)}px);}\n50% {transform:translateX(${\n 15 * Math.floor(Math.random() * 10)\n }px) rotate(360deg) translateY(${15 * Math.floor(Math.random() * 10)}px);}\n 100% {transform:translateX(${\n 20 * Math.floor(Math.random() * 10)\n }px) rotate(360deg) translateY(${20 * Math.floor(Math.random() * 10)}px);}\n}\n\n`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"viewof attack = Inputs.range([0, 200], {\n step: 1,\n Label: \"Attack Range\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"