31:[{"id":"5e54071baec002e0ef37a2a7eb354e2f447ab6f4d797b0c515f8394411101fb2019a864394c48be44c74f369e8868825cf35a5bbe8ac0ae24e4e203c4faa825f","href":"https://static.observableusercontent.com/files/5e54071baec002e0ef37a2a7eb354e2f447ab6f4d797b0c515f8394411101fb2019a864394c48be44c74f369e8868825cf35a5bbe8ac0ae24e4e203c4faa825f","name":"INXD2023 - Interactive - Project.csv","type":"text/csv","lastModified":1721989284375.195,"size":2775}] 2f:{"title":"Project Overview - INXD2023","cells":[{"id":0,"value":"# Project Overview - INXD2023\n\nLets creat a single card component\n\n## Single Card Example - Manual (Figma Style)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"\n\n

\n $\"Card$ \n

Phones

Phone Explorer

An interactive buying guide and explorer to get the best phone for you.

\n Project\n Process\n

","pinned":true,"hidden":false,"mode":"html"},{"id":37,"value":"## Abstract the Card Component\n\nWe need two things for it.\n1. Single Data for a card \n - title\n - topic\n - imageLink\n - description\n - processLink\n - projectLink\n\n2. Template for the Card","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"single = ({\n id: 0,\n title: \"Phones Explorer\",\n topic: \"Phones\",\n description:\n \"An interactive buying guide and explorer to get the best phone for you.\",\n imageLink: \"https://picsum.photos/id/3/400/\",\n processLink: \"https://amitkaps.com/phonevis/process\",\n projectLink: \"https://amitkaps.com/phonevis\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"template = html`

\n $\"Card$ \n

${single.topic}

${single.title}

${single.description}

\n Project\n Process\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Data Binding\n\nAttaching data to a document (html / SVG) element","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"// Full function for Square\nfunction square(x) {\n return x * x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"// Small online function function (Arrow) for square\nsquare2 = (x) => x * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"//Anonymous function\n(x) => x * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"numbers = [1, 2, 3, 4]","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"numbers.map((x) => square(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"// Full function\nfunction sentence(word) {\n return `hello ${word} \\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"sentence(\"world\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"words = [\"world\", \"universe\", \"planets\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"words.map((x) => sentence(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"// Full function\nfunction sentencehtml(word) {\n return html`

hello ${word}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"html`\n

Three sentence should come below this line

\n ${words.map((x) => sentence(x))}\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"html`\n

Three sentence should come below this line

\n ${words.map((x) => sentencehtml(x))}\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"### Write a card function","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"function card(data) {\n return html`

\n $\"Card$ \n

${data.topic}

${data.title}

${data.description}

\n Project\n Process\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"projects = await FileAttachment(\"INXD2023 - Interactive - Project.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`\n

\n ${projects.map((x) => card(x))}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"function circleCard(data) {\n return svg`\n \n ${data.id}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}