Vertical arc diagram
This tutorial is a variation around the general introduction to arc diagram with react and d3.js. You should probably understand the concepts described there before reading here.
This example explains how to make a vertical version of the arc diagram. The vertical version is sometimes prefered as it makes it easier to read the node labels.
A code sandbox is provided for the final result, but explanations target what's different compared to a classic horizontal arc diagram.
Plot and code
If you are in a hurry, here is the final plot we're trying to achieve here, together with its code:🙇♂️
It is a very simple vertical arc diagram, a variation of thehorizontal version deeply described in the arc diagram section of the gallery
Arc sectionA vertical arc diagram made with d3.js and react.
Vertical arcs
The main difficulty when it comes to make an arc diagram is to draw arcs in SVG.
The function allowing to draw arcs between 2 data points is a bit complicated since it requires to use elliptical arc curves.
You can read more explanation about the syntax in the official doc. But in the meantime here is the function I suggest to draw an arc connecting 2 points vertically:
const verticalArcGenerator = (
xStart: number,
yStart: number,
xEnd: number,
yEnd: number
) => {
return [
// the arc starts at the coordinate xStart, yStart
"M",
xStart,
yStart,
// A means we're gonna build an Elliptical Arc Curve
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
"A",
((yStart - yEnd) / 2) * 2, // rx: first radii of the ellipse (inflexion point)
(yStart - yEnd) / 2, // ry: second radii of the ellipse (inflexion point)
0, // angle: rotation (in degrees) of the ellipse relative to the x-axis
1, // large-arc-flag: large arc (1) or small arc (0)
yStart < yEnd ? 1 : 0, // sweep-flag: the clockwise turning arc (1) or counterclockwise turning arc (0)
// Position of the end of the arc
xEnd,
",",
yEnd,
].join(" ");
};Labels
Note that some labels have been added here compared to the vertical version.
This is the main advantage of choosing the horizontal layout!
Contact
👋 Hey, I'm Yan and I'm currently working on this project!
Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!