Bokeh 入门第五步Glyph 属性向量化与调色板颜色映射实战【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh导读在 Bokeh 中Glyph图形元素的视觉属性颜色、大小、透明度等不仅可以设为固定值还可以绑定到数据向量让每个数据点的外观随其数据值动态变化。本文基于 Bokeh 官方入门系列第五篇指南讲解三种核心技法直接向量化颜色、向量化颜色与半径、以及使用linear_cmap配合内置调色板完成连续色带映射。读完本文你将掌握如何用数据驱动的方式一键生成颜色即数值、大小即数值的信息可视化并为后续学习log_cmap、factor_cmap等更复杂的颜色变换打下基础。一、什么是属性向量化从固定值到数据驱动在之前的入门指南first_steps_4.rst中我们通过直接赋值的方式定制图形例如fill_colorblue这样把某个颜色固定到整个 Glyph 上。这种写法下一个 Glyph 的所有数据点共享同一个视觉属性。向量化Vectorizing则完全不同当我们把一个长度与数据点数量相同的序列传给某个视觉属性时Bokeh 会逐点取值让每个数据点拥有独立的属性值。这是 Bokeh 中最常用、也最直观的数据驱动可视化手段——颜色本身就成为了一维数据的可视化通道。从源码实现看Bokeh 的 Glyph 属性实际上都是DataSpec数据规格既可以接收标量如blue、15也可以接收与数据等长的序列或字段名由底层统一分发到每个数据点。理解这一点后下面的例子就水到渠成。二、向量化颜色让颜色跟随数据变化2.1 核心思路不再使用固定的fill_colorblue而是准备一个与 y 等长的颜色列表把它传给fill_color参数。Bokeh 会把列表中的每个颜色依次应用到对应的数据点上实现每个点的颜色由该点的数据值决定。2.2 完整可运行示例import random from bokeh.plotting import figure, show # 生成数据x 取 0~25y 为 0~99 之间的随机整数 x list(range(0, 26)) y random.sample(range(0, 100), 26) # 根据 y 的值生成 RGB 十六进制颜色列表 # 红色通道固定 255绿色通道由 (value * 255) / 100 计算蓝色通道固定 255 colors [f#{255:02x}{int((value * 255) / 100):02x}{255:02x} for value in y] # 创建绘图对象 p figure( titleVectorized colors example, sizing_modestretch_width, max_width500, height250, ) # 同时添加折线与散点渲染器 p.line(x, y, line_colorblue, line_width1) p.scatter(x, y, fill_colorcolors, line_colorblue, size15) show(p)对应文件first_steps_5_vectorize_color.py2.3 要点解读颜色公式拆解f#{255:02x}{int((value * 255) / 100):02x}{255:02x}将 y 值0~100线性缩放到 0~255 的绿色通道数值再用02x格式化为两位十六进制字符串拼成#RRGGBB形式。y 越大绿色越强颜色越亮。折线是标量、散点是向量p.line(...)仍使用固定的line_colorblue而p.scatter(..., fill_colorcolors)使用向量。二者可以共存于同一图中互不干扰。数据点颜色与数值一一对应在本例中每个圆点的填充色直接反映了该点的 y 值大小——这就是颜色的向量化。如果需要更规范地做数值 → 颜色的映射尤其是数据量较大或需要科学配色时推荐使用第三节的linear_cmap方式而非手写十六进制字符串。三、向量化颜色与大小半径也可以随数据变化3.1 核心思路向量化不只适用于颜色。把同样的原理应用到渲染器的radius半径参数上就能让散点的大小同时携带数据信息形成颜色 大小双通道编码。3.2 完整可运行示例import numpy as np from bokeh.plotting import figure, show # 生成 1000 个随机数据点 N 1000 x np.random.random(sizeN) * 100 y np.random.random(sizeN) * 100 # 根据数据生成半径和颜色半径约为 y 的 2%颜色随 y 线性变化 radii y / 100 * 2 colors [f#{255:02x}{int((value * 255) / 100):02x}{255:02x} for value in y] # 创建指定尺寸的绘图对象 p figure( titleVectorized colors and radii example, sizing_modestretch_width, max_width500, height250, ) # 添加圆形渲染器radius 与 fill_color 均为数据驱动的向量 p.circle( x, y, radiusradii, fill_colorcolors, fill_alpha0.6, line_colorlightgrey, ) show(p)对应文件first_steps_5_vectorize_color_and_size.py3.3 要点解读radius直接接收数组radii y / 100 * 2让每个圆点的半径与其 y 值成正比。注意 Bokeh 中radius使用的是数据坐标系下的长度单位与size的屏幕像素单位不同因此随缩放而变化。向量化的组合运用同一个 Glyph 上可以同时向量化多个属性——本例同时向量化了radius与fill_color并辅以固定值fill_alpha0.6、line_colorlightgrey兼顾数据表达与视觉整洁。透明度缓解重叠1000 个点大量重叠时fill_alpha0.6让重叠区域的密度得以通过颜色深浅体现出来是密集散点图的常用技巧。四、调色板颜色映射用linear_cmap一键完成数值 → 颜色4.1 Bokeh 内置调色板体系Bokeh 自带数十种预定义的调色板palette覆盖三大家族的经典配色Brewer 系列来自 ColorBrewer 的定性/顺序/发散配色如Blues、Reds、Spectral、Paired等D3 系列来自 D3.js 分类色板如Category10、Category20等Matplotlib 系列来自 Matplotlib 的连续色图如Viridis、Plasma、Turbo等。从源码可以看到这些调色板以字典形式集中定义在 src/bokeh/palettes.py 中例如第 1412 行的brewer字典含YlGn、Blues、Spectral、Set1等 35 个命名色板、第 1454 行的d3字典以及第 1376 行的Turbo256元组。每个调色板通常还按离散数量分级例如Turbo支持 3~11 与 256 级。完整清单见参考文档bokeh.palettes对应源码 src/bokeh/palettes.py。4.2linear_cmap函数与四个必需参数linear_cmap定义在 src/bokeh/transform.py作用是创建一个客户端侧的LinearColorMapper变换把某个数据列线性映射到调色板。其必需参数为参数含义field_name要映射颜色的数据字段名即数据序列palette使用的调色板如Turbo256low映射到调色板**最左端最小颜色**的最低值high映射到调色板**最右端最大颜色**的最高值从源码签名还可看到几个可选参数low_color默认None数据值低于low时使用的颜色为None时低于low的值被钳制映射到调色板第一个颜色high_color默认None数据值高于high时使用的颜色为None时高于high的值被钳制映射到调色板最后一个颜色nan_color默认gray数据缺失或映射失败时使用的默认颜色。创建好 mapper 后把它赋值给渲染器的color参数即可完成映射。4.3 完整可运行示例from bokeh.io import show from bokeh.palettes import Turbo256 from bokeh.plotting import figure from bokeh.transform import linear_cmap # 生成数据y 为 x 的平方 x list(range(-32, 33)) y [i**2 for i in x] # 创建线性颜色映射器字段 y、调色板 Turbo256、映射范围为 y 的最小值到最大值 mapper linear_cmap(field_namey, paletteTurbo256, lowmin(y), highmax(y)) # 创建绘图对象 p figure(width500, height250) # 创建圆形渲染器并应用颜色映射器 p.scatter(x, y, colormapper, size10) show(p)对应文件first_steps_5_color_mapping.py4.4 要点解读field_name是列名而非数组与第一节直接传颜色列表不同linear_cmap接收的是字段名字符串这里是yBokeh 会在内部对数据列逐点执行映射这正是LinearColorMapper作为客户端侧变换的职责所在。low/high决定色带覆盖范围本例用min(y)/max(y)让整条色带恰好覆盖数据全范围你也可以手动指定更小或更大的范围此时超出范围的数据点会被钳制clamp到端点颜色。color一键搞定填充与描边p.scatter(..., colormapper)同时作用于填充色与描边色是linear_cmap最简洁的用法。数据分布与视觉分布由于 y 是二次函数中间区域点密集但数值小两端点稀疏但数值大使用Turbo256256 级渐变可以清晰呈现数值的连续变化——这正是连续色带相比手工构造颜色列表的优势。五、延伸log_cmap、factor_cmap与其他属性向量化linear_cmap只是 Bokeh 颜色变换家族的一员同样定义在 src/bokeh/transform.py 中log_cmap源码位置对数尺度线性映射参数与linear_cmap完全一致。适用于数值跨越多个数量级的数据如星系距离、人口密度等映射前对数值取对数避免少量大值把色带整体压扁。factor_cmap源码位置针对分类数据的颜色映射额外接受factors参数与调色板一一对应的类别因子序列将每个类别映射到调色板中的对应颜色还可通过start/end切片处理多级因子nan_color处理缺失值。transform(field_name, transform)源码位置通用入口可将任意客户端侧Transform应用到数据列上是上述各*_cmap的基础设施。此外向量化不仅限于颜色与半径。Bokeh 的众多 Glyph 属性如size、line_width、fill_alpha、line_dash等都支持向量化赋值可以组合出极为丰富的数据编码方案。分类数据的颜色/填充纹样/标记映射还可参考factor_hatch、factor_mark源码位置。更系统的颜色映射与数据变换教程可继续阅读用户指南中的 数据颜色映射与数据变换章节对应锚点ug_basic_data_color_mapping与ug_basic_data_transforming。六、从源码看linear_cmap的底层机制为了深入理解linear_cmap到底做了什么我们看它在 src/bokeh/transform.py 中的实现def linear_cmap( field_name: str, palette: PaletteLike, low: float, high: float, low_color: ColorType | None None, high_color: ColorType | None None, nan_color: ColorType gray, ) - Field: Create a DataSpec dict that applies a client-side LinearColorMapper transformation to a ColumnDataSource column. ... return Field( field_name, LinearColorMapper( palettepalette, lowlow, highhigh, nan_colornan_color, low_colorlow_color, high_colorhigh_color, ), )从中可以提炼出三个关键事实返回类型是Fieldlinear_cmap并不直接返回颜色数组而是返回一个Field——即DataSpec的封装内部包含字段名与变换器。这意味着它属于声明式配置真正把数据映射成颜色发生在浏览器端BokehJS的LinearColorMapper中而不是在 Python 侧预计算。客户端侧变换client-side transform由于映射发生在浏览器内当数据源动态更新例如服务端推送新数据时颜色会自动重新计算无需重新发起请求——这是 Bokeh 交互式可视化的核心优势之一。钳制与缺省策略内置于 mapperlow/high之外的越界值、以及NaN等缺失值分别由low_color/high_color/nan_color三个参数在映射器内部处理保证了任何输入数据都能得到确定的输出颜色。同样的模式也适用于log_cmap底层为LogColorMapper与factor_cmap底层为CategoricalColorMapper三者共享Field 具体ColorMapper的架构只是映射算法不同。七、小结三种数据驱动着色的选型建议需求场景推荐方案对应章节少量点、快速原型颜色逻辑简单手动构造颜色列表传入fill_color第二节大量点、需要同时编码两个维度向量化radius与fill_color第三节需要专业科学配色、动态数据、健壮的颜色映射linear_cmap 内置调色板第四节数值跨越多个数量级log_cmap第五节类别型数据的颜色区分factor_cmap第五节向量化是 Bokeh 数据驱动可视化的基石能力颜色、大小、透明度、线宽等属性都可以是数据的函数。掌握本文的三种写法后建议继续阅读官方入门系列的后续章节first_steps_6.rst 及之后学习布局组合与交互工具把数据驱动的视觉编码应用到完整的数据应用中。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bokeh 入门第五步：Glyph 属性向量化与调色板颜色映射实战
Bokeh 入门第五步Glyph 属性向量化与调色板颜色映射实战【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh导读在 Bokeh 中Glyph图形元素的视觉属性颜色、大小、透明度等不仅可以设为固定值还可以绑定到数据向量让每个数据点的外观随其数据值动态变化。本文基于 Bokeh 官方入门系列第五篇指南讲解三种核心技法直接向量化颜色、向量化颜色与半径、以及使用linear_cmap配合内置调色板完成连续色带映射。读完本文你将掌握如何用数据驱动的方式一键生成颜色即数值、大小即数值的信息可视化并为后续学习log_cmap、factor_cmap等更复杂的颜色变换打下基础。一、什么是属性向量化从固定值到数据驱动在之前的入门指南first_steps_4.rst中我们通过直接赋值的方式定制图形例如fill_colorblue这样把某个颜色固定到整个 Glyph 上。这种写法下一个 Glyph 的所有数据点共享同一个视觉属性。向量化Vectorizing则完全不同当我们把一个长度与数据点数量相同的序列传给某个视觉属性时Bokeh 会逐点取值让每个数据点拥有独立的属性值。这是 Bokeh 中最常用、也最直观的数据驱动可视化手段——颜色本身就成为了一维数据的可视化通道。从源码实现看Bokeh 的 Glyph 属性实际上都是DataSpec数据规格既可以接收标量如blue、15也可以接收与数据等长的序列或字段名由底层统一分发到每个数据点。理解这一点后下面的例子就水到渠成。二、向量化颜色让颜色跟随数据变化2.1 核心思路不再使用固定的fill_colorblue而是准备一个与 y 等长的颜色列表把它传给fill_color参数。Bokeh 会把列表中的每个颜色依次应用到对应的数据点上实现每个点的颜色由该点的数据值决定。2.2 完整可运行示例import random from bokeh.plotting import figure, show # 生成数据x 取 0~25y 为 0~99 之间的随机整数 x list(range(0, 26)) y random.sample(range(0, 100), 26) # 根据 y 的值生成 RGB 十六进制颜色列表 # 红色通道固定 255绿色通道由 (value * 255) / 100 计算蓝色通道固定 255 colors [f#{255:02x}{int((value * 255) / 100):02x}{255:02x} for value in y] # 创建绘图对象 p figure( titleVectorized colors example, sizing_modestretch_width, max_width500, height250, ) # 同时添加折线与散点渲染器 p.line(x, y, line_colorblue, line_width1) p.scatter(x, y, fill_colorcolors, line_colorblue, size15) show(p)对应文件first_steps_5_vectorize_color.py2.3 要点解读颜色公式拆解f#{255:02x}{int((value * 255) / 100):02x}{255:02x}将 y 值0~100线性缩放到 0~255 的绿色通道数值再用02x格式化为两位十六进制字符串拼成#RRGGBB形式。y 越大绿色越强颜色越亮。折线是标量、散点是向量p.line(...)仍使用固定的line_colorblue而p.scatter(..., fill_colorcolors)使用向量。二者可以共存于同一图中互不干扰。数据点颜色与数值一一对应在本例中每个圆点的填充色直接反映了该点的 y 值大小——这就是颜色的向量化。如果需要更规范地做数值 → 颜色的映射尤其是数据量较大或需要科学配色时推荐使用第三节的linear_cmap方式而非手写十六进制字符串。三、向量化颜色与大小半径也可以随数据变化3.1 核心思路向量化不只适用于颜色。把同样的原理应用到渲染器的radius半径参数上就能让散点的大小同时携带数据信息形成颜色 大小双通道编码。3.2 完整可运行示例import numpy as np from bokeh.plotting import figure, show # 生成 1000 个随机数据点 N 1000 x np.random.random(sizeN) * 100 y np.random.random(sizeN) * 100 # 根据数据生成半径和颜色半径约为 y 的 2%颜色随 y 线性变化 radii y / 100 * 2 colors [f#{255:02x}{int((value * 255) / 100):02x}{255:02x} for value in y] # 创建指定尺寸的绘图对象 p figure( titleVectorized colors and radii example, sizing_modestretch_width, max_width500, height250, ) # 添加圆形渲染器radius 与 fill_color 均为数据驱动的向量 p.circle( x, y, radiusradii, fill_colorcolors, fill_alpha0.6, line_colorlightgrey, ) show(p)对应文件first_steps_5_vectorize_color_and_size.py3.3 要点解读radius直接接收数组radii y / 100 * 2让每个圆点的半径与其 y 值成正比。注意 Bokeh 中radius使用的是数据坐标系下的长度单位与size的屏幕像素单位不同因此随缩放而变化。向量化的组合运用同一个 Glyph 上可以同时向量化多个属性——本例同时向量化了radius与fill_color并辅以固定值fill_alpha0.6、line_colorlightgrey兼顾数据表达与视觉整洁。透明度缓解重叠1000 个点大量重叠时fill_alpha0.6让重叠区域的密度得以通过颜色深浅体现出来是密集散点图的常用技巧。四、调色板颜色映射用linear_cmap一键完成数值 → 颜色4.1 Bokeh 内置调色板体系Bokeh 自带数十种预定义的调色板palette覆盖三大家族的经典配色Brewer 系列来自 ColorBrewer 的定性/顺序/发散配色如Blues、Reds、Spectral、Paired等D3 系列来自 D3.js 分类色板如Category10、Category20等Matplotlib 系列来自 Matplotlib 的连续色图如Viridis、Plasma、Turbo等。从源码可以看到这些调色板以字典形式集中定义在 src/bokeh/palettes.py 中例如第 1412 行的brewer字典含YlGn、Blues、Spectral、Set1等 35 个命名色板、第 1454 行的d3字典以及第 1376 行的Turbo256元组。每个调色板通常还按离散数量分级例如Turbo支持 3~11 与 256 级。完整清单见参考文档bokeh.palettes对应源码 src/bokeh/palettes.py。4.2linear_cmap函数与四个必需参数linear_cmap定义在 src/bokeh/transform.py作用是创建一个客户端侧的LinearColorMapper变换把某个数据列线性映射到调色板。其必需参数为参数含义field_name要映射颜色的数据字段名即数据序列palette使用的调色板如Turbo256low映射到调色板**最左端最小颜色**的最低值high映射到调色板**最右端最大颜色**的最高值从源码签名还可看到几个可选参数low_color默认None数据值低于low时使用的颜色为None时低于low的值被钳制映射到调色板第一个颜色high_color默认None数据值高于high时使用的颜色为None时高于high的值被钳制映射到调色板最后一个颜色nan_color默认gray数据缺失或映射失败时使用的默认颜色。创建好 mapper 后把它赋值给渲染器的color参数即可完成映射。4.3 完整可运行示例from bokeh.io import show from bokeh.palettes import Turbo256 from bokeh.plotting import figure from bokeh.transform import linear_cmap # 生成数据y 为 x 的平方 x list(range(-32, 33)) y [i**2 for i in x] # 创建线性颜色映射器字段 y、调色板 Turbo256、映射范围为 y 的最小值到最大值 mapper linear_cmap(field_namey, paletteTurbo256, lowmin(y), highmax(y)) # 创建绘图对象 p figure(width500, height250) # 创建圆形渲染器并应用颜色映射器 p.scatter(x, y, colormapper, size10) show(p)对应文件first_steps_5_color_mapping.py4.4 要点解读field_name是列名而非数组与第一节直接传颜色列表不同linear_cmap接收的是字段名字符串这里是yBokeh 会在内部对数据列逐点执行映射这正是LinearColorMapper作为客户端侧变换的职责所在。low/high决定色带覆盖范围本例用min(y)/max(y)让整条色带恰好覆盖数据全范围你也可以手动指定更小或更大的范围此时超出范围的数据点会被钳制clamp到端点颜色。color一键搞定填充与描边p.scatter(..., colormapper)同时作用于填充色与描边色是linear_cmap最简洁的用法。数据分布与视觉分布由于 y 是二次函数中间区域点密集但数值小两端点稀疏但数值大使用Turbo256256 级渐变可以清晰呈现数值的连续变化——这正是连续色带相比手工构造颜色列表的优势。五、延伸log_cmap、factor_cmap与其他属性向量化linear_cmap只是 Bokeh 颜色变换家族的一员同样定义在 src/bokeh/transform.py 中log_cmap源码位置对数尺度线性映射参数与linear_cmap完全一致。适用于数值跨越多个数量级的数据如星系距离、人口密度等映射前对数值取对数避免少量大值把色带整体压扁。factor_cmap源码位置针对分类数据的颜色映射额外接受factors参数与调色板一一对应的类别因子序列将每个类别映射到调色板中的对应颜色还可通过start/end切片处理多级因子nan_color处理缺失值。transform(field_name, transform)源码位置通用入口可将任意客户端侧Transform应用到数据列上是上述各*_cmap的基础设施。此外向量化不仅限于颜色与半径。Bokeh 的众多 Glyph 属性如size、line_width、fill_alpha、line_dash等都支持向量化赋值可以组合出极为丰富的数据编码方案。分类数据的颜色/填充纹样/标记映射还可参考factor_hatch、factor_mark源码位置。更系统的颜色映射与数据变换教程可继续阅读用户指南中的 数据颜色映射与数据变换章节对应锚点ug_basic_data_color_mapping与ug_basic_data_transforming。六、从源码看linear_cmap的底层机制为了深入理解linear_cmap到底做了什么我们看它在 src/bokeh/transform.py 中的实现def linear_cmap( field_name: str, palette: PaletteLike, low: float, high: float, low_color: ColorType | None None, high_color: ColorType | None None, nan_color: ColorType gray, ) - Field: Create a DataSpec dict that applies a client-side LinearColorMapper transformation to a ColumnDataSource column. ... return Field( field_name, LinearColorMapper( palettepalette, lowlow, highhigh, nan_colornan_color, low_colorlow_color, high_colorhigh_color, ), )从中可以提炼出三个关键事实返回类型是Fieldlinear_cmap并不直接返回颜色数组而是返回一个Field——即DataSpec的封装内部包含字段名与变换器。这意味着它属于声明式配置真正把数据映射成颜色发生在浏览器端BokehJS的LinearColorMapper中而不是在 Python 侧预计算。客户端侧变换client-side transform由于映射发生在浏览器内当数据源动态更新例如服务端推送新数据时颜色会自动重新计算无需重新发起请求——这是 Bokeh 交互式可视化的核心优势之一。钳制与缺省策略内置于 mapperlow/high之外的越界值、以及NaN等缺失值分别由low_color/high_color/nan_color三个参数在映射器内部处理保证了任何输入数据都能得到确定的输出颜色。同样的模式也适用于log_cmap底层为LogColorMapper与factor_cmap底层为CategoricalColorMapper三者共享Field 具体ColorMapper的架构只是映射算法不同。七、小结三种数据驱动着色的选型建议需求场景推荐方案对应章节少量点、快速原型颜色逻辑简单手动构造颜色列表传入fill_color第二节大量点、需要同时编码两个维度向量化radius与fill_color第三节需要专业科学配色、动态数据、健壮的颜色映射linear_cmap 内置调色板第四节数值跨越多个数量级log_cmap第五节类别型数据的颜色区分factor_cmap第五节向量化是 Bokeh 数据驱动可视化的基石能力颜色、大小、透明度、线宽等属性都可以是数据的函数。掌握本文的三种写法后建议继续阅读官方入门系列的后续章节first_steps_6.rst 及之后学习布局组合与交互工具把数据驱动的视觉编码应用到完整的数据应用中。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考