我认为将照片中包含的数据可视化是一项有趣的练习，就像其他数据集一样。一些相机和照片编辑软件就是这样做的，从图像中的红色（R），绿色（G）和蓝色（B）值（三个“原色”）构建直方图，以帮助专业摄影师/编辑判断和改善颜色平衡。为了说明这个想法，我将使用下面的彩色照片及其灰度对应物。

最简单的方法是从灰度图像开始，根据定义，R，G和B值对于任何给定像素都是相同的。在左边，我们有一个灰度值为0，意味着（R，G，B）值（0,0,0），又名黑色; 在右边它是（255,255,255）或白色。在我们之间我们有254种灰色阴影。

这是在图表中使用渐变实际上可以帮助澄清事物的少数情况之一，在这种情况下，通过根据它代表的灰度值对每个条形图着色。唯一的问题是选择一个中性的背景颜色：

对于彩色图像，我们需要分别绘制R，G和B直方图中的每一个。使用线条而不是条形线条那么杂乱，但是使用合理的配色方案它们可能不需要贴标签。

除了实现良好的色彩平衡之外，我认为还有另一个有趣的问题是对于Web开发很重要：压缩。JPEG压缩是一个相当复杂的主题，我承认我还没有真正理解它。上面的彩色照片是我拍摄的原始（800万像素）图像的高质量（低压缩）缩影。它的大小是46千字节。下面的图像在像素数方面是相同的，但压缩程度更高，质量更低。但是，它的大小只有9千字节。

照片本身的质量较低应该是明显的，但RGB直方图看起来有何不同？在尝试这个之前，我真的不知道会发生什么。虽然下面的直方图与上面的直方图明显不同，但他们并没有真正尖叫“这张图片的压缩程度远远超过另一张图片”。

这张照片是8bit的PNG版本。

这张图片看起来比低质量的JPEG好很多，但它也比它大六倍（文件大小），比高质量的JPEG大三分之一。直方图也非常不同并且难以阅读（还要注意垂直标度的差异）。

这种混乱的直方图是这样一个事实的结果：在8位PNG中只能使用256种不同的颜色（就像GIF一样）。

上面的直方图数据可以从Photoshop的（至少某些版本）中提取，并且可能是其他照片编辑软件。但是，在高质量和低质量JPEG的直方图之间没有发现任何重大差异，我很想知道RGB数据的更复杂表示是否会突出差异。这需要提取所有单独的RGB值，而不仅仅是不同通道的总和。我不知道如何在Photoshop中这样做，所以我用R（其他选项可用）。在理想的世界中，3D散点图可以很好地工作 - 每个R，G和B都有一个维度。但2D屏幕上的3D散点图很少有效。所以我选择了更传统的2D散点图，使用点颜色来显示第三种颜色。在下面的示例中，我（有点随意）选择将蓝色值与红色值进行对比，并根据绿色值对点进行着色。例如，表示RGB值为（30,96,92）的图像像素的数据点将被绘制在图表上的点（30,92）处并且具有RGB颜色（0,96,0）。

我这样做的最初尝试遭遇了一些严重的过度绘图问题。为了减少（尽管不是删除）这个问题，我将点数设置得更小，并为每个图像随机抽取了“仅”20,000点（不到20％的数据）。我还在图的未标记的末端添加了边缘分布（即相关的直方图）。这些来自所有图像像素，而不仅仅是样本。

现在我们可以看到高质量和低质量JPEG之间的差异：后者具有更明显的点和间隙的对角线带。在检查数据时，高质量JPEG的~105,000像素中有大约20,000个不同的RGB值，而低质量的JPEG只有15,000个。至于PNG图，这是过度绘图的一个极端例子。确实有20,000点绘制，它们只占据了几百个不同的位置。

最终，你可能会像网页设计师或开发人员一样度过生活，而不了解图像压缩的复杂性 - 我仍然不确定JPEG压缩实际上是如何工作的。但我认为有趣的是知道基础数据是用来构建自己的dataviz实验。

长按订阅更多精彩▼