在本指南中，我们将探讨如何使用 Deno 和 Jupyter Notebook 构建数据分析仪表板。最近，Deno 团队宣布与 Jupyter Notebook 兼容，允许用户通过将 Deno 用作其 Jupyter Notebook 中的内核，将 Deno 的强大功能和灵活性用于其数据分析工作流程。

Deno 和 Jupyter Notebook 集成简介

Deno 可以用于服务器端和客户端应用程序的现代 JavaScript 运行时。即使这样你仍然可以运行纯 JavaScript，Deno 也提供了对 TypeScript 的内置支持。

正如 TypeScript 开发团队所建议的那样，Deno 默认使用严格的类型检查，从而实现更安全的类型环境。Deno 设计理念是提供更安全的运行时环境和具有显式依赖关系的模块系统。

Jupyter Notebook 是一种工具，可帮助你以交互方式和协作方式可视化和分析数据。你无需从控制台运行代码，可以直接在笔记本单元格中运行代码，从而更轻松地可视化、试验和迭代数据分析任务。

这种集成为数据科学家和分析师开辟了新的可能性，使他们能够访问 Deno 的现代 JavaScript 运行时及其可以导入现有 npm 包的广泛模块生态系统。

Jupyter Notebook：通往数据科学的门户

Jupyter Notebook 已成为数据科学家探索和理解数据的首选工具。

这些笔记本提供了一种方便的方式来组合代码、执行代码，并在单个文档中显示可视化效果和说明性文本。这种组合使 Jupyter Notebook 可以更轻松地用作数据科学家之间的协作工具，从而在数据分析工作流中实现知识共享和可重复性。

Jupyter Notebook 支持多种语言，包括 Python、R、Rust、Julia 和 Deno。这种广泛的语言支持使数据科学家能够轻松地使用他们选择的编程语言，具体取决于他们的数据分析任务的性质和首选工具。使用笔记本的主要目标之一是快速迭代并有效地使用交互式计算进行数据探索和分析。

交互式计算允许数据科学家直接执行代码并对其进行迭代，而无需使用命令行或传统的代码执行环境。与通过终端或调试器执行代码相比，在 Jupyter Notebook 中测试代码和迭代数据分析任务非常容易。

探索 Deno 中的数据科学库

使用 Deno 的好处是可以访问 Node 和 npm 生态系统中可用的现代 JavaScript 库。npm 中已经有很多强大的数据科学和数据可视化库，可以在 Deno 支持的 Jupyter Notebook 中即插即用这些库。

以下是 Deno 中流行的数据科学库的几个示例，你将在本文中与之进行交互：

D3.js：一个强大的库，用于可视化数据并创建交互式数据驱动的可视化效果
Observable Plot：基于 D3.js 构建的库，用于可视化数据并在不同的绘图图上更快地迭代
Polars：一个用 Rust 编写的超快的 DataFrame 库，用于数据操作和分析

在对 Deno 和 Jupyter Notebook 有了基本的了解后，让我们深入研究如何设置环境以开始构建强大的数据分析仪表板。

准备环境

若要准备环境，必须同时安装 Deno 和 Jupyter。假设你使用的是 macOS/Linux，您可以使用以下命令安装 Deno：

bash 复制代码

curl -fsSL https://deno.land/x/install/install.sh | sh

接下来，确保已安装 Python 3.x 和 pip。Jupyter Notebook 是用 Python 编写的，因此需要 pip 通过运行以下命令来安装它：

bash 复制代码

pip install jupyterlab notebook

通过执行以下命令来测试本地笔记本服务器：

复制代码

jupyter notebook

上面的命令将运行 Jupyter Notebook 本地服务器：

如果一切设置正确，应该会在浏览器中看到 http://localhost:8888/ Jupyter Notebook 界面启动。

使用 Deno 在 Jupyter 中编译和运行 TypeScript

要在笔记本中使用 Deno，必须安装 Deno 内核。首先，你可以通过运行以下命令来测试你的 Deno 内核：

css 复制代码

deno jupyter --unstable

如果内核已经安装，你应该会收到一条返回消息：

erlang 复制代码

 Deno kernel already installed.

否则，如果尚未安装内核，请运行以下命令：

css 复制代码

deno jupyter --unstable --install

上述命令将确保您已为本地 Jupyter Notebook 安装了最新的 Deno 内核。

注意，虽然 Deno 内核已经随最新版本一起发布，但它仍然被标记为不稳定。这意味着在 Jupyter Notebook 中使用 Deno 内核时可能会出现一些错误或问题。

配置 Deno 和 Jupyter Notebook 后，即可开始构建数据分析仪表板。

使用 Deno 和 Jupyter Notebook 构建数据分析仪表板

为了帮助你了解新的 Deno 内核的工作原理，最好使用 Jupyter Notebook 和 Deno 进行基本的数据可视化练习。

将构建一个财务数据仪表板来分析你的收入和支出。此仪表板将提供对财务数据的可视化，帮助你了解一段时间内的支出并做出明智的财务决策。它还允许追踪你的净收入并识别趋势。

下面是数据外观的示例数据集：

yaml 复制代码

Date,Income,Expenses,NetIncome,BudgetIncome,ActualIncome,BudgetExpenses,ActualExpenses,Salaries,R&D,Marketing,Utilities,Rent,Equipment,Software,Hardware,Consulting,Office Supplies,DiffIncome,DiffExpenses
2022-01-01,281,218,63,284,281,221,218,41,24,45,43,22,35,2,2,2,2,3,3
2022-01-02,328,244,84,323,328,240,244,46,45,34,35,31,37,1,4,8,3,-5,-4
2022-01-03,266,223,43,269,266,222,223,31,49,38,30,22,40,2,6,1,4,3,-1
2022-01-04,287,226,61,279,287,229,226,43,47,31,48,21,26,5,1,3,1,-8,3
2022-01-05,307,214,93,309,307,217,214,48,37,40,23,34,20,1,3,4,4,2,3

仪表板的数据集在此处。

选择正确的数据可视化工具

除了上面提到的 D3.js、Observable Plot, 和Polars之外，还将在本练习中使用以下包：

将使用 Skia Canvas 创建用于渲染数据可视化的画布，在画布上渲染绘图，使用 D3 进行数据可视化，使用 Observable Plot 创建交互式绘图， display 并使用 Polars 将数据加载到 DataFrame 中。

构建仪表板

首先，可以在 Jupyter Notebook 中导入必要的库和模块，以构建财务数据仪表板。首先导入 nodejs-polars 库和 display 模块：

javascript 复制代码

import pl from "npm:nodejs-polars";
import { display } from "https://deno.land/x/[email protected]/mod.ts";

导入所需的库后，即可开始获取示例数据集：

Javascript 复制代码

let response = await fetch(
  "https://gist.githubusercontent.com/agustinustheo/195f32a4a6c68c493056c883d959ca35/raw/c7363d8b916ab00a2d1747adb89fca120da29f42/mock_financial_data.csv",
);

let data = await response.text();

let df = pl.readCSV(data, { sep: "," });

await display(df.sample(10));

将 D3 与 Deno 集成以实现高级可视化

集成不同类型的可视化效果，例如折线图、条形图和饼图，以有效地展示一段时间内的财务数据趋势和模式。

若要开始可视化数据，可以使用 D3.js 库。将其与 skia_canvas 模块一起导入，以创建画布来呈现图表：

Javascript 复制代码

import * as d3 from "npm:d3";
import { createCanvas } from "https://deno.land/x/skia_canvas/mod.ts";

导入必要的库后，可以使用 D3 构建数据可视化。将构建一个简单的饼图来跟踪费用的百分比。使用 df.tail(1).toRecords()[0] 获取数据的尾端，然后打印结果：

Javascript 复制代码

const lastDataPoint = df.tail(1).toRecords()[0];
console.log(lastDataPoint);

接下来，通过从 DataFrame 中选择必要的列并将其转换为适合饼图的格式来创建示例数据：

Javascript 复制代码

let categories = ['Salaries', 'R&D', 'Marketing', 'Utilities', 'Rent', 'Equipment', 'Software', 'Hardware', 'Consulting', 'Office Supplies'];

// Sample data
const sampleData1 = [];
for(let i = 0; i < categories.length; i++) {
    const category = categories[i];
    sampleData1.push({
        category,
        amount: lastDataPoint[category],
    });
}

现在，你可以创建画布并使用 D3 呈现饼图。下面是如何实现的示例：

Javascript 复制代码

const width = 500;
const height = 500;
const radius = Math.min(width, height) / 2;

// Create a pie function
const pie = d3.pie().value(d => d.amount);

// Create an arc generator for the slices
const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);

// Create an arc generator for the labels
const labelArc = d3.arc()
    .innerRadius(radius - 40) // Adjust to position the labels
    .outerRadius(radius - 40);

// Create the canvas
const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

// Translate to center the pie chart
ctx.translate(width / 2, height / 2);

// Draw the pie chart
pie(sampleData1).forEach((d, i) => {
    // Draw the slice
    ctx.beginPath();
    arc.context(ctx)(d);
    ctx.fillStyle = d3.schemeCategory10[i % 10];
    ctx.fill();

    // Draw the label
    ctx.fillStyle = "#000"; // Label color
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    const centroid = labelArc.centroid(d);
    ctx.fillText(d.data.category, centroid[0], centroid[1]);
});

// Display the canvas
await display(canvas);

在上面的代码片段中，我们在一个简单的饼图中可视化了费用的百分比分布。这只是如何使用 D3 在 Jupyter Notebook 中可视化数据的一个示例。

使用 Observable Plot 进行快速迭代

若要进一步增强 Jupyter Notebook 中的数据可视化功能，请考虑使用 Observable Plot。与 D3 相比，它的学习曲线要低得多------你不需要编写自定义函数来渲染视觉效果。您可以使用 Plot 和定义要开始呈现的图表类型。

首先导入必要的依赖项，初始化文档画布，并定义要显示的记录：

Javascript 复制代码

import * as Plot from "npm:@observablehq/plot";
import { DOMParser, SVGElement } from "npm:linkedom";
const document = new DOMParser().parseFromString(
  `<!DOCTYPE html><html lang="en"></html>`,
  "text/html",
);

let records = df.tail(40).toRecords();

该 @observablehq/plot 库不依赖于它 skia_canvas 来呈现图表。在上面的示例中，我们使用的是常规 HTML 文档。

现在，将为你的净收入制作折线图。看起来净收入没有明显的趋势，但请放心，这是意料之中的------数据是随机的：

Javascript 复制代码

let convertedArray = records.map(item => {
    return {
        NetIncome: item.NetIncome,
        Date: new Date(item.Date)
    };
});

await display(
  Plot.plot({
    x: { type: "band" },
    y: { grid: true },
    marks: [
      Plot.line(convertedArray, {x: "Date", y: "NetIncome"}),
    ],
    document,
  }),
);

从折线图的外观来看，与 D3 相比，它为您提供了一个更精致的模板。

现在，让我们继续可视化费用。还记得饼图吗？让我们制作一个堆积条形图，显示一段时间内的费用，并清楚地显示哪种费用占支出最多：

Javascript 复制代码

let sampleData2 = [];
for (let i = 0; i < records.length; i++) {
  const currentRecord = records[i];
  for (let x = 0; x < categories.length; x++) {
    const currentCategory = categories[x];
    sampleData2.push({
      date: new Date(currentRecord["Date"]),
      category: currentCategory,
      count: currentRecord[currentCategory],
    });
  }
}

await display(
  Plot.plot({
    x: { type: "band" },
    y: { grid: true },
    marks: [
      Plot.barY(sampleData2, { x: "date", y: "count", fill: "category" }),
      Plot.ruleY([0]),
    ],
    color: { legend: true },
    document,
  }),
);

在上面的代码片段中，该 @observablehq/plot 库创建了两个可视化效果：一个是净收入的折线图，另一个是一段时间内支出的堆积条形图。这两个图表都是使用该 Plot.plot 函数创建的。

总结

你已使用 Jupyter Notebook 和 Deno 完成财务仪表板的创建！

原文：Using Deno with Jupyter Notebook to build a data dashboard - LogRocket Blog

使用 Deno 和 Jupyter Notebook 构建数据仪表盘

Deno 和 Jupyter Notebook 集成简介

Jupyter Notebook：通往数据科学的门户

探索 Deno 中的数据科学库

准备环境

使用 Deno 在 Jupyter 中编译和运行 TypeScript

使用 Deno 和 Jupyter Notebook 构建数据分析仪表板

选择正确的数据可视化工具

构建仪表板

将 D3 与 Deno 集成以实现高级可视化

使用 Observable Plot 进行快速迭代

总结