“南丁格尔玫瑰图”指南

用户头像
上海/UI设计师/4年前/673浏览
“南丁格尔玫瑰图”指南
用户头像
大以

数据可视化设计中的图表思考

南丁格尔玫瑰图:通过半径来反映数值,由于半径和面积之间是平方的关系(S=πr²),视觉上,南丁格尔玫瑰图会将数值的比例夸大。


当我们追求数据的准确性时不太适合,反之,则适合夸大相近数值之间的对比。

视觉上就把空荡的柱状图补足整体的面积感,一定程度上增加图标的重量感。


案例解析:

https://dtcj.com/topic/493

我们直接上图

这是一般的数据统计柱状图


这是一般的南丁格尔玫瑰图


这是添加装饰之后的数据图表


能很明显的感受到最后的数据呈现上相比简单粗暴的柱状图对比,整理的数据阅读性和准确性是下降的。当然突出的数据,“上海”和“北京”和其他城市之间的对比有被加强,相应数据的具体数值无法体现。对于数据可视化来说呢,无所谓好坏,都是一个取舍问题。

从视觉上来讲,首先是打破了平常简单粗暴的柱状图排列方式,玫瑰图会相对给人一亮。尤其在数据最大值和最小值相差小的情况下,玫瑰图从面积上弥补了大大的空白的缺陷。从相对空白和“线”的感觉上,能形成“面”的填充。这样在设计中,如果遇到需要增加面性,玫瑰图将是一个很不错的选择。


好了,下面上工作的案例:

这是一般的柱状图


这是修改后的南丁格尔玫瑰图


整理的框架和结构都跟案例中的图表一致,数据内容相对较少,把标注的内容移到图表上,减少阅读时视觉的移动。通过鼠标移动,悬浮出现详细的数据内容,弥补数据的准确性上的缺失,并整合了数据本身的分类情况。


个人觉得很适合有极值的情况下使用这种图,可以很大程度上弥补柱状图上的空白缺陷。


参考资料:
[1]. https://dtcj.com/topic/493
[2]. http://tuzhidian.com/chart?id=5c56e4694a8c5e048189c709
[3]. https://fisher-monkey.gitbooks.io/js-note02/content/di-1-zhang-bi-jiao-lei/nan-ding-ge-er-tu.html



——————————————————————

继上上一篇地图获得了4个大大的关注,

我决定把后面的5分钟材质教程也提上日程,写教程真的好累的,

点赞暴富,点个大大的关注也是可以的!




4
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
盲盒APP UI设计
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
【新年UI图标】旅行icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】活动icon
Security Camera UI kit
【新年UI图标】体育icon
高级表盘系列UI源文件
3D渐变流体抽象矢量UI背景图
【新年UI图标】汽车icon
UI界面 组件
新能源APP应用UIKit
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
户外旅行飞机情侣假日出行
【新年UI图标】秒杀icon
UI 登录界面设计模板包
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
高级感金属拟物 UI设计组件库
手表表盘UI系列
拟物风质感写实UI卡片合集源文件
【新年UI图标】钱包icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册