Observable Plot 初探

Observable Plot 简介

What is Plot

Observable Plot是一个免费的开源 JavaScript 库，用于可视化表格数据，专注于加速探索性数据分析。

why-plot

Observable Plot用于探索性数据可视化。它用于快速发现见解。它的 API 不仅富有表现力且可配置，还针对简洁性和易记性进行了优化。我们希望首次绘制图表的时间尽可能快。

而且速度还不止于此：Plot 可帮助您快速调整和优化数据视图。我们希望 Plot 能让您花更少的时间阅读文档、搜索要复制粘贴的代码和调试 — 而花更多时间询问数据问题。

与其他可视化工具（包括 D3 等低级工具和图表模板等表达能力较弱的高级工具）相比，我们认为使用 Plot 探索数据会更有效率。您将花更多时间“用视觉思考”，而花更少的时间处理编程机制。

基于大语言模型的Code Review体验

Code Review一直是一个重人力的工作，有时项目紧任务重Review就会流于形式，单人Review难以避免错漏。多人Review则面临成本问题。 有些单人负责的项目甚至没有reviewer。本文简单分享基于大模型的Code Review体验以及遇到的一些问题。

HTML attributes 与 DOM properties

属性和特性是完全不同的东西

1
2
3
4
5
6
7
8
9
10
11
12

<div foo="bar">…</div>
<script>
  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // undefined

  div.foo = 'hello world';

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // 'hello world'
</script>

数据可视化之美

简介

本文是《数据可视化之美》的阅读笔记，解构并重组了其原本的组织形式，剔除了部分具体的可视化案例（如词云、纽约地铁、美国民航以及本书后期的大量具体案例）。目的是从中分析和总结一些可视化设计的原则和方法论，以指导未来的可视化设计和开发。

《数据可视化之美》主要讲述了可视化的一些设计准则，如何通过数据可视化来讲述故事，以及一个可视化项目的执行流程，并通过具体案例了解可视化探索的过程和一些有趣的发现。

其中，大多数信息可视化的原始驱动力在于对数据的探索和描述，推动其发展的主要是一些出版机构（如《纽约时报》、《连线》）。可视分析的推动者多为非营利组织或学术组织，而在一些科学可视化和可视化软件中则可以看到商业组织的身影。

基于Dom的无限画布实现方案

针对无限画布这个场景，在业界figma的画布交互体验是公认的比较好的。不过figma采用的是canvas方案。本文介绍基于Dom的无限画布实现方案。

主体结构

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

<!-- 画布容器 -->
<InfiniteCanvas>
  <!-- 渲染器 -->
  <Renders>
    <!-- 布局器 在合适的位置渲染元素渲染器 -->
    <Layouter>
      <!-- 元素渲染器 -->
    	<ItemRender/>
    </Layouter>
  </Renders>
  <!-- 设计器 -->
  <Designer>
    <!-- 已选中元素的指示器 -->
    <SelectedBox/>
    <!-- 布局提示线 -->
    <LayoutHintLine/>
    <!-- 右键菜单 -->
    <ContentMenu/>
    <!-- 刷选框 -->
    <SelectBox/>
    <!-- 拖拽添加元素时的蒙板 -->
    <DragOverMask/>
  <Designer/>
  <!-- 控制器 -->
  <Controller/>
</InfiniteCanvas>

核心属性

1
2
3
4
5
6
7
8
9
10
11

// 画布的移动属性 
canvasTransform: {
  // 缩放比例
  scale: 1,
  // 画布由于平移引起的 偏移量
  translateX: 0,
  translateY: 0,
  // 画布由于缩放引起的 偏移量
  canvasOffsetX: 0,
  canvasOffsetY: 0,
}

完全基于云服务的Web应用开发过程

这里介绍一种完全基于云服务的Web应用开发过程，各云服务基本都包含免费方案。对于一些小型的非商业化Web应用完全可以基于云服务0成本开发、部署、落地。

过程 & 工具

Demo	开发	源码管理	测试	部署	数据存储 对象存储	CDN

Web Components 现状及发展趋势

笔者之前参与过两个低代码项目，大屏编辑器，图表编辑器。其表现形式均为通过拖拽和配置表单来编排物料，进而生成交付产物。其中物料的丰富程度、可复用程度又是重中之重。如果物料本身依赖某一种框架，比如React或Vue在大时间跨度下必然会产生迁移成本。届时面对海量的待升级的基础物料，如何迁移就会变成一个非常麻烦的问题。

Web Components提出了一种无需任何库或框架即可运行的组件化方案。用于将物料解耦具体前端框架十分合适。本文尝试从Web Components的发展历史、现状、优缺、趋势等方面尝试判断现在是否合适将已有的物料迁移至Web Components。

NodeJs性能分析

这里提出一种面向NodeJs的基于Chrome Dev Tools的性能分析方法。

核心思路

• 基于console.profile记录性能描述信息，输出.cpuprofile文件。
• 基于Inspector记录内存占用信息， 输出.heapsnapshot文件。
• 基于Chrome读取.cpuprofile和.heapsnapshot文件分析性能问题。

效果

JS执行情况

内存占用情况

由SVG引起的大屏性能问题排查及优化方案

背景

某大屏项目主视觉在增加其他辅助图表之后帧率下降较为明显，本文尝试分析导致帧率下降的原因以及可能的优化空间。

原始

在交互触发时也基本可以稳定60帧左右。

新增图表等其他页面元素后

普遍仅能维持在30帧左右

背景

针对在如何在图表编辑器场景下快速索引图元所对应的方案，我们得到了ECharts图元拾取方案。本文介绍两种方案去提示用户当前拾取到的图元。