点#

point 标记用符号表示每个数据点。点标记常用于散点图等可视化中。

点标记属性#

import altair as alt
from vega_datasets import data

source = data.cars()

shape_select = alt.binding_select(
    options=[
        "arrow",
        "circle",
        "square",
        "cross",
        "diamond",
        "triangle",
        "triangle-up",
        "triangle-down",
        "triangle-right",
        "triangle-left",
        "wedge",
        "stroke",
        "M-1,-1H1V1H-1Z",
        "M0,.5L.6,.8L.5,.1L1,-.3L.3,-.4L0,-1L-.3,-.4L-1,-.3L-.5,.1L-.6,.8L0,.5Z",
    ],
    name="shape",
)
shape_var = alt.param(bind=shape_select, value="circle")

angle_slider = alt.binding_range(min=-360, max=360, step=1, name="angle")
angle_var = alt.param(bind=angle_slider, value=0)

size_slider = alt.binding_range(min=0, max=500, step=10, name="size")
size_var = alt.param(bind=size_slider, value=50)

strokeWidth_slider = alt.binding_range(min=0, max=10, step=0.5, name="strokeWidth")
strokeWidth_var = alt.param(bind=strokeWidth_slider, value=2)

alt.Chart(source).mark_point(
    shape=shape_var,
    angle=angle_var,
    size=size_var,
    strokeWidth=strokeWidth_var,
).encode(x="Horsepower:Q", y="Miles_per_Gallon:Q").add_params(
    shape_var, angle_var, size_var, strokeWidth_var
)

一个 point 标记定义可以包含任何标准标记属性和以下特殊属性

点击显示表格

属性

类型

描述

shape

anyOf(anyOf(SymbolShape, string), ExprRef)

点标记的形状。支持的值包括

绘图形状："circle"（圆形）、"square"（正方形）、"cross"（十字形）、"diamond"（菱形）、"triangle-up"（上三角形）、"triangle-down"（下三角形）、"triangle-right"（右三角形）或 "triangle-left"（左三角形）。
直线符号 "stroke"
中心定向形状 "arrow"（箭头）、"wedge"（楔形）或 "triangle"（三角形）
自定义 SVG 路径字符串 <https://mdn.org.cn/en-US/docs/Web/SVG/Tutorial/Paths>__（为确保正确尺寸，自定义形状路径应定义在一个方形边界框内，其 x 和 y 维度坐标范围均从 -1 到 1。）

默认值： "circle"

size

anyOf(number, ExprRef)

标记的默认大小。

对于 point/circle/square，这表示标记的像素面积。请注意，此值设置的是符号的面积；边长会随此值的平方根增加。
对于 bar，这表示柱状图的条带大小，以像素为单位。
对于 text，这表示字体大小，以像素为单位。

默认值

30 用于点、圆形、正方形标记；宽度/高度的 step
2 用于离散维度的柱状图标记；
5 用于连续维度的柱状图标记；
11 用于文本标记。

示例#

点图#

将字段仅映射到点标记的 x 或仅映射到 y 可创建点图。

import altair as alt
from vega_datasets import data

source = data.movies()
alt.Chart(source).mark_point().encode(
    x="IMDB_Rating:Q"
)

散点图#

将字段映射到 x 和 y 通道可创建散点图。

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source).mark_point().encode(
    x="Horsepower:Q",
    y="Miles_per_Gallon:Q",
)

默认情况下，point 标记仅有边框，内部透明。通过设置 filled 为 True，可以创建填充点。

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source).mark_point(filled=True).encode(
    x="Horsepower:Q",
    y="Miles_per_Gallon:Q",
)

气泡图#

通过将第三个字段映射到散点图中的 size 通道，我们可以创建气泡图。

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source).mark_point().encode(
    x="Horsepower:Q",
    y="Miles_per_Gallon:Q",
    size="Acceleration:Q",
)

带颜色和/或形状的散点图#

字段也可以使用 color 或 shape 通道在散点图中进行编码。例如，此规范使用 color 和 shape 同时对字段 Origin 进行编码。

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source).mark_point().encode(
    alt.X("Miles_per_Gallon:Q").scale(zero=False),
    alt.Y("Horsepower:Q").scale(zero=False),
    color="Origin:N",
    shape="Origin:N",
)

带抖动的点图#

要在离散刻度上抖动点，可以添加随机偏移量

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source).mark_point().encode(
    x="Horsepower:Q",
    y="Cylinders:O",
    yOffset="random:Q",
).transform_calculate(
    random="random()"
).properties(
    height=alt.Step(50)
)

风矢量示例#

我们还可以使用点标记，将 wedge 用作 shape 并结合 angle 编码来创建风矢量图。其他形状选项包括："circle"、"square"、"cross"、"diamond"、"triangle-up"、"triangle-down"、"triangle-right"、"triangle-left"、"stroke"、"arrow" 和 "triangle"。

import altair as alt
from vega_datasets import data

source = data.windvectors()

alt.Chart(source).mark_point(shape="wedge", filled=True).encode(
    latitude="latitude",
    longitude="longitude",
    color=alt.Color("dir").scale(domain=[0, 360], scheme="rainbow").legend(None),
    angle=alt.Angle("dir").scale(domain=[0, 360], range=[180, 540]),
    size=alt.Size("speed").scale(rangeMax=500),
).project("equalEarth")

地理点#

通过将地理坐标数据映射到相应投影的 longitude 和 latitude 通道，我们可以可视化地理点。下面的示例显示了美国的主要机场。

import altair as alt
from vega_datasets import data

airports = data.airports()
states = alt.topo_feature(data.us_10m.url, feature="states")

# US states background
background = alt.Chart(states).mark_geoshape(
    fill="lightgray",
    stroke="white"
).properties(
    width=500,
    height=300,
).project("albersUsa")

# airport positions on background
points = alt.Chart(airports).mark_circle(
    size=10,
    color="steelblue",
).encode(
    longitude="longitude:Q",
    latitude="latitude:Q",
    tooltip=["name", "city", "state"],
)

background + points