2c:null 2d:["$","title",null,{"children":"Training: The Table - Part 1 | GfK Displayr Engineering | Observable"}] 32:T46f,dynamicStyles = html``33:[{"id":"f5b878f28be5906f06a67a6a4422a03488d85896edb884708b6f11152e61a895dcade693a5fdab56058bc549032bf6f79bff397ceea708a796d4cb0a6c6cf2be","href":"https://static.observableusercontent.com/files/f5b878f28be5906f06a67a6a4422a03488d85896edb884708b6f11152e61a895dcade693a5fdab56058bc549032bf6f79bff397ceea708a796d4cb0a6c6cf2be","name":"tpc_table@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1664299918402.84,"size":11266}] 30:{"id":"cbd83c3d3cb2f22e","slug":null,"title":"Training: The Table - Part 1","thumbnail":"79c1d503de89f6b51bab7bf9f526cc87c17a7d33a39d0d3bc3b0179bc1ada772","access_level":"public","create_time":"$D2022-09-27T05:44:52.731Z","update_time":"$D2022-09-29T06:00:53.553Z","view_time":null,"first_public_time":"$D2022-09-27T12:00:04.199Z","has_unpublished_edits":null,"fork":{"id":"424698034b9b1ecd","slug":"quick-start-table-input-observable-inputs-displayr-tutori","title":"Quick Start: Table Input / Observable Inputs (Displayr tutorial)","owner":{"id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering"}},"stars":1,"starred":false,"owner":{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024"},"version":1198,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7c9db241ab46c6bd","slug":"we-innovate-2022-tutorials","title":"we.innovate 2022 / tutorials","owner":{"id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering"}},"type":"notebook","body":{"title":"Training: The Table - Part 1","cells":[{"id":0,"value":"

Training: The Table - Part 1

Observable Inputs › Observable & Displayr 101 'The Table' · API

\n\n# Training: Observable 101 'The Table'\n\nA [Table](https://observablehq.com/@observablehq/input-table) displays tabular data. It’s fast: rows are rendered lazily on scroll. It sorts: click a header to sort, and click again to reverse. And it selects: click a checkbox on any row, and the selected rows are exported as a view value. (And for searching, see the [Search input](/@observablehq/input-search).) For more applied examples, see [Hello, Inputs!](/@observablehq/hello-inputs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"The table component assumes that all values in a given column are the same type,\nand chooses a suitable formatter based on the first non-null value in each\ncolumn.\n\n- Numbers are formatted using\n [_number_.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString);\n- Dates are formatted in [ISO8601](https://en.wikipedia.org/wiki/ISO_8601);\n- undefined and NaN values are empty;\n- everything else is displayed as-is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":954,"value":"# The data we are working with","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1130,"value":"Questionnaire data relating to which Headphones brands consumers remember being exposed to in the last 3 months, and the touchpoint of exposure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":966,"value":"### 1. Upload the csv file ad parse it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1031,"value":"input_data = tpc_table.sheet(0, { headers: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"tpc_table = FileAttachment(\"tpc_table@1.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"### 2. Define the columns and formats for each","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1148,"value":"rowHeaderColumn = \"Touchpoint Contact\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"columns = { \n const originalColumns = Object.keys(used_data[0]).filter(o => o != \"_row\")\n if(originalColumns.indexOf(rowHeaderColumn) > -1) originalColumns.splice(originalColumns.indexOf(rowHeaderColumn) , 1); \n return [rowHeaderColumn].concat(originalColumns)\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"rowHeaderColumnReplace = (o) => { \n if(typeof o[\"_row\"] != \"undefined\") o[rowHeaderColumn] = o[\"_row\"]\n return o\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"used_data = input_data.map(o => rowHeaderColumnReplace(o))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"To override the default formatting, pass _format_ options for the desired\ncolumns. Below I create the format object based on the column index.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"tableFormats = {\n const o = {}\n columns.forEach((e,i) => {\n if(i != columns.indexOf(rowHeaderColumn)) o[e] = sparkbar(100) //width is percentage of 100\n else o[e]\n })\n return o \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"### 2. Add Sparkbars, to make it easier to eyeball the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"The _format_ function can return a text string or an HTML element. \nFor example, this can be used to render inline visualizations such as bars or [sparklines](/@mbostock/covid-cases-by-state).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":752,"value":"function sparkbar(max) {\n return x => htl.html`

${d3.format(\",.0%\")(x.toLocaleString(\"en\")/100)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"### 3. Add some styling :-)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"# Our Output Table, 'ready for embed':","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1118,"value":"#### KBQs:\n- What is my brand's / my competitors' performance across touchpoint exposure to the audience?\n- What are the highest / lowest performing touchpoints per brand?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"forDisplay = Inputs.table(used_data, {\n columns: columns,\n format: tableFormats\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"# Embed option 1: Generate the R code [Here >>](/@mtsvelik/displayr-embed-code-generator)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":994,"value":"# Embed option 2: Generate the ReactJS code: \n1. Click on the three dots ... top-right of the screen\n2. Export > Embed Cells > select \"Runtime with React\"\n3. Follow the instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"