r - rmarkdown 中的传单热图 [英] r - leaflet heatmap in rmarkdown
问题描述
问题
您能否在 rmarkdown
文档中绘制
我有一个 这个在闪亮中工作的例子 使用tags$
和 HTML()
.
rmarkdown 块
使用 Ramnath 在 R Markdown 中嵌入 rCharts 的示例 我可以接近在降价文档中创建它,但是当它运行时它显示地图,但不显示热量.
```{r heatMapMarkdown, results='asis', comment=NA, cache=F}## 参考# - http://bl.ocks.org/ramnathv/raw/8084330/- 在 R Markdown 中嵌入 rCharts图书馆(rCharts)数据 <- data.frame(经度 = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),纬度 = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),强度 = c(10,20,30,40,50,300))## 为热图创建 JSON## - 也可以使用 jsonlite::toJSONj <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")j <- paste0("[",j,"]")Leaf_map <- Leaflet$new()Leaf_map$setView(c(47.5982623,-122.3415519), zoom=10)Leaf_map$tileLayer(provider="Acetate.terrain")## 添加圆圈:# Leaf_map$marker(c(47.5982623, -122.3415519))Leaf_map$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))Leaf_map$setTemplate(afterScript = sprintf("<脚本>var addressPoints = %svar heat = L.heatLayer(addressPoints).addTo(map)", j))## 显示地图,但不显示热量...Leaf_map$print('iframesrc', include_assets=TRUE, cdn=TRUE)``
是否可以让热量"也显示在地图上?
我想出了这个问题的答案 How to向 R Markdown 添加交互式可视化
首先,我为 部分创建了一个
html
文档,以将 src
包含到热图插件中,并保存它在与我的 .Rmd
文件相同的目录中,名称为 include_js_heatmap.html
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script><风格>#map { 宽度:800px;高度:600px;}body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif;}.ghbtns { 位置:相对;顶部:4px;左边距:5px;}{ 颜色:#0077ff;}</风格><script src = "http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
然后我可以在 .Rmd
的标题中include
this,并将生成热图的 html 直接写入文档正文中.
为了使热具有交互性,我可以在代码块中构造热点的 JSON
,然后使用 r ...
将其包含在文档正文中符号
---标题:热图RMarkdown输出:html_document:自包含:假keep_md: 真包括:in_header: "include_js_heatmap.html"---```{r}数据 <- data.frame(经度 = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),纬度 = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),强度 = c(100,20,30,400,50,3))j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")j <- paste0("[",j,"]")``<div id="地图"></div><script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script><脚本>var map = L.map('map').setView([47.5982623,-122.3415519], 12);vartiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {归属:'©<a href="http://osm.org/copyright">OpenStreetMap</a>贡献者,}).addTo(map);地址点 = `r j` ;var heat = L.heatLayer(addressPoints).addTo(map);
更新
<div ...>
方法将在 .Rmd
文件旁边创建一个目录,其中包含各种 .html
、.js
, .css
文件在其中.一旦创建完成,标准的 rCharts
代码将不再需要
## 创建传单地图Leaf_map <- Leaflet$new()Leaf_map$setView(c(47.5982623,-122.3415519), zoom=10)Leaf_map$tileLayer(provider="Acetate.terrain")## 添加热图插件Leaf_map$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))##热图层Leaf_map$setTemplate(afterScript = sprintf("<脚本>var addressPoints = %svar heat = L.heatLayer(addressPoints).addTo(map)", j))##输出地图叶图
更新 2
避免 include
的一个轻微变化是直接在 .Rmd
文档中使用所有相关的 html:
```{r baseMap, results='asis', echo=FALSE, comment=NA, cache=FALSE}图书馆(rCharts)数据 <- data.frame(经度 = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),纬度 = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),强度 = c(100,20,30,400,50,3))j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")j <- paste0("[",j,"]")``<!-- 添加热图 html--><div id="热图"></div><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/><script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script><风格>#heatmap { 宽度:800px;高度:600px;}body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif;}.ghbtns { 位置:相对;顶部:4px;左边距:5px;}{ 颜色:#0077ff;}</风格><script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script><脚本>var heatmap = L.map('heatmap').setView([47.5982623,-122.3415519], 12);vartiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {归属:'©<a href="http://osm.org/copyright">OpenStreetMap</a>贡献者,}).addTo(热图);地址点 = `r j` ;var heat = L.heatLayer(addressPoints).addTo(heatmap);
Question
Can you plot a leaflet heatmap in an rmarkdown
document?
Example working code
This code will generate a leaflet map with a heatmap when run directly from R
library(rCharts)
## data
dat <- data.frame(Longitude = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),
Latitude = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),
intensity = c(10,20,30,40,50,300))
## create JSON for heatmap
## - could also use jsonlite::toJSON
j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")
j <- paste0("[",j,"]")
## create leaflet map
leaf_map <- Leaflet$new()
leaf_map$setView(c(47.5982623,-122.3415519), zoom=10)
leaf_map$tileLayer(provider="Acetate.terrain")
## add heatmap plugin
leaf_map$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))
## heatmap layer
leaf_map$setTemplate(afterScript = sprintf("
<script>
var addressPoints = %s
var heat = L.heatLayer(addressPoints).addTo(map)
</script>
", j
))
## output map
leaf_map
Output:
I have an example of this working in shiny too using tags$
and HTML()
.
rmarkdown chunk
Using Ramnath's example of embedding rCharts in R Markdown I can get close to creating this in a markdown document, but when this runs it displays the map, but not the heat.
```{r heatMapMarkdown, results='asis', comment=NA, cache=F}
## References
# - http://bl.ocks.org/ramnathv/raw/8084330/ - embedding rCharts in R Markdown
library(rCharts)
dat <- data.frame(Longitude = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),
Latitude = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),
intensity = c(10,20,30,40,50,300))
## create JSON for heatmap
## - could also use jsonlite::toJSON
j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")
j <- paste0("[",j,"]")
leaf_map <- Leaflet$new()
leaf_map$setView(c(47.5982623,-122.3415519), zoom=10)
leaf_map$tileLayer(provider="Acetate.terrain")
## Add circle:
# leaf_map$marker(c(47.5982623, -122.3415519))
leaf_map$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))
leaf_map$setTemplate(afterScript = sprintf("
<script>
var addressPoints = %s
var heat = L.heatLayer(addressPoints).addTo(map)
</script>
", j
))
## shows the map, but not the heat...
leaf_map$print('iframesrc', include_assets=TRUE, cdn=TRUE)
```
Is it possible to get the 'heat' to display on the map too?
I figured this out thanks to the answer to the question How to add an interactive visualisation to R Markdown
First, I create an html
document for the <head>
section to include a src
to the heatmap plugin, and save it in the same directory as my .Rmd
file with the name include_js_heatmap.html
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
#map { width: 800px; height: 600px; }
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
.ghbtns { position: relative; top: 4px; margin-left: 5px; }
a { color: #0077ff; }
</style>
<script src = "http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
I can then include
this in the header of the .Rmd
, and write the html to generate the heatmap directly into the body of the document.
To make the heat interactive I can construct the JSON
of heat points in a code chunk, then include it in the body of the document with the r ...
notation
---
title: heatmapRMarkdown
output:
html_document:
self_contained: false
keep_md: true
includes:
in_header: "include_js_heatmap.html"
---
```{r}
dat <- data.frame(Longitude = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),
Latitude = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),
intensity = c(100,20,30,400,50,3))
j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")
j <- paste0("[",j,"]")
```
<div id="map"></div>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script>
var map = L.map('map').setView([47.5982623,-122.3415519], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
addressPoints = `r j` ;
var heat = L.heatLayer(addressPoints).addTo(map);
</script>
Update
The <div ...>
method will create a directory alongside the .Rmd
file with various .html
, .js
, .css
files within it. Once this is created the standard rCharts
code will work without the need for the <div...>
html code any more:
## create leaflet map
leaf_map <- Leaflet$new()
leaf_map$setView(c(47.5982623,-122.3415519), zoom=10)
leaf_map$tileLayer(provider="Acetate.terrain")
## add heatmap plugin
leaf_map$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))
## heatmap layer
leaf_map$setTemplate(afterScript = sprintf("
<script>
var addressPoints = %s
var heat = L.heatLayer(addressPoints).addTo(map)
</script>
", j
))
## output map
leaf_map
Update 2
A slight variation on this which avoids the include
is to use the all the relevant html directly in the .Rmd
document:
```{r baseMap, results='asis', echo=FALSE, comment=NA, cache=FALSE}
library(rCharts)
dat <- data.frame(Longitude = c(-122.3809, -122.3269, -122.3342, -122.2984, -122.3044, -122.2754),
Latitude = c(47.66796,47.63436,47.57665,47.71930,47.60616,47.55392),
intensity = c(100,20,30,400,50,3))
j <- paste0("[",dat[,"Latitude"], ",", dat[,"Longitude"], ",", dat[,"intensity"], "]", collapse=",")
j <- paste0("[",j,"]")
```
<!-- add heatmap html-->
<div id="heatmap"></div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
#heatmap { width: 800px; height: 600px; }
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
.ghbtns { position: relative; top: 4px; margin-left: 5px; }
a { color: #0077ff; }
</style>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script>
var heatmap = L.map('heatmap').setView([47.5982623,-122.3415519], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(heatmap);
addressPoints = `r j` ;
var heat = L.heatLayer(addressPoints).addTo(heatmap);
</script>
这篇关于r - rmarkdown 中的传单热图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!