开始填坑。太多坑没填以致可以从容选择先填哪个,然而也忘了坑长什么样、怎么填。不过还是希望该填的坑能尽量于月底前填完,毕竟拖到新的一年感觉也不好。
先填之前用 D3.js
复现 Wendy Shijia
的 「Escher's Gallery/埃舍尔画廊」
可视化作品的复盘文章的坑。
网页演示:https://desertsx.github.io/dataviz-in-action/02-eschers-gallery/index.htm
开源代码(可点 Star 支持):DesertsX/dataviz-in-action
在Wendy Shijia 的「 Escher's Gallery」可视化作品复现系列文章(一)里,古柳写到自己想起 CSS Tricks
上的 「Use and Reuse Everything in SVG… Even Animations!」 这篇文章,里面实现了单个立方体/cube
,并且使用 <use>
标签复用立方体进行堆叠,“他山之石,可以攻玉”,于是想到可以用于「 Escher's Gallery」
复现中。
简单看下代码实现思路:在 defs
标签里通过3个宽高21*24
的rect/长方形
的transform/变形
拼出一个 cube
,这一步是定义图形,实际图形不会显示在 svg
中;
然后使用 use
标签通过 xlink:href="#cube"
指定上一步定义的 cube
,此时只需改变x/y坐标,调用27次就能拼出一个 3*3*3
的大立方体。
值得注意的是:每一层x/y坐标变化是有规律的,x以21的倍数移动,y以12的倍数移动
,而每层之间y坐标相差24
,均和长方形宽高相关,可见布局很简单。
<svg viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="cube" class="cube-unit">
<rect width="21" height="24" fill="#00affa" stroke="#0079ad" transform="skewY(30)"/>
<rect width="21" height="24" fill="#008bc7" stroke="#0079ad" transform="skewY(-30) translate(21 24.3)"/>
<rect width="21" height="21" fill="#009CDE" stroke="#0079ad" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
</g>
</defs>
<!-- 三层从下往上摆 -->
<!-- 最下层:每层里面从上至下一行行排列下来 --> <!-- x 以21的倍数移动 / y 以12的倍数移动 -->
<use xlink:href="#cube" x="121" y="112"/>
<use xlink:href="#cube" x="100" y="124"/>
<use xlink:href="#cube" x="142" y="124"/>
<use xlink:href="#cube" x="121" y="136"/>
<use xlink:href="#cube" x="79" y="136"/>
<use xlink:href="#cube" x="163" y="136"/>
<use xlink:href="#cube" x="142" y="148"/>
<use xlink:href="#cube" x="100" y="148"/>
<use xlink:href="#cube" x="121" y="160"/>
<!-- 中间层:每层在y上相差 24/height -->
<use xlink:href="#cube" x="121" y="88"/>
<use xlink:href="#cube" x="100" y="100"/>
<use xlink:href="#cube" x="142" y="100"/>
<!-- ... -->
<!-- 最上层 -->
<use xlink:href="#cube" x="121" y="64" />
<!-- ... -->
</svg>
当然如果你眼尖的话,或许会注意到上面每个 rect
的 transform
参数都不同,skewY/scale/rotate/translate
之间似乎没啥关系,到底怎么拼到一起的,看起来有点玄学,但暂且先这么模仿着实现出来再说。
首先本次用的不再是简单的长方形,而是缺了1/4的正方形,即多边形,直接用 polygon
标签给定6个顶点坐标即可绘制出来,边长暂定36,由最终图表成图效果决定是否进行调整。
<polygon id="unit-0" points="0,0 18,0 18,18 36,18 36,36 0,36" style="fill:#f25c3b;stroke:white;stroke-width:1" />
同理,画出另外两个多边形,不断调试transform的参数,拼到一起组成一个cube
即可(其实调起来还是蛮繁琐的,稍后介绍更优雅的实现方式),当然这里每个多边形unit
都有各自id
,实际也是对应埃舍尔的每件作品,所以最小元素是一个unit
而不是一个cube
,且unit
顺序依次为上、左、右
。
<polygon id="unit-0" points="0,0 18,0 18,18 36,18 36,36 0,36" style="fill:#f25c3b;stroke:white;stroke-width:1" transform="scale(1.4,.8) rotate(-45) translate(-19.5, 132)" />
<polygon id="unit-1" points="0,0 36,0 36,36 18,36 18,18 0,18" style="fill:#ffc533;stroke:white;stroke-width:1" transform="skewY(30) translate(111, 22)" />
<polygon id="unit-2" points="0,0 36,0 36,18 18,18 18,36 0,36" style="fill:#5991c2;stroke:white;stroke-width:1" transform="skewY(-30) translate(147, 191.6)" />
拼出cube
后,就可以把这段代码放defs
标签里,当然填充的颜色需要去掉,颜色在use
使用时由绑定的作品数据类别来指定。
<svg id="chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="unit-0" points="0,0 18,0 18,18 36,18 36,36 0,36" style="stroke:white;stroke-width:1"
transform="scale(1.4,.8) rotate(-45) translate(-19.5, 132)" />
<polygon id="unit-1" points="0,0 36,0 36,36 18,36 18,18 0,18" style="stroke:white;stroke-width:1"
transform="skewY(30) translate(111, 22)" />
<polygon id="unit-2" points="0,0 36,0 36,18 18,18 18,36 0,36" style="stroke:white;stroke-width:1"
transform="skewY(-30) translate(147, 191.6)" />
</defs>
</svg>
至此,最基本的元素定义完成了,接下来就是结合数据,通过 D3.js
来生成所有 use
标签,并传入相应的x/y坐标以及对应颜色,从而绘制出整个可视化作品即可。
不过古柳一开始完全就是对照着这张图一路复现出来的,手头没有数据集,还需自行爬取。”虽说巧妇难为无米之炊“,但在此之前,古柳想先构造伪数据把布局搞定,实现出整体效果
再说,免得万一连布局都搞不定,白花时间去爬数据。
伪数据构造也很简单,470件作品就是470条数据,每件作品只取类型颜色,按照各自数量生成每种颜色,并打乱顺序即可。
const colorScale = {
'yellow': '#ffc533',
'red': '#f25c3b',
'blue': '#5991c2',
'black': '#55514e',
'green': '#5aa459',
'grey': '#bdb7b7',
};
const piecesColor = d3.range(470).map(d => {
if (d < 165) return '#ffc533';
else if (d < 296) return '#f25c3b';
else if (d < 411) return '#5991c2';
else if (d < 462) return '#55514e';
else if (d < 467) return '#5aa459';
else return "#bdb7b7"
});
d3.shuffle(piecesColor);
console.log(piecesColor);
数据有了,就到了最核心的问题,该如何布局了?而布局无非就是要确定每个cube
、每个unit
的x/y坐标,为了简化问题,这里按照列和行来表示,如左上角的cube
为第一列第一行,以(1, 1)
表示,依次从上到下,从左到右排列......因而需要知道每条数据的行列位置,比如图中箭头所指向的cube
的列数和行数分别应该如何计算?
其实本质就是找规律、理清背后的计算公式,是个有点难度,但并不复杂的数学问题,感兴趣的可以先不看后面内容,自己尝试下解决,出错的过程没准也能看到很有趣的图形。
首先,很明显所有数据按照年龄被分成了7组;而每组内的cube
的列数与行数是不仅取决于前几组的行列数,而且与其在本组内的顺序有关。下面简单每个年龄组的unit个数,当然更好的方式是基于数据本身来计算每组年龄的作品数,这里偷懒仍直接人工数下。
分成7个年龄组;一列最多8个cube共24个unit
1898-1917 = 14
1918-1927 = 28 * 3 + 1 = 85
1928-1937 = 7 * 8 * 3 + 6 = 174
1938-1947 = 62
1948-1957 = 27 * 3 = 81
1958-1972 = 14 * 3 - 1 = 41
Year Unknown = 13
以1938-1947
这组为例,idx
为piecesColor
的索引值,即数据的顺序,取值范围为0-469
。前面3组共有273个unit
(14+85+174=273)、有13列,对于这组内的unit
,均需要减去前几组的数量后再计算组内行列数:由于每列有24个unit
,因而组内列数只需除24取整再加1即可,parseInt((idx-273)/24)+1
,而组内行数则需除24取余数,再考虑到cube
要除3再加1即可,parseInt((idx-273)%24/3)
。
if (idx < 335) {
group = 4;
col = 13 + parseInt((idx - 273) / 24) + 1;
row = parseInt((idx - 273) % 24 / 3) + 1;
}
由此写出完整的获取行列数的函数即可。
const getXY = (idx) => {
let group;
let groupIdx;
let col;
let row;
if (idx < 14) {
group = 1;
col = 1;
row = parseInt(idx % 24 / 3) + 1;
groupIdx = idx;
}
else if (idx < 99) {
group = 2;
groupIdx = idx - 14;
col = 1 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
else if (idx < 273) {
group = 3;
groupIdx = idx - 99;
col = 5 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
else if (idx < 335) {
group = 4;
groupIdx = idx - 273;
col = 13 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
else if (idx < 416) {
group = 5;
groupIdx = idx - 335;
col = 16 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
else if (idx < 457) {
group = 6;
groupIdx = idx - 416;
col = 20 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
else {
group = 7;
groupIdx = idx - 457;
col = 22 + parseInt(groupIdx / 24) + 1;
row = parseInt(groupIdx % 24 / 3) + 1;
}
return [col, row];
};
接着用 D3.js
生成所有 use
标签即可。注意每列高度隔行相等,以及指定unit
的xlink:href
时先直接简单用总索引值除3取余数(其实应该用组内索引值groupIdx除3取余数),所以每组最后的cube
可能略有问题。
// svg#chart
const svg = d3.select('#chart').append('g');
const cubeWidth = 36; // 40
svg.selectAll('use')
.data(piecesColor)
.join('use')
.attr('xlink:href', (d, i) => i % 3 === 0 ? '#unit-0' : i % 3 === 1 ? '#unit-1' : '#unit-2')
.attr('fill', (d) => d)
.attr('x', (d, i) => getXY(i)[0] * 1.5 * cubeWidth - 80)
.attr('y', (d, i) => 110 + getXY(i)[1] * 1.5 * cubeWidth + (getXY(i)[0] % 2 === 0 ? 0 : 0.75 * cubeWidth));
不过上述步骤主要目的是用伪数据大致理清计算公式、跑通整个布局,所以略有瑕疵可以不用太在意。
截至目前,本次复现的难点其实都解决的差不多了,接下去无非就是爬取数据、替换掉伪数据,然后不断将效果优化到和 Wendy
原始 Tabelau
版本相似即可,这些就留到下一篇文章再讲好了。
最后再回过头把上面不太优雅的cube
实现改的优雅些。
其实古柳在复现完,和原作比对时(下图为原作,上图为自己复现的)才突然意识到自己的 cube
图形比较扁,而 Wendy
作品里每个 cube
中间的3条白线是差不多一样长的,也就是说3个 unit
是相同大小的,完全可以用一个旋转出另外两个,只不过当时优化了太久,实在不想回过头再去修改就暂不改进了。
在Wendy Shijia 的「 Escher's Gallery」可视化作品复现系列文章(一) - 20201029一文发布后,也将新的实现思路和 Wendy
交流了下。
在「盘点这个月可视化的那些事 - 20201128」一文里,古柳也提到11月17号晚上看到 Wendy
13号晚上的分享 VizConnect - Drawing Polygons in Tableau: The processing of making Escher's Gallary
录播已经传到油管,于是看了下 Escher's Gallary
作品背后创作过程以及 Wendy
如何绘制的多边形,也确认了下实现方式和古柳所想大致相同。
链接:https://www.youtube.com/watch?v=5AqLHDtGtBg
一个unit
由两个不完整的正三角形排成,根据简单的数学计算,可以得出所有顶点的坐标,然后用 polygon
画出一个unit
,再分别转动-120/120度就可以拼出一个cube
。
将a=36
,b=18*Math.sqrt(3)
取两位小数带入即可(需平移到画布合适位置,方便查看)。
<polygon points="0,0 -31.18,-18 -15.59,-27 0,-18 15.59,-27 31.18,-18" style="fill:#f25c3b;stroke:white;stroke-width:1" transform="translate(100,100)" />
这样更为优雅的unit/cube
就绘制出来了!
<!-- b=18*Math.sqrt(3)=31.18 b/2=15.59-->
<polygon points="0,0 -31.18,-18 -15.59,-27 0,-18 15.59,-27 31.18,-18" style="fill:#f25c3b;stroke:white;stroke-width:1" transform="translate(100,100)" />
<polygon points="0,0 -31.18,-18 -15.59,-27 0,-18 15.59,-27 31.18,-18" style="fill:#ffc533;stroke:white;stroke-width:1" transform="translate(100,100) rotate(-120)" />
<polygon points="0,0 -31.18,-18 -15.59,-27 0,-18 15.59,-27 31.18,-18" style="fill:#5991c2;stroke:white;stroke-width:1" transform="translate(100,100) rotate(120)" />
以上就是本文内容,如果大家还想看到更多干货,欢迎【点赞】、【评论】、【分享】,多多捧场,古柳也有持续创作的动力,毕竟这惨淡的阅读量实在也是有点说服不了自己太频繁更新,还真不是因为懒。逃。
网友评论