基于svelte的叙事可视化开发

缘由

同事丁杰英在朋友圈分享了一个她做的可视化项目：你的感觉没错，电影确实越来越长了，里面的可视化效果很有意思，于是我就想着看下是用什么技术做的，然后就发现了svelte-starter这个项目，看介绍居然是 The Pudding 用于创作叙事可视化的：

This starter template aims to quickly scaffold a SvelteKit project, designed around data-driven, visual stories at The Pudding.

那我指定得了解下了。

简介

Svelte

/svelt/ adj. 苗条的,细长的,优美的
svelte plump 苗条的
svelte body 窈窕身材
svelte looking 看起来苗条

作者是 Rich Harris，也就是 Ractive, Rollup 和 Buble 的作者。
这个框架的 API 设计是从 Ractive 那边传承过来的（自然跟 Vue 也非常像），但这不是重点。Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。举例来说，当前的框架无论是 React Angular 还是 Vue，不管你怎么编译，使用的时候必然需要『引入』框架本身，也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样，一个 Svelte 组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！
尤雨溪

SvelteKit

前端开发框架，类似 Next 和 Nuxt：

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. If you’re coming from React, SvelteKit is similar to Next. If you’re coming from Vue, SvelteKit is similar to Nuxt.

集成了 Vite

svelte-starter

Svelte VS. Vue

Vue ≈ Svelte + SolidJS

1

为什么感觉 svelte 其实才是 vue3？ - HcySunYang 的回答 - 知乎
https://www.zhihu.com/question/459281340/answer/1888214077

Layercake

Graphics framework for sveltejs.

用 D3.js 写的，也有 WebGL。可以根据这个库，学习如何用 D3.js 写可视化代码。

封装为了类似 Vue 组件的形式，很易用。

以 Bar.svelte 的代码为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--
	@component
	Generates an SVG bar chart.
 -->
<script>
	import { getContext } from 'svelte';

	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');

	/** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
	export let fill = '#00bbff';
</script>

<g class="bar-group">
	{#each $data as d, i}
		<rect
			class="group-rect"
			data-id={i}
			x={$xScale.range()[0]}
			y={$yGet(d)}
			height={$yScale.bandwidth()}
			width={$xGet(d)}
			{fill}
		></rect>
	{/each}
</g>

资料

你的感觉没错，电影确实越来越长了：
https://huchenhaoarvin.github.io/movie-getting-longer-web/

Svelte：
https://github.com/sveltejs/svelte

SvelteKit：
https://github.com/sveltejs/kit

Svelte-starter：
https://github.com/the-pudding/svelte-starter

可视化库 layercake：
https://github.com/mhkeller/layercake

Live Coding our Site in SvelteKit：
https://www.youtube.com/playlist?list=PLsuhXm2zs07LgUWm2AehKSaCKtC_3-Vld