28:null 29:["$","title",null,{"children":"HTML Table | andreaskdk | Observable"}] 2e:[] 2c:{"id":"40a6f4169432f79c","slug":"html-table","title":"HTML Table","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-03-19T18:13:08.070Z","update_time":"$D2020-03-20T20:01:21.875Z","view_time":null,"first_public_time":"$D2020-03-20T19:36:49.110Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"516de042098fceb9","login":"andreaskdk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f7038e40b9cd0c33311f1f4c03ad707286ef321f3c85cc0f704cbf5027dd5dbf","tier":"starter_2024"},"version":87,"publish_version":87,"role":null,"authored":false,"authors":[{"type":"individual","id":"a938d3256da27fa7","login":"andreaskdk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f7038e40b9cd0c33311f1f4c03ad707286ef321f3c85cc0f704cbf5027dd5dbf","tier":null}],"members":[{"type":"individual","id":"a938d3256da27fa7","login":"andreaskdk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f7038e40b9cd0c33311f1f4c03ad707286ef321f3c85cc0f704cbf5027dd5dbf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"HTML Table","cells":[{"id":0,"value":"md`# HTML Table`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`\n\n\n\n\n\n\n\n

Land	Befolkning
Danmark	5.6
Sverige	10.12
Norge	5.37
Finland	5.51
Island	0.36

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`Vi kan flytte css'en ud fra indholdet og referere til html tags'ne via **class** eller **id**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"css = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`\n\n\n\n\n\n\n\n

Land	Befolkning
Sverige	10.12
Danmark	5.6
Finland	5.51
Norge	5.37
Island	0.36

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`En tabel med data og D3`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"lande_data=[\n {\"Land\": \"Sverige\", \"Befolkning\": 10.12},\n {\"Land\": \"Danmark\", \"Befolkning\": 5.6},\n {\"Land\": \"Finland\", \"Befolkning\": 5.51},\n {\"Land\": \"Norge\", \"Befolkning\": 5.37},\n {\"Land\": \"Island\", \"Befolkning\": 0.36}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3table={\n const table=d3.select(DOM.element(\"table\"));\n \n const header_row=table.append(\"tr\");\n \n header_row.append(\"th\").text(\"Land\");\n header_row.append(\"th\").text(\"Befolkning\");\n \n const table_rows=table\n .selectAll(\".mytr\")\n .data(lande_data)\n .enter()\n .append(\"tr\")\n .attr(\"class\", \"mytr\");\n \n table_rows\n .append(\"td\")\n .text(d=>d[\"Land\"]);\n \n table_rows\n .append(\"td\")\n .text(d=>d[\"Befolkning\"])\n \n return table.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"chart={\n const svg=d3.select(DOM.svg(width, height));\n\n svg.selectAll(\"rect\")\n .data(lande_data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d,i)=>i*50)\n .attr(\"width\", 30)\n .attr(\"y\", d=>height-d.Befolkning*20-20)\n .attr(\"height\", d=>d.Befolkning*20);\n \n\n \n return svg.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"height=300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"