ObservableHQ教程：数据可视化的新篇章

最新推荐文章于 2024-08-27 08:23:59 发布

何根肠Magnus

最新推荐文章于 2024-08-27 08:23:59 发布

阅读量593

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00688/article/details/141540117

版权

ObservableHQ教程：数据可视化的新篇章

observableA Mutable Value represented as a Function.项目地址:https://gitcode.com/gh_mirrors/obse/observable

1. 项目介绍

ObservableHQ是一个革命性的在线平台，专为构建数据可视化和探索工具而生。它利用JavaScript的力量，结合了现代的数据处理库，如D3.js，使得通过代码来创建交互式数据仪表板变得既直观又强大。不同于传统的静态图表工具，Observable允许开发者以一种动态的、可响应的方式编写和分享数据故事。

2. 项目快速启动

要开始你的Observable之旅，首先你需要注册一个账户或者登录到Observable网站。不过，如果你更倾向于在本地环境开发，可以利用其开源框架：

安装Observable Framework

打开终端，执行以下命令来初始化一个新的Observable项目：

npm init "@observablehq"

这将为你创建一个基础的Observable笔记本结构，你可以在此基础上开始编写你的数据可视化代码。

创建你的第一个Notebook

在项目目录中，你会找到一个.mjs文件，这就是所谓的“Notebook”。编辑这个文件，使用Observable的语法来编写你的可视化逻辑。例如，一个简单的示例可能如下所示：

import {Plot} from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/build/plot.mjs";
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

export default function() {
  const data = [...]; // 填入你的数据
  return Plot.plot({
    marks: [
      Plot.rectY(data, {
        x: "date",
        y: "value",
        aggregate: "mean",
        color: "category"
      })
    ]
  });
}

保存并回到Observable网站，在那里你可以上传或直接在线编辑你的Notebook，实时预览效果。