导言
用于数据故事的 Svelte 5地块 丝绒地块。一个图是一幅图 -- -- 轴和标记 -- -- 带有自己的标题、传奇、工具提示、侧面和时间线,所以一个完成的、可读的图是一个带有少数道具的组件.
它的目标是在灵活性之间找到一个甜点 d3,宣布精神 图形语法 (数据映射到频道,平面和标记)和经典图案库的方便,其中每种图案都是一等元件.
<script lang="ts">
import { LinePlot } from '@fundar/data-chart-telling';
import { REGION_VALUES } from './datasets';
</script>
<!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->
<LinePlot
width={720}
height={400}
title="Monthly inflation by region (%)"
data={REGION_VALUES}
x="date"
y="value"
color="region"
tooltip
scales={{ x: { label: false } }}
styles={{ values: { show: true } }}
/>
此 README 中的每个 Svelte 片段都是可运行文件 实例/,数据来自 实例/数据集/。 。 。 .
每个情节类型都有一个词汇:同一个频道(x, (中文(简体) ), y, (中文(简体) ), color, (中文(简体) ), grouping, (中文(简体) ), opacity, (中文(简体) ), symbol, (中文(简体) ), r),同样 scales, (中文(简体) ), styles, (中文(简体) ), segments, (中文(简体) ), markers, (中文(简体) ), transforms, (中文(简体) ), tooltip, (中文(简体) ), legend, (中文(简体) ), timeline 财务报告和审定财务报表 facet 道具 一个全球主题.
安装
pnpm add @fundar/data-chart-telling svelte svelteplot
# only for GeoPlot fed with TopoJSON
pnpm add topojson-client
包船Svelte组件,所以应用程序需要Svelte编译器(@sveltejs/vite-plugin-svelte 或斯维尔特基特。 用它来打船.
步入时间
timeline 将一行从一地切开,并穿过它们。 它画成一个 播放器 默认值 : 播放和暂停, 当前步骤和滑动器, 在图中的铬.
<script lang="ts">
import { BarPlot } from '@fundar/data-chart-telling';
import { REGION_VALUES } from './datasets';
</script>
<!--
`timeline` slices the rows by `accessor`. A timeline is a player by default:
play/pause, the current step and a slider in the chrome. `progress` sets where
it starts. `type: 'rule'` draws a guide beside the plot with no controls
instead (see TimelineRule). To build your own widget, read
`useFigure().timeline` (seek, play, pause, next, ...).
-->
<BarPlot
width={720}
height={400}
data={REGION_VALUES}
x="region"
y="value"
scales={{ y: { domain: [0, 30] } }}
timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
/>
type: 'rule' 绘制一个 规则 在图案的旁边, 一条线 沿着它写。 页面驱动它通过 progress (单位:千美元)0 改为 1),从滑动器,卷轴位置或其他任何东西.
<script lang="ts">
import { LinePlot } from '@fundar/data-chart-telling';
import { REGION_VALUES } from './datasets';
// A rule has no controls of its own: the page moves it through `progress` (0 to 1).
// One step per year; a line plot shows every row up to the current step.
let progress = $state(0.5);
</script>
<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
<LinePlot
width={720}
height={400}
data={REGION_VALUES}
x="date"
y="value"
color="region"
timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
/>
见 时间线 对于两者都详细.
文档
从概念开始;其余的由您想要的情节来组织.
| 专题 | 它包含什么 |
|---|---|
| 开始 | 安装, 第一个地块, 将地块大小到容器, 装入数据 |
| 概念 | 插图和数字,行和系列,频道,道具 每个插图共享 |
| 绘图 | 各种情节: 画什么和需要什么 |
| 缩放 | 轴 (x, (中文(简体) ), y)和频道天平(color, (中文(简体) ), grouping, (中文(简体) ), opacity, (中文(简体) ), symbol, (中文(简体) ), r, (中文(简体) ), length(中文(简体) ) |
| 样式和部分 | 数据简短的值标签、框架、空白填补和样式范围 |
| 值标签 | 一个图的形状上的值,和一个标记的标签:布局及其选项 |
| 标记 | 绘图上的额外标记:说明、区域、悬浮亮点、自定义组件 |
| 变革和统计 | 堆叠、拆分、平滑、回归和其他数据转换 |
| 工具提示和悬浮 | 浮动工具提示, 插图亮点, 同步盘旋在地块之间 |
| 图例 | 自动传奇、 拖曳系列、 自定义部分 |
| 时间线 | 以玩家栏( 默认) 或规则按时间步入数据 |
| 颜色 | 标题、字幕、标题、页眉、页脚、分页符及其顺序 |
| 面额 | 小倍数:网格、旋转木马、页 |
| 作曲家 | 一个图中的几个地块, 共享悬浮, 传说和时间线 |
| 读取绘图状态 | usePlot 财务报告和审定财务报表 useFigure,在一块地块周围构建自定义 UI |
| 地图 | GeoPlot:数据、预测、相机、相机和地图标记 |
| 他们 | 全球配置、主题、地方和 CSS 变量 |
| 建筑 | 为贡献者组装图案的方式 |
| 发展 | 建筑、测试、故事书和出版 |
工作实例 实例/; 数据 在线故事书 (或 pnpm storybook )显示每个选项为活.
用于 LLMs 和编码代理
页:1 是索引和 llms- full.txt (英语) 是一个单文件指南,其中包含最重要的规则。 Npm 包件内两艘船,可移动件旁边 实例/。 。 。 .
许可证
麻省理工学院. 将版权通知和许可文本保留在码上.