散点到热力图的简单实现(随便介绍一个好玩的网站)

散点到热力图的实现

热力图是比较常用的直观表现方式, 市面上比较好的实现热力图的方案是专注于热力图的heatmap.js, 但在使用heatmap时会受到收费限制.

另一方面, 项目要求有等高级动画, 只能选择自己重新造轮子

直接上图:

散点到热力图的简单实现(随便介绍一个好玩的网站)_第1张图片

内容分成两个主要部分:

  • 散点到灰度图的实现
  • 根据灰度图生成热力图 (该部分参考 d3.contour 教程)

觉得可以别忘记点赞~

须要了解详细步骤的请移步 Observablehq.com
该效果是直接在网页上实现的. 欢迎fork, 点赞
散点到热力图的简单实现(随便介绍一个好玩的网站)_第2张图片

你可能感兴趣的:(javascript,heatmap,canvas,d3)