# Horizontal Boxplot

This tutorial is a variation around the general introduction to boxplot with react and d3.js. You should probably understand the concepts described there before reading here.

The general introduction relies on a `VerticalBox`

function that draws a.. *vertical box* 🙃. The main difference here is that we are now building a `HorizontalBox`

function and swap the X and Y axes.

As usual, this post comes with explanation, a code sandbox and a template that you can reuse instantly in your web application.

## Horizontal Boxplot implementation

Here is a proposal of implementation for a horizontal boxplot with react and d3.js.

D3 actually has a very minor role here. It is only used to compute the `x`

and `y`

scales. The x scale is a **linear scale** made with the `scaleLinear()`

function. The Y scale shows groups thanks to the `scaleBand()`

function.

A horizontal boxplot made with React and D3.js.

## Horizontal box drawing

We need a function that draws a horizontal box in SVG based on the quartiles position in pixels.

The function looks like this:

```
export const HorizontalBox = ({
min,
q1,
median,
q3,
max,
height,
stroke,
fill,
}: HorizontalBoxProps) => {
return (
<>
<line
y1={height / 2}
y2={height / 2}
x1={min}
x2={max}
stroke={stroke}
width={STROKE_WIDTH}
/>
<rect
x={q1}
y={0}
width={q3 - q1}
height={height}
stroke={stroke}
fill={fill}
/>
<line
y1={0}
y2={height}
x1={median}
x2={median}
stroke={stroke}
width={STROKE_WIDTH}
/>
</>
);
};
```

## Next steps

This post is a translation of the basic boxplot example, switching from **vertical** to **horizontal** mode.

Now that this basic horizontal boxplot is available, it should be straightforward to add interesting features like showing individual data points or switching to a violin plot.

Distribution

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