{"spec_id":"candlestick-basic","library":"d3","language":"javascript","code":"// anyplot.ai\n// candlestick-basic: Basic Candlestick Chart\n// Library: d3 7.9.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-08-24\n\nconst t = window.ANYPLOT_TOKENS;\nconst { width, height } = window.ANYPLOT_SIZE;\nconst margin = { top: 90, right: 60, bottom: 80, left: 100 };\nconst iw = width - margin.left - margin.right;\nconst ih = height - margin.top - margin.bottom;\n\n// --- Data (in-memory, deterministic OHLC via fixed-seed LCG) ---------------\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst rand = lcg(42);\n\nconst numDays = 40;\nconst startDate = new Date(2025, 8, 1);\nlet price = 182;\nconst candles = [];\nfor (let i = 0; i < numDays; i++) {\n  const date = new Date(startDate);\n  date.setDate(date.getDate() + i);\n  const drift = (rand() - 0.48) * 6;\n  const open = price;\n  const close = Math.max(5, open + drift);\n  const wickUp = rand() * 3.5;\n  const wickDown = rand() * 3.5;\n  const high = Math.max(open, close) + wickUp;\n  const low = Math.max(1, Math.min(open, close) - wickDown);\n  candles.push({ date, open, high, low, close });\n  price = close;\n}\nconst peakCandle = candles.reduce((a, b) => (b.high > a.high ? b : a));\nconst troughCandle = candles.reduce((a, b) => (b.low < a.low ? b : a));\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(candles.map((d) => d.date))\n  .range([0, iw])\n  .padding(0.35);\n\nconst yMin = d3.min(candles, (d) => d.low);\nconst yMax = d3.max(candles, (d) => d.high);\nconst yPad = (yMax - yMin) * 0.08;\nconst y = d3\n  .scaleLinear()\n  .domain([yMin - yPad, yMax + yPad])\n  .nice()\n  .range([ih, 0]);\n\n// --- Gridlines (y-axis only, subtle) ---------------------------------------\ng.append(\"g\")\n  .selectAll(\"line\")\n  .data(y.ticks(6))\n  .join(\"line\")\n  .attr(\"x1\", 0)\n  .attr(\"x2\", iw)\n  .attr(\"y1\", (d) => y(d))\n  .attr(\"y2\", (d) => y(d))\n  .attr(\"stroke\", t.grid)\n  .attr(\"stroke-width\", 1);\n\n// --- Axes -------------------------------------------------------------------\nconst tickEvery = Math.ceil(numDays / 10);\nconst xTickDates = candles.filter((_, i) => i % tickEvery === 0).map((d) => d.date);\nconst xAxis = g\n  .append(\"g\")\n  .attr(\"transform\", `translate(0,${ih})`)\n  .call(\n    d3\n      .axisBottom(x)\n      .tickValues(xTickDates)\n      .tickFormat(d3.timeFormat(\"%b %d\")),\n  );\nconst yAxis = g.append(\"g\").call(d3.axisLeft(y).ticks(6).tickFormat((d) => `$${d.toFixed(0)}`));\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.grid);\n  ax.select(\".domain\").attr(\"stroke\", t.inkSoft);\n}\nxAxis.selectAll(\"text\").attr(\"transform\", \"rotate(-30)\").style(\"text-anchor\", \"end\");\n\n// --- Candlesticks (bullish hollow-green / bearish filled-red — dual-cue: hue\n// AND fill style, so the bull/bear signal survives colorblind simulation) ---\nconst bullColor = t.palette[0]; // brand green — up days\nconst bearColor = t.palette[4]; // matte red — down days, semantic loss anchor\nconst wickWidth = 2;\nconst bodyWidth = Math.max(3, x.bandwidth());\nconst isBull = (d) => d.close >= d.open;\n\nconst candleG = g\n  .selectAll(\".candle\")\n  .data(candles)\n  .join(\"g\")\n  .attr(\"class\", \"candle\")\n  .attr(\"transform\", (d) => `translate(${x(d.date) + x.bandwidth() / 2},0)`);\n\ncandleG\n  .append(\"line\")\n  .attr(\"y1\", (d) => y(d.high))\n  .attr(\"y2\", (d) => y(d.low))\n  .attr(\"stroke\", (d) => (isBull(d) ? bullColor : bearColor))\n  .attr(\"stroke-width\", wickWidth);\n\ncandleG\n  .append(\"rect\")\n  .attr(\"x\", -bodyWidth / 2)\n  .attr(\"y\", (d) => y(Math.max(d.open, d.close)))\n  .attr(\"width\", bodyWidth)\n  .attr(\"height\", (d) => Math.max(1.5, Math.abs(y(d.open) - y(d.close))))\n  .attr(\"fill\", (d) => (isBull(d) ? t.pageBg : bearColor))\n  .attr(\"stroke\", (d) => (isBull(d) ? bullColor : bearColor))\n  .attr(\"stroke-width\", (d) => (isBull(d) ? 2 : 0));\n\n// --- Peak / trough annotations (data storytelling) --------------------------\nfunction annotate(candle, value, label, dy) {\n  const cx = x(candle.date) + x.bandwidth() / 2;\n  const cy = y(value);\n  g.append(\"circle\")\n    .attr(\"cx\", cx)\n    .attr(\"cy\", cy)\n    .attr(\"r\", 4.5)\n    .attr(\"fill\", \"none\")\n    .attr(\"stroke\", t.ink)\n    .attr(\"stroke-width\", 1.5);\n  g.append(\"text\")\n    .attr(\"x\", cx)\n    .attr(\"y\", cy + dy)\n    .attr(\"text-anchor\", \"middle\")\n    .attr(\"fill\", t.inkSoft)\n    .style(\"font-size\", \"13px\")\n    .style(\"font-weight\", \"600\")\n    .text(label);\n}\nannotate(peakCandle, peakCandle.high, `Peak $${peakCandle.high.toFixed(0)}`, -14);\nannotate(troughCandle, troughCandle.low, `Trough $${troughCandle.low.toFixed(0)}`, 22);\n\n// --- Legend (bullish / bearish) ---------------------------------------------\nconst legend = svg.append(\"g\").attr(\"transform\", `translate(${margin.left},${margin.top - 46})`);\nconst legendItems = [\n  { label: \"Bullish (close ≥ open)\", color: bullColor, hollow: true },\n  { label: \"Bearish (close < open)\", color: bearColor, hollow: false },\n];\nlet lx = 0;\nfor (const item of legendItems) {\n  const item_g = legend.append(\"g\").attr(\"transform\", `translate(${lx},0)`);\n  item_g\n    .append(\"rect\")\n    .attr(\"width\", 20)\n    .attr(\"height\", 20)\n    .attr(\"fill\", item.hollow ? t.pageBg : item.color)\n    .attr(\"stroke\", item.color)\n    .attr(\"stroke-width\", item.hollow ? 2 : 0);\n  item_g\n    .append(\"text\")\n    .attr(\"x\", 28)\n    .attr(\"y\", 15)\n    .attr(\"fill\", t.inkSoft)\n    .style(\"font-size\", \"14px\")\n    .text(item.label);\n  lx += 28 + item.label.length * 8 + 40;\n}\n\n// --- Axis labels --------------------------------------------------------------\ng.append(\"text\")\n  .attr(\"x\", iw / 2)\n  .attr(\"y\", ih + 64)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"16px\")\n  .text(\"Trading Date\");\n\ng.append(\"text\")\n  .attr(\"transform\", \"rotate(-90)\")\n  .attr(\"x\", -ih / 2)\n  .attr(\"y\", -72)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"16px\")\n  .text(\"Share Price (USD)\");\n\n// --- Title ------------------------------------------------------------------\nsvg\n  .append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", 44)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"22px\")\n  .style(\"font-weight\", \"600\")\n  .text(\"candlestick-basic · javascript · d3 · anyplot.ai\");\n"}