{"spec_id":"ohlc-bar","library":"d3","language":"javascript","code":"// anyplot.ai\n// ohlc-bar: OHLC Bar Chart\n// Library: d3 7.9.0 | JavaScript 22.23.2\n// Quality: 93/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\nconst { width, height } = window.ANYPLOT_SIZE;\nconst margin = { top: 110, right: 60, bottom: 90, left: 110 };\nconst iw = width - margin.left - margin.right;\nconst ih = height - margin.top - margin.bottom;\n\n// --- Data: 45 trading days of synthetic OHLC prices, fixed-seed LCG --------\nlet seed = 42;\nfunction lcgRandom() {\n  seed = (seed * 1664525 + 1013904223) % 4294967296;\n  return seed / 4294967296;\n}\n\nconst numDays = 45;\nlet date = new Date(2024, 2, 1);\nlet prevClose = 128;\nconst data = [];\nwhile (data.length < numDays) {\n  const day = date.getDay();\n  if (day !== 0 && day !== 6) {\n    const drift = (lcgRandom() - 0.48) * 3.2;\n    const open = prevClose + (lcgRandom() - 0.5) * 1.4;\n    const close = open + drift;\n    const wickUp = lcgRandom() * 1.6;\n    const wickDown = lcgRandom() * 1.6;\n    const high = Math.max(open, close) + wickUp;\n    const low = Math.min(open, close) - wickDown;\n    data.push({ date: new Date(date), open, high, low, close });\n    prevClose = close;\n  }\n  date.setDate(date.getDate() + 1);\n}\n\n// --- SVG mount ---------------------------------------------------------------\nconst svg = d3.select(\"#container\").append(\"svg\").attr(\"width\", width).attr(\"height\", height);\nconst g = svg.append(\"g\").attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n// --- Scales --------------------------------------------------------------------\nconst x = d3\n  .scaleBand()\n  .domain(data.map((d) => d.date.toISOString()))\n  .range([0, iw])\n  .padding(0.35);\n\nconst priceExtent = d3.extent(data.flatMap((d) => [d.high, d.low]));\nconst pad = (priceExtent[1] - priceExtent[0]) * 0.08;\nconst y = d3\n  .scaleLinear()\n  .domain([priceExtent[0] - pad, priceExtent[1] + pad])\n  .nice()\n  .range([ih, 0]);\n\n// --- Gridlines (y-axis only, subtle) --------------------------------------------\ng.append(\"g\")\n  .call(d3.axisLeft(y).tickSize(-iw).tickFormat(\"\"))\n  .call((sel) => sel.select(\".domain\").remove())\n  .selectAll(\"line\")\n  .attr(\"stroke\", t.grid);\n\n// --- Axes ------------------------------------------------------------------------\nconst tickEvery = Math.ceil(numDays / 9);\nconst xAxis = g\n  .append(\"g\")\n  .attr(\"transform\", `translate(0,${ih})`)\n  .call(\n    d3\n      .axisBottom(x)\n      .tickValues(x.domain().filter((_, i) => i % tickEvery === 0))\n      .tickFormat((d) => d3.timeFormat(\"%b %d\")(new Date(d)))\n  );\nconst yAxis = g.append(\"g\").call(d3.axisLeft(y).tickFormat((d) => `$${d.toFixed(0)}`));\n\nfor (const ax of [xAxis, yAxis]) {\n  ax.selectAll(\"text\").attr(\"fill\", t.inkSoft).style(\"font-size\", \"14px\");\n  ax.selectAll(\"line\").attr(\"stroke\", t.inkSoft);\n  ax.select(\".domain\").attr(\"stroke\", t.inkSoft);\n}\nxAxis.selectAll(\"text\").attr(\"transform\", \"rotate(-30)\").style(\"text-anchor\", \"end\");\n\ng.append(\"text\")\n  .attr(\"x\", -ih / 2)\n  .attr(\"y\", -80)\n  .attr(\"transform\", \"rotate(-90)\")\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"16px\")\n  .text(\"Price (USD)\");\n\n// --- OHLC bars ---------------------------------------------------------------\nconst bw = x.bandwidth();\nconst tickLen = Math.max(4, bw * 0.45);\nconst upColor = t.palette[0]; // brand green — close > open\nconst downColor = t.palette[4]; // matte red — close < open (finance semantic exception)\n\nconst bars = g\n  .selectAll(\".ohlc-bar\")\n  .data(data)\n  .join(\"g\")\n  .attr(\"class\", \"ohlc-bar\")\n  .attr(\"transform\", (d) => `translate(${x(d.date.toISOString()) + bw / 2},0)`);\n\nbars\n  .append(\"line\")\n  .attr(\"x1\", 0)\n  .attr(\"x2\", 0)\n  .attr(\"y1\", (d) => y(d.high))\n  .attr(\"y2\", (d) => y(d.low))\n  .attr(\"stroke\", (d) => (d.close >= d.open ? upColor : downColor))\n  .attr(\"stroke-width\", 2.5);\n\nbars\n  .append(\"line\")\n  .attr(\"x1\", -tickLen)\n  .attr(\"x2\", 0)\n  .attr(\"y1\", (d) => y(d.open))\n  .attr(\"y2\", (d) => y(d.open))\n  .attr(\"stroke\", (d) => (d.close >= d.open ? upColor : downColor))\n  .attr(\"stroke-width\", 2.5);\n\nbars\n  .append(\"line\")\n  .attr(\"x1\", 0)\n  .attr(\"x2\", tickLen)\n  .attr(\"y1\", (d) => y(d.close))\n  .attr(\"y2\", (d) => y(d.close))\n  .attr(\"stroke\", (d) => (d.close >= d.open ? upColor : downColor))\n  .attr(\"stroke-width\", 2.5);\n\n// --- Moving-average overlay (d3-shape line generator, smoothed) ------------------\nconst maWindow = 8;\nconst maData = data\n  .map((d, i) => (i < maWindow - 1 ? null : { date: d.date, value: d3.mean(data.slice(i - maWindow + 1, i + 1), (s) => s.close) }))\n  .filter((d) => d !== null);\n\nconst maLine = d3\n  .line()\n  .curve(d3.curveMonotoneX)\n  .x((d) => x(d.date.toISOString()) + bw / 2)\n  .y((d) => y(d.value));\n\ng.append(\"path\")\n  .datum(maData)\n  .attr(\"fill\", \"none\")\n  .attr(\"stroke\", t.ink)\n  .attr(\"stroke-width\", 2)\n  .attr(\"stroke-dasharray\", \"6,4\")\n  .attr(\"stroke-opacity\", 0.75)\n  .attr(\"d\", maLine);\n\n// --- Extreme callouts (highlight the period high/low for a clear focal point) ----\nfunction addExtremeCallout(point, priceKey, label, direction) {\n  const cx = x(point.date.toISOString()) + bw / 2;\n  const cy = y(point[priceKey]);\n  const leaderLen = 30;\n  const textY = cy + (direction === \"up\" ? -leaderLen - 6 : leaderLen + 6);\n  const calloutG = g.append(\"g\").attr(\"class\", \"extreme-callout\");\n\n  calloutG\n    .append(\"line\")\n    .attr(\"x1\", cx)\n    .attr(\"y1\", cy)\n    .attr(\"x2\", cx)\n    .attr(\"y2\", cy + (direction === \"up\" ? -leaderLen : leaderLen))\n    .attr(\"stroke\", t.inkSoft)\n    .attr(\"stroke-width\", 1.2)\n    .attr(\"stroke-dasharray\", \"2,2\");\n\n  calloutG\n    .append(\"circle\")\n    .attr(\"cx\", cx)\n    .attr(\"cy\", cy)\n    .attr(\"r\", 4)\n    .attr(\"fill\", \"none\")\n    .attr(\"stroke\", t.ink)\n    .attr(\"stroke-width\", 1.5);\n\n  const labelText = calloutG\n    .append(\"text\")\n    .attr(\"x\", cx)\n    .attr(\"y\", textY)\n    .attr(\"text-anchor\", \"middle\")\n    .attr(\"fill\", t.ink)\n    .style(\"font-size\", \"13px\")\n    .style(\"font-weight\", \"600\")\n    .text(`${label} $${point[priceKey].toFixed(2)}`);\n\n  const bbox = labelText.node().getBBox();\n  calloutG\n    .insert(\"rect\", \"text\")\n    .attr(\"x\", bbox.x - 6)\n    .attr(\"y\", bbox.y - 3)\n    .attr(\"width\", bbox.width + 12)\n    .attr(\"height\", bbox.height + 6)\n    .attr(\"rx\", 4)\n    .attr(\"fill\", t.elevatedBg)\n    .attr(\"stroke\", t.grid);\n}\n\nconst maxHighPoint = data.reduce((a, b) => (b.high > a.high ? b : a));\nconst minLowPoint = data.reduce((a, b) => (b.low < a.low ? b : a));\naddExtremeCallout(maxHighPoint, \"high\", \"High\", \"up\");\naddExtremeCallout(minLowPoint, \"low\", \"Low\", \"down\");\n\n// --- Legend (semantic up/down colors + moving-average key) -----------------------\nconst legend = svg.append(\"g\").attr(\"transform\", `translate(${width - margin.right - 190},${margin.top - 80})`);\nconst legendItems = [\n  { label: \"Up (close > open)\", color: upColor, dash: null },\n  { label: \"Down (close < open)\", color: downColor, dash: null },\n  { label: `${maWindow}-Day MA`, color: t.ink, dash: \"6,4\" },\n];\nlegendItems.forEach((item, i) => {\n  const row = legend.append(\"g\").attr(\"transform\", `translate(0,${i * 26})`);\n  const swatch = row.append(\"line\").attr(\"x1\", 0).attr(\"x2\", 22).attr(\"y1\", 0).attr(\"y2\", 0).attr(\"stroke\", item.color).attr(\"stroke-width\", 3.5);\n  if (item.dash) swatch.attr(\"stroke-dasharray\", item.dash).attr(\"stroke-opacity\", 0.75);\n  row\n    .append(\"text\")\n    .attr(\"x\", 30)\n    .attr(\"y\", 5)\n    .attr(\"fill\", t.inkSoft)\n    .style(\"font-size\", \"15px\")\n    .text(item.label);\n});\n\n// --- Title -----------------------------------------------------------------------\nsvg\n  .append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", 52)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"22px\")\n  .style(\"font-weight\", \"600\")\n  .text(\"ohlc-bar · javascript · d3 · anyplot.ai\");\n"}