28:null 29:["$","title",null,{"children":"HW5 - HTML Tables | UofU DataVis Course Lab | Observable"}] 2f:T521,{ const parentDiv = d3.create("div").style("padding", "1em").style('overflow', 'auto'); const table = parentDiv.append("table").classed("table-style", true); const header = table.append("thead"); const body = table.append("tbody"); drawTable(subset, columns); function drawTable(dataset, cols) { const headerRow = header.selectAll("th") .data(cols) .join("th") .text(d => d.sorted ? `${d.title} - ${d.sorted.substring(0,1).toUpperCase()}` : d.title) .attr("class", d => d.sorted ? d.sorted : ""); const tableRows = body.selectAll("tr") .data(dataset) .join("tr") const cells = tableRows.selectAll("td") .data(d => Object.entries(d)) .join("td").text(d => d[1]) headerRow.on("click", function(e, d,i) { columns.filter(s => s !== d).forEach(col => col.sorted = null); if (d.sorted !== "asc") { let newData = dataset.sort((a,b) => a[d.title] < b[d.title] ? -1 : 1); d.sorted = "asc"; drawTable(newData, columns); } else if (d.sorted === "asc") { let newData = dataset.sort((a,b) => a[d.title] > b[d.title] ? -1 : 1); d.sorted = "dsc"; drawTable(newData, columns); } }) } return parentDiv.node() }30:[] 2c:{"id":"c776ea7900c147cf","slug":null,"title":"HW5 - HTML Tables","thumbnail":"22b1b01de546f8b47365f1cb61b40f927227965edef8da42d76716948d664408","access_level":"public","create_time":"$D2022-10-03T16:27:33.226Z","update_time":"$D2022-10-03T23:37:44.823Z","view_time":null,"first_public_time":"$D2022-10-03T16:27:33.226Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024"},"version":354,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a5c6293168616967","login":"kirangadhave","name":"Kiran Gadhave","avatar_url":"https://avatars-next.observableusercontent.com/97bc247200dca4f593fe558d4eaf94be7366bf9c379f095ee799d1890ffbdf0a","tier":null}],"members":[{"type":"individual","id":"a5c6293168616967","login":"kirangadhave","name":"Kiran Gadhave","avatar_url":"https://avatars-next.observableusercontent.com/97bc247200dca4f593fe558d4eaf94be7366bf9c379f095ee799d1890ffbdf0a","tier":null,"role":"editor"},{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"HW5 - HTML Tables","cells":[{"id":0,"value":"# HW5 - HTML Tables","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"filePath = \"https://raw.githubusercontent.com/lhcb/opendata-project/master/Data/nobel.csv\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = d3.csv(filePath)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"data.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"Observable allows us to print data tables directly using Inputs. However, this is not very helpful for our homeworks, and doesn't allow much customization. We will see code to implement a similar table with d3 and HTML","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"# Table","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"## Basic HTML Table Structure","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"An HTML table is denoted with a `` tag. Two major components of a table are the header and body each represented by the `thead` and `tbody` element respectively.","pinned":true,"hidden":false,"mode":"md"},{"id":265,"value":"### `thead`\n\n`thead` houses the header of the table. Each element in the `thead` element represents is the header of one column, and is represented by the element `th`.\n\n```html\n\n \n \n \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"### `tbody`\n\n`tbody` houses the body of the table. Each element in the `tbody` represents a row of the table, and is represented by the `tr` element.\n\n```html\n\n ...\n ...\n ...\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"### `tr`\n\n`tr` element represents the row of the table. Each element inside a `tr` is the cell of the table. Each cell is represented by the `td` element.\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"### Static table","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"

A	B	C
A1	B1	C1
A2	B2	C2
A3	B3	C3

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Column A	Column B - Test	Column C
A1	B1	C1
A2	B2	C2
A3	B3	C3

","pinned":true,"hidden":false,"mode":"html"},{"id":42,"value":"## Data Cleanup","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"We will filter out countries which have no data for Residence and Role/Affiliate (i.e. value is No Data for these columns). We will only use the first 10 entries, to make our table more manageable for this lab.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"filteredData = data.filter(d => d[\"Residence\"] !== \"No Data\" && d[\"Role/Affiliate\"] !== \"No Data\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"subset = filteredData.slice(0,10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"## Table","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"### Columns\n\nWe will map each column in the dataset to a object with two properties: `title` and `sorted`\n\n`title`: Is the name of the column\n\n`sorted`: A status flag to indicated sort direction if the data is sorted by this column. E.g. if data is sorted by this column the value is `asc` or `dsc`, else the value is `null`.","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"columns = Object.keys(subset[0]).map(col => ({title: col, sorted: null, type: ''})) // Sorted by no column initially.","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"### Rendering table","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"{\n const parentDiv = d3.create(\"div\");\n const table = parentDiv.append(\"table\");\n\n const header = table.append(\"thead\");\n const body = table.append(\"tbody\");\n\n const headerRow = header.selectAll(\"th\")\n .data(columns)\n .join(\"th\")\n .text(d => d.title)\n .classed(\"sort\", d => d.sorted)\n\n const tableRows = body.selectAll(\"tr\")\n .data(subset)\n .join(\"tr\")\n\n const cells = tableRows.selectAll(\"td\").data(d => {\n console.log(d);\n console.log(Object.entries(d)); \n return Object.entries(d);\n })\n .join(\"td\").text(d => d[1])\n \n return parentDiv.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"## Styling the table","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"