In ngfrey/d3BarGraphV2: d3BarGraph Version 2

This is an attempt to make a bar graph using R and D3 keeping all the D3 stuff inside of the HTMLWidgets.widget function. I'm using GitHub only as an online backup. This is simply a testing ground.

library(htmlwidgets)
#library(roxygen2)
library(devtools)
#library(networkD3) #For examples and MisLinks and MisNodes data

Make the data:

set.seed(123)
numz<- round(runif(15, min=3, max=20),0)
numz

Now, we'll set up the file scaffolding. If your project folder is nested, i.e. inside your current working directory in R...copy the inst, R, DESCRIPTION, NAMESPACE, and any other HTML, CSS, or function files out. Do NOT copy the R project. PASTE them into the folder directory above the one they got created in, then delete the folder from which the above originated. This deletes the extra R project that was created. This process does not need to be repeated in order to make changes to the JavaScript, R, CSS, or other function files you wish to update, test, and if successful...deploy to the internet, company server, personal server, etc. These sections are commented out, however you only have to uncomment if this is your initial project setup.

#devtools::create("d3BarGraphV2") #create the package skelton
#htmlwidgets::scaffoldWidget("d3BarGraphV2")

Now make the necessary edits to the .yaml file, d3BarGraphV2.R file, and d3BarGraphV2.js files.

In this version of the document, the .yaml file has already been edited. Inside the .yaml file, the D3 library was added as a dependecy and style.css added as the stylesheet. JQuery is also added, but not currently needed. Furthermore, at present, the CSS stylesheet is commented out, but could be used in place of current in-line styles assigned within the JavaScript syntax.

The next steps are to build the package, as per Hilary Parker's guide...

getwd()
#If needed for testing:
#setwd("/Users/Nathan/Dropbox/R Projects Personal/d3BarGraphV2")

#devtools::document() #create the man folder, automatically generate the pyramid.Rd file

Now to install and run the package! The project created is named "d3BarGraphV2".

getwd()
setwd("..")
getwd()
devtools::install("d3BarGraphV2")

Next step, load the library and make a go at running the code!

library(d3BarGraphV2)
d3BarGraphV2::d3BarGraphV2(numz)  # default. Fills screen
d3BarGraphV2::d3BarGraphV2(numz, width = 300, height = 300) # with width and height preferences defined

For quickly rebuilding and attempting to launch:

This is a function written to REDO syntax and documentation, re-install the package, and launch it with the new changes reflected, using default height and width parameters...data set by numerical vector "numz". It is named redoD3. You will need to change the project file path to yours. Here I left mine as an example.

redoD3<- function(){
setwd("/Users/Nathan/Dropbox/R Projects Personal/d3BarGraphV2")  
devtools::document() #create the man folder, automatically generate the .Rd file
setwd("..")
devtools::install("d3BarGraphV2")
library(d3BarGraphV2)
} # End redoD3 function

Usage:

# Usage
redoD3()

Rebase Function...Relaunch D3 with defaults for width, height, and data = numz. Fills screen

rebaseD3<- function(){
  redoD3()
  d3BarGraphV2::d3BarGraphV2(numz)
  }
rebaseD3()

Relaunch D3 with height and width set to 500px each

relaunchD3<- function(){
  redoD3()
  d3BarGraphV2::d3BarGraphV2(numz, width = 500, height = 500)

}
relaunchD3()

Examples:

d3BarGraphV2::d3BarGraphV2(c(1,5,10,6))
d3BarGraphV2::d3BarGraphV2(sample(1:20, 50, replace=TRUE))
d3BarGraphV2::d3BarGraphV2(numz, width = 500, height = 500)

An example of using this HTMLWidget in Shiny is available in the "ShinyExampleScript" directory. I have pasted the code from the example file in the code chunk below:

library(shiny)
library(d3BarGraphV2)
numz<- round(((runif(20)*30)+1),0)
numz

ui <- fluidPage(
  h1("Example D3 Application in Shiny"),
  sidebarLayout(
    sidebarPanel(
      numericInput("nobs", "Number of observations to use", 10)
    ),
    mainPanel(
      d3BarGraphV2Output("plot", width = '100%')
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderD3BarGraphV2({
    d3BarGraphV2(head(numz, input$nobs))
  })
}

shinyApp(ui, server, options=list(launch.browser=TRUE))