北极星数据可视化
可视化显示数据中的模式，并为单个具体问题提供即时答案。
本节概述了Shopify的数据可视化实践以及如何利用它们。
Shopify的数据可视化
数据可视化过程总是从一组数据、一个问题开始，并分析数据以找到答案。每个可视化都应该专注于回答关于数据集的一个问题。例如，“随着时间的推移，我的销售额是多少?”
通过维护数据可视化的一致风格和格式，我们确保数据以真实和准确的方式呈现，以保持与商家的完整性。
的指导方针
数据可视化应该通过以下方式实现:
解决问题
有一个明确的需要回答的问题。如果在可视化中说明了多个问题的多个答案，它将变得过于复杂和难以理解。
使用真实数据进行测试
使用真实数据进行测试将揭示可视化的有效性。还要测试有几个数据点(一个或两个)还是很多数据点(100或更多)。
按数据点数量缩放
考虑可视化将如何扩展更多或更少的数据点。注意数据稀疏(大部分为零)或尖刺(一些值比其他值大得多)的情况。
五大核心特征
有效的数据可视化在五个核心特征之间取得了正确的平衡:准确性、直观性、参与性、专注性和数据粒度。为了以最好的方式为目标受众回答你的具体问题，你应该有意识地关注哪些问题，哪些不那么重要。通过为您提供一种评估可视化效果的语言，了解这些特征可以帮助您在许多可视化数据的方法中进行选择。
精度
准确性是关于可视化与原始数据集匹配的忠实程度。传递信息需要多大的准确性?在传达趋势或模式时，并不总是需要高水平的准确性。
直觉
直观性是关于解释可视化的容易程度。商家是否能立即理解所代表的是什么，还是需要说明?更直观通常更好，但有时这是以灵活性为代价的。
订婚
用户粘性是关于可视化在一眼中吸引了多少注意力。它是节目的主角，还是只是背景?更多的参与并不总是更好——有时最好的可视化是发挥辅助作用。
焦点
焦点是关于如何引导商家的注意力。是一种模式或趋势比其他模式或趋势更突出，还是有几个趋势被赋予了同等的权重?高度集中的可视化可以减少认知负荷，但会限制你所能传达的信息的广度。
数据的粒度
数据粒度是关于可视化中显示的数据集的详细程度。更细粒度意味着更多的数据点，可能还有更多的认知处理，但不那么细粒度意味着不那么详细。正确的数据粒度级别完全取决于您要回答的具体问题和您要与之交流的受众。
轴和标签约定
所有显示定量数据的标准图表都有两个轴，为了清晰起见，应该标记两个轴。
- 标签应该在数据区之外。这确保了用户理解数据的范围，而不会分散对数据的关注。
- 确保所有标签所代表的内容清晰准确。使用简单简短的语言。
细粒度的指导方针
轴心线
坐标轴应该用作显示定量数据的指导方针，但不引人注目。
做
确保坐标轴只出现在数据出现的地方。
不
使用出血轴线到屏幕边缘。
跳过标签
在y轴和x轴上标记标记可以帮助可视化更清楚地了解它所代表的内容。
做
定期跳过标签。
不
试着把所有的标签挤在一起。
轴的缩写
Shopify使用月和工作日的标准缩写，以减少可视化中的混乱。
- 使用12小时格式的时间，小写字母(12am, 6pm)
- 用前三个字母表示星期几(Sun, Mon)
- 使用前三个字母表示月份(Feb, Mar)
- 对于特定的日期，使用“日+月”的格式(Apr 10, Apr 11)
- 对于特定的月份，使用月+年的格式(2011年4月，2017年5月)
做
使用标准缩写进行标记。
不
倾斜标签，使其适合。
轴的缩写
Shopify使用标准的货币缩写作为y轴，以减少混乱。
做
用“k”表示千，“b”表示十亿。
不
重复3个数字字符、1个小数或1个字母。
标签约定
标签应该清晰简洁。
做
将所有标签放在条形图和勾号的中间。
不
在x轴标签上使用小数。
y轴标签约定
标签应该清晰简洁。
做
左对齐标签，保持它们在y轴线以上。
调色板
颜色在数据可视化中有着非常具体的含义。数据可视化调色板提供了特定的颜色，可以单独使用，也可以组合使用，具体取决于目的。
单数据序列
只有单个数据序列时使用。例如，柱状图、柱状图或单线图。
与过去的单一比较
这用于将数据集与其过去的值进行比较。例如，按月的销售总额，今年与去年的比较。在本例中，当前值为紫色，过去值为灰色。
Multiseries数据
当有多个数据集要比较时使用。例如，多系列折线图。随着数据集数量的增加，沿着列表向下走。
有偏见的
当某些数据需要以消极或积极的方式显示时使用。例如，相对于参考值显示正变化或负变化。
水平柱状图
条形图用于比较离散类别。当可以在可视化中显示的数据点数量受到限制时，请使用柱状图，否则就很难缩放。
最适合用于
显示离散类别的数据，如{产品}和{销售}。
不要使用
当数据点数量可以超过6时。在这种情况下，使用表。
条形图标签
为每个栏标上它所显示的内容和值。要了解更多最佳实践，请访问轴和标签约定。
做
每个条上都有一个标签。如果酒吧太小，就把它放在酒吧外面。
做
在每个栏的顶部包含一个标签来显示它所显示的数据。
颜色
所有条形图使用一种颜色。
做
给负条60%的不透明度。
不
使用多种颜色的条。
酒吧定位
确保条形图的宽度成比例，大约是条形图之间空间的两倍。
做
使每个条的宽度大约为它们之间的空间的两倍宽。
不
把铁条弄得太细。
垂直柱状图
柱状图用于显示随时间、趋势和单个数据点的变化。当数据点数量少于30时使用柱状图，否则使用折线图。
最适合用于
- 显示连续的数据，如每小时的销售额或每月的订单
- 显示更小的时间粒度(每小时、每天、每周和每月)
不要使用
当数据点数可以超过31时。在本例中，使用a折线图．
颜色
所有的条应该是相同的颜色。
做
所有条形图使用一种颜色。
不
使用多种颜色的条。
酒吧定位
确保条形图的宽度成比例，大约是条形图之间空间的两倍。
做
使每个条的宽度大约为它们之间的空间的两倍宽。
不
把铁条弄得太细。
交互性
在鼠标悬停时，在条形图上添加一些交互性，因为用户将看到单个数据点。工具提示的顶部一行应遵循x轴缩写和标签准则，而底部一行应遵循y轴缩写和标签准则。
做
包含x轴和y轴值的工具提示。
线图表
折线图是将一系列数据点用一条线连接起来。折线图可以很好地显示随时间的变化、比较和趋势。当数据点数量超过30时，使用折线图。
最适合用于
- 显示连续数据，如销售额或订单
- 显示更大的时间粒度(每年或每季度)
- 发现数据的总体趋势和形状
轴和标签
控件设置图表区域轴和标签指南
多行图表
当需要比较多个数据集时，折线图工作得很好。使用调色板选择颜色。
做
使用对比色并加上图例。
不
使用4行以上。
显示指标
显示度量是一种可量化的度量，用于跟踪和显示特定进程的状态。例子包括总和、平均值或正向或负向的运动。
最适合用于
显示带有基本单位的单个值。
单位
度量标准应该与它们的基本单位相匹配，使其接近数值。使用简洁清晰的语言描述指标。
范围
度量标准的范围应该表明数据的时间轴。
做
包含时间维度以确定值的范围。
运动
如果需要，可以考虑加入一个比较指标，比如与之前时间或平均值的比较。
做
绿色代表积极的运动。
用红色表示消极移动。
表
表格是展示大量信息的好方法，每个实体都有各种列和数据。当需要同时显示多个指标和类别时，应该使用表格，并且准确查找数据值比显示数据中的模式更重要。
最适合用于
- 显示大量具有许多变量的离散数据
- 显示跨多个类别和度量的值
- 当比较不是优先级时，允许过滤和排序
对齐
一致的垂直对齐对于表中值之间的快速可视化比较至关重要。
做
左对齐非数值值，右对齐数值值。
不
列标题居中。
分离
为了减少杂乱和非数据墨水，我们更喜欢巧妙地分开每行。
做
用浅色线表示行与行之间的距离。
不
突出显示每一行以指示分隔。
总数
总数可以让商家全面地了解数据，而且应该很容易找到。
做
将总数放在标题下面的第一行，并将文本加粗。
可访问性
设计清晰可视化的一个重要部分是让每个人都能访问数据。
提供选项
有视力问题的商家可能难以理解数据的可视化表示，即使使用辅助软件也是如此。
灵巧或运动问题的商家可能在使用依赖于精细运动控制的交互式可视化时遇到麻烦。
其他人可能只是理解图表或图表中的数据有困难。
为了支持不同商家的需求，始终为数据可视化提供多种格式。
做
让商家以多种格式访问他们的数据。对于图表和图形，在数据表中提供相同的内容通常是有帮助的，这些内容要么在同一页上，要么在易于发现的相关页上。
不
只提供一种格式的数据可视化。
色彩的运用
颜色对于可视化是至关重要的，但也会给色盲和视力低下的商家带来问题。颜色的使用应该支持所有商家对视觉信息的解释，包括那些有视觉问题的商家。
要了解更多信息，请参阅有关指南北极星的颜色．
可缩放矢量图形(SVGs)
svg < >而且<帆布>元素是在HTML中创建引人入胜的动态可视化的优秀工具。然而，使用辅助技术往往很难获得这些信息。辅助技术用户可能无法以正确的顺序访问内容，为视觉信息找到对等的文本，或与键盘进行交互。
一般来说，隐藏svg < >来自屏幕阅读器的元素使用aria-hidden = " true "并为图形或图表提供单独的等效文本。尽管不同的可视化可能受益于不同的治疗方法，但尽量优先创建一致的体验。