# 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 section

A 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!