CODEWITHSUNDEEP
htmlrggplot2scalinghtmlwidgets
CyberTigerhai
CyberTigerhai

Reputation: 41

htmlwidgets with R

I try to create a plot with R and the display it implemented in a website.

My R Code:

library(tidyverse)
library(plotly)

data <- read_csv(...)

plot_temp <- data %>%
  ggplot(aes(x = lon, y = lat, text = temp)) +
  geom_point(aes(color = temp)) +
  scale_color_gradientn(colors = c("white", "blue", "green", "red")) +
  theme_bw()

plotly_temp <- ggplotly(
  plot_temp,
  tooltip = "text"
)

htmlwidgets::saveWidget(plotly_temp, "weather-world/widgets/plotly_temp.html", selfcontained = FALSE)

My HTML Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Weatherplots</title>
</head>
<body>
  <embed src="widgets/plotly_temp.html">
</body>
</html>

Unfortunately I get the following errormessage in the Console:

Uncaught Error: Something went wrong with axis scaling
at t.setScale (plotly-latest.min.js:41:736165)
at plotly-latest.min.js:41:204867
at f.syncOrAsync (plotly-latest.min.js:41:485628)
at plotly-latest.min.js:41:204045
at SVGGElement. (plotly-latest.min.js:41:209328)
at plotly-latest.min.js:7:51569
at ut (plotly-latest.min.js:7:47935)
at Y.each (plotly-latest.min.js:7:51542)
at draw (plotly-latest.min.js:41:200163)
at r.drawMarginPushers (plotly-latest.min.js:41:598947)

I already tried different methonds of implementation like or each time with the same result.

I also tried to limit the axis with:

scale_color_gradientn(colors = c("white", "blue", "green", "red"), limits = c(min(data$temp), max(data$temp))) +

or:

coord_cartesian(xlim = c(min(data$lon), max(data$lon)), ylim = c(min(data$lat), max(data$lat)))

again with the same result/errormessage.

Thank you in advance for your help!

Upvotes: 0

Views: 34

Answers (1)

margusl
margusl

Reputation: 17544

Without defining height for <embed> it defaults to 150px, not enough for Plotly to properly render all elements.

You could simulate this through Viewer Zoom in RStudio -- activate Element Inspector and shrink that window until height reaches 150, it will throw that same error: enter image description here

I'd also use <iframe> instead of <embed> here, but just defining height should be enough,

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Weatherplots</title>
</head>
<body>
  <embed src="widgets/plotly_temp.html" height="400">
</body>
</html>

Upvotes: 2

Related Questions