Description Usage Value Examples
'e2d3' HTML Dependencies
1 | e2d3_dep()
|
htmltools::htmlDependency
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | library(htmltools)
# some notes
# data in the original is
e2data <- read.csv("https://cdn.rawgit.com/e2d3/e2d3-contrib/master/dot-bar-chart/data.csv")
# and the column headings need to be the same
# since currently not flexible
# if we want Titanic in similar format
# we would do something like
library(dplyr)
library(tidyr)
data.frame(
xtabs(Freq~Survived+Class,Titanic),
stringsAsFactors = FALSE
) %>%
spread(Survived,Freq) %>%
mutate(Year = Class) %>%
select(Year,everything()) %>%
select(-Class)
e2d3 <- e2d3_dep()
# I thought we could do this but unfortunately not
# since order is important
# we paste the main.js in our tags$script below
# but i'll fix this later
# with htmlwidgets
#e2d3_dotbar <- htmlDependency(
# name = "e2d3_dotbar",
# version = "0.1",
# src = c(href="https://cdn.rawgit.com/e2d3/e2d3-contrib/master/dot-bar-chart/main.js"),
# script = "main.js"
#)
# make a function for now as convenience
# to allow R data.frame in proper format
# but eventually rewrite e2-dot-bar with arguments
# to allow other column names for the hierarchy
e2d3_dot_builder <- function(data = NULL) {
browsable(
attachDependencies(
tagList(
tags$div(
id = "chart"
),
tags$script(HTML(
sprintf(
"
var root = document.getElementById('chart');
var data = '%s';
%s
var dim = { width: 600, height: 400 };
var margin = { top: 30, bottom: 50, left: 50, right: 20 };
var inputHeight = 20;
var numberFormat = d3.format('.0f');
dim.graphWidth = dim.width - margin.left - margin.right;
dim.graphHeight = dim.height - margin.top - margin.bottom;
require(['e2d3model'],function(model){
var rows = d3.csv.parseRows(data);
update(new model.ChartDataTable(rows));
})
",
paste0(
capture.output(write.csv(data, row.names=FALSE)),
collapse="\\n"
),
paste0(
readLines(
system.file("htmlwidgets/lib/e2d3-contrib/templates/dotbar.js", package="e2d3R"),
encoding = "UTF-8"
),
collapse="\n"
)
)
))
),
list(e2d3)
)
)
}
# recreate original with our e2data
e2d3_dot_builder(e2data)
# now do it with Titanic
data.frame(
xtabs(Freq~Survived+Class,Titanic),
stringsAsFactors = FALSE
) %>%
spread(Survived,Freq) %>%
mutate(Year = Class) %>%
select(Year,everything()) %>%
select(-Class) %>%
e2d3_dot_builder()
|
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.