We Keep Coding

Use different styles for each line in billboarder

I have a table with weekly data that I am comparing against a yearly target. I used to add the yearly target like this:
bb_y_grid(show = TRUE,
lines = list(list(value = 99, text = "Goal")))
This was a nice and simple solution, however the goals have shifted in 2022 so now I want to show 99 for x = 2021 and 98 for x = 2022. I could not find an option to limit the gridline to only show for a range of x.
My next idea was to add a line to my data. So I have 1 line for the real data and 1 line for the budget. This looks as follows:
However, I don't want to show the points for the budget line, only for the real data. My code is as follows:
billboarder() %>%
bb_linechart(dt.Cycle(), mapping = bbaes(YearWeekCiclo, Perc, Type),
show_point = T, type = "line") %>%
bb_x_axis(type = "category", tick = list(rotate = 90, width = 100), height = 90,
label = list(text = "Year-Week-Cycle", position = "outer-right")) %>%
bb_y_axis(label = list(text = "Percentage", position = "outer-top"), max = 100) %>%
bb_y_grid(show = TRUE) %>%
bb_legend(show = FALSE)
My question: How can I add a second line to my graph with it's own styling
Note: If you are only familiar with using billboard.js in JavaScript but know a solution I can try to translate that back to R language myself if needed

Skip overlapping tick labels in Plotly Javascript

We are using scatter plots in Plotly.JS to display 2D graph data over a large X range, so we use logarithmic scaling. Zooming and panning works very well, except for one small issue: the X tick labels are confusing because Plotly uses single-digit labels for minor (non-powers of 10) ticks:
I can use tickFormat: '0.1s' to show real numbers (which is what users want) instead of single digits, but then there are cases where these labels can overlap:
I can also add dtick: 'D2' which only displays subticks at positions 2 and 5 and not all digits, but this is then fixed and doesn't adjust to scaling any more.
Ideally, I could specify subtick-label digits where to skip the label (but not the vertical line) completely, without having to resort to tickmode: array and having to specify all tick labels manually, and still benefit from automatic tick adjustment depending on scaling.
For example, if all subtick digits are displayed, I would say I'd like to have tick labels at positions 1, 2, 3, 5, 7, the result would look like this:
The other display modes (digits 2 & 5 only, or just the power of 10) would not change.
Is there a way to do this? If so, how? I'm not afraid of patching Plotly if required, but right now I don't know where to start looking.

Usually I solve this by rotating the labels by some 35-45 degrees. That way they are all there and still readable.
https://plotly.com/javascript/reference/#layout-xaxis-tickangle
tickangle
Parent: layout.xaxis
Type: angle
Default: "auto"
Sets the angle of the tick labels with respect to the horizontal. For example, a `tickangle` of -90 draws the tick labels vertically.

OK, so I looked deeply into the Plotly configuration options and there are options that are semi-automatically modified 'live' depending on zoom levels, but the conditions when those modifications happen are hardcoded.
So here's a patch (for Plotly v1.36, because that's what we currently use). I modified some of the hardcoded conditions when to change from 1,10,100,... to 1,2,5,10,20,50,100,... to 1,2,3,4,5,... labeling on logarithmic axes and removed the tick labels at 4, 6, 8 and 9 for the last case to avoid text overlapping.
For my application, this now works well and I could not find any more overlapping of tick labels. Also, I got rid of the single digits between powers of ten which confused some users.
--- a/plotly-latest.v1.36.js 2021-05-24 21:45:28.000000000 +0100
+++ b/plotly-latest.v1.36.js 2022-02-02 10:21:08.000000000 +0100
## -127302,13 +127302,13 ##
if(!nt) {
if(ax.type === 'category') {
minPx = ax.tickfont ? (ax.tickfont.size || 12) * 1.2 : 15;
nt = ax._length / minPx;
}
else {
- minPx = ax._id.charAt(0) === 'y' ? 40 : 80;
+ minPx = ax._id.charAt(0) === 'y' ? 40 : 100;
nt = Lib.constrain(ax._length / minPx, 4, 9) + 1;
}
// radial axes span half their domain,
// multiply nticks value by two to get correct number of auto ticks.
if(ax._name === 'radialaxis') nt *= 2;
## -127395,14 +127395,21 ##
// Start with it cleared and mark that we're in calcTicks (ie calculating a
// whole string of these so we should care what the previous date head was!)
ax._prevDateHead = '';
ax._inCalcTicks = true;
var ticksOut = new Array(vals.length);
- for(var i = 0; i < vals.length; i++) ticksOut[i] = axes.tickText(ax, vals[i]);
+ // if scaling == log, skip some intermediate tick labels to avoid overlapping text
+ var skipTexts = /^[4689]/;
+ var text;
+ for(var i = 0; i < vals.length; i++) {
+ text = axes.tickText(ax, vals[i]);
+ if(ax.type == "log" && ax.dtick == "D1" && text.text.match(skipTexts)) text.text = "";
+ ticksOut[i] = text;
+ }
ax._inCalcTicks = false;
return ticksOut;
};
function arrayTicks(ax) {
## -127535,18 +127542,20 ##
// ticks on a linear scale, labeled fully
roughDTick = Math.abs(Math.pow(10, rng[1]) -
Math.pow(10, rng[0])) / nt;
base = getBase(10);
ax.dtick = 'L' + roundDTick(roughDTick, base, roundBase10);
+ ax.tickformat = '';
}
else {
// include intermediates between powers of 10,
// labeled with small digits
// ax.dtick = "D2" (show 2 and 5) or "D1" (show all digits)
- ax.dtick = (roughDTick > 0.3) ? 'D2' : 'D1';
+ ax.dtick = (roughDTick > 0.4) ? 'D2' : 'D1';
+ ax.tickformat = '0.1s';
+ ax.hoverformat = '0.2s'; // Workaround to fix hoverinfo label formatting
}
}
else if(ax.type === 'category') {
ax.tick0 = 0;
ax.dtick = Math.ceil(Math.max(roughDTick, 1));
}
The patch is hereby released as Public Domain to make it as easy as possible to use this for direct integration into Plotly (maybe as a "D3" formatting option?).

How to adjust node size based on value in diagonalNetwork of networkD3

I am new to using the networkd3 package and I am trying to understand how to adjust the layout manually. As an example I have the following layout
library(networkD3)
library(tidyverse)
library(data.tree)
library(htmlwidgets)
set.seed(1)
example = data.frame(lvl1 = rep("A", 5), lvl2 = sample(c("D" ,"B", "C"), 5, replace = T), value = sample(c(1,2,3), 5, replace = T))
> example
lvl1 lvl2 value
1 A D 3
2 A C 3
3 A D 2
4 A B 2
5 A D 3
Data_tree <- example %>%
unite(col="pathString",lvl1,lvl2,sep="-",remove=FALSE, na.rm = T) %>%
as.Node(pathDelimiter = "-")
diagonalNetwork(ToListExplicit(Data_tree, unname = TRUE ),
fontSize = 9,
linkColour = "#ccc",
nodeColour = "#fff",
nodeStroke = "orange",
textColour = "#000000")
What I would like to do is to somehow map the value column into the size of the node. Similarly to how aesthetic mappings work in ggplot2. So ideally for each level I would like the nodesize to be proportional to the total value for this breakdown.
So for example lvl1 has only one possible value A so the node should get 100% of the chosen nodesize. On the other hand, lvl2 has 3 values, so for D I would like it to have (3+2+3)/13 % of the full node size, C should have 3/13 % of the nodesize and B should have 2/13 % of the nodesize.
This is just an example and I can do any manipulation needed, but is this even possible for these types of charts?

This is not an intended use of diagonalNetwork, so expect that there will be complications (e.g. when you hover over the nodes with the mouse cursor, the default behavior will reset the node size back to the default size), however...
# add a value to the root node
data_list <- ToListExplicit(Data_tree, unname = TRUE)
data_list$value <- 5
# save the output of diagonalNetwork as an object
d3net <- diagonalNetwork(data_list,
fontSize = 9,
linkColour = "#ccc",
nodeColour = "#fff",
nodeStroke = "orange",
textColour = "#000000")
# write some JavaScript to set the circles' radii to the data's value
node_size_js <-
'
function(el) {
d3.select(el)
.selectAll(".node")
.selectAll("circle")
.attr("r", d => d.data.value * 5);
}
'
# use onRender to run the JS when it loads
htmlwidgets::onRender(d3net, node_size_js)

D3 js what kind of scale to use for unbalanced data

I have to render few circles on which "r" attr depends on the input data. The problem with input data is one of the value is so huge compared to rest of the data points that when i use scaleLinear | Pow | Log with range 2 - 35 ; all my circles have radius between 2 - 3 and only that few data points are radius 35. so what kind of scale can i use for such data for better visual ?

You could maybe use d3.scaleQuantize.
Here is the example provided by the documentation:
var width = d3.scaleQuantize()
.domain([10, 100])
.range([1, 2, 4]);
width(20); // 1
width(50); // 2
width(80); // 4
Or you could write your own classification function. Something like this (with 3 classes here):
if input data < x => r = 2
else if x <= input data < y => r = 8
else (input data >=y) => r = 14

How to generate a color for special number

how can I generate a color for special number with javascript, so that for example for number 3 I get the same color every time, for number 6 another color.
Thanks

You can use an array, store each color you need in it, and then access by index:
// declare color array
var colors = [ "#fff", "#f00", "#0f0", "#00f" ]; // put every color you need
// access the colors
var white = colors[0];
var red = colors[1];
// and so on...
EDIT
Arrays in JavaScript are dynamic, so you can add colors at runtime:
colors.push("#000"); // add black color

Maybe:
var colorNum = 2;
var colors = [
"blue",
"red",
"yellow",
"black"
];
Where colors[colorNum] is "yellow".
You can just reference colors (an array) and index it by using an integer (any integer from 0 to the length of the array) to get the associated color.

Do you want N distinct colours?
You could use HSL colours as in: http://jsfiddle.net/duw6n/5/
function mod(num, den) {
return Math.abs(num) % den;
}
function hue(n, k) {
var tau = 360.0,
k = k || 1;
return mod((tau / n) * k, tau);
}
function gen_colours(lst) {
return lst.map(function (c) {
var node = $('<div/>').addClass('colour');
node.html(c)
.css({'background-color': 'hsl(' + hue(lst.length, c) + ', 100%, 50%)'});
return node;
});
}
Also see Generate colors with JavaScript for JS libraries handling colours.