我认为将照片中包含的数据可视化是一个有趣的练习，因为我们可能会看到其他数据集。一些相机和照片编辑软件就是这样做的，从图像中的红色 (R) 、绿色 (G) 和蓝色 (B) 值 (三个 “原色”) 构建直方图，以帮助专业摄影师/编辑判断和改善色彩平衡。为了说明这个想法，我将在下面使用彩色照片及其灰度对应物。
最简单的方法是从灰度图像开始，根据定义，对于任何给定的像素，R，G和B值都是相同的。在左侧，我们的灰度值为0，表示 (R，G，B) 值为 (0，0，0)，也就是。黑色; 右边是 (255，255，255) 或白色。在这两者之间，我们有254灰色阴影。
这是在图表中使用渐变实际上可以帮助澄清事情的少数情况之一，在这种情况下，通过根据其表示的灰度值为每个条着色。唯一的问题是选择一个中性的背景颜色:
对于彩色图像，我们需要分别绘制R，G和B直方图。使用线条而不是条形不那么混乱，但是使用合理的配色方案，它们可能不需要标签。
除了实现良好的色彩平衡之外，我认为还有另一个有趣的问题值得探索，这对web开发很重要: 压缩。JPEG压缩是一个相当复杂的话题，我承认我还没有真正得到我的头。上面的彩色照片是我拍摄的原始 (八百万像素) 图像的高质量 (低压缩) 缩影。它的大小为46 kb。下面的图像在像素数方面是相同的，但压缩程度更高，质量更低。然而，它的大小只有9千字节。
较低的质量在照片本身中应该很明显，但是RGB直方图看起来是否明显不同？在尝试之前，我真的不知道会发生什么。虽然下面的直方图与上面的直方图明显不同，但它们并没有真正尖叫 “这个图像比另一个图像压缩得多”。
JPEG的替代是PNG。这是一张8位PNG版本的照片:
这个图像看起来比低质量的JPEG好得多，但它也比它大六倍 (就文件大小而言)，比高质量的JPEG大三分之一。直方图也非常非常不同，难以阅读 (也注意垂直刻度的差异)。
这种混乱的直方图是由于在8位PNG中只能使用256种不同的颜色 (就像GIF一样)。
上面的直方图数据可以从 (至少一些版本的) Photoshop和可能的其他照片编辑软件中提取。但是没有发现高质量和低质量jpeg的直方图之间的任何主要差异，我很想知道RGB数据的更复杂表示是否会突出差异。这需要提取所有单独的RGB值，而不仅仅是不同通道的总和。我不知道如何在Photoshop中做到这一点，所以我使用R (其他选项可用)。在理想的世界中，3D散点图将出色地工作-R，G和B中的每一个都有一个维度。但是2D屏幕上的3D散点图很少起作用。所以我选择了一个更传统的2D散点图，使用点颜色来显示第三种颜色。在下面的示例中，我 (有些随意) 选择绘制蓝色值与红色值，并根据绿色值对点进行着色。例如，表示具有 (30，96，92) 的RGB值的图像像素的数据点将被绘制在图表上的点 (30，92) 处，并且具有 (0，96，0) 的RGB颜色。
我最初的尝试是从一些严重的过度绘制问题中遭受的。为了减少，但不删除这个问题，我做了点小得多，并采取了一个随机样本的 “只是” 20,000点 (只是在20% 的数据) 为每个图像。我还在图的未标记的末端添加了边际分布 (即相关直方图)。这些来自所有图像像素，而不仅仅是样本。
现在我们可以看到高质量和低质量jpeg之间的区别: 后者具有更明显的对角带点和间隙。检查数据，在高质量JPEG的〜105,000个像素中存在大约20,000个不同的RGB值，但在低质量JPEG中仅存在15,000。至于PNG图，这是过度绘制的一个极端例子。实际上绘制了20,000个点，它们仅占据了几百个不同的位置。
最终，您可能会像web设计师或开发人员一样度过一生，而不了解图像压缩的复杂性-我仍然不确定JPEG压缩实际上是如何工作的。但我认为有趣的是，知道底层数据是可以用来构建你自己的dataviz实验的。
尝试我们的jQuery HTML5控件为您的web应用程序，并立即利用惊人的数据可视化功能。立即下载免费试用版!
