Moving labels to the left side of the nodes in a Sankey diagram

Below is the Sankey diagram code used in their 'Definition' section. You can also access the code by clicking on the CODE button located on the right side of the diagram.

I'm wondering how we can make the countries on the left (such as Africa, Europe, North America) move to the left side of their nodes, similar to how the countries on the right (Africa, Europe, Latin America) are positioned on the right side of their nodes. Thank you for your help.

# Required Libraries
library(tidyverse)
library(viridis)
library(patchwork)
library(hrbrthemes)
library(circlize)

# Load dataset from GitHub
data <- read.table("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/13_AdjacencyDirectedWeighted.csv", header=TRUE)

# Package
library(networkD3)

# Convert data to long format
data_long <- data %>%
  rownames_to_column %>%
  gather(key = 'key', value = 'value', -rowname) %>%
  filter(value > 0)
colnames(data_long) <- c("source", "target", "value")
data_long$target <- paste(data_long$target, " ", sep="")

# Create node data frame
nodes <- data.frame(name=c(as.character(data_long$source), as.character(data_long$target)) %>% unique())

# Reformat links using IDs
data_long$IDsource=match(data_long$source, nodes$name)-1 
data_long$IDtarget=match(data_long$target, nodes$name)-1

# Define colour scale
ColourScal ='d3.scaleOrdinal() .range(["#FDE725FF","#B4DE2CFF","#6DCD59FF","#35B779FF","#1F9E89FF","#26828EFF","#31688EFF","#3E4A89FF","#482878FF","#440154FF"])'

# Generate the Network
sankeyNetwork(Links = data_long, Nodes = nodes,
                     Source = "IDsource", Target = "IDtarget",
                     Value = "value", NodeID = "name", 
                     sinksRight=FALSE, colourScale=ColourScal, nodeWidth=40, fontSize=13, nodePadding=20)


Answer №1

In order to distinguish between nodes on the left and those that are not, you need a method of identification (e.g., a way to specify the nodes where special formatting should be applied). One approach is to include this information in your nodes data frame, and then ensure it is added back into the htmlwidgets object after executing sankeyNetwork, as only the essential columns are preserved. Subsequently, you can incorporate custom JavaScript using htmlwidgets::onRender to selectively apply a unique style to certain text nodes.

library(tibble)
library(dplyr)
library(tidyr)
library(networkD3)
library(htmlwidgets)

url <- 'https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/13_AdjacencyDirectedWeighted.csv'
data <- read.table(url, header = TRUE)

data_long <- 
  data %>% 
  rownames_to_column('source') %>% 
  as_tibble() %>% 
  pivot_longer(-source, 'target') %>% 
  filter(value > 0) %>% 
  mutate(target = gsub('\\.', ' ', target)) %>% 
  mutate(source = paste0('src_', source)) %>% 
  mutate(target = paste0('trgt_', target))

nodes <- data.frame(name = unique(c(data_long$source, data_long$target)), stringsAsFactors = FALSE)
nodes <- tibble(name = unique(c(data_long$source, data_long$target)),
                target = grepl('trgt_', name))

data_long$IDsource <- match(data_long$source, nodes$name) - 1 
data_long$IDtarget <- match(data_long$target, nodes$name) - 1

nodes$name <- sub('^.*_', '', nodes$name)

ColourScal ='d3.scaleOrdinal() .range(["#FDE725FF","#B4DE2CFF","#6DCD59FF","#35B779FF","#1F9E89FF","#26828EFF","#31688EFF","#3E4A89FF","#482878FF","#440154FF"])'

sn <- sankeyNetwork(Links = data_long, Nodes = nodes,
                    Source = "IDsource", Target = "IDtarget",
                    Value = "value", NodeID = "name", 
                    sinksRight=FALSE, colourScale=ColourScal, nodeWidth=40, fontSize=13, nodePadding=20)

sn$x$nodes$target <- nodes$target

sn <- onRender(sn,
  '
  function(el) {
    d3.select(el)
      .selectAll(".node text")
      .filter(d => d.target)
      .attr("x", -6)
      .attr("text-anchor", "end");
  }
  '
)

sn

https://i.sstatic.net/tkCoW.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

The ng-bootstrap datepicker does not allow setting a default date prior to selection

I have implemented the ng-bootstrap date picker in my project and I am facing an issue with setting a default date for the input field before selecting a date from the datepicker itself. <input type="text" id="datepicker{{i}}" class="form-control" form ...

Using Slim Framework and AJAX to handle the forward slash character as a parameter

I am using an ajax call to communicate with a web service built on the Slim framework. This service is responsible for storing notes in my database. One issue I am facing is that users are allowed to input strings like "send 1/2 piece". This causes a prob ...

Observables and the categorization of response data

Understanding Observables can be a bit tricky for me at times, leading to some confusion. Let's say we are subscribing to getData in order to retrieve JSON data asynchronously: this.getData(id) .subscribe(res => { console.log(data.ite ...

Dealing with numerous https requests within a node.js application

I've been searching around on SO for assistance with this issue, but I seem to be going in circles without making any progress. My current project involves making multiple ReST POST requests using node.js https. I need to keep track of the responses ...

What is the best way to extract specific values from one JSON object and transfer them to another using lodash?

//I have a pair of objects var obj1={ "name":"mayur", "age":23 } var obj2={ "name":"keyur", "age":29, "limit":54, "surname":"godhani" } //I am familiar with one approach var j1 = {name: 'Varun', age: 24}; var j2 = {code: &ap ...

Adjusting the width of the container <div> will automatically resize the inner <div> to match

I have a main container element. .wrapper{ border:1px solid blue; position:relative; top:20%; left:30%; height: 300px; width: 350px; } When I adjust the width of the parent container, the child box does not reposition itself accor ...

What is the proper method for utilizing the "oneOf" keyword in this schema?

Is it possible to have either option A or B, but not both (mutually exclusive)? In Draft 3, I am required to use whatever is available, even though the version on top says 4. This is because when using an array for "required", it throws an error stating t ...

Is it recommended for Protractor Page Objects to reveal ElementFinder?

Our team is currently debating whether or not to prohibit the exposure of "ElementFinder" and "ElementArrayFinder" in our Page Objects. The main point of contention is a quote by Simon Stewart. Page Objects Done Right - selenium conference 2014 (page.7) ...

Are the elements in the second array the result of squaring each element in the first array? (CODEWARS)

I am currently working on a 6kyu challenge on codewars and I've encountered a frustrating issue that I can't seem to figure out. The task at hand involves comparing two arrays, a and b, to determine if they have the same elements with the same mu ...

What could be causing the connection failure between my MongoDB and Node.js?

Hello there! This is my first time posting a question on Stack Overflow. I've been attempting to connect my application to MongoDB. Despite successfully connecting to the server, I am facing issues with the MongoDB connection. I have double-checked ...

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

Identifying the hashKey and selected option in a dropdown menu

My attempt to set the selected option for the select menu is not working because the data in the ng-model that I am sending has a different $$hashKey compared to the data in the select menu, and the $$hashKey holds the values. <select class="form-contr ...

What could be causing Typed.js to not function properly in my situation?

Having an issue with typed.js not functioning properly. Here is the code snippet: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins ...

Issues with TypeScript arise when transferring arguments between functions

Encountering a TypeScript error due to this pattern: Error message: 'Argument of type '(string | number)[]' is not assignable to parameter of type 'string[] | number[]' function foo(value: string | number) { return bar([va ...

Empty refreshToken in aws-amplify's javascript

Utilizing aws-amplify, my configuration looks like this: Amplify.configure({ Auth: { region: config.aws.region, identityPoolRegion: config.aws.region, userPoolId: process.env.userPoolId, userPoolWebClientId: process.env.appClientI ...

NodeJS: The module failed to automatically register itself

Exploring the capabilities of IBM Watson's Speech to Text API, I encountered an issue while running my NodeJS application. To handle the input audio data and utilize IBM Watson's SpeechToText package, I integrated the line-in package for streami ...

Passing a custom Vue component as a property to a parent component

Struggling to find answers to my unique question, I'm attempting to create an interface where users can drag or input images using Vue. I've developed a component called Card, which combines Vue and Bulma to create card-like objects with props fo ...

What is the best way to showcase a bootstrap dropdown within a limited height container while keeping the overflow hidden?

I have developed a collapsible toolbar that features a bootstrap dropdown element. The challenge I am facing is maintaining a fixed height for the toolbar while ensuring that any content exceeding this height is hidden, with the exception of popups. To add ...

Having trouble getting the "If paused" feature to function properly in videojs

When my video is paused, I want to display an overlay on top of it. I found the following piece of code in the documentation: var isPaused = myPlayer.paused(); var isPlaying = !myPlayer.paused(); So, I tried implementing it like this: var isPaused = m ...