RAWGraphs

RAWGraphs是一款开源免费基于网页的在线数据可视化平台，以其图表类型丰富、交互逻辑直观、无需安装和编程门槛低的特性，正在逐渐成为许多用户数据表达工作流中的重要一环。

RAWGraphs 最初诞生于意大利米兰理工大学的 DensityDesign 实验室。这一实验室专注于设计与复杂信息之间的关系研究，致力于通过视觉手段更有效地表达多维度数据。项目最早于 2013 年启动，其初衷是弥补 Excel 或 Google Sheets 等表格工具与 Illustrator 等矢量图形软件之间的功能空白——即在不依赖编程语言的情况下，帮助用户从结构化数据中快速生成可编辑、高质量的图形。

该项目于 2014 年正式发布第一版，即 RAW（Remixing Archival Works）。初版发布后迅速获得数据可视化领域的关注，曾荣获视觉化比赛“Information is Beautiful Awards”的“最美奖项”（Most Beautiful Award），这不仅是对其视觉美学的认可，更说明了它在表达复杂数据关系方面的实际能力。

随着用户基础不断增长，RAW 项目在 2017 年完成品牌更新，更名为 RAWGraphs，同时重构架构并发布为开源项目。此时起，RAWGraphs 使用 Apache 2.0 开源许可证，用户可以自由下载、修改和部署，极大增强了它在教育、研究和创意产业中的传播力和应用广度。

到了 2020 年，该项目开始为 2.0 版本筹资，并通过 Indiegogo 众筹平台获得资助。这次迭代不仅更新了整体架构，采用 React 重构前端界面，也提升了系统的模块化程度，使得后续功能扩展和图表类型定制变得更为灵活。2021 年发布的 2.0 正式版为平台带来了全新的用户体验，并开启了用户贡献图表模板、插件等社区生态建设的新阶段。

背景与目标

RAWGraphs 的开发初衷，源于对现实工作流程中一个普遍痛点的回应：当用户需要将结构化数据（如表格、数据库等）以视觉化方式表达时，常常在“数据分析工具”和“视觉设计软件”之间来回切换，耗时且效率低下。

Excel 等办公工具虽便捷，但其可视化能力受限，尤其在处理复杂层级关系或非线性数据结构时表达力不足；而 Illustrator 等图形工具虽然表现力强，但需要用户从头绘制视觉元素，不仅费时，还极易出错。而编程型工具如 D3.js，则要求掌握较高的开发技能，对大多数设计师或文科背景用户而言存在较大门槛。

RAWGraphs 正是在这一背景下被设计出来的——它希望成为一种“中间工具”（intermediate tool），连接数据与设计、分析与表达，让用户在无需编写一行代码的前提下，也能创造出具有专业水准的可视化图形，并保持后期的可编辑性。

设计理念与核心价值主张

填补表格工具与图形软件之间的鸿沟

RAWGraphs 的核心理念可以概括为：“不止看懂数据，更要表达清楚。”在开发团队看来，数据可视化不仅仅是为了理解数据，更是为了传播数据、讲述故事。因此，与数据科学平台追求交互、实时计算和复杂分析不同，RAWGraphs 更关注“图像的可控制性”和“输出的表达力”。它不直接嵌入 BI 流程，而是服务于数据发布、教学、展示、出版等视觉表达导向更强的场景。

具体而言，它提供了高度模块化的“视觉映射”功能，用户可以通过拖拽方式将数据字段映射到视觉通道（如颜色、大小、位置等），无需学习语法或脚本语言，这种可视化构建过程对于非程序员用户极为友好。

支持快速、自由、高质量地输出视觉图形

许多数据图表工具输出的是“图像”——一旦生成后便无法再编辑。而 RAWGraphs 输出的是可编辑的 SVG 文件，用户可以在 Illustrator、Inkscape 或 Affinity Designer 等软件中进行后期润色，比如添加文字注解、修改颜色、裁切布局等。这种“先用数据生成图，再用图形设计美化表达”的流程，大大提升了信息传播的质量与效率。

面向哪些用户群体？

RAWGraphs 的用户画像相当多元，但主要可分为以下几类：

用户群体	特点与需求	RAWGraphs 如何满足
设计师	重视视觉表现力、需要导出矢量图进行后期编辑	可导出 SVG 文件、图形美观可控
学术研究者	需可视化论文中复杂数据结构，如层级、网络、时间流等	桑基图、树图、弦图等图表适用
数据新闻从业者	时间紧、需快速产出表达清晰的图表用于报道	操作简单、可快速输出高质量图形
教育工作者	在课堂上教授数据视觉化原理与构图方法	可作为教学工具，图形原理直观
开源爱好者	喜好自由部署、自主掌控数据处理过程	提供源码、可部署本地版本
初级数据从业者	不具备代码能力但需完成图形展示任务	图形配置全流程可视化

通过为这些用户群体设计简洁的流程和功能逻辑，RAWGraphs 在教育、文化、传媒等行业中获得了广泛应用，也在 GitHub 和开源社区中积累了良好的口碑。

技术架构

RAWGraphs 虽然在表面上是一款“可视化图表生成工具”，但其背后具备完整的模块化系统设计，允许用户在浏览器中完成从数据输入到图表生成的全过程。相比于传统“封装式”的可视化工具，RAWGraphs 更像是一套结构清晰的可嵌入组件集合，这不仅方便用户直接使用网页版，也为开发者提供了高度可定制的技术基础。

架构设计理念：前后端一体、本地执行、模块组合

RAWGraphs 的核心设计遵循一个原则：“所有工作在用户端完成”。这意味着它不依赖服务器存储，也不需要将数据上传至云端或后端服务。整个可视化流程自始至终都发生在浏览器内部，既保障了数据隐私，又提升了运行速度和部署的灵活性。

其前端架构基于现代 JavaScript 技术栈构建，尤其是 React 和 D3.js 的结合使用，使得界面交互与数据图形渲染都保持高度响应与灵活度。

架构模块总览：

模块名称	简要说明	技术实现
`rawgraphs-core`	数据解析与图表逻辑核心模块，处理字段映射与视觉编码	原生 JavaScript
`rawgraphs-app`	网页前端界面，负责用户交互、数据导入、图表预览与导出	React
`rawgraphs-charts`	图表模板库，储存各种内建与自定义图表类型的绘制规则	JSON+JS+SVG
`rawgraphs-utils`	常用的通用函数与格式处理工具，如类型判断、转义等	JavaScript 工具库
`rawgraphs-docs`	项目文档与开发者指南，支持社区贡献	Markdown+VuePress

这种架构使得项目具有较高的模块独立性。开发者可在只引入核心模块的情况下，二次开发符合自身需求的定制应用，也可以通过创建新的图表模板，拓展系统的视觉表现能力。

技术栈解析

前端框架：React

自 2.0 起，RAWGraphs 将前端架构全面迁移至 React。该框架不仅提高了界面的组件化与响应速度，也使得用户交互逻辑（如字段拖拽、实时预览、属性调整）更加顺畅。React 的生态性也便于社区开发者贡献功能插件、国际化支持、辅助功能等。

图形渲染：D3.js

D3.js 是数据可视化领域的事实标准库，提供了基于数据驱动的 SVG 元素控制能力。在 RAWGraphs 中，D3 并不直接暴露给终端用户，而是作为底层图表模板的一部分，实现诸如位置计算、路径生成、颜色映射等复杂逻辑。用户虽然看不到 D3 的存在，但其强大能力体现在每一个细节之中。

样式系统：SASS 与响应式布局

在视觉设计方面，RAWGraphs 使用了 SASS 编写样式表，并支持响应式布局。尤其是在 2.0.1 版本后，整个界面风格更为现代，支持暗色模式与界面缩放，提升了跨平台体验。

本地部署与开源特性

对于不愿依赖公网服务或有内网部署需求的机构，RAWGraphs 提供完整的本地化部署能力。开发者可直接从 GitHub 克隆源代码，通过 Node.js 与 Yarn 构建本地版本，运行在任意 HTTP 服务器中，甚至可以直接用 Electron 封装成桌面应用。

开源许可证：Apache 2.0

开发者可根据自身需求 fork 任一模块独立开发，也可以贡献 Pull Request 合入主项目。目前主仓库由 DensityDesign Lab 与 Calibro、Inmagik 三方联合维护，并定期更新 release。

主要功能模块

RAWGraphs 的成功不仅依赖于其开放的架构与美观的图表，更得益于其一体化的“数据输入 → 图表生成 → 导出发布”流程设计。用户无需安装插件，也无需登录账户，只需打开网页即可直接开始数据可视化工作，这种“即开即用”的工具逻辑使其特别适合教学、快速原型和项目展示等高频短周期场景。

整个使用流程由四个主要步骤构成：数据输入与预处理、图表类型选择、可视化映射与配置、图表导出与嵌入。每一部分都经过精心设计，既保留了操作的自由度，又降低了学习门槛。

数据输入与预处理

RAWGraphs 支持多种数据导入方式，满足不同用户的文件来源与结构需求：

支持的数据格式：

CSV（逗号分隔值）
TSV（制表符分隔值）
DSV（自定义分隔符）
Microsoft Excel (.xls, .xlsx)
JSON（支持嵌套对象处理）
Google Sheets（需启用公开访问）
SPARQL 查询（用于从 RDF 数据集中动态获取数据）
直接粘贴文本（支持识别分隔符）

这种多源支持特别适合新闻编辑、科研数据处理等跨平台工作场景。用户可以从 Excel 拖出一列数据，粘贴到页面，即可生成图形，不需要额外上传或转换格式。

数据预处理功能亮点：

自动识别字段类型（数值、类别、时间、地理坐标等）
支持列重命名与删除
预览行数、查看缺失值
分隔符手动设定与预览同步更新

此外，预处理界面提供即时反馈，用户可以清楚看到字段转换后的状态，避免进入图表构建阶段后才发现问题，提高整体效率。

图表类型与视觉表达方式

RAWGraphs 最强大的功能之一，就是其广泛且独特的图表类型支持。它并不局限于传统的柱状图和线图，而是涵盖了一系列表达“结构关系”、“流程逻辑”与“复杂比较”的高级可视化模型。

图表类型总览（按功能类别）：

分类	图表类型示例	适用场景
比较	条形图、气泡图、堆叠面积图	数值比较、时间序列分析
分布	散点图、蜂群图、箱线图	表现分布趋势、集中程度
关系	弦图、桑基图、力导图、双轴弦图	网络关系、能量流、组织结构
结构	树图、圈层图、聚类图	层级表达、组织划分、群体可视化
地理空间	地理热图、地图气泡图（需地理字段）	空间分布与地理密度
时间与流程	甘特图、时间轴	项目进度、历史进程、流程控制
抽象与自定义	矩阵图、网格图、虚拟坐标图	高度自定义、艺术化表现

当前版本已内置 30 余种图表模板，并支持通过社区扩展导入更多类型。每种图表都附带详细的“映射指南”（mapping guide），解释哪些数据字段适合放入哪些视觉通道（如颜色、宽度、方向、顺序等）。

可视化映射与定制

在图表生成界面，用户会进入一个核心模块：视觉映射面板。这是 RAWGraphs 最具交互性与灵活性的设计所在。

映射方式简介：

以“拖拽”操作为主，字段 → 映射槽位
每个图表模板定义了自己的槽位，如：
- Group（分组）
- Size（图形尺寸）
- Color（颜色变量）
- Label（标签字段）
- Order（序列顺序）
支持复合映射（多个字段到同一视觉通道）

这种设计使用户无需书写任何代码或公式，就能完成复杂的数据维度表达。尤其适用于非技术背景用户，如设计师、教师、数据传播人员。

可视化配置选项：

配置项	功能描述
图形颜色	选择调色板、手动配色、分组上色
图形尺寸	控制最小值、最大值范围
标签展示	是否显示字段标签，标签内容格式调整
图表间距与布局	设置图形之间的填充、边距、对齐方式
背景样式	支持白底、透明背景、网格辅助线

用户还可以手动设定图表宽高比，适配社交媒体发布或出版格式（如 A4 横版、16:9、正方形等）。

图表导出与嵌入

完成图形生成后，RAWGraphs 提供了丰富的导出方式，支持多种下游编辑或发布平台。

导出格式支持：

SVG（可编辑矢量图，适合 Illustrator、Inkscape 等软件）
PNG（高分辨率位图，适合网页和文档直接嵌入）
JSON（保存配置参数，便于后续修改）
RAWGraphs 内部格式（.rawgraphs）：便于项目保存与再打开

用户还可以使用图表嵌入链接功能，将图表以 <iframe> 的方式嵌入到网页、教学平台或博客中（注意需要部署到公网服务器或使用 GitHub Pages）。

图表嵌入选项亮点：

是否开启动画（如弦图展开）
是否展示原始数据链接
可控制交互区域尺寸和缩放范围

这一导出系统确保了 RAWGraphs 不是“临时工具”，而是可持续集成进用户整个工作流中的可重用组件。

热门文章