Data Visualization

import { linspace, sin, cos } from "deepbox/ndarray";
import { Figure } from "deepbox/plot";
import { writeFileSync } from "node:fs";

const x = linspace(0, 2 * Math.PI, 100);
const y1 = sin(x);
const y2 = cos(x);

const fig = new Figure({ width: 640, height: 480 });
const ax = fig.addAxes();
ax.plot(x, y1, { color: "#1f77b4", linewidth: 2 });
ax.plot(x, y2, { color: "#ff7f0e", linewidth: 2 });
ax.setTitle("Sine and Cosine Functions");
ax.setXLabel("x");
ax.setYLabel("y");

const svg = fig.renderSVG();
writeFileSync("line-plot.svg", svg.svg);
console.log("Line plot saved to line-plot.svg");

Line plot saved to line-plot.svg

import { tensor } from "deepbox/ndarray";

const x_scatter = tensor([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const y_scatter = tensor([2.3, 4.1, 5.9, 7.8, 10.2, 11.8, 14.3, 16.1, 17.9, 20.1]);

const fig2 = new Figure();
const ax2 = fig2.addAxes();
ax2.scatter(x_scatter, y_scatter, { color: "#2ca02c", size: 8 });
ax2.setTitle("Scatter Plot Example");
ax2.setXLabel("X values");
ax2.setYLabel("Y values");

const svg2 = fig2.renderSVG();
writeFileSync("scatter-plot.svg", svg2.svg);
console.log("Scatter plot saved to scatter-plot.svg");

Scatter plot saved to scatter-plot.svg

const categories = tensor([0, 1, 2, 3, 4]);
const values = tensor([23, 45, 56, 78, 32]);

const fig3 = new Figure();
const ax3 = fig3.addAxes();
ax3.bar(categories, values, { color: "#d62728", edgecolor: "#000000" });
ax3.setTitle("Bar Chart Example");
ax3.setXLabel("Categories");
ax3.setYLabel("Values");

const svg3 = fig3.renderSVG();
writeFileSync("bar-chart.svg", svg3.svg);
console.log("Bar chart saved to bar-chart.svg");

Bar chart saved to bar-chart.svg

const 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]);

const fig4 = new Figure();
const ax4 = fig4.addAxes();
ax4.hist(data, 9, { color: "#9467bd" });
ax4.setTitle("Histogram Example");
ax4.setXLabel("Value");
ax4.setYLabel("Frequency");

const svg4 = fig4.renderSVG();
writeFileSync("histogram.svg", svg4.svg);
console.log("Histogram saved to histogram.svg");

Histogram saved to histogram.svg

const heatmapData = tensor([
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
]);

const fig5 = new Figure();
const ax5 = fig5.addAxes();
ax5.heatmap(heatmapData, { vmin: 1, vmax: 12 });
ax5.setTitle("Heatmap Example");

const svg5 = fig5.renderSVG();
writeFileSync("heatmap.svg", svg5.svg);
console.log("Heatmap saved to heatmap.svg");

Heatmap saved to heatmap.svg