Skip to content

Instantly share code, notes, and snippets.

@gmifflen
Last active March 25, 2024 14:44
Show Gist options
  • Save gmifflen/33ebf976503c454f28f658d91f3c8cb5 to your computer and use it in GitHub Desktop.
Save gmifflen/33ebf976503c454f28f658d91f3c8cb5 to your computer and use it in GitHub Desktop.
not-working skill tree graph
```r
library(jsonlite)
library(igraph)
library(ggraph)
library(dplyr)
library(ggplot2)
file_path <- "./abbrev_nodes.json"
mastery_tree_data <- fromJSON(file_path)
graph <- make_empty_graph(directed = TRUE)
# sdd nodes
for (node_id in names(mastery_tree_data)) {
node_info <- mastery_tree_data[[node_id]]
label_text <- paste(
node_info$name, "\nLvl", node_info$current_level, "/",
node_info$max_level
)
graph <- add_vertices(graph, 1, name = node_id, label = label_text)
}
# add edges
for (node_id in names(mastery_tree_data)) {
node_info <- mastery_tree_data[[node_id]]
if (!is.null(node_info$children)) {
for (child_id in node_info$children) {
if (child_id %in% names(mastery_tree_data)) {
graph <- add_edges(graph, c(node_id, child_id))
}
}
}
}
manual_layout <- data.frame(
name = names(mastery_tree_data),
x = sapply(mastery_tree_data, function(x) x$col), y = sapply(
mastery_tree_data,
function(x) x$row
), stringsAsFactors = FALSE
)
manual_layout$name <- as.character(manual_layout$name)
plot <- ggraph(graph, layout = manual_layout) + geom_edge_link() +
geom_node_point(size = 5, color = "steelblue") +
geom_node_text(aes(label = label), repel = TRUE, size = 3, color = "black") +
theme_void() +
ggtitle("mastery Tree Visualization")
print(plot)
```
I've tried doing this, but it didn't change a thing:
```r
graph_width <- max(mastery_tree$x) - min(mastery_tree$x)
midpoint_x <- min(mastery_tree$x) + (graph_width/2)
desired_midpoint_x <- 0
shift_x <- desired_midpoint_x - midpoint_x
mastery_tree$x <- mastery_tree$x + shift_x
x_range <- max(mastery_tree$x) - min(mastery_tree$x)
x_lim <- c(min(mastery_tree$x) - 0.1 * x_range, max(mastery_tree$x) + 0.1 * x_range)
plot <- ggraph(graph, layout = 'manual', node.positions = mastery_tree) +
geom_edge_link() +
geom_node_point(size = 3) +
geom_node_text(aes(label = label), repel = TRUE, size = 3) +
expand_limits(x = x_lim) +
theme(plot.margin = unit(c(1, 1, 1, 1), "cm"))
```
@gmifflen
Copy link
Author

abbrev_nodes.json

{
  "Node1": {
    "name": "Attack",
    "parents": [],
    "children": ["Node2_1", "Node2_2"],
    "current_level": 0,
    "max_level": 3,
    "cost": 1,
    "level_up_stats": [{ "atk": 20 }, { "atk": 20 }, { "atk": 20 }],
    "icon": "./images/icon_atk",
    "row": 1,
    "col": 1
  },
  "Node2_1": {
    "name": "Gold Loot",
    "parents": ["Node1"],
    "children": ["Node3_1", "Node3_2"],
    "current_level": 0,
    "max_level": 3,
    "cost": 1,
    "level_up_stats": [{ "gold": 10 }, { "gold": 10 }, { "gold": 10 }],
    "icon": "./images/icon_gold",
    "row": 2,
    "col": 1
  },
  "Node2_2": {
    "name": "Health",
    "parents": ["Node1"],
    "children": ["Node3_3"],
    "current_level": 0,
    "max_level": 3,
    "cost": 1,
    "level_up_stats": [{ "health": 20 }, { "health": 20 }, { "health": 20 }],
    "icon": "./images/icon_health",
    "row": 2,
    "col": 2
  },
  "Node3_1": {
    "name": "Health",
    "parents": ["Node2_1"],
    "children": ["Node4"],
    "current_level": 0,
    "max_level": 3,
    "cost": 1,
    "level_up_stats": [{ "health": 30 }, { "health": 15 }, { "health": 15 }],
    "icon": "./images/icon_health",
    "row": 3,
    "col": 1
  },
  "Node3_2": {
    "name": "Idle Earnings",
    "parents": ["Node2_1"],
    "children": ["Node4"],
    "current_level": 0,
    "max_level": 4,
    "cost": 2,
    "level_up_stats": [
      { "idle": 25 },
      { "idle": 25 },
      { "idle": 25 },
      { "idle": 25 }
    ],
    "icon": "./images/icon_idle",
    "row": 3,
    "col": 2
  },
  "Node3_3": {
    "name": "Gold Loot",
    "parents": ["Node2_2"],
    "children": ["Node4"],
    "current_level": 0,
    "max_level": 3,
    "cost": 1,
    "level_up_stats": [{ "gold": 15 }, { "gold": 15 }, { "gold": 20 }],
    "icon": "./images/icon_gold",
    "row": 3,
    "col": 3
  },
  "Node4": {
    "name": "Attack",
    "parents": ["Node3_1", "Node3_2", "Node3_3"],
    "children": ["Node5"],
    "current_level": 0,
    "max_level": 3,
    "cost": 2,
    "level_up_stats": [{ "atk": 30 }, { "atk": 30 }, { "atk": 30 }],
    "icon": "./images/icon_atk",
    "row": 4,
    "col": 1
  }
}

@gmifflen
Copy link
Author

trying to center:

graph_width <- max(mastery_tree$x) - min(mastery_tree$x)
midpoint_x <- min(mastery_tree$x) + (graph_width/2)

desired_midpoint_x <- 0

shift_x <- desired_midpoint_x - midpoint_x

mastery_tree$x <- mastery_tree$x + shift_x

x_range <- max(mastery_tree$x) - min(mastery_tree$x)
x_lim <- c(min(mastery_tree$x) - 0.1 * x_range, max(mastery_tree$x) + 0.1 * x_range)

plot <- ggraph(graph, layout = 'manual', node.positions = mastery_tree)
  + geom_edge_link()
  + geom_node_point(size = 3)
  + geom_node_text(aes(label = label), repel = TRUE, size = 3)
  + expand_limits(x = x_lim)
  + theme(plot.margin = unit(c(1, 1, 1, 1), "cm"))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment