关于可视化:翻译数据人文主义连接人与数字

36次阅读

共计 3269 个字符,预计需要花费 9 分钟才能阅读完成。

豆皮粉儿们,又见面了,明天这一期,由字节跳动数据平台的玄魂,给大家带来一篇对于可视化作品诞生流程的翻译文章。

作者:玄魂
原文链接:https://devikakhowala.com/data-humanism  
注:局部内容未齐全遵循原文进行翻译

为什么要翻译此文?

这篇文章为可视化设计提供了很好的入门范例,让咱们清晰的理解到一件可视化作品的诞生流程,以及这两头要做的事件。


本文作者最终实现了一个基于网络的数据可视化平台,将公园和娱乐设施的定量数据转化为信息丰盛、引人入胜的视觉效果,以帮忙市民和城市官员做出更理智的抉择。

“Human nature is in the center of data universe. \
Meaningful connections with data are important for understanding them.”

— Giorgia Lupi


DESIGN PROCESS(设计流程)

1.1 UNDERSTANDING THE CONTEXT(上下文)

Why do it?(起因)

在咱们生存的数字世界里有大量的数据,但同样丰盛的数据也使得咱们很难将其解决成一种相干的、可用的模式。
为了建设有意义的连贯,讲一个能够激发好奇心和让人产生趣味的故事很重要,这是人们想看到和理解的货色。通过这样的故事,人们能够理解它的你的目标,并感觉到这些内容和生存的分割。

1.2 DATA ANALYSIS(数据分析)

1.2.1 Collecting & Cleaning the Data(整顿和荡涤数据)

通过查阅可用的数据,我决定将人口统计数据与阿勒格尼县(Allegheny county)公园和娱乐设施的数据一起绘制地图,以摸索两者之间的模式和关系。
为了了解我收集的数据,我应用数据组织工具(Coordinate systems and LATCH principles,参考: https://www.informit.com/arti… 如坐标系和 LATCH, 对其进行了清理和分类。这些数据排序办法能够不便地剖析、比拟和比照数据包中的信息。
可视化的目标是考察城市基础设施和社区人口构成之间的关系,如果有的话,并以人们能够参加的形式出现。

1.2.2 Exploring the datasets(摸索数据)

我将每个街区的人口密度、土地面积、平均年龄、支出中位数等数据与该街区的公园和娱乐设施数量进行映射。
在钻研数据时,我发现不同的数据集之间没有明确的模式或关系。如果有的话,我那未经训练的眼睛必定错过了。尽管我没有失去间接的后果,但我持续将要摸索的数据集进行可视化,心愿在这个过程中学到一些新的货色,并心愿找到一种办法,使这些数据集对人们有用。
因为我的项目工夫限度,我只钻研了匹兹堡 91 个社区的一半数据。

1.3 VISUAL DESIGN(可视化设计)

1.3.1 Exploring the form(摸索模式)

Nathan Yau,‘Visualize This’和‘Data points’的作者,他说“可视化对针对非数据专家展示数据价值方面非常有用 ”。
为了构建更具凝聚力的视觉设计语言,我应用了利用视觉变量来开发连贯模式和性能的办法;基于语义来示意数据。

1.3.2 Initial concept : User testing, Feedback & Redesign(初始概念:用户测试、反馈和从新设计)

应用“疾速约会(speed dating)”作为调研办法,我采访了 10 个同学,要求对我最后的想法给出反馈。来自用户测试的反馈:

  • 叙事成果很好,激发用户参加的好奇心
  • 模式大于内容
  • 更无效地应用可视变量来匹配内容
  • 网格和地图零碎都有价值,应该思考两者都保留



1.3.3 Form Exploration & Refining(模式摸索与提炼)

基于反馈,我从新扫视了视觉模式,明确了在模式和内容之间建设强有力的分割的指标。
我专一于钻研更多文字模式的应用,这些模式能够让观众轻松取得清晰的含意。这个想法是建设一个整体的模式,这样如果有人从远处看这件作品,他们也能够抓住这件作品的重点。




1.3.4 Visual Design System(视觉设计零碎)

我以树木为核心人物,围绕着它开展叙事。这使我可能胜利地连贯那些仿佛与天然无关的元素。将这些元素编织在一起,用户很容易将视觉出现和大脑中的记忆关联在一起。最终要出现的数据如下图所示。

应用树木作为公园和娱乐设施的代表立刻为观众提供上下文信息。

线条 + 动作代表年龄组。
灵感来自树木年轮,它将树木年龄和社区的年龄建设了很好的连贯。
用比例尺示意面积。简略的视觉关系缩小了观众的认知负荷。

用色彩示意人口密度。

色彩 + 数量示意支出中位数。尽管没有间接的分割,水果般的图形很容易记住在整个叙事内容。

类型零碎。

色彩零碎。

按钮状态。

1.3.5 Color Accessibility Check(色彩可拜访性查看)

因为设计中应用了很多绿色色调,我相对针对绿色色弱人群进行测试和设计。
普通人视图:

绿色色盲(色弱)视图:

1.4 THE INTERACTIONS(交互)

How will the story unfold? What will be the key Interactions?(故事将如何开展呢?外围交互是什么呢?)
用户能够自定义他与这件作品的交互方式是他从中获取价值的要害。拿什么来吸引用户呢?这些数字如何和用户的日常生活产生关联呢?这些数据对他们意味着什么呢?他们想晓得什么呢?
了解用户的冀望和动机是设计一个可视化平台的要害
利益相干的群体:

  1. 政府官员
  2. 社区居民
  3. 新移民

上面是最后的草稿:

1.4.1 主界面元素


Hover(悬浮)

每个小区都用一个符号来示意,这个符号示意该小区的公园和设施的数量。鼠标悬浮的时候通过 ToolTip 显示相干数量数据。
Floating Key Panels(浮动面板)
每个数据集的浮动面板在侧导航栏中折叠暗藏。

Collapsible Side Nav in Fullscreen Mode(全屏模式可收起侧导航)

Map View(地图视图)
有助于摸索社区之间的关系

Grid View(表格视图)
实用于整体查看,比拟数据,剖析关系

1.4.2 Key Interactions(外围交互)

Map view
地图视图是默认视图。人们往往先从相熟的货色开始。抉择社区后,用户能够在其余数据集之间切换以进行剖析和摸索。


Map View Compare(地图视图的比照性能)
比拟性能有助于比拟两个或三个社区之间的数据。在一个繁多的社区范畴内,它还提供了一个更好的视角。空间比拟也能够为新移民提供参考信息。


List View(列表视图)
列表视图容许取得残缺的各种数据集之间的关系。单击单个社区能够关上该社区的详细信息页面。



List View Compare(列表视图比照性能)
列表视图容许在给定工夫范畴内比拟多个社区。如果有人想把某一类型的社区放在一起比拟,这会很有用。


1.4.3 How can I take this further?( 还能够做得更好)
(略)

小结

“Look for the question, not the solution.”

— Red Burns

数据可视化能够做的不仅仅是基于模式和关系提供答案。当事件不合乎咱们的预期时,人们能够利用数据来发现问题,评估和寻找机会。这个可视化作品也有了更大的价值:

  • 以帮忙市政当局发现模式,并为将来布局提供信息。
  • 它也能够作为当地市民的一种资源,提倡在他们的社区倒退公园和娱乐设施
  • 该市能够在低收入社区打算季节性避难所
  • 建设 60 岁以上人群的娱乐中心
  • 布局在低收入社区建设衰弱营

The End

如果你感觉这篇文章对你有帮忙,有启发,我想请你帮我 2 个小忙:
1、点个「」,让更多的人也能看到这篇文章内容;
2、关注公众号「 豆皮范儿 」,公众号后盾回复「 加群」退出咱们一起学习;

关注公众号的福利继续更新,公众号后盾送学习材料:
1、公众号后盾回复「vis」,还能够获取更多可视化收费学习材料。
2、公众号后盾回复「webgl」,还能够获取 webgl 收费学习材料。
3、公众号后盾回复「算法 」,还能够获取算法的学习材料。
4、公众号后盾回复「 招聘」,获取各种内推。

正文完
 0