AI Plotly.js
Render a labelled scatter trace with the actual plotting library.
How it works
Plotly.js offers interactive plotting, but interactivity is not a substitute for sound data selection. This lab uses a fixed SVG scatter trace, explicit axes and a static configuration. It does not load maps, external datasets or a hosted chart account. The source retains the four values so the display can be checked independently.
Run the code
This complete HTML document is a separate learning lab. Download download-labs.mjs into an empty folder and run node download-labs.mjs. For an unpublished local preview use node download-labs.mjs http://127.0.0.1:8000/examples/ai/. It saves hash-checked sources, pinned vendor assets and licence notices into a new bhylu-ai-lab folder and refuses an existing destination. Review the files, enter that folder, run node serve.mjs and open http://127.0.0.1:8138/plotlyjs.html. Select Run explicitly. The server is read-only, binds loopback and stops with Ctrl+C. It changes no PHP, Apache or database settings.
The reviewed browser baselines are TensorFlow.js 4.22.0, tfjs-vis 1.5.1, Brain.js 2.0.0-beta.24 (prerelease), Chart.js 4.5.1, D3 7.9.0 and Plotly.js 3.1.0. Only the libraries listed by this document load into the separate learning page. The plain JavaScript/Python playground does not supply them. TensorFlow.js labs select the CPU backend; no GPU support or speed claim follows.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bhylu AI - Plotly.js</title>
<style>
body {
font: 16px/1.6 system-ui;
max-width: 760px;
margin: 32px auto;
padding: 0 20px;
color: #0f3464;
background: #fff;
}
button {
font: inherit;
padding: 8px 20px;
background: #0078d4;
color: white;
border: 0;
border-radius: 6px;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f3f7fc;
padding: 16px;
}
canvas,
svg,
#chart {
max-width: 100%;
}
</style>
</head>
<body>
<h1>Plotly.js</h1>
<p>Render a labelled scatter trace with the actual plotting library.</p>
<p>
This separate synthetic-data lab runs only when you select Run. It is not a model
service or a production benchmark.
</p>
<div id="chart" aria-label="Synthetic tray and minute scatter plot"></div>
<p>Four synthetic pairs: (1,7), (2,9), (3,12), (4,13).</p>
<button id="run" type="button">Run example</button>
<pre id="output" aria-live="polite"></pre>
<script src="vendor/plotly.min.js"></script>
<script>
const runButton = document.getElementById("run");
const output = document.getElementById("output");
const print = (value) => {
output.textContent += String(value) + "\n";
};
window.aiDone = false;
window.aiFailure = null;
runButton.addEventListener("click", async () => {
runButton.disabled = true;
output.textContent = "";
window.aiDone = false;
window.aiFailure = null;
try {
const x = [1, 2, 3, 4],
y = [7, 9, 12, 13];
await Plotly.newPlot(
"chart",
[
{
x,
y,
type: "scatter",
mode: "markers",
name: "Synthetic sessions",
marker: { color: "#0078d4", size: 9 },
},
],
{
width: 480,
height: 320,
margin: { l: 55, r: 20, t: 25, b: 55 },
xaxis: { title: { text: "Trays" }, range: [0, 5] },
yaxis: { title: { text: "Minutes" }, range: [0, 16] },
},
{ staticPlot: true, displayModeBar: false },
);
print("trace points: " + document.getElementById("chart").data[0].x.length);
window.aiArtifact = { kind: "plotly", x, y };
} catch (error) {
window.aiFailure = String(error);
print("Error: " + error.message);
} finally {
window.aiDone = true;
runButton.disabled = false;
}
});
</script>
</body>
</html>
Focus on the JavaScript operations
This excerpt omits document markup, local library loading and the explicit Run control. Use the full source to run it.
const x = [1,2,3,4], y = [7,9,12,13];
await Plotly.newPlot('chart',[{x,y,type:'scatter',mode:'markers',name:'Synthetic sessions',marker:{color:'#0078d4',size:9}}], {width:480,height:320,margin:{l:55,r:20,t:25,b:55},xaxis:{title:{text:'Trays'},range:[0,5]},yaxis:{title:{text:'Minutes'},range:[0,16]}}, {staticPlot:true,displayModeBar:false});
print('trace points: ' + document.getElementById('chart').data[0].x.length);
window.aiArtifact = {kind:'plotly',x,y};
Expected result
trace points: 4
Awaiting newPlot lets the review inspect the finished SVG trace. The test checks four rendered point marks and the stored trace values. Future maps, exports and remote services would have separate network and licensing requirements.