a three component venn diagram in css
from nbconvert_a11y.t import get_table, Config
Series("""0 0
3 4
6 0""".splitlines()).apply(str.split).series().astype(int).pipe(
lambda df: df - df.mean()
).rename(columns=dict(zip(range(2), "xy"))).pipe(
get_table, id="venn"
)
|
0
|
-3.00
|
-1.33
|
|
1
|
0.00
|
2.67
|
|
2
|
3.00
|
-1.33
|
|
index 1
|
x
|
y
|
|
index 1
|
x
|
y
|
|
min
|
0.00
|
-3.00
|
|
max
|
2.00
|
3.00
|
%%
```css
.jp-RenderedHTML:has(#venn){
overflow: hidden;
}
#venn {
--w: 200px;
--h: 200px;
top: -75%;
display: block;
position: relative;
height: var(--h);
width: var(--w);
margin: 50px;
tbody:first-of-type{
display: block;
height: 1000px; width: var(--w);
tr {
--dy: calc(var(--y-max) - var(--y-min));
--dx: calc(var(--x-max) - var(--x-min));
--mul: 2;
--y-frac: calc((var(--y) - var(--y-min)) / var(--dy));
--x-frac: calc((var(--x) - var(--x-min)) / var(--dx));
display: block;
position: absolute;
top: calc(var(--y-frac) * 100%);
left: calc(var(--x-frac) * 100%);
border: 20px solid red;
border-radius: 100%;
width: calc(var(--mul) * var(--w));
height: calc(var(--mul) * var(--w));
background: none;
td{}
}
}
}
```