豆皮粉儿们，又见面了，明天这一期，由字节跳动数据平台的玄魂，给大家带来一篇对于可视化作品诞生流程的翻译文章。
作者：玄魂
原文链接：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.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、公众号后盾回复「 招聘」，获取各种内推。