2f:T46f,dynamicStyles = html``30:[{"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}] 2d:{"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"},{"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"},{"id":954,"value":"# The data we are working with","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":966,"value":"### 1. Upload the csv file ad parse it","pinned":false,"hidden":false,"mode":"md"},{"id":1031,"value":"input_data = tpc_table.sheet(0, { headers: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1107,"value":"tpc_table = FileAttachment(\"tpc_table@1.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"### 2. Define the columns and formats for each","pinned":false,"hidden":false,"mode":"md"},{"id":1148,"value":"rowHeaderColumn = \"Touchpoint Contact\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1162,"value":"used_data = input_data.map(o => rowHeaderColumnReplace(o))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":969,"value":"### 2. Add Sparkbars, to make it easier to eyeball the data","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1065,"value":"### 3. Add some styling :-)","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"# Our Output Table, 'ready for embed':","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":887,"value":"forDisplay = Inputs.table(used_data, {\n columns: columns,\n format: tableFormats\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"# Embed option 1: Generate the R code [Here >>](/@mtsvelik/displayr-embed-code-generator)","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}