Projected Annual Releases Through San Quentin
0
250
500
750
1000
Releases Per Year
#sq-release-chart.sq-chart-wrap {
max-width: 980px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
#sq-release-chart .sq-chart-title {
color: #DAA520;
font-size: 22px;
font-weight: 700;
margin: 0 0 18px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
#sq-release-chart .sq-chart-box {
background: #f4f4f4;
border-radius: 8px;
padding: 24px 18px 18px;
overflow: hidden;
}
#sq-release-chart svg {
width: 100%;
height: auto;
display: block;
}
#sq-release-chart .sq-grid-line {
stroke: #d7d7d7;
stroke-width: 1;
}
#sq-release-chart .sq-axis-line {
stroke: #8e8e8e;
stroke-width: 2;
}
#sq-release-chart .sq-tick-label {
fill: #333;
font-size: 14px;
}
#sq-release-chart .sq-x-label {
fill: #333;
font-size: 14px;
text-anchor: middle;
}
#sq-release-chart .sq-axis-title {
fill: #333;
font-size: 15px;
font-weight: 600;
}
#sq-release-chart .sq-bar {
transform-box: fill-box;
transform-origin: center bottom;
transform: translateY(100%) scaleY(0);
opacity: 0.95;
transition:
transform 900ms cubic-bezier(.22,.84,.24,1),
opacity 900ms ease;
}
#sq-release-chart.is-visible .sq-bar {
transform: translateY(0) scaleY(1);
opacity: 1;
}
#sq-release-chart .sq-value-label {
fill: #333;
font-size: 12px;
text-anchor: middle;
opacity: 0;
transition: opacity 500ms ease 700ms;
}
#sq-release-chart.is-visible .sq-value-label {
opacity: 1;
}
(function () {
var root = document.getElementById("sq-release-chart");
if (!root) return;
var data = [
{ year: 2026, value: 300 },
{ year: 2027, value: 350 },
{ year: 2028, value: 400 },
{ year: 2029, value: 450 },
{ year: 2030, value: 500 },
{ year: 2031, value: 550 },
{ year: 2032, value: 600 },
{ year: 2033, value: 700 },
{ year: 2034, value: 800 },
{ year: 2035, value: 900 }
];
var barsGroup = root.querySelector(".sq-bars");
var xLabelsGroup = root.querySelector(".sq-x-labels");
var valueLabelsGroup = root.querySelector(".sq-value-labels");
var chart = {
left: 90,
right: 930,
top: 20,
bottom: 470,
height: 450,
width: 840,
maxY: 1000
};
var slotWidth = chart.width / data.length;
var barWidth = 48;
function lerp(a, b, t) {
return a + (b - a) * t;
}
function hexToRgb(hex) {
var c = hex.replace("#", "");
var n = parseInt(c, 16);
return {
r: (n >> 16) & 255,
g: (n >> 8) & 255,
b: n & 255
};
}
function rgbToHex(r, g, b) {
return "#" + [r, g, b].map(function (v) {
return Math.round(v).toString(16).padStart(2, "0");
}).join("");
}
function interpolateColor(a, b, t) {
var s = hexToRgb(a);
var e = hexToRgb(b);
return rgbToHex(
lerp(s.r, e.r, t),
lerp(s.g, e.g, t),
lerp(s.b, e.b, t)
);
}
function yScale(v) {
return chart.bottom - (v / chart.maxY) * chart.height;
}
data.forEach(function (d, i) {
var xCenter = chart.left + slotWidth * i + slotWidth / 2;
var barX = xCenter - barWidth / 2;
var barY = yScale(d.value);
var barHeight = chart.bottom - barY;
var t = i / (data.length - 1);
var fill = interpolateColor("#000000", "#DAA520", t);
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("class", "sq-bar");
rect.setAttribute("x", barX);
rect.setAttribute("y", barY);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("fill", fill);
rect.style.transitionDelay = (i * 90) + "ms";
barsGroup.appendChild(rect);
var xLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
xLabel.setAttribute("class", "sq-x-label");
xLabel.setAttribute("x", xCenter);
xLabel.setAttribute("y", 500);
xLabel.textContent = d.year;
xLabelsGroup.appendChild(xLabel);
var valueLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
valueLabel.setAttribute("class", "sq-value-label");
valueLabel.setAttribute("x", xCenter);
valueLabel.setAttribute("y", barY - 8);
valueLabel.textContent = d.value;
valueLabelsGroup.appendChild(valueLabel);
});
if ("IntersectionObserver" in window) {
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
root.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
}, { threshold: 0.35 });
observer.observe(root);
} else {
root.classList.add("is-visible");
}
})();
