-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbox-plot.jsx
More file actions
144 lines (135 loc) · 4.43 KB
/
Copy pathbox-plot.jsx
File metadata and controls
144 lines (135 loc) · 4.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React from 'react';
export default function BoxPlot() {
return (
<div className="space-y-6 font-mono text-sm leading-relaxed">
<p>
A <strong className="text-current">Box Plot</strong> (or box-and-whisker
plot) is a standardized way of displaying the distribution of data based
on a five-number summary: minimum, first quartile (Q1), median, third
quartile (Q3), and maximum.
</p>
{/* Box Plot Diagram */}
<div className="py-8 border-y border-white/5 my-8">
<svg
viewBox="0 0 400 140"
className="w-full h-auto font-mono text-[10px]"
>
{/* Main Range Line (Whiskers) */}
<line
x1="50"
y1="70"
x2="350"
y2="70"
stroke="#525252"
strokeWidth="2"
/>
{/* Whisker Ends (Min/Max) */}
<line
x1="50"
y1="55"
x2="50"
y2="85"
stroke="#525252"
strokeWidth="2"
/>
<text x="50" y="100" fill="#737373" textAnchor="middle">
Min
</text>
<line
x1="350"
y1="55"
x2="350"
y2="85"
stroke="#525252"
strokeWidth="2"
/>
<text x="350" y="100" fill="#737373" textAnchor="middle">
Max
</text>
{/* The Box (IQR) - Green to match text */}
<rect
x="120"
y="40"
width="160"
height="60"
fill="#10b981"
fillOpacity="0.1"
stroke="#10b981"
strokeWidth="2"
/>
<text
x="200"
y="30"
fill="#10b981"
textAnchor="middle"
className="uppercase tracking-widest font-bold"
>
IQR (Q1-Q3)
</text>
{/* Median Line - Blue to match text */}
<line
x1="180"
y1="40"
x2="180"
y2="100"
stroke="#3b82f6"
strokeWidth="3"
/>
<text
x="180"
y="120"
fill="#3b82f6"
textAnchor="middle"
className="uppercase tracking-widest font-bold"
>
Median
</text>
{/* Outliers - Red to match text */}
<circle cx="20" cy="70" r="3" fill="#f87171" />
<circle cx="380" cy="70" r="3" fill="#f87171" />
<text x="20" y="100" fill="#f87171" textAnchor="middle">
Outlier
</text>
</svg>
</div>
<div className="grid gap-6 my-8">
<div className="border-l-2 border-blue-500/50 pl-4">
<h4 className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-1">
Median (Q2)
</h4>
<p className="text-xs text-gray-400">
The middle value of the dataset. It splits the data into two equal
halves. In a box plot, this is represented by the line inside the
box.
</p>
</div>
<div className="border-l-2 border-green-500/50 pl-4">
<h4 className="text-xs font-bold text-green-400 uppercase tracking-widest mb-1">
Interquartile Range (IQR)
</h4>
<p className="text-xs text-gray-400">
The distance between the first quartile (25th percentile) and the
third quartile (75th percentile). It represents the "middle 50%" of
the data and is shown as the height/width of the box itself.
</p>
</div>
<div className="border-l-2 border-red-500/50 pl-4">
<h4 className="text-xs font-bold text-red-400 uppercase tracking-widest mb-1">
Outliers
</h4>
<p className="text-xs text-gray-400">
Data points that fall significantly outside the range of the rest of
the data. Usually defined as points further than 1.5 × IQR from the
edges of the box. They are typically plotted as individual dots
beyond the whiskers.
</p>
</div>
</div>
<p className="text-xs text-gray-500 border border-white/10 p-4 uppercase tracking-wide">
Box plots are exceptionally useful for comparing distributions between
several groups at once, highlighting differences in spread and central
tendency.
</p>
</div>
);
}