block by timelyportfolio ac9610255813243b3271334086eff2a9

d3-sankey on Titanic

Full Screen

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.

Code in R

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.

library(d3r)
library(dplyr)
library(htmltools)

titan_ndlnk <- d3_table(Titanic, vars=c("Class","Sex","Survived"))
titan_ndlnk <- jsonlite::toJSON(
  titan_ndlnk,
  dataframe = "rows"
)

browsable(
  tagList(
    d3_dep_v4(offline=FALSE),
    tags$head(tags$script(src="https://unpkg.com/d3-sankey")),
    tag("svg", list(id="tree", height=600, width=800)),
    tags$script(HTML(
sprintf(
"
var titanic = %s;
var sankey = d3.sankey()
  .extent([[1,1],[750,400]])(titanic);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var tree_g = d3.select('#tree')
  .append('g')
  .attr('transform', 'translate(60,20)');

var links = tree_g.selectAll('.link')
  .data(sankey.links);

links = links.merge(
  links.enter()
    .append('path')
    .classed('link', true)
)

links
  .attr('d', d3.sankeyLinkHorizontal())
  .style('fill', 'none')
  .style('stroke', function(d) {
    return color(d.target.name);
  })
  .style('stroke-opacity', 0.5)
  .attr('stroke-width', function(d) {
    return Math.max(1, d.width);
  });

var nodes = tree_g.selectAll('.node')
  .data(sankey.nodes);

nodes = nodes.merge(
  nodes
    .enter()
    .append('g')
    .classed('node', true)
)

nodes
  .append('rect')
  .attr('x', function(d) {
    return d.x0;
  })
  .attr('y', function(d) {
    return d.y0;
  })
  .attr('height', function(d) {
    return d.y1 - d.y0;
  })
  .attr('width', function(d) {
    return d.x1 - d.x0;
  })
  .style('fill', function(d) {
    return color(d.name);
  })

nodes
  .append('text')
  .attr('x', function(d) { return d.x0 - 6; })
  .attr('y', function(d) { return (d.y1 + d.y0) / 2; })
  .attr('dy', '0.35em')
  .attr('text-anchor', 'end')
  .text(function(d) { return d.name; })

",
titan_ndlnk
)
    ))
  )
)

index.html