# Arc thickness in arc diagram

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.

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")
.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,
group
}));

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

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).