如何在d3.js中创建"斜率图"
kar*_*rmi 8 visualization d3.js
在定量信息的视觉显示中,爱德华·图夫特(Edward Tufte)创造了一个术语"斜率图",用于表示非常小的图表(更多信息).权威示例如下所示:
有在slopegraph至少两个实现d3.js在日野:
我对一个更具说明性的实现进行了尝试,并且还保留了两列中值之间的100%对应关系,但是卡住了.正如预期的那样,当数据集中出现具有相似或相同值的项目时,图形会重叠,并且图表不可读.
的幼稚版本(源)使用linear用于计算水平位置刻度,而企图"正常化"的位置(源)使用ordinal的规模.
我相信使用序数量表可以获得更好的结果,根据重叠项的坐标计算偏移量.是否应为两列分别计算偏移量,是应根据数据预先计算,还是在设置属性时动态计算？如何扩展代码库,使具有相同值的项目位于彼此之下,其他项目也相应调整,两列中的值保持在同一水平位置？
精心编写的问题和漂亮的启动代码与调试语句,道具!
没有完成我想到的所有事情的编码,但至少为了讨论,这里是.(编码很简单;想出什么代码/看起来应该更难看.)
一个[非优化]版本,它使用线性比例作为指导,但通过向下移动所有后续条目来重叠输入.(我想这实际上只是伸展了Y轴;不幸的是,这使得它成为一个非常高的图像.尝试比较更接近的年份,例如2008年和2009年 - 图像并没有那么紧张.) http://bl.ocks.org/2547496(要点)
应用于序数量表的相同方法.我更喜欢
linear比例版本,因为ordinal比例版本并不试图通过斜坡传达任何绝对信息; 然而,这使得图像更紧凑.http://bl.ocks.org/2573074(要点)将值附近分组.(如果有兴趣,将实施.)
请注意,示例1和示例2都是不完美的实现,但您明白了.如果您正在寻找任何一种,我可以解决它们.
我正在尝试你的第一个例子，试图解决混乱的文本标签问题，我不确定它会有多大用处，但如果它增加了讨论，我想我会分享..
我的第一个努力是淡化悬停在数据点的文本标签周围的文本，这只是选择与当前所选标签的边界框重叠的文本标签，并将它们转换为接近零的不透明度： http://bl.ocks .org/2554902
然后，我尝试寻找一种以紧凑的方式排列文本标签的方法，以便每个标签都可见，我没有完成它的实现，因为它似乎过多地扩展了可视化的边界（目前还没有更改年份时效果很好..），但在稍微不那么“紧凑”的数据上寻找类似的东西可能是值得的： http://bl.ocks.org/2554910
编辑：似乎这些在 Firefox 中没有按预期工作，似乎是 getBBox() 的问题。
| 归档时间： |
|
| 查看次数： |
4435 次 |
| 最近记录： |