Как добавить интерактивную визуализацию в R-уценку

Ответ 1

Чтобы добавить нелокальный javascript, например d3.v3.min.js к нашему Rmd, есть несколько способов сделать это. Если вы хотите включить локальную копию d3, это намного проще.

Это мой любимый способ. Если по какой-то причине вы хотели бы видеть других, я буду рад показать их. Примечание. Я все еще экспериментирую.

---
title: "rmarkdown example with external js"
output:
  html_document:
    self_contained: false
    keep_md: true
    includes:
      in_header: "header_include_d3.html"
---

Let create a very basic d3 graph using data from R.  since the graph is d3, we will need the d3.js file for the graph to render.

```{r results='asis'}

cat('
<script>
  d3.select("body").append("p").text("d3 made me")
</script>
')

```

<script>

// from https://www.dashingd3js.com/svg-paths-and-d3js
//The data for our line
 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

 //This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

</script>

затем в том же каталоге, что и этот .Rmd файл, сохраните этот

<script src = "http://d3js.org/d3.v3.min.js"></script>

в файл, который я назвал header_include_d3.html, или любое другое имя. Если вы измените имя, просто не забудьте изменить ссылку в includes в yaml вашего Rmd.

Как я уже говорил, это намного проще, если у вас есть d3.js локально, который вы хотели бы использовать.

Кроме того, <script src='...'></script> внутри тела будет работать, если вы не знаете о js в заголовке. В этом случае просто включите его где-нибудь в Rmd.