Testing Quarto

Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see https://quarto.org. For the code generating this test see https://github.com/episphere/quarto.

Running Code

When you click the Render button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

1 + 100

[1] 101

You can add options to executable code like this

runif(10)

 [1] 0.55855394 0.38403641 0.66517748 0.76932531 0.64058031 0.56921214
 [7] 0.27070332 0.46257556 0.58678206 0.01205906

The echo: false option disables the printing of code (only output is displayed).

Observable JS

Starting the exploration in the same place I’d like to finish: with code injection in a web application.

Using OJS cells

Coding as if this was observablehq

meaningOfLife ={
  let x = [1,2,3,4,5,6]
  let dbl = xi=>2*xi; //doubling function
  let sum = (x1,x2)=>x1+x2; //add it all upreturn x.map(dbl).reduce(sum)
  return x.map(dbl).reduce(sum)
}
meaningOfLife

ES6 modules

Coding as regular JS and importing it as needed. The first example will import Lorena’s PRS calculator.

Polygenic risk score calculator

PRS = await import('https://episphere.github.io/prs/export.js')
{
  let div = DOM.element('div')
  PRS.ui(div)
  return div
}

Can you do this in R markdown?

{
  let div = DOM.element('div')
  div.innerHTML='<input id="xx" size=6 value=2> + <input id="yy" size=6 value=3> = <span id="zz">5</span>'
  div.querySelector("#xx").oninput=div.querySelector("#yy").oninput=function(){
    div.querySelector("#zz").textContent=parseFloat(div.querySelector("#xx").value)+parseFloat(div.querySelector("#yy").value)
  }
  return div
}