尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

pydeck-carto 数据驱动配色指南:color_bins、color_categories 与 color_continuous 三大 CARTO 样式函数详解

pydeck-carto 数据驱动配色指南:color_bins、color_categories 与 color_continuous 三大 CARTO 样式函数详解 pydeck-carto 数据驱动配色指南color_bins、color_categories 与 color_continuous 三大 CARTO 样式函数详解【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.glCARTO 为地图符号化提供了开箱即用的数据驱动配色函数pydeck-carto 将这套能力以 Python 辅助函数的形式接入 pydeck让你在 Notebook 或脚本中用一行代码就能为云数据SQL 查询、表、瓦片集生成分档、分类、连续渐变三种典型的颜色映射。读完后你将能够在 pydeck 中正确使用pdkc.styles的三大配色函数、理解其参数与默认值、看懂序列化后的 JSON 如何在 deck.gl 前端执行并复现完整的 CARTO 云数据着色示例。概述pydeck-carto 中的 CARTO 样式CARTO 样式是一组数据驱动data-driven的配色函数专为颜色color这一维度设计。CARTO 官方风格的完整列表JavaScript 侧可参考仓库内的 CARTO Styles API 参考pydeck-carto 提供了其中三个最常用函数的 Python 封装定义在 bindings/pydeck-carto/pydeck_carto/styles.pycolor_bins分档着色类比分级数据值向下取整到domain中最近的断点再映射到对应颜色color_categories分类着色domain中列出的每个类别值与颜色一一对应color_continuous连续渐变着色数据值在domain上线性插值映射为色带上的混合色。这三个函数的共同特点是返回的不是颜色数组而是一个 pydeckFunction对象——它会被序列化成 JSON 随 Deck 的to_html()/Widget 消息发送到浏览器端由 deck.gl 的deck.gl/carto模块在 WebGL 渲染循环中执行逐要素取色。这正是 pydeck-carto 与本地 Python 数据逐行算颜色的根本区别着色逻辑留在前端数据留在云端只传输一份紧凑的样式描述。底层机制从 Python 函数到前端Function以color_bins的源码为例见 styles.pydef color_bins( attr: str, domain: list, colors: Union[str, list] PurpOr, null_color: list [204, 204, 204], ): Helper function for quickly creating a color bins style. Data values of each attribute are rounded down to the nearest value in the domain and are then styled with the corresponding color. Parameters ---------- attr : str Attribute or column to symbolize by. domain : list Assign manual class break values. colors : Union[str, list], optional Color assigned to each domain value. - str: A valid named CARTOColors palette. - list: Array of colors in RGBA [ [r, g, b, [a]] ]. Default is PurpOr. null_color : list, optional Color for null values. Default is [204, 204, 204]. return pdk.types.Function( colorBins, **{attr: attr, domain: domain, colors: colors, nullColor: null_color}, )三个函数结构一致只是函数名colorBins/colorCategories/colorContinuous和参数集不同。pdk.types.Function序列化后会带上function标记键单元测试 test_styles.py 精确验证了这一契约def test_color_bins(): assert color_bins( attrpct_higher_ed, domain[0, 20, 30, 40, 50, 60, 70], colorsPinkYl ).serialize() { function: colorBins, attr: pct_higher_ed, domain: [0, 20, 30, 40, 50, 60, 70], colors: PinkYl, nullColor: [204, 204, 204], }也就是说get_fill_colorpdkc.styles.color_bins(...)最终传给前端的就是一段这样的声明式 JSON。前端执行逻辑位于 deck.gl 主仓的modules/carto/src/style/目录三个文件与 Python 函数一一对应color-bins-style.ts基于d3-scale的scaleThreshold构造阈值比例尺。注意getPalette(colors, domain.length 1)——使用命名色板时取色长度为domain长度加 1因为 N 个断点把数值轴切分为 N1 个区间非数值/非有限值NaN、null统一回退到nullColorcolor-categories-style.ts在构造期一次性建立category - color的哈希表colorsByCategory查询阶段为 O(1)值不在domain中时返回othersColornull 值返回nullColorcolor-continuous-style.ts基于d3-scale的scaleLineardomain两端点映射到色带两端中间值线性插值混色。从源码结构看Python 端不做任何取色计算只负责描述样式真正的比例尺与调色发生在浏览器端这与 CARTO 云数据数据不出云的架构是一致的。参数参考三大函数的完整签名三个函数共享的参数语义如下默认值来自 styles.py 的函数签名与 CARTO Styles 文档 的 JS 侧定义一致参数类型说明默认值attrstr要符号化的属性名/列名如pct_higher_ed、landuse_type必填domainlistcolor_bins/color_continuous为数值断点数组color_categories为类别值列表必填colorsstr或list命名 CARTOColors 色板如PurpOr、PinkYl、Peach、Bold或 RGBA 数组[[r, g, b, [a]], ...]PurpOrnull_colorlistnull 值的颜色RGB 数组[204, 204, 204]浅灰others_colorlist仅color_categories有类别未正确映射时的兜底颜色[119, 119, 119]中灰几点使用注意domain必须传数组。JS 侧每个实现开头都有assert(Array.isArray(domain), ...)校验非数组会直接报错color_bins的断点语义值v落入[domain[i-1], domain[i])区间首尾开区间外推取对应档位颜色。以domain [1e5, 2e5, 3e5]、色板Teal为例映射关系为[, 1e5) - Teal[0]、[1e5, 2e5) - Teal[1]、[2e5, 3e5) - Teal[2]、[3e5,] - Teal[3]参见 CARTO colorBins 文档color_categories的domain是白名单列表外的类别值不会报错而是渲染为others_color这在展示真实脏数据时很有用命名色板长度与domain的匹配规则见上文源码分析bins 取len(domain)1色categories 与 continuous 取len(domain)色。实战示例一color_bins 对美国县高等教育率分档着色第一个示例将美国各县的高等教育人口占比按 7 个断点分为 8 档使用PinkYl色板。完整可运行版本见仓库示例脚本 carto_styles_color_bins.pyimport pydeck as pdk import pydeck_carto as pdkc from carto_auth import CartoAuth # Authentication with CARTO carto_auth CartoAuth.from_oauth() # Register CARTO layers in pydeck pdkc.register_layers() # Create CARTO data source data pdkc.sources.vector_query_source( access_tokencarto_auth.get_access_token(), api_base_urlcarto_auth.get_api_base_url(), connection_namecarto_dw, sql_querySELECT geom, pct_higher_ed FROM cartobq.public_account.higher_edu_by_county, ) # Render CartoLayer in pydeck with color bins style layer pdk.Layer( VectorTileLayer, datadata, get_fill_colorpdkc.styles.color_bins( pct_higher_ed, [0, 20, 30, 40, 50, 60, 70], PinkYl ), get_line_color[0, 0, 0, 100], line_width_min_pixels0.5, pickableTrue, ) view_state pdk.ViewState(latitude38, longitude-98, zoom3) tooltip {text: Higher education percentage: {pct_higher_ed} %} pdk.Deck(layer, map_stylepdk.map_styles.ROAD, initial_view_stateview_state, tooltiptooltip)脚本版本额外演示了输出 HTML 的方式r pdk.Deck(...)之后调用r.to_html(carto_styles_color_bins.html)即可得到独立网页。实战示例二color_categories 按用地类型分类着色第二个示例以华盛顿县地块parcels的landuse_type属性做类别映射使用Bold色板并演示了 HTML 富文本 tooltip。示例来自文档 styles.rst此处按可运行规范补全了pdkc.styles.前缀与datadata# Create CARTO data source data pdkc.sources.vector_query_source( access_tokencarto_auth.get_access_token(), api_base_urlcarto_auth.get_api_base_url(), connection_namecarto_dw, sql_querySELECT geom, landuse_type FROM cartobq.public_account.wburg_parcels, ) # Render CARTO layer in pydeck with color categories style layer pdk.Layer( VectorTileLayer, datadata, get_fill_colorpdkc.styles.color_categories( landuse_type, [ Multi-Family Walk-Up Buildings, Multi-Family Elevator Buildings, Mixed Residential And Commercial Buildings, Parking Facilities, 1 and 2 Family Buildings, Commercial and Office Buildings, Vacant Land, Public Facilities and Institutions, Transportation and Utility, Open Space and Outdoor Recreation, Industrial and Manufacturing, ], Bold, ), get_line_color[0, 0, 0, 100], line_width_min_pixels0.5, pickableTrue, ) map_style pdk.map_styles.ROAD view_state pdk.ViewState(latitude40.715, longitude-73.959, zoom14) tooltip { html: bLand use type:/bbr{landuse_type}, style: {color: black, backgroundColor: #84D2F6}, } pdk.Deck(layer, map_stylemap_style, initial_view_stateview_state, tooltiptooltip)这个例子里 11 个类别值与Bold色板一一对应如果某个地块的landuse_type不在上述列表中脏数据将显示为默认的中灰others_color [119, 119, 119]。实战示例三color_continuous 按温度连续渐变着色第三个示例将温度值value在[70, 75, 80, 85, 90, 95, 100]的域上线性插值使用Peach色板做连续渐变# Create CARTO data source data pdkc.sources.vector_query_source( access_tokencarto_auth.get_access_token(), api_base_urlcarto_auth.get_api_base_url(), connection_namecarto_dw, sql_querySELECT geom, value FROM cartobq.public_account.temps, ) # Render CartoLayer in pydeck with color continuous style layer pdk.Layer( VectorTileLayer, datadata, get_fill_colorpdkc.styles.color_continuous(value, [70, 75, 80, 85, 90, 95, 100], Peach), point_radius_min_pixels2.5, pickableTrue, ) map_style pdk.map_styles.ROAD view_state pdk.ViewState(latitude34, longitude-98, zoom3) tooltip { html: bTemperature:/b {value}°F, style: {color: white}, } pdk.Deck(layer, map_stylemap_style, initial_view_stateview_state, tooltiptooltip)对应仓库中的交互版本 Notebook 为 carto_styles.ipynb。与数据源、图层注册的配套关系样式函数只是颜色策略还需要数据源与图层注册配合才能工作数据源上述示例均使用pdkc.sources.vector_query_source(...)其参数connection_name、access_token、api_base_url、sql_query、可选spatial_data_column、columns、query_parameters完整定义在 sources.py。除 query 源外还有vector_table_source、vector_tileset_source以及 H3/Quadbin 系列源可搭配H3TileLayer、QuadbinTileLayer等聚合图层使用图层注册调用pdkc.register_layers()后pydeck-carto 会把deck.gl/carto、deck.gl/extensions与h3-js的打包脚本注入 pydeck 的自定义库custom_libraries并为VectorTileLayer、H3TileLayer、QuadbinTileLayer、RasterTileLayer设置默认on_data_error处理器在页面中以红色文案展示图层错误实现见 layer.py。这也是文档示例中VectorTileLayer这类 CARTO 图层类型能被 pydeck 识别的原因认证CartoAuth来自独立的carto_auth包负责 OAuth 登录与 access token / API base URL 的获取细节见同目录文档 authentication.rst。小结与延伸阅读pydeck-carto 的styles模块用三个轻量函数覆盖了地图符号化中最核心的三种颜色映射场景color_bins处理人工断点的分档数据color_categories处理离散类别color_continuous处理连续数值渐变。它们的 Python 实现极其薄每个函数体仅一行pdk.types.Function(...)调用核心价值在于声明式地约束了前端执行协议——序列化格式由 test_styles.py 锁定前端行为由 modules/carto/src/style/ 下的比例尺实现保证。进一步阅读Python 侧函数签名与 docstringbindings/pydeck-carto/pydeck_carto/styles.pyCARTO 图层与数据源bindings/pydeck-carto/docs/layers.rst、bindings/pydeck-carto/docs/sources.rstJavaScript 侧完整样式参考含colorBins区间映射示例docs/api-reference/carto/styles.md可运行示例脚本目录bindings/pydeck-carto/examples/scripts/【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表