Example POC that uses HTML5 Web Components to Declaratively bind DeployR enabled R Scripts and R Code blocks to the UI. Elements can be composed to create more complicated R Analytic web applications without needing to know JavaScript/CSS/HTML.
Here are some samples deployed to Azure Web Sites:
- http://mlds-scaffold.azurewebsites.net/
- http://mlds-r-user-groups.azurewebsites.net/
- http://mlds-faithful.azurewebsites.net/
- Install the latest stable version of Node.js (version 0.10.x).
- Install Node.js
$ git clone https://github.com/mlds-deployr/mlds-ui-demo.git
$ cd mlds-ui-demo
$ npm install
$ npm run serve
- Open
mlds-ui-demo/ui/ui.html
in your editor and begin editing Web Components and experimenting - View changes in http://localhost:3000/#/
$ git clone https://github.com/mlds-deployr/mlds-ui-demo.git
Alternatively you can just download and explode the repository zip bundle.
Installation is managed via npm, the Node.js package manager.
One-line install using npm:
$ cd mlds-ui-demo
$ npm install
$ cd mlds-ui-demo
$ npm run serve
This will start a local web-server and launch your browser pointing to http://localhost:3000
$ cd mlds-ui-demo
$ npm run build
This produces the dist/
directory which contains a production ready web application
equipped with JavaScript obfuscation, css minimization, image minimization, html minimization, ect...
For deployment, you can easily put the content in dist/
onto any web-server or create an Azure Website out of it.
See the mlds-ui-demo/examples
for samples. Rename samples to ui.html
and place
in the mlds-ui-demo/ui
to view.
The ui
directory contains files that you can edit.
-
ui.html
Defines where you add your HTML5 Web Components to build out the user interface. This is where the bulk of your work will take place.
-
ui.css
Defines the location to put any custom styles if needed.
-
ui.js
Defines the location to put any custom JavaScript if needed. Any function or property added to the object literal will be two-way data bound to the UI and Referenced using the
{{}}
expression in your ui.html file.
Examples:
ui.js
var ui {
hello: 'Hello how are you?'
echo: function(msg) {
return msg;
}
};
ui.html
<h1>{{ hello }}</h1>
<h1>{{ echo('R and JavaScript') }}</h1>
DeployR web component elements are a set of visual and non-visual utility elements. They include elements for working with user input, selection, and for declarative binding DeployR enabled R Scripts to the UI.
Please NOTE this list is a subset of all our elements. They have been slimmed down for the purpose of the demonstration.
The deployr-server
element is used to wire the DeployR server and UI up. It
sets up an I/O abstraction between DeployR and the UI well as manages basic
authentication and R Session orchestration.
<deployr-server></deployr-server>
Example:
<deployr-server endpoint="http://dhost:7400" cors="true"></deployr-server>
The deployr-rscript
element is used to bind DeployR enabled R Scripts to the UI.
<deployr-rscript></deployr-rscript>
Example:
<deployr-rscript
name="RUGclusters"
author="sheri"
directory="geo"
inputs="nclust"
outputs="RRevoRUGS_2014,summary,plot"
runOnload="true">
</deployr-rscript>
<deployr-rscript
name="faithful"
author="swells"
directory="faithful"
inputs="n_breaks,individual_obs,density,bw_adjust"
outputs="plot"
runOnload="true">
</deployr-rscript>
The deployr-dropdown-menu
element is used as a select list to bind a UI value
from the list to a DeployR R Script input.
<deployr-dropdown-menu></deployr-dropdown-menu>
Example:
<deployr-dropdown-menu
rscript="faithful"
rinput="n_breaks"
rtype="numeric"
watch="true"
label="Number of bins in histogram"
selected="20"
items='{ "labels": [10, 20, 35, 50], "values": [10, 20, 35, 50] }' >
</deployr-dropdown-menu>
The deployr-checkbox
is a button that can be either checked or unchecked. The
element is used to bind a UI value from the checkbox state to a DeployR R Script
input.
<deployr-checkbox></deployr-checkbox>
Example:
<deployr-checkbox
rscript="faithful"
rinput="individual_obs"
rtype="logical"
watch="true"
label="Show individual observations">
</deployr-checkbox>
<deployr-checkbox
rscript="faithful"
rinput="density"
rtype="logical"
watch="true"
label="Show density estimate">
</deployr-checkbox>
The deployr-slider
allows a user to select a value from a range of values by
moving the slider thumb. The element is used to bind a UI value from the slider
state to a DeployR R Script input.
<deployr-slider></deployr-slider>
Example:
<deployr-slider
rscript="RUGclusters"
rinput="nclus"
rtype="numeric"
watch="true"
width="400px"
min="2"
max="7"
value="1"
step="1"
pin="true"
snaps="false">
</deployr-slider>
<deployr-slider
rscript="faithful"
rinput="bw_adjust"
rtype="numeric"
watch="true"
width="400px"
min="0"
max="2"
value="1"
step="0.2"
pin="true"
snaps="false">
</deployr-slider>
The deployr-leaflet-tilelayer
is used in conjunction with leaflet-map
for displaying interactive Leaflet maps. The element is
used to bind a DeployR R Script output encoded in geoJSON to the UI.
<leaflet-map>
<deployr-leaflet-tilelayer></deployr-leaflet-tilelayer>
</leaflet-map>
Example:
<leaflet-map longitude="-96.6" latitude="39.5" zoom="3">
<deployr-leaflet-tilelayer
rscript="RUGclusters"
routput="RRevoRUGS_2014"
fitBounds="false"
pointToLayer="{{pointToLayerHandler}}"
onEachFeature="{{onEachFeatureHandler}}">
</deployr-leaflet-tilelayer>
</leaflet-map>
The deployr-plot
is an element for displaying an R plot. The element is used
to bind a DeployR R Script output plot to the UI. It provides useful sizing
and preloading options for displaying purposes.
<deployr-plot></deployr-plot>
Example:
<deployr-plot
rscript="faithful"
routput="plot"
width="400"
height="400">
</deployr-plot>
<deployr-plot
rscript="RUGclusters"
routput="plot"
width="400"
height="400">
</deployr-plot>
Displays a histogram of eruption times of Old Faithful Change the graph by:
- Changing the number of bins displayed in the histogram
- Show/hide band at bottom of the graph showing individual observations
- Show/hide density estimate
- When density estimate on, adjust the smoothing bandwith used for calculating the curve
hist(faithful$eruptions,
probability = TRUE,
breaks = as.numeric(n_breaks),
xlab = "Duration (minutes)",
main = "Geyser eruption duration")
if (individual_obs) {
rug(faithful$eruptions)
}
if (density) {
dens <- density(faithful$eruptions,
adjust = bw_adjust)
lines(dens, col = "blue")
}
- n_breaks numeric
- individual_obs logical
- density logical
- bw_adjust numeric
- Plot PNG
- Shows locations of R User Groups in the US in 2014
- Clusters cities by census and population data
- Plot shows Population distribution (top) and number of cities (bottom) in each cluster
- Slider changes the number of clusters which updates both map and graph
# population data from http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?src=bkmk
rug<-read.csv("10.145.1.237:7400/apps/csv/rug2014us.csv", stringsAsFactors=F)
#drop out ID column
rug<-rug[,2:13]
#create clusters based on group size plus population estimates
mydata <- scale(rug[6:12])
# K-Means Cluster Analysis
revoInput('{"name":"nclus","default":5, "render":"integer","label":"Nclusters"}')
fit <- kmeans(mydata, nclus)
# append cluster assignment
rug <- cbind(rug, cluster=fit$cluster)
rug$cluster<-as.factor(rug$cluster)
# Show cluster means
summary<-data.frame(aggregate(mydata,by=list(fit$cluster),FUN=mean))
# Simple Bar Plot
# use same vector of colors defined for the map
colors<-c('#F8766D', '#C49A00', '#53B400','#02C094', '#00B6EB','#A58AFF', '#FB61D7')
par(mfrow=c(2,1), mar=c(2,4,1,1))
boxplot(PopEst2014~cluster,data=rug, col=colors, ylab="Population Estimate 2014")
counts<-table(rug$cluster)
barplot(counts, col=colors, ylab="# of cities in cluster")
# Create geojson file
revoPackage('leafletR')
dat_geo <- toGeoJSON(data=rug, name="RRevoRUGS_2014")
- nclus numeric
- RRevoRUGS_2014 geoJSON file
- summary data.frame