> For the complete documentation index, see [llms.txt](https://reee-visual.gitbook.io/ray-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reee-visual.gitbook.io/ray-design/qi-pao-tu.md). # 气泡图 气泡图（ Bubble Diagram ）由笛卡尔坐标系和大小不一的组成，包含散点图所有功能，是散点图的变体。 气泡图由三个变量数据组成，其中两个决定了气泡在笛卡尔坐标系中的位置（即X、Y轴的值），另一个决定气泡的面积。 ### 一、气泡图图解 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FY9w0Fj1FZ0qpZhzqvTLE%2FFrame%20479.png?alt=media\&token=85a6c89c-1387-4bb5-9f07-6f69609fa365) ### 二、基本属性 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FhmuNlHE24eEhO1i6Cg6R%2F%E8%A1%A8%E6%A0%BC.png?alt=media\&token=ffed720b-295f-469b-a65f-669b8585c380) ### 三、数据结构 第一列：「标签名称」（根据情况可有可无）；第二列：「映射X轴」；第三列：「映射Y轴」；第四列：「映射气泡大小」。 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FMi2kISgcazw0tR20dGDa%2F%E8%A1%A8%E6%A0%BC.png?alt=media\&token=513516eb-612d-4f17-b97a-5de258cd72ff) ### 四、适用场景 #### 4.1 多维数据 一般而言气泡图需要 3 个变量，其中2个决定了气泡在笛卡尔坐标系中的位置，另外一个则通过气泡的大小表示。气泡图也可以容纳更多维的数据，例如用第4个变量决定气泡的颜色、透明度等。 #### 4.2 特殊场景 气泡图也可以用于二维数据。即 y 轴和气泡大小使用同一维度的数据。这种情况下，它实际上是作为柱状图的替代，用于表示分类数据对比，但比柱状图更加简洁美观。 例如，下图表示了七夕某鲜花店铺的销售情况。x 轴代表鲜花品种，y 轴和气泡大小代表销售额。 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FCMSEhp2ElQ4saHtHTGo0%2FFrame%20480.png?alt=media\&token=c2ec427b-454d-4e4f-9720-d33fec5e3dd7) ### 五、不适用场景 数据维度、气泡数量过多且没有交互进行信息补充或筛选。 下图（McCandless, 2016）如果作为一幅平面作品，就会显得比较乱，没有视觉重点。因此作者加入了交互功能，鼠标悬浮上去，相应的气泡会放大、同时出现详细信息。 ![McCandless, 2016](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FpAC3kZ4SYXwUnmEKwHBG%2Fimage%2047.png?alt=media\&token=8dc8171d-053f-4b11-b947-a78ffbfac697) 值得注意的是，**气泡的大小是通过面积映射而不是半径或直径。** 如果是基于半径或直径的话，气泡的大小不仅会呈指数级变化，而且还会导致视觉误差。 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FWegTHVEtq6QSSBUPlhfW%2FGroup%20474.png?alt=media\&token=268d42d1-45f3-4a44-81c7-9b58c5b5c14e) 当两个数值的关系为1:2，若按直径1:2绘制，那么实际圆的面积是1:4的比例，视觉上夸大了数据间的差异。 另外不要使用异形形状，避免太多细节而影响阅读效率。 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2F57Z1xwNR30I0qCTtx32D%2FGroup%20476.png?alt=media\&token=e1cd8870-33e6-44ca-a1cc-d7b226c7ae75) ### 六、气泡图图史 就像散点图一样，气泡图的起源是未知的。 然而，气泡图被法国土木工程师查尔斯·约瑟夫·米纳德（Charles Joseph Minard，1781-1870 年）成功使用。尽管他是否是第一个使用它们的人值得怀疑，但他的气泡图与现代的气泡图几乎相同。Minard 甚至在他的法国各地的牛贸易地图中创建了可能是气泡图和饼图的第一个组合。 在米纳尔 1859 年的《欧洲主要港口和主要河流吨位图解和近似图》中，我们看到了气泡图的完整表达形式。 ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FCZJ4oPv8qcKegv25j3HI%2Fimage%2048.png?alt=media\&token=43cd61a3-ef6c-4e0a-829c-faca7c63fc42) ### 七、设计开眼 以下为具有代表性的设计案例，更多案例持续添加中。 ![全球冰淇淋的消耗量](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2F73sx5JrHzNgwCpcQoPEI%2FRectangle%202122.png?alt=media\&token=707dd248-40c9-43a9-9131-0bbdc57d8b98) ![交互设计作品《Listen to Wikipedia》](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FlHJPJ7EEMPLTOpfZMg3p%2FRectangle%202162.png?alt=media\&token=c3bf6cb5-f8bd-48c1-9405-74a6fbe13bb8) ![1969年阿波罗10号拍摄到的月球表面](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FqlR8JMFHTfhnjVm2qQta%2FRectangle%2021622.png?alt=media\&token=4054d959-df62-4ec9-94f1-672c2adf6b36) ![](https://1409316402-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgjgEVyOOsD9KEBdUQH%2Fuploads%2FMmWlzw3Me8u3GTJvavRN%2FRectangle%202122.png?alt=media\&token=a894c8d5-1033-483c-bd7b-9a681c183ac0) ### 八、更多学习资源 [1、如何设计气泡图。](https://visage.co/data-visualization-101-bubble-charts/) [2、非营利基金会Gapminder通过统计数据的可视化，以及提供免费的教学资源，使世界变得可理解。](https://www.gapminder.org/tools/?from=world#$chart-type=bubbles\&url=v1)