This example courtesy of Displayr who have generously offered to sponsor a series of independently authored posts about interactive visualization with R and JavaScript. Thank you so much Displayr for this opportunity.
Below is the R source code for creating this visualization. You might notice that much of this is actually JavaScript. To see the JavaScript, please inspect index.html.
(function() {
library(htmltools)
library(d3r)
library(dplyr)
titan_nest <<- as.data.frame(Titanic) %>%
select(-Age) %>%
group_by(Class, Sex, Survived) %>%
summarise(Freq = sum(Freq)) %>%
d3_nest(value_cols="Freq", root="Titanic")
})()
scr_part <- function() {
tags$script(HTML(
sprintf(
"
function initialize(hier) {
d3.partition().size([height,width])(hier);
var nodes = svg.selectAll('g.node')
.data(hier.descendants());
nodes = nodes.merge(
nodes.enter().append('g')
.attr('class','node')
);
nodes.attr('transform', function(d) {
return 'translate(' + d.y0 + ',' + d.x0 + ')'
});
nodes.append('rect')
.classed('rect-part', true);
nodes.append('rect')
.classed('rect-outline', true)
.attr('width', function(d) { return d.y1 - d.y0; })
.attr('height', function(d) { return d.x1 - d.x0; })
.style('fill', 'none')
.style('stroke', 'none');
nodes.append('text')
//.style('text-anchor','end')
.attr('dy','1em')
.text(function(d) { return d.data.name});
return nodes;
}
function drawPart(hier, nodes, duration, delay) {
d3.partition().size([height,width])(hier);
svg.selectAll('.link')
.transition()
.duration(100)
.style('opacity', 0.00001)
.remove();
nodes.selectAll('rect.rect-part')
.transition()
.duration(duration)
.delay(delay)
.attr('width', function(d) { return d.y1 - d.y0; })
.attr('height', function(d) { return d.x1 - d.x0; })
.attr('x', 0)
.attr('y', 0)
.style('fill', function(d) { return color(d.data.name) || 'gray'; })
.style('stroke', 'white');
nodes.selectAll('rect.rect-outline')
.transition()
.duration(duration)
.delay(delay)
.style('stroke', 'white')
.style('fill', 'none')
.style('stroke-dasharray', null);
}
var tm = %s;
var tm_h = d3.hierarchy(tm)
.sum(function(d){
return d.Freq || 0;
});
var width = 400;
var height = 400;
var svg = d3.select('body').append('svg')
.style('width',width + 20 + 20)
.style('height',height + 20 + 20)
.append('g')
.attr('transform','translate(20,20)');
var color = d3.scaleOrdinal(d3.schemeCategory10);
var nodes = initialize(tm_h);
drawPart(tm_h, nodes, 0, 0);
",
titan_nest
)
))
}
### create partition ####
browsable(
tagList(
d3_dep_v4(offline=FALSE),
scr_part()
)
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/d3@4.9.1/build/d3.min.js"></script>
</head>
<body style="background-color:white;">
<script>
function initialize(hier) {
d3.partition().size([height,width])(hier);
var nodes = svg.selectAll('g.node')
.data(hier.descendants());
nodes = nodes.merge(
nodes.enter().append('g')
.attr('class','node')
);
nodes.attr('transform', function(d) {
return 'translate(' + d.y0 + ',' + d.x0 + ')'
});
nodes.append('rect')
.classed('rect-part', true);
nodes.append('rect')
.classed('rect-outline', true)
.attr('width', function(d) { return d.y1 - d.y0; })
.attr('height', function(d) { return d.x1 - d.x0; })
.style('fill', 'none')
.style('stroke', 'none');
nodes.append('text')
//.style('text-anchor','end')
.attr('dy','1em')
.text(function(d) { return d.data.name});
return nodes;
}
function drawPart(hier, nodes, duration, delay) {
d3.partition().size([height,width])(hier);
svg.selectAll('.link')
.transition()
.duration(100)
.style('opacity', 0.00001)
.remove();
nodes.selectAll('rect.rect-part')
.transition()
.duration(duration)
.delay(delay)
.attr('width', function(d) { return d.y1 - d.y0; })
.attr('height', function(d) { return d.x1 - d.x0; })
.attr('x', 0)
.attr('y', 0)
.style('fill', function(d) { return color(d.data.name) || 'gray'; })
.style('stroke', 'white');
nodes.selectAll('rect.rect-outline')
.transition()
.duration(duration)
.delay(delay)
.style('stroke', 'white')
.style('fill', 'none')
.style('stroke-dasharray', null);
}
var tm = {"children":[{"name":"1st","children":[{"name":"Male","children":[{"name":"No","Freq":118,"colname":"Survived"},{"name":"Yes","Freq":62,"colname":"Survived"}],"colname":"Sex"},{"name":"Female","children":[{"name":"No","Freq":4,"colname":"Survived"},{"name":"Yes","Freq":141,"colname":"Survived"}],"colname":"Sex"}],"colname":"Class"},{"name":"2nd","children":[{"name":"Male","children":[{"name":"No","Freq":154,"colname":"Survived"},{"name":"Yes","Freq":25,"colname":"Survived"}],"colname":"Sex"},{"name":"Female","children":[{"name":"No","Freq":13,"colname":"Survived"},{"name":"Yes","Freq":93,"colname":"Survived"}],"colname":"Sex"}],"colname":"Class"},{"name":"3rd","children":[{"name":"Male","children":[{"name":"No","Freq":422,"colname":"Survived"},{"name":"Yes","Freq":88,"colname":"Survived"}],"colname":"Sex"},{"name":"Female","children":[{"name":"No","Freq":106,"colname":"Survived"},{"name":"Yes","Freq":90,"colname":"Survived"}],"colname":"Sex"}],"colname":"Class"},{"name":"Crew","children":[{"name":"Male","children":[{"name":"No","Freq":670,"colname":"Survived"},{"name":"Yes","Freq":192,"colname":"Survived"}],"colname":"Sex"},{"name":"Female","children":[{"name":"No","Freq":3,"colname":"Survived"},{"name":"Yes","Freq":20,"colname":"Survived"}],"colname":"Sex"}],"colname":"Class"}],"name":"Titanic"};
var tm_h = d3.hierarchy(tm)
.sum(function(d){
return d.Freq || 0;
});
var width = 400;
var height = 400;
var svg = d3.select('body').append('svg')
.style('width',width + 20 + 20)
.style('height',height + 20 + 20)
.append('g')
.attr('transform','translate(20,20)');
var color = d3.scaleOrdinal(d3.schemeCategory10);
var nodes = initialize(tm_h);
drawPart(tm_h, nodes, 0, 0);
</script>
</body>
</html>