Заставляем R и D3.js хорошо играть в R markdown

Заставляем R и D3.js хорошо играть в R markdown

Поскольку уже существует множество хороших ресурсов, созданных людьми, более квалифицированными для их создания, это не претендует на роль какого-либо исчерпывающего руководства по разметке JavaScript, D3.js, R или R. Вместо этого его цель - показать, чему научился опыт работы со всеми из них в одном файле.

Чтобы не усложнять это руководство, предположим, что данные были полностью изучены, и все, что осталось, - это создать визуализацию (и) D3. Взгляните на набор сырых cars примеров данных, который поставляется с R

head(cars)
##   speed dist
## 1     4    2
## 2     4   10
## 3     7    4
## 4     7   22
## 5     8   16
## 6     9   10

Передача данных между языками не так проста, как обращение к имени переменной, которая их содержит. Если вы попытаетесь добавить код JavaScript console.log(cars); после указанного выше фрагмента R, он вернет ReferenceError, поскольку cars еще не определен в JavaScript.

Вы можете записать данные в новый файл, который затем прочитаете, используя соответствующий метод загрузки в D3. Однако можно передавать данные непосредственно в JavaScript внутри файла .Rmd.

cat(
  paste(
  '<script>
    var data = ',cars,';
  </script>'
  , sep="")
)
##
## <script>
##   var data = c(4, 4, 7, ... 24, 24, 25);
## </script>
## <script>
##   var data = c(2, 10, 4, ... 93, 120, 85);
## </script>

Приведенный выше код действительно передаст данные в наше пространство JavaScript; однако мы создали для себя две новые проблемы:

• Каждый столбец в данных передается как вектор R, который JavaScript будет интерпретировать как вызов некоторой функции c() с каждым из значений, переданных как параметры.
• Столбцы были переданы один за другим в переменную JavaScript data, при этом значения в столбце speed были заменены значениями в столбце dist.

Чтобы решить обе проблемы сразу, воспользуйтесь предположением D3, что данные, с которыми он работает, находятся в формате JSON. Библиотека jsonlite в R легка с простым toJSON() методом, который идеально подходит для наших целей.

library("jsonlite")
cat(
  paste(
  '<script>
    var data = ',toJSON(cars),';
  </script>'
  , sep="")
)
## <script>
##   var data = [{"speed":4,"dist":2},
##               {"speed":4,"dist":10},
##               {"speed":7,"dist":4},
##                 ...
##               {"speed":24,"dist":93},
##               {"speed":24,"dist":120},
##               {"speed":25,"dist":85}];
## </script>

** вы должны включить параметр results = "asis" в фигурные скобки в верхней части фрагмента кода, чтобы передавать данные через **

Теперь у JavaScript есть данные, и в формате, с которым он может работать. Пора начинать D3ing!

Есть два способа загрузить библиотеку D3. Включите <script src="https://d3js.org/d3.v4.min.js"></script> прямо в файл уценки в любой момент перед визуализацией. Или создайте файл .html только с тем же тегом сценария в том же каталоге, что и ваш файл .Rmd, и включите его

Теперь вы можете свободно визуализировать с D3.js в R markdown, пока вам не понравится. Просто добавьте код с фрагментом кода JavaScript, между тегами сценария непосредственно в разметке или в отдельный файл, на который вы ссылаетесь с помощью тега сценария.

Я должен добавить одно предостережение. Если вы из тех, кто просто копирует / вставляет с https://bl.ocks.org, нет ничего постыдного - я лично не знаю никого, кто использует D3, кто этого не делает - но вы должны сохранить в виду их данные всегда считываются из внешних источников через методы загрузки D3. Вам придется удалить эти строки кода и подставить их в переменную данных внутри метода .data() D3. Кроме того, обязательно просмотрите код D3, чтобы обновить все ссылки на данные для имен ваших столбцов.

Посмотреть код на GitHub