search

paulofelipe / D3plusR

A package for D3plus in R
Other
25 stars 1 forks source link

Unable to replicate vignette examples #4

Closed hamgamb closed 4 years ago

hamgamb commented 4 years ago

I'm following the tutorial, trying to draw some graphs.

I'm running RStudio v 1.1.453 and R 3.5.0. I understand these aren't the latest versions but I am limited by work IT software.

The first example is:

library(D3plusR)
library(jsonlite)
library(dplyr)

d3plus(data = data,
             type = "bar", 
             id = "name",
             height = 500,
             width = "100%") %>% 
  d3plusX("year") %>% 
  d3plusY("value")

Which runs fine, but does not produce any output in the RStudio Viewer. If I open the HTML I get the following:


<!DOCTYPE html>
--
  | <html>
  | <head>
  | <meta charset="utf-8"/>
  | <style>body{background-color:white;}</style>
  | <script src="lib/htmlwidgets-1.5.1/htmlwidgets.js"></script>
  |  
  | </head>
  | <body>
  | <div id="htmlwidget_container">
  | <div id="htmlwidget-11577df9f5961ae0f0b8" style="width:100%;height:500px;" class="d3plus html-widget"></div>
  | </div>
  | <script type="application/json" data-for="htmlwidget-11577df9f5961ae0f0b8">{"x":{"data":[{"year":1991,"name":"alpha","value":15},{"year":1991,"name":"beta","value":10},{"year":1991,"name":"gamma","value":5},{"year":1991,"name":"delta","value":50},{"year":1992,"name":"alpha","value":20},{"year":1992,"name":"beta","value":10},{"year":1992,"name":"gamma","value":10},{"year":1992,"name":"delta","value":43},{"year":1993,"name":"alpha","value":30},{"year":1993,"name":"beta","value":40},{"year":1993,"name":"gamma","value":20},{"year":1993,"name":"delta","value":17},{"year":1994,"name":"alpha","value":60},{"year":1994,"name":"beta","value":60},{"year":1994,"name":"gamma","value":25},{"year":1994,"name":"delta","value":32}],"settings":{"type":"bar","id":["name"],"title":["function (main = NULL, sub = NULL, xlab = NULL, ylab = NULL, ","    line = NA, outer = FALSE, ...) ","{","    main <- as.graphicsAnnot(main)","    sub <- as.graphicsAnnot(sub)","    xlab <- as.graphicsAnnot(xlab)","    ylab <- as.graphicsAnnot(ylab)","    .External.graphics(C_title, main, sub, xlab, ylab, line, ","        outer, ...)","    invisible()","}"],"currency":"US$","number_text":["K","M","M","B","B"],"currency_var":null,"percent_var":null,"noformat_number_var":null,"d3plus_number_format":true,"locale":"en_US","clean_previous":false,"dictionary":{}},"d3plusAxisX":{"value":"year"},"d3plusAxisY":{"value":"value"}},"evals":[],"jsHooks":[]}</script>
  | <script type="application/htmlwidget-sizing" data-for="htmlwidget-11577df9f5961ae0f0b8">{"viewer":{"width":"100%","height":500,"padding":15,"fill":false},"browser":{"width":"100%","height":500,"padding":40,"fill":false}}</script>
  | </body>
  | </html>

But nothing renders in the browser either.

paulofelipe commented 4 years ago

That is just a mock example.

Please try this:

library(D3plusR)
library(dplyr)
library(jsonlite)
data("trade_bra_chn")

# Fake shares
trade_bra_chn <- trade_bra_chn %>% 
  mutate(share = sample(100, nrow(trade_bra_chn), replace = TRUE))

dictionary <- list(TradeValue = "Trade Value", Period = "Year",
                   share = "Share")

attributes <- list(Trade.Flow = data.frame(Trade.Flow = c("Export", "Import"),
                             icon = c("exp.png",
                                      "imp.png"),
                             hex = c("#344969", "#992234")))

d3plus(data = trade_bra_chn, id = "Trade.Flow",
       type = "bar",
       dictionary = dictionary,
       height = 400,
       width = "100%") %>% 
  d3plusX(value = "Period") %>% 
  d3plusY(value = "TradeValue") %>% 
  d3plusLegend(value = TRUE, size = 30, data = FALSE) %>% 
  d3plusTooltip(value = c("Period", "TradeValue", "share")) %>% 
  d3plusAttrs(value = attributes) %>% 
  d3plusColor(value = "hex") %>% 
  d3plusIcon(value = "icon", style = "knockout") %>% 
  d3plusTitle("Brazilian Exports and Imports to/from China")
hamgamb commented 4 years ago

Thanks for the reply. Exactly the same issue with that example. It's creating the right HTML but still not rendering. 


<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<script src="lib/htmlwidgets-1.5.1/htmlwidgets.js"></script>
 
</head>
<body>
<div id="htmlwidget_container">
<div id="htmlwidget-ab209c5d03acd200e971" style="width:100%;height:400px;" class="d3plus html-widget"></div>
</div>
<script type="application/json" data-for="htmlwidget-ab209c5d03acd200e971">{"x":{"data":[{"Period":"2005","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":6834996980,"share":64},{"Period":"2005","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":5354519158,"share":37},{"Period":"2006","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":8402368827,"share":25},{"Period":"2006","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":7989343057,"share":7},{"Period":"2007","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":10748813792,"share":9},{"Period":"2007","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":12617754515,"share":30},{"Period":"2008","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":16403038989,"share":12},{"Period":"2008","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":20040022368,"share":67},{"Period":"2009","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":20190831368,"share":56},{"Period":"2009","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":15911144513,"share":60},{"Period":"2010","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":30752355631,"share":99},{"Period":"2010","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":25535684189,"share":38},{"Period":"2011","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":44314595336,"share":92},{"Period":"2011","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":32788424507,"share":48},{"Period":"2012","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":41227540253,"share":65},{"Period":"2012","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":34248497709,"share":80},{"Period":"2013","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":46026153046,"share":91},{"Period":"2013","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":37302150042,"share":66},{"Period":"2014","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":40616107929,"share":53},{"Period":"2014","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":37340607027,"share":85},{"Period":"2015","Trade.Flow":"Export","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":35607523612,"share":11},{"Period":"2015","Trade.Flow":"Import","Reporter.Code":76,"Reporter":"Brazil","Partner.Code":156,"Partner":"China","TradeValue":30719405022,"share":10}],"settings":{"type":"bar","id":["Trade.Flow"],"title":["function (main = NULL, sub = NULL, xlab = NULL, ylab = NULL, ","    line = NA, outer = FALSE, ...) ","{","    main <- as.graphicsAnnot(main)","    sub <- as.graphicsAnnot(sub)","    xlab <- as.graphicsAnnot(xlab)","    ylab <- as.graphicsAnnot(ylab)","    .External.graphics(C_title, main, sub, xlab, ylab, line, ","        outer, ...)","    invisible()","}"],"currency":"US$","number_text":["K","M","M","B","B"],"currency_var":null,"percent_var":null,"noformat_number_var":null,"d3plus_number_format":true,"locale":"en_US","clean_previous":false,"dictionary":{"TradeValue":"Trade Value","Period":"Year","share":"Share"}},"d3plusAxisX":{"value":"Period"},"d3plusAxisY":{"value":"TradeValue"},"d3plusLegend":{"value":true,"size":30,"data":false},"d3plusTooltip":{"value":["Period","TradeValue","share"]},"d3plusAttrs":{"value":{"Trade.Flow":[{"Trade.Flow":"Export","icon":"exp.png","hex":"#344969"},{"Trade.Flow":"Import","icon":"imp.png","hex":"#992234"}]}},"d3plusColor":{"value":"hex"},"d3plusIcon":{"value":"icon","style":"knockout"},"d3plusTitle":{"value":"Brazilian Exports and Imports to/from China"}},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-ab209c5d03acd200e971">{"viewer":{"width":"100%","height":400,"padding":15,"fill":false},"browser":{"width":"100%","height":400,"padding":40,"fill":false}}</script>
</body>
</html>
paulofelipe commented 4 years ago

Please, try the code below and open the test.html file on firefox.

library(D3plusR)
library(dplyr)
library(jsonlite)
data("trade_bra_chn")

# Fake shares
trade_bra_chn <- trade_bra_chn %>% 
  mutate(share = sample(100, nrow(trade_bra_chn), replace = TRUE))

dictionary <- list(TradeValue = "Trade Value", Period = "Year",
                   share = "Share")

attributes <- list(Trade.Flow = data.frame(Trade.Flow = c("Export", "Import"),
                             icon = c("exp.png",
                                      "imp.png"),
                             hex = c("#344969", "#992234")))

test_widget <- d3plus(data = trade_bra_chn, id = "Trade.Flow",
       type = "bar",
       dictionary = dictionary,
       height = 400,
       width = "100%") %>% 
  d3plusX(value = "Period") %>% 
  d3plusY(value = "TradeValue") %>% 
  d3plusLegend(value = TRUE, size = 30, data = FALSE) %>% 
  d3plusTooltip(value = c("Period", "TradeValue", "share")) %>% 
  d3plusAttrs(value = attributes) %>% 
  d3plusColor(value = "hex") %>% 
  d3plusIcon(value = "icon", style = "knockout") %>% 
  d3plusTitle("Brazilian Exports and Imports to/from China")

htmlwidgets::saveWidget(test_widget, "test.html", selfcontained = TRUE)
hamgamb commented 4 years ago

selfcontained did the trick. Thanks a lot