随笔分类 - d3
数据可视化
摘要：d3.arc()是一个弧度生成器，该生成器在被调用时会返回一个字符串，可以赋值给path元素的d属性，用于生成圆弧、圆形和环形。其中0弧度位于12点钟方向，正弧度沿着顺时针方向设置路径。 例如： const arc = d3.arc()({ innerRadius: 0, outerRadius:
阅读全文
摘要：词云也叫标签云，是文本数据的可视化展示，通常根据字体颜色和大小表示每个标签的重要性。d3并没有词云模块，因此需要独立导入d3-cloud这个模块。 词云用到的数据形式是一组数组对象。通常，默认使用text表示显示标签，value用来计算字体大小。用户也可以使用自定义的名称，这时候需要改变函数。 下面
阅读全文
摘要：棒棒糖图与普通的条形图功能相似。从图形上来看，棒棒糖图是由一条锚定在x轴或y轴上的线和点组成的。使用d3js绘制棒棒糖图很简单，因此这次为了学习d3js的一些方法，使用按钮动态改变棒棒糖图。效果如下： 图1：Value1的结果 图2：Value2的结果 一、准备数据 是一个csv数据 role,Va
阅读全文
摘要：当数据量过大时，使用d3.js渲染各种图时，如果一下子加载出来，会出现加载过慢，这样使用效果就不是太好，为了解决这个问题，使用了分页加载数据并渐进渲染各种图。 一、数据格式 数据如下：这里是一个example.csv文件， x,y,value 0,1,0.2 0,2,0.70,3,0.01.....
阅读全文
摘要：这一章节记录热图，下面是图和实现过程。 1、data 这些数据存储在csv文件中 x,y,value A,m1,5 A,m2,5.7 A,m3,6.6 A,m4,5.9 A,m5,10.8 A,m6,11.5 A,m7,2.6 A,m8,3.4 A,m9,3.4 A,m10,3.4 B,m1,1.2
阅读全文
摘要：这一章节介绍堆叠柱状图的画法，下面直接上图和数据。 1、准备数据 const stackBarData = [ { year: 2015, HW: 3740, XM: 920, MAC: 980, www: 490 }, { year: 2016, HW: 1400, XM: 1840, MAC:
阅读全文
摘要：转载请注明出处。 上一篇文章记录了dot-pie的绘制，这篇文章将会介绍另一种图形，箱线图。箱线图使用数据的最小值、最大值、中位数以及上下两个四分位数展现了这组数据。下面是最终绘制的图形。 1、data const dataset = [ { "value": 1, "y": 9.6121, "x"
阅读全文
