2a:null 2b:["$","title",null,{"children":"The Goodreads Classics Sortable Table (Old) | Melanie Walsh | Observable"}] 31:T63f,goodreads_table = table2(filtered_data, { sortable: true, rank: false, paged: 5, style: 'normal', columns: { Title: { formatter(val, i) { return html`${val}`; } }, "Total Ratings": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return i === 0 ? d3.format('.2s')(val) : d3.format('.2s')(val); } }, "Total Reviews": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return i === 0 ? d3.format('.2s')(val) : d3.format('.2s')(val); } }, "Avg. Rating": { formatter(val, i) { let color = d3 .scaleLinear() .domain([4.5, 3.95, 3.4]) .range(["#cafcc2", "#fce7c2", "#eb9494"]); return html`${val}`; } }, " ": { formatter(val, i) { return html`

`; } }, "Most Read Classics": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return val === 0 ? "-" : val; } }, "Most Shelved Classics": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return val === null ? "-" : val; } } } })32:T1553,table2 = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let page = 0; if (sortable && rank) { throw new Error("A table can either be ranked or sortable, but not both"); } let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = data.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a).localeCompare(JSON.stringify(b)); /* My own update to sort null values last*/ else if ( as === null || as === 0 ) return 1; else if (bs === null || bs === 0) return -1; let res = as > bs ? 1 : as < bs ? -1 : 0; if (sortDirection) res = -res; return res; }); } let offset = page * paged; let rows = data.slice(offset, offset + (paged || data.length)); let pages = paged ? Math.ceil(data.length / paged) : 1; return html`

${ pages > 1 ? html`` : "" } ${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} ` } ${rows.map( (row, i) => html` ${rank ? html`` : ""} ${columns.map(c => { let displayValue = (c.options.formatter || identity)( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} ` )}


${offset + i + 1}	${displayValue}

Displaying rows ${page * paged + 1}–${page * paged + rows.length} out of ${data.length}

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener("click", e => { if (e.target.tagName === "TH" && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; /* On re-sort, go back to the first page*/ (page = 0), rerender(); } if (e.target.tagName === "BUTTON") { if (e.target.dataset.action) { switch (e.target.dataset.action) { case "next": page++, rerender(); break; case "previous": page--, rerender(); break; } } else if (e.target.dataset.page) { (page = parseInt(e.target.dataset.page)), rerender(); } } }); return dom; }33:[{"id":"0e94e0181b83a41dbabe714d813c6fb0c4c734b2654512f2fdc51c98a475b3e8008dc57d731d3c702e8d8d6ac6a9beb3271f5947d230c10afab523534b05879c","href":"https://static.observableusercontent.com/files/0e94e0181b83a41dbabe714d813c6fb0c4c734b2654512f2fdc51c98a475b3e8008dc57d731d3c702e8d8d6ac6a9beb3271f5947d230c10afab523534b05879c","name":"All-Goodreads-Classics-Metadata-FINAL.csv","type":"text/csv","lastModified":1605221575754.078,"size":46275},{"id":"309c256fafa263a50aba02e3559f4c8bb2bb54f0f0bf7b58b537b66b6b8b51f81bae44e69ab1c0a232fe36aa19be569291210bfd34875313c01c1ad3f81ade05","href":"https://static.observableusercontent.com/files/309c256fafa263a50aba02e3559f4c8bb2bb54f0f0bf7b58b537b66b6b8b51f81bae44e69ab1c0a232fe36aa19be569291210bfd34875313c01c1ad3f81ade05","name":"All-Goodreads-Classics-Metadata-FINAL-2@6.csv","type":"text/csv","lastModified":1605399292899.748,"size":52123}] 2e:{"id":"76f711dc2b0e51f7","slug":"the-goodreads-classics-sortable-table","title":"The Goodreads Classics Sortable Table (Old)","thumbnail":"ad5a8742a080d20bea5440873c4e536aa20d19e91a109b152d43dbce16d5d3bf","access_level":"public","create_time":"$D2020-11-12T22:52:33.239Z","update_time":"$D2021-02-09T21:24:03.865Z","view_time":null,"first_public_time":"$D2020-11-13T13:49:48.392Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"64cb03831ce357a8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":"pro_2024"},"version":938,"publish_version":938,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1772ab3096311b8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":null}],"members":[{"type":"individual","id":"e1772ab3096311b8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"The Goodreads Classics Sortable Table (Old)","cells":[{"id":0,"value":"md`# The Goodreads Classics Sortable Table (Old)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`**NOTE**: *This page represents a previous version of the Goodreads Classics Sortable Table. I have since adopted the new Table input function.*\n\nThis table displays reception statistics for the top Goodreads \"classics.\" These are literary texts that were either tagged as a \"classic\" by Goodreads users the most number of times or most read as of September 2019.\n\n- You can sort columns by clicking on the column title\n- You can search for titles or authors via the search box\n\nThis data is being accessed directly through the Goodreads API. To create the table, I used Tom MacWright's [tables](https://observablehq.com/@tmcw/tables) plus [search/filter code](https://observablehq.com/@ismms-himc/covid-19-sars-cov-2-preprints-from-medrxiv-and-biorxiv) from Nicolas Fernandez.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`## Search the table by title or author`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof inst_search = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"date_report = md`This data reflects current Goodreads statistics as of ${date}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"metadata = d3.csvParse(\n await FileAttachment(\"All-Goodreads-Classics-Metadata-FINAL-2@6.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"classic_isbns = metadata.map(function(x) {\n if (x != null) {\n return x.isbn13.toString();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = (await soFetch(\n `https://www.goodreads.com/book/review_counts.json?key=${apiKey}&isbns=${classic_isbns}&format=JSON`\n)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"date = {\n let referenced_data = data;\n let date = new Date();\n /*date = date.toLocaleString();*/\n let parser = d3.timeFormat(\"%B %d, %Y %I:%M%p\");\n return parser(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"books = data.books","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function join(lookupTable, mainTable, lookupKey, mainKey, select) {\n var l = lookupTable.length,\n m = mainTable.length,\n lookupIndex = [],\n output = [];\n for (var i = 0; i < l; i++) {\n // loop through l items\n var row = lookupTable[i];\n lookupIndex[row[lookupKey]] = row; // create an index for lookup table\n }\n for (var j = 0; j < m; j++) {\n // loop through m items\n var y = mainTable[j];\n var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable\n output.push(select(y, x)); // select only the columns you need\n }\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"merged = join(metadata, books, \"isbn13\", \"isbn13\", function(\n goodreads_book,\n book\n) {\n return {\n Author: book.author,\n Title: book.title,\n \" \": book.book_cover,\n Date: Number(book.yearFirstPublished),\n \"Total Ratings\": Number(goodreads_book.work_ratings_count),\n \"Total Reviews\": Number(goodreads_book.work_text_reviews_count),\n \"Avg. Rating\": Number(goodreads_book.average_rating),\n \"Most Shelved Classics\": book.mostPopularRank2,\n \"Most Read Classics\": Number(book.mostReadRank2)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"filtered_data = merged.filter(x => {\n let search_string =\n x.Title.toString().toLowerCase() + x.Author.toString().toLowerCase();\n return search_string.includes(inst_search.toLowerCase());\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"import { secret } from \"@tmcw/secret\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"/*viewof apiKey = secret(\"apiKey\", {\n description:\n \"This is a secret API token whose value is only available to you!\",\n submit: \"Set secret\"\n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"apiKey = \"rHDU1vCBThU1nevPxF2Xwg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`\n## Table Modifications\n\nI've made a few modifications to Tom's table, which allow for:\n\n- Re-sorting to page 1\n - If a user clicks on a column title to re-sort the table, the table will rerender back to page 1, no matter what page the user clicked from\n- Sorting null values to last\n- Highlighting page number being shown\n- Displaying number of rows being shown\n\nI've also made a number of stylistic changes, some of which are specific to my dataset:\n- Flipping the sort direction arrows \n- Changing column title style\n- Messing with height and width of table/cells\n- Moving the page number buttons to the top (I don't know if this is too weird yet, but the table height sometimes changes slightly, if the buttons are at the bottom, their location changes slightly and makes it hard to click through rapidly)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"th = (c, sortKey, sortDirection, sortable) => {\n let {\n options: { title }\n } = c;\n let sortIndicator = sortKey && sortDirection ? \"↓\" : \"↑\";\n let arrow = html`${sortIndicator}`;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow}${displayedTitle}\n `\n : html`\n ${displayedTitle}${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"defaultOptions = ({ columns: {}, style: 'normal', paged: 25 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"identity = i => i","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"