{"spec_id":"area-basic","library":"d3","language":"javascript","code":"// anyplot.ai\n// area-basic: Basic Area Chart\n// Library: d3 7.9.0 | JavaScript 22.22.3\n// Quality: 93/100 | Created: 2026-06-02\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\nconst { width, height } = window.ANYPLOT_SIZE;\nconst margin = { top: 110, right: 80, bottom: 90, left: 110 };\nconst iw = width - margin.left - margin.right;\nconst ih = height - margin.top - margin.bottom;\n\n// Data — daily visitors to a documentation site across a quarter\nfunction lcg(seed) {\n  let s = seed >>> 0;\n  return () => {\n    s = (s * 1664525 + 1013904223) >>> 0;\n    return s / 4294967296;\n  };\n}\nconst rnd = lcg(42);\nconst startDate = new Date(2026, 2, 1);\nconst data = [];\nfor (let i = 0; i < 90; i++) {\n  const date = new Date(startDate.getTime() + i * 86400000);\n  const dayOfWeek = date.getDay();\n  const weekendDip = dayOfWeek === 0 || dayOfWeek === 6 ? -1200 : 0;\n  const trend = i * 38;\n  const noise = (rnd() - 0.5) * 900;\n  const visitors = Math.max(0, Math.round(4600 + trend + weekendDip + noise));\n  data.push({ date, visitors });\n}\n\n// SVG mount\nconst svg = d3\n  .select(\"#container\")\n  .append(\"svg\")\n  .attr(\"width\", width)\n  .attr(\"height\", height);\nconst g = svg\n  .append(\"g\")\n  .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n// Scales\nconst x = d3\n  .scaleTime()\n  .domain(d3.extent(data, (d) => d.date))\n  .range([0, iw]);\nconst y = d3\n  .scaleLinear()\n  .domain([0, d3.max(data, (d) => d.visitors) * 1.08])\n  .nice()\n  .range([ih, 0]);\n\n// Gridlines — y-axis only\ng.append(\"g\")\n  .attr(\"class\", \"grid\")\n  .call(d3.axisLeft(y).tickSize(-iw).tickFormat(\"\").ticks(6))\n  .call((axis) => {\n    axis.select(\".domain\").remove();\n    axis.selectAll(\"line\").attr(\"stroke\", t.grid).attr(\"stroke-width\", 1);\n  });\n\n// Gradient — brand green fading toward the page background\nconst defs = svg.append(\"defs\");\nconst gradient = defs\n  .append(\"linearGradient\")\n  .attr(\"id\", \"area-fill\")\n  .attr(\"x1\", 0)\n  .attr(\"y1\", 0)\n  .attr(\"x2\", 0)\n  .attr(\"y2\", 1);\ngradient\n  .append(\"stop\")\n  .attr(\"offset\", \"0%\")\n  .attr(\"stop-color\", t.palette[0])\n  .attr(\"stop-opacity\", 0.55);\ngradient\n  .append(\"stop\")\n  .attr(\"offset\", \"100%\")\n  .attr(\"stop-color\", t.palette[0])\n  .attr(\"stop-opacity\", 0.05);\n\n// Area\nconst area = d3\n  .area()\n  .x((d) => x(d.date))\n  .y0(ih)\n  .y1((d) => y(d.visitors))\n  .curve(d3.curveMonotoneX);\n\ng.append(\"path\").datum(data).attr(\"fill\", \"url(#area-fill)\").attr(\"d\", area);\n\n// Line on top of area for definition\nconst line = d3\n  .line()\n  .x((d) => x(d.date))\n  .y((d) => y(d.visitors))\n  .curve(d3.curveMonotoneX);\n\ng.append(\"path\")\n  .datum(data)\n  .attr(\"fill\", \"none\")\n  .attr(\"stroke\", t.palette[0])\n  .attr(\"stroke-width\", 3)\n  .attr(\"d\", line);\n\n// Axes\nconst xAxis = g\n  .append(\"g\")\n  .attr(\"transform\", `translate(0,${ih})`)\n  .call(\n    d3\n      .axisBottom(x)\n      .ticks(d3.timeWeek.every(2))\n      .tickFormat(d3.timeFormat(\"%b %d\")),\n  );\n\nconst yAxis = g\n  .append(\"g\")\n  .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format(\"~s\")));\n\nfor (const ax of [xAxis, yAxis]) {\n  ax.selectAll(\"text\").attr(\"fill\", t.inkSoft).style(\"font-size\", \"16px\");\n  ax.select(\".domain\").attr(\"stroke\", t.inkSoft).attr(\"stroke-width\", 1);\n  ax.selectAll(\".tick line\").remove();\n}\n\n// Axis labels\nsvg\n  .append(\"text\")\n  .attr(\"x\", margin.left + iw / 2)\n  .attr(\"y\", height - 28)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"18px\")\n  .text(\"Date (2026)\");\n\nsvg\n  .append(\"text\")\n  .attr(\"transform\", `translate(36, ${margin.top + ih / 2}) rotate(-90)`)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"18px\")\n  .text(\"Daily visitors\");\n\n// Title\nsvg\n  .append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", 58)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"26px\")\n  .style(\"font-weight\", \"600\")\n  .text(\"area-basic · javascript · d3 · anyplot.ai\");\n"}