Заставляем 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, чтобы обновить все ссылки на данные для имен ваших столбцов.