Skip to content

Commit b3afe53

Browse files
committed
fix: Swap Viz5 and Viz6. Minor fixes like legends, annotations.
1 parent 343f24f commit b3afe53

8 files changed

Lines changed: 1113 additions & 1307 deletions

File tree

7 KB
Binary file not shown.

data/viz5/script.py

Lines changed: 198 additions & 174 deletions
Large diffs are not rendered by default.

data/viz6/script.py

Lines changed: 182 additions & 198 deletions
Large diffs are not rendered by default.

public/data/crashes_for_poisson.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

src/components/Viz5.css

Lines changed: 70 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -68,34 +68,68 @@
6868
margin: 0 2px;
6969
}
7070

71-
/* ── Stats strip ── */
72-
.viz5-stats {
73-
margin-left: auto;
71+
/* ── Level toggle group ── */
72+
.viz5-toggle-group {
7473
display: flex;
75-
align-items: center;
76-
gap: 14px;
77-
flex-wrap: wrap;
74+
border: 1px solid var(--border);
75+
border-radius: 6px;
76+
overflow: hidden;
77+
flex-shrink: 0;
78+
}
79+
80+
.viz5-toggle-btn {
81+
height: 30px;
82+
padding: 0 12px;
83+
border: none;
84+
border-right: 1px solid var(--border);
85+
background: var(--bg-card);
86+
color: var(--text-muted);
87+
font-family: var(--sans);
88+
font-size: 13px;
89+
cursor: pointer;
90+
outline: none;
91+
transition: background 0.12s, color 0.12s;
92+
white-space: nowrap;
93+
}
94+
95+
.viz5-toggle-btn:last-child {
96+
border-right: none;
97+
}
98+
99+
.viz5-toggle-btn:hover {
100+
background: var(--surface-hover);
101+
color: var(--text);
102+
}
103+
104+
.viz5-toggle-btn.active {
105+
background: var(--accent-dim);
106+
color: var(--accent);
107+
font-weight: 500;
78108
}
79109

80-
.viz5-stat-item {
110+
/* ── Legend ── */
111+
.viz5-legend {
81112
display: flex;
82-
flex-direction: column;
83-
align-items: flex-end;
113+
align-items: center;
114+
gap: 10px;
115+
margin-left: auto;
116+
flex-wrap: wrap;
84117
}
85118

86-
.viz5-stat-label {
87-
font-size: 10px;
119+
.viz5-legend-item {
120+
display: flex;
121+
align-items: center;
122+
gap: 5px;
123+
font-size: 11px;
88124
color: var(--text-muted);
89-
font-family: var(--sans);
90-
text-transform: uppercase;
91-
letter-spacing: 0.06em;
125+
white-space: nowrap;
92126
}
93127

94-
.viz5-stat-value {
95-
font-size: 13px;
96-
font-family: var(--mono);
97-
color: var(--accent);
98-
font-weight: 600;
128+
.viz5-legend-swatch {
129+
width: 9px;
130+
height: 9px;
131+
border-radius: 50%;
132+
flex-shrink: 0;
99133
}
100134

101135
/* ── Chart area ── */
@@ -116,19 +150,30 @@
116150
font-size: 11px;
117151
color: var(--text);
118152
line-height: 1.75;
119-
max-width: 210px;
153+
max-width: 220px;
120154
z-index: 10;
121155
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
122156
}
123157

124-
.viz5-tt-k {
158+
.viz5-tt-node {
125159
font-family: var(--mono);
126160
font-weight: 600;
127161
font-size: 12px;
128162
color: var(--text-h);
129163
margin-bottom: 2px;
130164
}
131165

166+
.viz5-tt-route {
167+
font-family: var(--mono);
168+
font-size: 11px;
169+
color: var(--text-h);
170+
margin-bottom: 2px;
171+
white-space: nowrap;
172+
overflow: hidden;
173+
text-overflow: ellipsis;
174+
max-width: 196px;
175+
}
176+
132177
.viz5-tt-row {
133178
font-size: 11px;
134179
color: var(--text-muted);
@@ -138,7 +183,7 @@
138183
color: var(--text);
139184
}
140185

141-
/* ── Empty / loading state ── */
186+
/* ── Empty state ── */
142187
.viz5-empty {
143188
position: absolute;
144189
inset: 0;
@@ -151,8 +196,7 @@
151196
pointer-events: none;
152197
}
153198

154-
.viz5-ctrl-sep-dash {
155-
color: var(--text-muted);
156-
font-size: 12px;
157-
flex-shrink: 0;
199+
/* ── SVG interaction helpers ── */
200+
.viz5-chart svg {
201+
overflow: visible;
158202
}

0 commit comments

Comments
 (0)