Skip to content
Deepbox
25intermediate

Data Visualization

Create line, scatter, bar, histogram and heatmap plots and save each one as an SVG file. Figure.renderSVG() returns the SVG text. Figure.renderPNG() renders PNG in Node.js.

What you will learn

  • Use deepbox/ndarray for tensor, linspace, sin, cos.
  • Use deepbox/plot for Figure, Axes.plot, scatter, bar, hist, heatmap.
  • Create line, scatter, bar, histogram and heatmap plots and save each one as an SVG file. Figure.renderSVG() returns the SVG text. Figure.renderPNG() renders PNG in Node.js.

Source

index.ts
/** * Example 25: Data Visualization * * Create line, scatter, bar, histogram and heatmap plots and save each one as an SVG file. * Figure.renderSVG() returns the SVG text. Figure.renderPNG() writes PNG in Node.js. */ import { mkdirSync, writeFileSync } from "node:fs";import { cos, linspace, sin, tensor } from "deepbox/ndarray";import { Figure } from "deepbox/plot"; console.log("=== Data Visualization ===\n"); mkdirSync("docs/examples/25-plotting/output", { recursive: true }); // 1. Line Plotconsole.log("1. Creating line plot...");const x = linspace(0, 2 * Math.PI, 100);const y1 = sin(x);const y2 = cos(x); const fig1 = new Figure({ width: 640, height: 480 });const ax1 = fig1.addAxes();ax1.plot(x, y1, { color: "#1f77b4", linewidth: 2 });ax1.plot(x, y2, { color: "#ff7f0e", linewidth: 2 });ax1.setTitle("Sine and Cosine Functions");ax1.setXLabel("x");ax1.setYLabel("y"); const svg1 = fig1.renderSVG();writeFileSync("docs/examples/25-plotting/output/line-plot.svg", svg1.svg);console.log("  Saved: output/line-plot.svg\n"); // 2. Scatter Plotconsole.log("2. Creating scatter plot...");const xScatter = tensor([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);const yScatter = 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(xScatter, yScatter, { color: "#2ca02c", size: 8 });ax2.setTitle("Scatter Plot Example");ax2.setXLabel("X values");ax2.setYLabel("Y values"); const svg2 = fig2.renderSVG();writeFileSync("docs/examples/25-plotting/output/scatter-plot.svg", svg2.svg);console.log("  Saved: output/scatter-plot.svg\n"); // 3. Bar Chartconsole.log("3. Creating bar chart...");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("docs/examples/25-plotting/output/bar-chart.svg", svg3.svg);console.log("  Saved: output/bar-chart.svg\n"); // 4. Histogramconsole.log("4. Creating histogram...");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("docs/examples/25-plotting/output/histogram.svg", svg4.svg);console.log("  Saved: output/histogram.svg\n"); // 5. Heatmapconsole.log("5. Creating heatmap...");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("docs/examples/25-plotting/output/heatmap.svg", svg5.svg);console.log("  Saved: output/heatmap.svg\n"); console.log("Which plot to use:");console.log("• Line plot: a continuous series");console.log("• Scatter plot: the relationship between two variables");console.log("• Bar chart: values per category");console.log("• Histogram: the distribution of one variable");console.log("• Heatmap: the values of a matrix"); console.log("\nPlotting complete.");

Output

Console output
Five SVG files in `output/`:
`line-plot.svg`: sine and cosine curves
`scatter-plot.svg`: scatter plot of a noisy linear trend
`bar-chart.svg`: bar chart of five categories
`histogram.svg`: histogram of 25 values in 9 bins
`heatmap.svg`: heatmap of a 3 by 4 matrix