Data Visualization

1/**2 * Example 25: Data Visualization3 *4 * Create various types of plots to visualize data and results.5 * Deepbox supports SVG and PNG output for publication-quality figures.6 */78import { mkdirSync, writeFileSync } from "node:fs";9import { cos, linspace, sin, tensor } from "deepbox/ndarray";10import { Figure } from "deepbox/plot";1112console.log("=== Data Visualization ===\n");1314mkdirSync("docs/examples/25-plotting/output", { recursive: true });1516// 1. Line Plot17console.log("1. Creating line plot...");18const x = linspace(0, 2 * Math.PI, 100);19const y1 = sin(x);20const y2 = cos(x);2122const fig1 = new Figure({ width: 640, height: 480 });23const ax1 = fig1.addAxes();24ax1.plot(x, y1, { color: "#1f77b4", linewidth: 2 });25ax1.plot(x, y2, { color: "#ff7f0e", linewidth: 2 });26ax1.setTitle("Sine and Cosine Functions");27ax1.setXLabel("x");28ax1.setYLabel("y");2930const svg1 = fig1.renderSVG();31writeFileSync("docs/examples/25-plotting/output/line-plot.svg", svg1.svg);32console.log("   ✓ Saved: output/line-plot.svg\n");3334// 2. Scatter Plot35console.log("2. Creating scatter plot...");36const x_scatter = tensor([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);37const y_scatter = tensor([2.3, 4.1, 5.9, 7.8, 10.2, 11.8, 14.3, 16.1, 17.9, 20.1]);3839const fig2 = new Figure();40const ax2 = fig2.addAxes();41ax2.scatter(x_scatter, y_scatter, { color: "#2ca02c", size: 8 });42ax2.setTitle("Scatter Plot Example");43ax2.setXLabel("X values");44ax2.setYLabel("Y values");4546const svg2 = fig2.renderSVG();47writeFileSync("docs/examples/25-plotting/output/scatter-plot.svg", svg2.svg);48console.log("   ✓ Saved: output/scatter-plot.svg\n");4950// 3. Bar Chart51console.log("3. Creating bar chart...");52const categories = tensor([0, 1, 2, 3, 4]);53const values = tensor([23, 45, 56, 78, 32]);5455const fig3 = new Figure();56const ax3 = fig3.addAxes();57ax3.bar(categories, values, { color: "#d62728", edgecolor: "#000000" });58ax3.setTitle("Bar Chart Example");59ax3.setXLabel("Categories");60ax3.setYLabel("Values");6162const svg3 = fig3.renderSVG();63writeFileSync("docs/examples/25-plotting/output/bar-chart.svg", svg3.svg);64console.log("   ✓ Saved: output/bar-chart.svg\n");6566// 4. Histogram67console.log("4. Creating histogram...");68const data = tensor([1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 8, 8, 9]);6970const fig4 = new Figure();71const ax4 = fig4.addAxes();72ax4.hist(data, 9, { color: "#9467bd" });73ax4.setTitle("Histogram Example");74ax4.setXLabel("Value");75ax4.setYLabel("Frequency");7677const svg4 = fig4.renderSVG();78writeFileSync("docs/examples/25-plotting/output/histogram.svg", svg4.svg);79console.log("   ✓ Saved: output/histogram.svg\n");8081// 5. Heatmap82console.log("5. Creating heatmap...");83const heatmap_data = tensor([84  [1, 2, 3, 4],85  [5, 6, 7, 8],86  [9, 10, 11, 12],87]);8889const fig5 = new Figure();90const ax5 = fig5.addAxes();91ax5.heatmap(heatmap_data, { vmin: 1, vmax: 12 });92ax5.setTitle("Heatmap Example");9394const svg5 = fig5.renderSVG();95writeFileSync("docs/examples/25-plotting/output/heatmap.svg", svg5.svg);96console.log("   ✓ Saved: output/heatmap.svg\n");9798console.log("Visualization Tips:");99console.log("• Use line plots for continuous data");100console.log("• Use scatter plots to show relationships");101console.log("• Use bar charts for categorical comparisons");102console.log("• Use histograms for distributions");103console.log("• Use heatmaps for matrix data");104105console.log("\n✓ Plotting complete!");106