本系列最初是想定期分享古柳平时看到或以前收藏的优秀可视化作品的，但许久没更新了，这次和大家分享Giorgia Lupi在2014年的一组很别致、很漂亮的可视化作品。

GitHub地址：https://github.com/janwool/xchart/tree/master欢迎Star目录【实现自己的可视化引擎01】认识Canvas【实现自己的可视化框架引擎02】

Canvas API 提供了通过 JavaScript 绘制图形的能力 。它广泛用于动画、游戏图形、数据可视化、照片处理和实时视频处理领域。本文将会简单介绍下 canvas 。文章的大部分内容来源于 MDN 的 canvas 教程，想深入了解 canvas 的可以去看一下。 这…

工作和生活中我们会经常碰到矩形树图，下面两张图相信大家不会陌生。 最近刚好接到一个需求，绘制门诊疾病的矩形树图（如下图），虽然 echart, d3等框架都有相关的实现，但是对其实现还是蛮好奇的，遂深入研究了一下其实现原理。接下来会从布局算法，颜色填充和canvas 事件系统三…

HTML 上的图形渲染主要有两种方案 SVG 和 Canvas，前者更易于使用，而后者潜力更大，本文主要关注如何使用 Canvas 绘制出更多的图形，提供更加流畅的交互。本文的内容有： PS：你可以把 SVG 的理解成制作完一个个的图形放到页面上，而 Canvas 则是使用画笔…

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。 有效果图可以看出，仪表盘图层可以有几个简单的基本图层圆环(圆弧)Ring、三角形指针(多边形Polygo…

实现一个 canvas 拖拽、缩放、旋转的效果，如下效果图。 统一使用 typescript 来编写，在面对状态操作复杂的流程， ts 提供了状态标注，类型提示等。便于我们维护和梳理流程思路。比如类型标注提供了类似注释的功能，将对象描述清楚的同时，在我们使用相关属性或方法都会有…

第一种是懒加载，就是所谓的无限滚动，每当滚动到底部的时候去添加新的数据，渲染对应的DOM。这种方式一般也是比较常用的，也能解决大部分问题。 第二种是可视区域加载，也就是所谓的虚拟列表，每次只加载当前能看到的部分DOM，随着页面往下滚动更新页面DOM的数据，让人感觉是正常滑动。是…

初学webgl过程中的简单案例。初学，初写，错误难免，欢迎交流学习。坚持学习、积累。去年在github上看到这个案例，觉得很酷。 就开始学习一波webgl，将webgl-wind整合到mapboxgl中。修改了webgl-wind部分源码，我已经将我的代码上传至github，感…