Arc thickness in arc diagram

Community Help
1

Hello All,

I am trying to make a simple arc diagram based on the following template:

I want to alter the thickness of arcs based on the “value” parameter. How can I accomplish that? Alternatively, I am looking for any method that allows me to change each arc’s thickness independently.

Thank you in advance

2

Hi @iqbalt30, and welcome to the forum!

The arc path thickness in the example that you shared is set here:

  const path = svg.insert("g", "*")
      .attr("fill", "none")
      .attr("stroke-opacity", 0.6)
      .attr("stroke-width", 1.5)  // changing this value to make the lines appear thinner or ticker
    .selectAll("path")
    .data(graph.links)
    .join("path")
      .attr("stroke", d => d.source.group === d.target.group ? color(d.source.group) : "#aaa")
      .attr("d", arc);

Thinking through your question conceptually, it stands to reason that if you change the absolute value assigned to the stroke width attribute to a relative value that is calculated as a function of your value parameter, then this would allow you to represent line thickness proportionally.

From what I can tell, the value property use for the chart is not a measure of instances, but rather a definition of associated groupings – telling the nodes how to connect to one another (meaning that, if I am reading this correctly, your thickness would simply be another means of indicating which groups have the most connections – easy to see when sorting by group, but agreeable obscure when sorting by name or degree). The values appear to be calculated in this part the graph function:

const nodes = data.nodes.map(({id, group}) => ({
    id,
    sourceLinks: [],
    targetLinks: [],
    group
  }));

  const nodeById = new Map(nodes.map(d => [d.id, d]));

  const links = data.links.map(({source, target, value}) => ({
    source: nodeById.get(source),
    target: nodeById.get(target),
    value
  }));

If I am correct, then you could try to pick apart that segment and return just the calculated value, and then plug that calculated value back into the stroke width parameter above (also ensuring that you convert the output into a scale that is meaningful for how you want your graph to look).

Regrettably I am not sufficiently skilled to actually help you with a method for defining line thickness proportional to the value parameter or for connections between specific nodes… so I don’t know whether I am responding directly to your questions or pointing you to areas that would help you figure this out on your (please forgive me if not, and if you already made it as far in your reasoning as I seek to outline here). Just hoping to help address what I read as one part of your question, and that others on the forum can help with your the more complex stuff.

… All that said, if you tinker with the chart more on your own and indicate where you hit a specific problem, you are more likely to get better advice from the many experts regularly reading this forum (and if it’s not clear, I don’t count myself as an expert… but I do try to help unpack problems where I can).

Best of wishes!