Drawing and Data Visualization
Garden Growth Scatter Plot

Complete a scatter plot for a garden growth scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Drawing and Data VisualizationScatter PlotHTMLCanvasJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Garden Growth Scatter Plot</title>
  <style>
    :root { --ink:#ecf7f3; --paper:#071310; --accent:#ff6b5e; --secondary:#71c9b5; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; background:linear-gradient(color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),var(--paper);background-size:24px 24px; }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(1080px,calc(100% - 30px));margin:auto;padding:48px 0}.eyebrow{color:var(--secondary);font:700 12px/1.3 ui-monospace,monospace}.eyebrow::before{content:"> ";color:var(--accent)}.mast{display:grid;grid-template-columns:1fr auto;border:1px solid var(--secondary);padding:18px;gap:24px;align-items:center;margin-bottom:16px}.mast h1{font-family:ui-monospace,"SFMono-Regular",monospace;font-weight:700;font-size:clamp(34px,7vw,72px);letter-spacing:-.055em;margin:12px 0;line-height:1.05}.intro{margin:0;color:color-mix(in srgb,var(--ink) 72%,transparent);font:400 14px/1.7 ui-monospace,monospace}.scenario{padding:7px 10px;border:1px dashed var(--secondary);font:700 11px/1 ui-monospace,monospace}.demo{border-color:var(--secondary);border-radius:8px;box-shadow:0 0 50px color-mix(in srgb,var(--secondary) 15%,transparent);position:relative;min-height:390px;padding:26px;background:color-mix(in srgb,var(--paper) 94%,#000)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:14px}}
    .panel{padding:30px;border:0;border-radius:42px 12px;background:color-mix(in srgb,var(--secondary) 18%,var(--paper))}.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.stack{display:flex;flex-direction:column;gap:20px}.action{min-height:48px;padding:12px 22px;border:0;border-radius:50% 50% 18px 18px;background:color-mix(in srgb,var(--secondary) 42%,transparent);font-weight:800}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{color:color-mix(in srgb,var(--ink) 64%,transparent);line-height:1.7}.status{min-height:25px;margin-top:16px;color:var(--accent)}.metric{font-size:clamp(32px,7vw,66px);font-weight:800}.meter{height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent)}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.chip{padding:8px 12px;border-radius:50%;background:var(--paper)}
    .composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
    .canvas-shell{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:16px}.canvas-shell canvas{width:100%;height:440px;border:1px solid var(--line);border-radius:18px;background:var(--ink)}.canvas-tools{display:grid;align-content:center;gap:16px}.canvas-tools label{display:grid;gap:8px;font-weight:800}@media(max-width:900px){.canvas-shell{grid-template-columns:1fr}.canvas-shell canvas{height:300px}}.drawing-pattern{display:grid;gap:14px}.scatter-controller{display:grid;grid-template-columns:1fr 180px 180px auto minmax(180px,.5fr);gap:14px;align-items:end;padding:18px;border-left:12px solid var(--accent);background:var(--paper)}.scatter-controller h3{margin:.2em 0}.scatter-controller label{display:grid;grid-template-columns:1fr auto;gap:6px}.scatter-controller label select,.scatter-controller label input{grid-column:1/-1}.scatter-controller dl{display:flex;gap:14px;margin:0}.scatter-controller dl div{display:grid}.scatter-controller dd{margin:0;font-weight:900}@media(max-width:900px){.scatter-controller{grid-template-columns:1fr 1fr}.scatter-controller header,.scatter-controller dl{grid-column:1/-1}}.workflow-compare{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:18px}.compare-stage{display:grid;gap:12px;min-width:0}.compare-stage>header{display:flex;justify-content:space-between;gap:16px;align-items:end}.compare-stage h2{margin:.2em 0}.compare-core{--compare-split:50%;min-width:0;padding:14px;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);outline:1px dashed var(--accent);outline-offset:-8px;transition:clip-path .25s,filter .25s}.compare-core[data-compare-channel="B"]{filter:hue-rotate(32deg) saturate(1.15)}.compare-controls{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:24px 4px 24px 4px;background:var(--paper)}.compare-controls fieldset,.compare-controls>label{display:grid;gap:8px}.compare-controls input[type="range"]{width:100%}#workflowCompareShelf{display:grid;gap:6px;padding:0;margin:0;list-style:none}#workflowCompareShelf li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:12px}@media(max-width:900px){.workflow-compare{grid-template-columns:1fr}.compare-stage{order:-1}.compare-core{clip-path:none;border-left:8px solid var(--accent)}}
  </style>
</head>
<body data-aesthetic="terminal" data-composition="split-note">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">terminal / Scatter Plot / BEGINNER</span><h1>Garden Growth Scatter Plot</h1><p class="intro">Complete a scatter plot for a garden growth scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.</p></div><span class="scenario">Garden Growth</span></header>
    <div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Master the semantic structure, responsive arrangement, keyboard interaction, and state synchronization of a scatter plot.</span></aside><section class="demo" aria-label="Garden Growth Scatter Plot Interaction Area"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Reference Channel</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · Sunflower Garden</label><label><input type="radio" name="workflowChannel" value="B">B · Partial Shade Flower Bed</label></fieldset><label>Stem Height Target Weight<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 cm</output></label><label><input id="workflowCompareFreeze" type="checkbox">Freeze current version</label><button id="workflowCompareCapture" class="action primary" type="button">Sample and save observations</button><ol id="workflowCompareShelf" aria-label="Version Sampling Record"></ol></form><section class="compare-stage"><header><span class="eyebrow">Garden Growth COMPARE</span><h2>Growth comparison dual-version comparison</h2><output id="workflowCompareLive">Version A waiting for sampling</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:drawing-data-viz-scatter-plot --><div class="drawing-pattern drawing-pattern-5"><div class="canvas-shell"><canvas id="artboard" width="900" height="440" aria-label="Scatter Plot Canvas" aria-describedby="canvasDescription"></canvas><div class="canvas-tools panel"><span class="eyebrow">CANVAS MODE 6</span><h2>Scatter Plot</h2><label>Complexity <input id="canvasAmount" type="range" min="4" max="28" value="25"></label><button id="redrawCanvas" class="action primary" type="button">Redraw</button><p id="canvasDescription" class="muted">A dark canvas draws a scatter plot using two high-contrast colors, and a complexity slider determines the number of shapes; the entire scene is generated locally in the browser.</p></div></div><section class="drawing-controller scatter-controller"><header><span class="eyebrow">CLUSTER LAB</span><h3>Garden Growth Scatter Cluster</h3></header><label>Clustering Algorithm<select id="scatterClusterMode"><option value="density">Density grouping</option><option value="distance">distance grouping</option><option value="manual">Manual grouping</option></select></label><label>Jitter amplitude<input id="scatterJitter" type="range" min="0" max="30" value="12" data-core-bridge="drawing-data-viz-scatter-plot"><output id="scatterJitterValue">12</output></label><button id="scatterResample" class="action" type="button">Resample</button><dl><div><dt>Sample Batch</dt><dd id="scatterBatch">1</dd></div><div><dt>Number of clusters</dt><dd id="scatterClusters">3</dd></div></dl></section></div><!-- 11DZ_CORE_END --></section></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:drawing-data-viz-scatter-plot */
const canvas = document.querySelector('#artboard'); const context = canvas.getContext('2d'); const amount = document.querySelector('#canvasAmount'); let drawSeed = 3787964119;
    function random(){ drawSeed = (drawSeed * 1664525 + 1013904223) >>> 0; return drawSeed / 4294967296; }
    function drawCanvas(){ const rect = canvas.getBoundingClientRect(); const ratio = Math.min(2,window.devicePixelRatio || 1); canvas.width = Math.max(320,Math.round(rect.width * ratio)); canvas.height = Math.max(240,Math.round(rect.height * ratio)); context.setTransform(ratio,0,0,ratio,0,0); const width = rect.width; const height = rect.height; context.clearRect(0,0,width,height); context.fillStyle = '#18314f'; context.fillRect(0,0,width,height); const drawingFactor=Number(canvas.dataset.drawingFactor||1); const count=Math.max(1,Math.round(Number(amount.value)*drawingFactor)); drawSeed += 1+Number(canvas.dataset.drawingShift||0); context.globalCompositeOperation=canvas.dataset.drawingBlend||'source-over';
      for(let index=0; index<count; index+=1){ const x=random()*width; const y=random()*height; const size=(10+random()*70)*Math.max(.45,drawingFactor); context.beginPath(); context.strokeStyle=index%2?'#ff6b5e':'#71c9b5'; context.fillStyle=context.strokeStyle+'88'; context.lineWidth=(2+random()*4)*Math.max(.6,drawingFactor);
        context.arc(x,y,3+random()*7,0,Math.PI*2); context.fill();
      } context.globalCompositeOperation='source-over'; announce('Canvas generated ' + count + ' graphic elements'); }
    document.querySelector('#redrawCanvas').addEventListener('click',drawCanvas); amount.addEventListener('input',drawCanvas); addEventListener('resize',drawCanvas,{passive:true}); drawCanvas();
const scatterMode=document.querySelector('#scatterClusterMode');const scatterJitter=document.querySelector('#scatterJitter');const scatterModel=new Map([['batch',1],['clusters',3],['jitter',12]]);function renderScatterModel(){scatterModel.set('jitter',Number(scatterJitter.value));scatterModel.set('clusters',{density:3,distance:4,manual:2}[scatterMode.value]);document.querySelector('#scatterJitterValue').textContent=scatterModel.get('jitter');document.querySelector('#scatterBatch').textContent=scatterModel.get('batch');document.querySelector('#scatterClusters').textContent=scatterModel.get('clusters');canvas.dataset.drawingFactor=String(.65+scatterModel.get('clusters')*.15);canvas.dataset.drawingShift=String(scatterModel.get('batch')*19+scatterModel.get('jitter'));drawCanvas();}scatterMode.addEventListener('change',renderScatterModel);scatterJitter.addEventListener('input',renderScatterModel);document.querySelector('#scatterResample').addEventListener('click',()=>{scatterModel.set('batch',scatterModel.get('batch')+1);renderScatterModel();announce('Scatter samples have been re-collected and clustered');});renderScatterModel();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"drawing-data-viz-scatter-plot","selector":"[data-core-bridge=\"drawing-data-viz-scatter-plot\"]","mode":"range","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowCompareCore=document.querySelector('#workflowCore');const workflowCompareWeight=document.querySelector('#workflowCompareWeight');const workflowCompareState={channel:'A',weight:50,frozen:false,snapshots:[]};function workflowCompareFingerprint(){const controls=[...workflowCompareCore.querySelectorAll('input,select,textarea')];const outputs=[...workflowCompareCore.querySelectorAll('output,[role="status"],strong')].map(node=>node.textContent.trim()).filter(Boolean);return {controlValues:controls.map(control=>control.type==='checkbox'||control.type==='radio'?control.checked:control.value),summary:outputs.slice(0,4).join(' / '),nodes:workflowCompareCore.querySelectorAll('*').length};}function workflowCompareDrive(){workflowCompareCore.dataset.compareChannel=workflowCompareState.channel;workflowCompareCore.style.setProperty('--compare-split',workflowCompareState.weight+'%');document.querySelector('#workflowCompareWeightValue').textContent=workflowCompareState.weight+' centimeters';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' centimeters'+(workflowCompareState.frozen?' · Frozen':'');announce('Growth comparison view in progress '+workflowCompareState.channel+' Version');}function workflowCompareCapture(source){const bridge=workflowBridgeActivate();const snapshot={...workflowCompareFingerprint(),channel:workflowCompareState.channel,weight:workflowCompareState.weight,source,bridge:bridge.summary};workflowCompareState.snapshots.push(snapshot);const item=document.createElement('li');item.innerHTML='<b>'+snapshot.channel+'</b><span>'+(snapshot.summary||snapshot.bridge)+'</span><small>'+snapshot.weight+' cm · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('sampled '+snapshot.channel+' Version and save observation · '+bridge.summary);}document.querySelectorAll('[name="workflowChannel"]').forEach(input=>input.addEventListener('change',()=>{workflowCompareState.channel=input.value;workflowCompareDrive();}));workflowCompareWeight.addEventListener('input',()=>{workflowCompareState.weight=Number(workflowCompareWeight.value);workflowCompareDrive();});document.querySelector('#workflowCompareFreeze').addEventListener('change',event=>{workflowCompareState.frozen=event.currentTarget.checked;workflowCompareDrive();});document.querySelector('#workflowCompareCapture').addEventListener('click',()=>workflowCompareCapture('Button Sampling'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Main view double-click'));workflowCompareDrive();
workflowBridgeReset();
  </script>
</body>
</html>