教你在Tableau中绘制蝌蚪图等带有空心圆的图表(多链接)
作者:Jeffrey A. Shaffer
翻译:蒋雨畅
校对:丁楠雅
本文约2300字,建议阅读10分钟。
本文将通过分享多种方法,包括成功的与失败的尝试,来讲解如何在Tableau中创建蝌蚪图等带有空心圆的图表。
我正在阅读Mark Edwards(https://twitter.com/mtedw)最近发表的一篇博文“蝌蚪图的诞生”(http://pointsofviz.com/the-spawning-of-the-tadpole-chart/)。
Mark的帖子概述了这种图表不同风格的优缺点,但他在这篇推特(https://twitter.com/EGCosh/status/997374330454593536/photo/1)上询问如何让线停在圆圈的边缘,而不是进入到圆圈的中心。我之前遇到过这种情况并且多年来尝试过各种方法,所以我会分享自己一些的尝试和简单的解决方法,用于在Tableau中使用空白圆绘制蝌蚪图等图表。
蝌蚪图
在我们开始之前,这里有一个Emma Cosh(https://twitter.com/EGCosh)嘲笑过的蝌蚪图(不是用Tableau绘制的)。
这不是一个新的图表。事实上,这个图表在Jonathan Drummey(https://twitter.com/jonathandrummey)为Southern Maine Health Care创建的仪表盘(http://bigbookofdashboards.com)中的第八章,仪表盘大书,中有所介绍。我们在书中为这个图表的名字纠结过。最终我们认为这个图表是由我的合著者Andy Cotgreave( https://twitter.com/acotgreave)发明的棒棒糖图的变体。回顾一下,这个图和连接点图(也叫哑铃图)有相同的作用,但是这个是用单点绘制的。
就个人而言,我喜欢Emma为这个由一条线和一个单点组成的图形提出的名称:蝌蚪图。建立一个蝌蚪图是简单直接的:它从哑铃图开始。但是一个单点只能显示当前时段而无法显示前一个时段的信息。在Tableau中,哑铃图很容易构建。它需要两个轴,一个轴作为点,另一个轴作为线来连接点。消除一个点是很简单的:用一个简单的计算来检查时间,如果时间等于当前的时间,则让其对应的值等于你的测量值,否则使对应值等于“NULL”。你可以在此处下载Mark的工作簿(https://public.tableau.com/views/TadpoleCharts/TadpoleCharts?:embed=y&:embed_code_version=3&:loadOrderID=0&:display_count=yes&publish=yes&:showVizHome=no)并按要求进行操作。
关于计算的例子:
计算栏的名字:销售圈
公式:如果【时间】=“今年”
则【销售线】 结束
对于超市的数据,计算可能会如下所示:
计算栏的名字:销售圈
公式:如果 时间栏(“年份”,【下单日期】)=2018 则 【销售】 结束
但是棘手的部分是如何防止线进入到空白圆圈的里面。例如,在Mark的蝌蚪图变体中,它看起来像这样。
注意这些线穿过了圆圈并进入到了圆心。那么我们如何在Tableau中创建一个相似的图表,并使得空白圆圈里面保持白色(或者任何背景颜色)呢?
不好用的方法
在我介绍解决方案前,我将分享一些自己不太成功的尝试。
首先,创建自定义图形。通常,我建议将自定义图形保存为PNG文件。那么为什么不创建一个有白色圆心的圆圈在PNG文件里呢?这样做的问题是,当Tableau对保存为具有透明背景的PNG文件中的自定义图形上的颜色编码时,它会改变白色中心的颜色,最后会出现彩色的圆点。那么JPG文件呢?JPG的问题是无法设置透明背景,所以你最后得到的是纯色方块,而不是圆形。此外,即使可以设置透明背景,将创建的不同颜色的自定义图形与背景颜色匹配也会十分麻烦。再有就是自定义图形极低的分辨率会使你无法在PDF 或图像中以高分辨率打印或导出它们。
那么如何更改数据?我们可以通过计算来缩短这些线。但这并不容易,因为缩短的量需要取决于蝌蚪图的走向,所以正数和负数都有可能。此外,对线进行加减的数量取决于圆的大小和线的长短:随着圆圈变大就需要减去更多的线。因此这种方法需要大量计算,并且难以做到恰到好处。
Adam McCann有个有趣的想法。他建议用“I”在圆圈内部加个标签并使之变白。我想到的一个类似的方法是利用字符作为标签并用白色填充圆圈。但我发现如何将标签准确的放在圆圈中心和找到正确的字体大小仍是难题。
那么我们看看另一种构建此图表的方式。
建立一个基本的蝌蚪图
创建一个基本的蝌蚪图非常简单直接。以下是Mark的工作簿中建立蝌蚪图的步骤:
移动序列到行
移动销售线到列
移动销售圈到列
右键点击销售圈并选择“双轴”
右键点击第二个y轴并选择“同步轴”
选择所有的标记卡,并移动类别到颜色
在销售线标记卡上,从下拉目录中选择“线”
移动时间到路径
右键点击Y轴并选择“显示标题”以删除标题
右键点击顶部的第二个X轴并选择“显示标题”以删除标题
你现在应该有一个与下图类似的蝌蚪图:
添加白色中心到填充点。
我发现创建空白圆圈的最好方法就是用另一个圆圈填充白色(或其他背景颜色)的点内部。因此,我们将复制销售圈栏并将其覆盖在当前圆圈的顶部。
右键点击销售圈并选择“复制”,移动测量值到总和(销售圈)之上的列。这一操作会使测量值在列中替代总和(销售圈)。
你现在有四个测量值呈现在测量值卡片上,但我们只需要其中的两个。
右键点击总和(销售线)并选择‘移除’或将此栏拖到画面左侧
右键点击总和(记录数量)并选择‘移除’或将此栏拖到画面左侧
在测量值标记卡上:
从标记卡的下拉目录中选择“圆圈”,
移动测量名称到尺寸,
选择细节图标到测量名称的左侧并改变其颜色,或用Control键同时选中类别和测量值,并将它们移动到颜色。
现在你的图例中应该有12种颜色。
双击图例中的任意颜色以打开编辑颜色菜单
将所有销售圈(副本)颜色改为白色(或背景颜色)并根据需要指定其他颜色。
注意 – 你可以使用Control键多选所有这些,然后双击最后一个。这将立即改变所有颜色而不用手动改变每一个的颜色。
在测量值卡上,拖动总和(销售圈(复印件))到列表顶部,也就是总和(销售圈)的前面。 这将颠倒圆圈的大小。或者也可双击图例中的一个尺寸图标,然后选择“反转”。
双击图例中的一个尺寸图标并使总和(销售圈(副本))的小点更大。
你现在应该有一个类似的蝌蚪图表,并且没有线条穿过了圆圈。
这些技巧可以用于创建棒棒糖图,哑铃图,或者任何包含了点与线组合的图表。此外,你还可以反转尺寸来将白色圆圈放在外部,以在点与点之间产生间隙。
带有空心圆圈的哑铃图:
前一时段用空心圆而当前时段用实心圆表示的哑铃图:
用白色圆圈在点与线之间构造间隙的哑铃图:
带有空心圆圈的棒棒糖图:
带有空心圆圈的折线图:
用白色圆圈在点与线之间构造间隙的折线图:
下面是我根据Mark的原始工作簿创建的Tableau工作簿,其中包含这些不同的图表变体:
Tableau工作簿的链接:
https://public.tableau.com/views/OpenCircleCharts/HowtoTadpole?:embed=y&:embed_code_version=3&:loadOrderID=0&:display_count=yes
我希望这些信息会对您有帮助。如果您有任何问题,请随时给我电邮。
Jeff@DataPlusScience.com
Jeffrey A. Shaffer
关注Twitter:@HighVizAbility
原文标题:
How to Make a Tadpole Chart and Other Charts in Tableau with Open Circles
原文链接:
https://www.dataplusscience.com/TadpoleChart.html
译者简介
蒋雨畅,香港理工大学大三在读,主修地理信息,辅修计算机科学,目前在研究学习通过数据科学等方法探索城市与人类活动的关系。希望能认识更多对数据科学感兴趣的朋友,了解更多前沿知识,开拓自己的眼界。
翻译组招募信息
工作内容:需要一颗细致的心,将选取好的外文文章翻译成流畅的中文。如果你是数据科学/统计学/计算机类的留学生,或在海外从事相关工作,或对自己外语水平有信心的朋友欢迎加入翻译小组。
你能得到:定期的翻译培训提高志愿者的翻译水平,提高对于数据科学前沿的认知,海外的朋友可以和国内技术应用发展保持联系,THU数据派产学研的背景为志愿者带来好的发展机遇。
其他福利:来自于名企的数据科学工作者,北大清华以及海外等名校学生他们都将成为你在翻译小组的伙伴。
点击文末“阅读原文”加入数据派团队~
转载须知
如需转载,请在开篇显著位置注明作者和出处(转自:数据派ID:datapi),并在文章结尾放置数据派醒目二维码。有原创标识文章,请发送【文章名称-待授权公众号名称及ID】至联系邮箱,申请白名单授权并按要求编辑。
发布后请将链接反馈至联系邮箱(见下方)。未经许可的转载以及改编者,我们将依法追究其法律责任。
点击“阅读原文”拥抱组织
教你在Tableau中绘制蝌蚪图等带有空心圆的图表(多链接)相关推荐
- OpenCV中绘制外围矩形框和圆框
OpenCV中绘制外围矩形框和圆框 利用边界寻找函数找到的边界坐标信息.然后利用每一条寻找到的边际信息去找到图形的矩形边界和圆形边界. 一. OpenCV中绘制外围矩形框 根据已知的边界信息点.将边界 ...
- html5中怎么使用canvas画空心圆与实心圆
这篇文章主要介绍"html5中怎么使用canvas画空心圆与实心圆"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"html5中怎么 ...
- 关于objectArx /CAD二次开发中“绘制点、线、圆、圆弧、多段线、矩形、文字等”
使用CAD软件绘图时,所有的图元均可由点.线.圆.圆弧.多段线.文字等构成,使用objectArx绘制图元时可调用相应的接口函数,如AcDbLine绘制直线. 1.绘制点 参数:pt(点的位置) Ac ...
- Canvas | 绘制矩形、实心空心圆、三角形、线条
#Canvas ##基本属性 一个画布在网页中是一个矩形框 默认情况下 canvas 元素没有边框和内容.使用 style 属性来添加边框: canvas 元素本身是没有绘图能力的.所有的绘制工作必须 ...
- matlab 三维y轴平面图,#如何在excel中绘制三维坐标系?#excel怎么画图平面坐标图...
用excel绘制曲线图时如何进行坐标轴转换 点"插入"->"图表"->"XY图","子图表类型"选择&quo ...
- tableau实战系列(三十四)-教你如何在tableau中实现3D效果作图
前言 我们知道,目前 Tableau 还不支持 3D 图表的实现.但是,如果你希望在 Tableau 中呈现立体效果,我们可以另辟蹊径,来实现一些简单的. 柱形图很常见,因为是平面的,也被称为条形图. ...
- 用计算机如何编辑文档,怎么用word画图-这里教你如何编辑在word文档中绘制的图形...
在上次文章的介绍中,还没有介绍完如何编辑图形,所以现在给大家补充完. 1.如何为图形添加文字 在上篇文章中,我已经教给大家如何绘制图形了,但是如何在图形中添加文字使其变的更美观呢!首先,我们还是按照绘 ...
- 详细指南!手把手教你上手Tableau软件!
原文标题:IntermediateTableau guide for data science and business intelligence professionals 作者:PAVLEEN K ...
- 独家 | Tableau中的Z-Order了解一下!
作者:Jeffrey A. Shaffer 翻译:蒋雨畅 校对:丁楠雅 本文约1200字,建议阅读5分钟. 本文将通过三个简单的例子,讲解如何在Tableau中通过颜色图例.字母顺序和国家来控制Z-O ...
最新文章
- 保护云端数据的5个技巧
- php函数在哪个文件夹下,php删除文件夹及其文件夹下所有文件的函数代码
- Ubuntu Nginx uwsgi django 初试
- CentOS 7 + nginx-1.12 + php-7.2 + MySQL-5.7
- 一些机器学习数据集(Dataset)
- uniapp滑动切换tab标签_Web前端,Tab切换,缓存,页面处理的几种方式
- 用Python及深度学习实现iPhone X的FaceID功能
- 醒醒吧!送给那些盲目自学的人
- 用较早版本的APIs实现抽象类
- python bokeh_使用Bokeh将交互性添加到您的Python图中
- 【转载】通往性能优化的天堂-地狱 JOIN方法说明
- 全新的Smultron 12已发布:简单好用、功能强大、优雅简洁
- 谷粒商城:SPU管理规格显示404
- spring源码:idea搭建源码环境
- 九联UNT401H零配置、芒果、南传、百视通等版本通刷固件及教程
- JVM虚拟机与Android虚拟机
- Python 把蓝底照片转化为白底照片
- TM1637数码管显示 HAL库
- sublime显示当前文件的编码格式
- 怎么修改linux系统时区,Linux如何修改系统时间和时区
热门文章
- Ambari安装之部署 (Metrics Collector和 Metrics Monitor) Install Pending ...问题
- iphone开发 NSURL中fileURLWithPath和URLWithString的区别
- 关于Cocos2d-x很多奇怪的报错
- php中使用mysql_fetch_array输出数组至页面中展示
- Windows 7 RC Build 7100 使用报告
- OpenGL材质和光照(转)part2
- TCP实现服务器与单客户端连接(多线程)
- 将标签one-hot化的方法
- (转)linux下cp目录时排除一个或者多个目录的实现方法
- Pytorch交叉熵损失函数torch.nn.functional as F