2c:null 2d:["$","title",null,{"children":"RStudio / Displayr Embed Code Generator: | Displayr Engineering | Observable"}] 32:T65a,pdoCode = md`~~~r #What this function does: #Converts data into a heirarchical JSON object #Takes a named list (can be nested) as input, list items must be vectors or matrixes #Recursively loops through nested lists and converts items #Be careful as it strips out any backslashes :-) prepareDataForObservable <- function(data2transform){ if(!is.list(data2transform)) stop("your input data must be a list e.g. list('data' = x)") matrixToDF <- function(x){ if(!is.matrix(x)) stop("input must be a matrix") rows <- rownames(x) cols <- colnames(x) x <- as.data.frame(x) rows -> rownames(x) cols -> colnames(x) x } vectorToDF <- function(x){ if(!is.vector(x)) stop("input must be a vector") output <- if(is.null(names(x))) x else { names <- names(x) x <- as.data.frame(x) rownames(x) <- names x } } cleanJSON <- function(json){ json <- gsub('["[', '[', json, fixed = T) json <- gsub(']"]', ']', json, fixed = T) json <- gsub('\\\\', '', json) json } recursiveJSON <- rapply(data2transform, function(x) { output <- if( is.matrix(x) ) { jsonlite::toJSON(matrixToDF(x), dataframe = "rows", rownames = T, colnames = T, na = "string") } else { jsonlite::toJSON(vectorToDF(x), dataframe = "rows", rownames = T, colnames = T, na = "string") } }, how = "replace") cleanJSON(jsonlite::toJSON(recursiveJSON, na = "string")) } ~~~ ` 33:T678,embedCode = { if (!hasCells) return ``; const link = notebookLink ? `

\n` : ''; const id = randomHex(4); return ` library(r2d3) jScript = 'let body = d3.select("body").html("") ${cells .map(cell => ` body.append("div") .attr("id", "${className(cell)}-${id}")`) .join('\n')} let script = body .append("script") .attr("type", "module") script.html(\` import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js"; import define from "${embedUrl}"; const main = new Runtime().module(define, name => { ${cells.map(cell => ` if (name === "${cell}") return new Inspector(document.querySelector("#${className(cell)}-${id}"));` ).join('\n')} }); main.redefine("${dataMockCellName}",\${JSON.stringify(data)}) //IMPORTANT: The data in your Observable notebook must be called "${dataMockCellName}" \`) //styling can be done locally e.g. body.append("style").html(\`@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap); *{ font-family: "Lato", Arial; /*gfk font*/ }\`) //testing uncomment the below for testing i.e. to see the JSON data in Displayr //body.append("div").html(JSON.stringify(data))' observable.ui.table <- r2d3( data = data, script = jScript, css = "", container = "div" )` }34:[{"id":"60620be46a359f91b3c925a4d8f07606b4d6fc20c14aad90962cbed554b52fa49b8791ecda92e1e349f40423c2738787ecf04314947314a500e5d3e8bd8f7c01","href":"https://static.observableusercontent.com/files/60620be46a359f91b3c925a4d8f07606b4d6fc20c14aad90962cbed554b52fa49b8791ecda92e1e349f40423c2738787ecf04314947314a500e5d3e8bd8f7c01","name":"General_concept@1.PNG","type":"image/png","lastModified":1762419945097.488,"size":53144},{"id":"6f6a89c771838578c12633720dc909ad91b4e4eed05eee3a1ac93fff143e480b0e5d158249b95601caf24816a6c79a2f0ea06e4abe6bc1436aaf691119e15f0b","href":"https://static.observableusercontent.com/files/6f6a89c771838578c12633720dc909ad91b4e4eed05eee3a1ac93fff143e480b0e5d158249b95601caf24816a6c79a2f0ea06e4abe6bc1436aaf691119e15f0b","name":"R_Observable_Integration_Process.PNG","type":"image/png","lastModified":1762419945097.488,"size":86838},{"id":"df47ed1f96fea079c2b9b27635741d57f77258944c63a1edbb83eb33a9ef9ae4b5b99042afd1a455ddd9647acba3ea93fba012a501a0175138e397214925cc9b","href":"https://static.observableusercontent.com/files/df47ed1f96fea079c2b9b27635741d57f77258944c63a1edbb83eb33a9ef9ae4b5b99042afd1a455ddd9647acba3ea93fba012a501a0175138e397214925cc9b","name":"Observable2RStudio.png","type":"image/png","lastModified":1762419945097.488,"size":11854},{"id":"c3fab254a006f1a3a1f9f63aba8ab1460db4752529036b9962950bde0ec195bab823daa6b278b1c3401e545b3bd640ddfdcad805cf9859af218cb2b9fed4ddf0","href":"https://static.observableusercontent.com/files/c3fab254a006f1a3a1f9f63aba8ab1460db4752529036b9962950bde0ec195bab823daa6b278b1c3401e545b3bd640ddfdcad805cf9859af218cb2b9fed4ddf0","name":"poweredByObservable@2.svg","type":"application/xml","lastModified":1762419945097.488,"size":17203}] 30:{"id":"1ba4deaf1c3533d6","slug":null,"title":"RStudio / Displayr Embed Code Generator:","thumbnail":"4e0208f37550b623162c8303480e016419a5bb65b9ec17540ad305f0bcb97a0a","access_level":"public","create_time":"$D2025-11-06T09:05:45.097Z","update_time":"$D2025-11-06T09:06:33.437Z","view_time":null,"first_public_time":"$D2025-11-06T09:05:45.097Z","has_unpublished_edits":null,"fork":{"id":"4950af6c515eeb35","slug":"r-displayr-embed-code-generator","title":"RStudio / Displayr Embed Code Generator:","owner":{"id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering"}},"stars":0,"starred":false,"owner":{"type":"team","id":"658d61ad557bfa5e","login":"displayr-engineering","name":"Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/9486eedfd7eeedd5579bd2fdd3232240085c04d21650839f1775cb0dd2ca494d","tier":"starter_2024"},"version":762,"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":"658d61ad557bfa5e","login":"displayr-engineering","name":"Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/9486eedfd7eeedd5579bd2fdd3232240085c04d21650839f1775cb0dd2ca494d","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":0,"collection":null,"type":"notebook","body":{"title":"RStudio / Displayr Embed Code Generator:","cells":[{"id":522,"value":"md`# RStudio / Displayr Embed Code Generator:\n\nAn adaptation of Observable’s [built-in embed codes](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) for use in creating custom visualisations for **Displayr**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md`### What we're doing here | [Take me straight to the R Code Generator](#step5)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"general_concept = FileAttachment(\"General_concept@1.PNG\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md`### General workflow:\n1. Data in R \n2. Convert to JSON\n3. Paste JSON into Observable notebook\n4. Build notebook\n5. Generate code to embed notebook in R`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"viewof toggleDiagram = Inputs.toggle({label: \"Show explainer\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"html`

${r_observable_integration_process}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`### Prelude: \nIf you need help with steps 1-3 above i.e. converting your data from R to JSON and getting it into an Observable notebook, follow along using the code blocks in steps 1-3 revealed below. If you need help doing this in Displayr, here is a tutorial dashboard https://app.displayr.com/Dashboard?id=ede64fdc-17f6-4959-a3fb-303a665bdb5f.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`### Step 1:\nThis notebook assumes you already have some data in RStudio / Displayr, which you would like to try and build an Observable notebook on top of to visualise. If not, in RStudio you could try doing for example some aggregations of the [iris example dataset](https://www.r-bloggers.com/2021/06/aggregate-function-in-r-a-powerful-tool-for-data-frames/) that comes with R (example RStudio code below). In Displayr you can just use the aggregation engine to create a crosstabulation of variables in your data.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"viewof toggleiriscode = Inputs.toggle({label: \"Show iris dataset example code\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"html`

${irisCode }

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`### Step 2:\nConvert your R object to JSON. Use the R function below to do it.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"viewof togglepdocode = Inputs.toggle({label: \"Show function r code\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"html`

${pdoCode}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"viewof togglepdousecode = Inputs.toggle({label: \"Show function usage r code\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"html`

${pdouseCode}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`### Step 3:\nJust paste the result from your RStudio terminal in a notebook cell in Observable.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"viewof togglepastecode = Inputs.toggle({label: \"Show Observable cell javascript code\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"html`

${pastecode}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`### Step 4:\nBuild your Observable notebook. [Here](https://observablehq.com/@gfk-displayr-eng/quick-start-table-input-observable-inputs-displayr-tutori) is an example which\n- Adds sparkbars to the table for faster readability\n- Makes the table sortable`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"step5 = md`### Step 5:\nTo generate code to embed your notebook in RStudio / Displayr. Type in the name of the notebook you’d like to embed. For example \n\n1. For an Observable notebook published as 'public', if you want to generate the code for say https://observablehq.com/@gfk-displayr-eng/quick-start-table-input-observable-inputs-displayr-tutori, **paste in only:** **@gfk-displayr-eng/quick-start-table-input-observable-inputs-displayr-tutori**\n
FYI, this takes it's input data from the above mentioned Displayr tutorial dashboard: https://app.displayr.com/Dashboard?id=ede64fdc-17f6-4959-a3fb-303a665bdb5f.\n2. For an Observable notebook published as 'private', urls have a different structure, so for https://observablehq.com/d/adadb1ff70b016cb, you would **paste in only:** **adadb1ff70b016cb**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof slug = text({\n value: new URL(location).searchParams.get(\"notebook\") || \"\",\n submit: true,\n getValue: ({ value }) => {\n if (value.startsWith(\"/\")) return value.substr(1);\n if (/^[0-9a-f]{16}$/.test(value)) return `d/${value}`;\n return value;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"cellNames\n ? md`\nPick the named cell with your data mock / input data. ${recommendation}`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"viewof dataMockCellName = Inputs.radio(cellNames ? cellNames : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"cellNames\n ? md`\nNow pick the named cells you want to be displayed in RStudio / your Displayr R calculation. You can drag them to change their order. ${recommendation}`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof cells = selectOrder(cellNames ? cellNames : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"hasCells\n ? md`\nWould you like your embed to stay fresh whenever a new version of the notebook is published on Observable? Or would you like it to be pinned to the version you’re looking at right now?`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof pinned = hasCells\n ? radio({\n options: [\"Latest published version\", `Pinned to version ${version}`],\n value: \"Latest published version\"\n })\n : Object.assign(md``, { value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"hasCells ? md `### You’re done! Here’s your R code:` : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"hasCells\n ? md`\n~~~html\n${embedCode}\n~~~\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"hasCells\n ? Object.assign(html`