Bullet Graph

Raw metric thresholds compile into qualitative bands, actual bars, and target markers.

Bullet Graph
Bullet Graph Pipeline pipeline

Data Sources

6

Fields

21

Scales

2

Layers

10

Glyphs

36

rect 12 / line 15 / text 9

Conversion Poor: 0 to 0.4Conversion Good: 0.4 to 0.9Retention Poor: 0 to 0.6Retention Good: 0.6 to 0.9Activation Poor: 0 to 0.4Activation Good: 0.4 to 0.800.20.40.60.81Conversion: 0.7Retention: 0.7Activation: 0.6Conversion target: 0.8Retention target: 0.8Activation target: 0.7ConversionConversionRetentionRetentionActivationActivation

Build Path

Bullet Graph Pipeline

This example is rebuilt from gallery data source raw-bullets by recipe bulletGraph: raw table rows -> TabularSource -> pipeline drafts -> analyzeAuthoringDrafts() -> materialized ChartSpec -> compileChart() -> SceneGraph -> SVG. The graph below shows the authored pipeline stage.

Pipeline recipe graph

13 pipelines
14 nodes
16 edges

Data Flow Diagram

0/414 nodes
0/728 edges
414 hidden

Select a glyph to highlight its complete source path.

Scope

Roles

source
transform
field
scale
layer
param
glyph

No matching flow nodes

Adjust search, scope, or role filters.

Available Data

6 tables
3 transforms

Imported table

source_gallery_bulletgraph
raw
9 columns
feeds pipeline_bullet_range_layout_transform
feeds pipeline_bullet_measure_layout_transform
feeds pipeline_bullet_target_layout_transform

ChartSpec

{
  "id": "gallery.bulletGraph",
  "data": [
    {
      "id": "source_gallery_bulletgraph",
      "rows": 3
    },
    {
      "id": "source_bullet_ranges",
      "rows": 6
    },
    {
      "id": "source_bullet_measures",
      "rows": 3
    },
    {
      "id": "source_bullet_targets",
      "rows": 3
    },
    {
      "id": "__guide.pipeline_x_grid_guide",
      "rows": 6
    },
    {
      "id": "__guide.pipeline_x_guide",
      "rows": 6
    }
  ],
  "transforms": [
    {
      "id": "pipeline_bullet_range_layout_transform",
      "type": "layout",
      "input": "source_gallery_bulletgraph",
      "output": "source_bullet_ranges",
      "options": {
        "endField": "satisfactory",
        "errorMethod": "standardError",
        "field": "metric",
        "fit": "contain",
        "geometryField": "metric",
        "groupBy": [
          "metric"
        ],
        "idField": "metric",
        "includeMax": false,
        "labelField": "metric",
        "layout": "pipeline_plot_layout",
        "layoutKind": "bulletRanges",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": [],
        "orderField": "metric",
        "parentField": "poor",
        "seriesBy": "poor",
        "sourceField": "metric",
        "startField": "poor",
        "targetField": "poor",
        "value": "good",
        "xField": "poor",
        "yField": "satisfactory"
      }
    },
    {
      "id": "pipeline_bullet_measure_layout_transform",
      "type": "layout",
      "input": "source_gallery_bulletgraph",
      "output": "source_bullet_measures",
      "options": {
        "errorMethod": "standardError",
        "field": "metric",
        "fit": "contain",
        "geometryField": "metric",
        "groupBy": [
          "metric"
        ],
        "idField": "metric",
        "includeMax": false,
        "labelField": "metric",
        "layout": "pipeline_plot_layout",
        "layoutKind": "bulletMeasure",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": [],
        "orderField": "metric",
        "parentField": "actual",
        "seriesBy": "actual",
        "sourceField": "metric",
        "startField": "actual",
        "targetField": "actual",
        "value": "actual",
        "xField": "actual"
      }
    },
    {
      "id": "pipeline_bullet_target_layout_transform",
      "type": "layout",
      "input": "source_gallery_bulletgraph",
      "output": "source_bullet_targets",
      "options": {
        "errorMethod": "standardError",
        "field": "metric",
        "fit": "contain",
        "geometryField": "metric",
        "groupBy": [
          "metric"
        ],
        "idField": "metric",
        "includeMax": false,
        "labelField": "metric",
        "layout": "pipeline_plot_layout",
        "layoutKind": "bulletTarget",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": [],
        "orderField": "metric",
        "parentField": "target",
        "seriesBy": "target",
        "sourceField": "metric",
        "startField": "target",
        "targetField": "target",
        "value": "target",
        "xField": "target"
      }
    }
  ],
  "axes": [
    {
      "id": "pipeline_x_guide",
      "scale": "pipeline_x_size_scale",
      "orientation": "bottom"
    }
  ],
  "grids": [
    {
      "id": "pipeline_x_grid_guide",
      "scale": "pipeline_x_size_scale",
      "orientation": "x"
    }
  ],
  "legends": [],
  "fields": [
    "__rowLabel",
    "id",
    "metric",
    "poor",
    "satisfactory",
    "good",
    "actual",
    "target",
    "end",
    "height",
    "rangeIndex",
    "rangeLabel",
    "start",
    "tooltip",
    "y",
    "centerY",
    "labelX",
    "value",
    "y1",
    "y2",
    "label"
  ],
  "scales": [
    {
      "id": "pipeline_x_size_scale",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          1
        ],
        "includeZero": false,
        "order": "input",
        "reverse": false,
        "symmetric": false
      }
    },
    {
      "id": "pipeline_rangefill_color_scale",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "source_bullet_ranges",
        "field": "rangeLabel",
        "fields": [],
        "includeZero": false,
        "order": "input",
        "reverse": false,
        "symmetric": false
      }
    }
  ],
  "layers": [
    {
      "id": "pipeline_x_grid_guide",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_x_guide-tick-marks",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_x_guide-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "create_chart_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_view_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_plot_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_qualitative_ranges_layer",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_actual_measures_layer",
      "mark": "rect",
      "role": "data"
    },
    {
      "id": "pipeline_target_markers_layer",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "pipeline_metric_labels_layer",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.bulletGraph.scene",
  "scales": [
    {
      "id": "pipeline_x_size_scale",
      "type": "linear",
      "domain": [
        0,
        1
      ],
      "range": [
        152,
        778
      ],
      "ticks": [
        0,
        0.2,
        0.4,
        0.6,
        0.8,
        1
      ]
    },
    {
      "id": "pipeline_rangefill_color_scale",
      "type": "ordinal",
      "domain": [
        "Poor",
        "Good"
      ],
      "range": [
        "var(--colors-gray-3)",
        "var(--colors-gray-5)",
        "var(--colors-gray-7)"
      ]
    }
  ],
  "layers": [
    {
      "id": "create_chart_surface",
      "role": "context",
      "zIndex": -10,
      "glyphs": 1
    },
    {
      "id": "pipeline_x_grid_guide",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 6
    },
    {
      "id": "pipeline_view_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_plot_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_x_guide-tick-marks",
      "role": "guide",
      "zIndex": 5,
      "glyphs": 6
    },
    {
      "id": "pipeline_qualitative_ranges_layer",
      "role": "context",
      "zIndex": 5,
      "glyphs": 6
    },
    {
      "id": "pipeline_x_guide-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "pipeline_actual_measures_layer",
      "role": "data",
      "zIndex": 20,
      "glyphs": 3
    },
    {
      "id": "pipeline_target_markers_layer",
      "role": "data",
      "zIndex": 30,
      "glyphs": 3
    },
    {
      "id": "pipeline_metric_labels_layer",
      "role": "guide",
      "zIndex": 40,
      "glyphs": 3
    }
  ]
}

Glyph Data Tree

10 layers

Full parameter lineage for the active compiler surface.

create_chart_surface

1

pipeline_x_grid_guide

6

pipeline_view_layout_surface

1

pipeline_plot_layout_surface

1

pipeline_x_guide-tick-marks

6

pipeline_qualitative_ranges_layer

6

pipeline_x_guide-labels

6

pipeline_actual_measures_layer

3

pipeline_target_markers_layer

3

pipeline_metric_labels_layer

3

Glyph Inspector

none

Select a glyph in the chart to inspect resolved params and lineage.