Vega-Lite API Examples
Examples completed: 220 / 703
A repository containing Vega-Lite-API implementations of all of the examples in the Vega-Lite gallery.
Contributions welcome!
Usage
Test that all of the chart modules in src/
return their matching JSON spec defined in specs/
.
npm test
Getting started
See the bar_aggregate.vl.js
file as an example.
If you want to write an implementation, go to a file in the src/
folder and create a default function that exports a vega-lite spec. To test it, run npm test
.
Tests are automatically generated when you run npm test
. See the list below for which examples have already been created.
Notes
- As described in this issue and this PR, the
mark
field may not match the spec. This may occur whenmark
is nested inside aspec
or alayer
spec
"spec": {
"mark": "bar"
}
vega-lite example output
"spec": {
"mark": { "type": "bar" }
}
To address this issue, the test template recursively finds mark
fields that are strings and converts them into objects.
function convertMarkValues (obj) {
for (const key in obj) {
if (typeof obj[key] === 'object') {
convertMarkValues(obj[key]);
}
if (key === 'mark' && typeof obj[key] === 'string') {
obj.mark = { type: obj[key] };
}
}
return obj;
}
- In the
arc_pie_pyramid
file, the ordinaltype
field is added but was not present in the spec:
"order": {
"field": "order",
"type": "ordinal"
}
Example list (Completed: 220 / 703)
- ✅ arc_color_mappings
- ✅ arc_donut
- ✅ arc_facet
- ✅ arc_facet_normalized
- ✅ arc_ordinal_theta
- ✅ arc_params
- ✅ arc_pie
- ✅ arc_pie_normalize_tooltip
- ✅ arc_pie_pyramid
- ✅ arc_radial
- ✅ arc_radial_histogram
- ✅ arc_radial_histogram_normalized
- ✅ arc_radial_normalized
- ✅ area
- ✅ area_cumulative_freq
- ✅ area_density
- ✅ area_density_facet
- ✅ area_density_facet_normalized
- ✅ area_density_stacked
- ✅ area_density_stacked_fold
- ✅ area_gradient
- ✅ area_gradient_normalized
- ✅ area_horizon
- ✅ area_horizon_normalized
- ✅ area_overlay
- ✅ area_overlay_normalized
- ✅ area_overlay_with_y2
- ✅ area_overlay_with_y2_normalized
- ✅ area_params
- ✅ area_temperature_range
- ✅ area_vertical
- ✅ argmin_spaces
- ✅ bar
- ✅ bar_1d
- ✅ bar_1d_binned
- ✅ bar_1d_step_config
- ✅ bar_1d_temporal
- ✅ bar_aggregate
- ✅ bar_aggregate_count
- ✅ bar_aggregate_format
- ✅ bar_aggregate_size
- ✅ bar_aggregate_sort_by_encoding
- ✅ bar_aggregate_sort_mean
- ✅ bar_aggregate_transform
- ✅ bar_aggregate_vertical
- ✅ bar_argmax
- ✅ bar_argmax_transform
- ✅ bar_array_aggregate
- ✅ bar_axis_orient
- ✅ bar_axis_space_saving
- ✅ bar_binned_data
- ✅ bar_bullet_expr_bind
- ✅ bar_bullet_expr_bind_normalized
- ✅ bar_color_disabled_scale
- ✅ bar_column_fold
- ✅ bar_column_fold_normalized
- ✅ bar_column_pivot
- ✅ bar_config_no_zero
- ✅ bar_corner_radius_end
- ✅ bar_count_minimap
- ✅ bar_custom_sort_full
- ✅ bar_custom_sort_partial
- ✅ bar_custom_time_domain
- ✅ bar_default_tooltip_title_null
- ✅ bar_distinct
- ✅ bar_diverging_stack_population_pyramid
- ✅ bar_diverging_stack_transform
- ✅ bar_filter_calc
- ✅ bar_fit
- ✅ bar_gantt
- ✅ bar_gantt_config_no_zero
- ✅ bar_grouped
- ✅ bar_grouped_custom_padding
- ✅ bar_grouped_errorbar
- ✅ bar_grouped_errorbar_normalized
- ✅ bar_grouped_facet
- ✅ bar_grouped_facet_independent_scale
- ✅ bar_grouped_facet_independent_scale_fixed_width
- ✅ bar_grouped_facet_independent_scale_fixed_width_normalized
- ✅ bar_grouped_facet_independent_scale_normalized
- ✅ bar_grouped_facet_normalized
- ✅ bar_grouped_fixed_width
- ✅ bar_grouped_horizontal
- ✅ bar_grouped_label
- ✅ bar_grouped_label_normalized
- ✅ bar_grouped_repeated
- ✅ bar_grouped_repeated_normalized
- ✅ bar_grouped_stacked
- ✅ bar_grouped_step_for_offset
- ✅ bar_grouped_step_for_position
- ✅ bar_grouped_thin
- ✅ bar_heatlane
- ✅ bar_heatlane_normalized
- ✅ bar_layered_transparent
- ✅ bar_layered_weather
- ✅ bar_layered_weather_normalized
- ✅ bar_month
- ✅ bar_month_band
- ✅ bar_month_band_config
- ✅ bar_month_temporal
- ✅ bar_month_temporal_initial
- ✅ bar_multi_values_per_categories
- ✅ bar_negative
- ✅ bar_negative_horizontal_label
- ✅ bar_negative_horizontal_label_normalized
- ✅ bar_params
- ✅ bar_params_bound
- ✅ bar_percent_of_total
- ✅ bar_ranged_not_binned
- ✅ bar_size_default
- ✅ bar_size_explicit_bad
- ✅ bar_size_fit
- ✅ bar_size_responsive
- ✅ bar_size_responsive_normalized
- ✅ bar_size_step_small
- ✅ bar_sort_by_count
- ✅ bar_swap_axes
- ✅ bar_swap_custom
- ✅ bar_title
- ✅ bar_title_start
- ✅ bar_tooltip
- ✅ bar_tooltip_aggregate
- ✅ bar_tooltip_groupby
- ✅ bar_tooltip_multi
- ✅ bar_tooltip_title
- ✅ bar_x_offset_without_x_broken
- ✅ bar_yearmonth
- ✅ bar_yearmonth_custom_format
- ✅ boxplot_1D_horizontal
- ✅ boxplot_1D_horizontal_custom_mark
- ✅ boxplot_1D_horizontal_custom_mark_normalized
- ✅ boxplot_1D_horizontal_explicit
- ✅ boxplot_1D_horizontal_explicit_normalized
- ✅ boxplot_1D_horizontal_normalized
- ✅ boxplot_1D_invalid
- ✅ boxplot_1D_invalid_normalized
- ✅ boxplot_1D_vertical
- ✅ boxplot_1D_vertical_normalized
- ✅ boxplot_2D_horizontal
- ✅ boxplot_2D_horizontal_color_size
- ✅ boxplot_2D_horizontal_color_size_normalized
- ✅ boxplot_2D_horizontal_normalized
- ✅ boxplot_2D_vertical
- ✅ boxplot_2D_vertical_normalized
- ✅ boxplot_groupped
- ✅ boxplot_groupped_normalized
- ✅ boxplot_minmax_2D_horizontal
- ✅ boxplot_minmax_2D_horizontal_custom_midtick_color
- ✅ boxplot_minmax_2D_horizontal_custom_midtick_color_normalized
- ✅ boxplot_minmax_2D_horizontal_normalized
- ✅ boxplot_minmax_2D_vertical
- ✅ boxplot_minmax_2D_vertical_normalized
- ✅ boxplot_preaggregated
- ✅ boxplot_preaggregated_normalized
- ✅ boxplot_tooltip_aggregate
- ✅ boxplot_tooltip_aggregate_normalized
- ✅ boxplot_tooltip_not_aggregate
- ✅ boxplot_tooltip_not_aggregate_normalized
- ✅ brush_table
- ✅ circle
- ✅ circle_binned
- ✅ circle_binned_maxbins_2
- ✅ circle_binned_maxbins_20
- ✅ circle_binned_maxbins_5
- ✅ circle_bubble_health_income
- ✅ circle_custom_tick_labels
- ✅ circle_flatten
- ✅ circle_github_punchcard
- ✅ circle_labelangle_orient_signal
- ✅ circle_natural_disasters
- ✅ circle_opacity
- ✅ circle_scale_quantile
- ✅ circle_scale_quantize
- ✅ circle_scale_threshold
- ✅ circle_wilkinson_dotplot
- ✅ circle_wilkinson_dotplot_stacked
- ✅ histogram
- ✅ line
- ✅ line_step
- ✅ param_expr
- ✅ point_1d
- ✅ point_1d_array
- ✅ point_2d
- ✅ point_2d_aggregate
- ✅ point_2d_array
- ✅ point_2d_array_named
- ✅ point_2d_config_no_zero
- ✅ point_2d_tooltip
- ✅ point_2d_tooltip_data
- ✅ point_aggregate_detail
- ✅ point_background
- ✅ point_binned_color
- ✅ point_binned_opacity
- ✅ point_binned_size
- ✅ point_bubble
- ✅ point_color
- ✅ point_color_custom
- ✅ point_color_ordinal
- ✅ point_color_quantitative
- ✅ point_color_shape_constant
- ✅ point_color_with_shape
- ✅ point_colorramp_size
- ✅ point_diverging_color
- ✅ point_dot_timeunit_color
- ✅ point_filled
- ✅ point_grouped
- ✅ point_href
- ✅ point_invalid_color
- ✅ point_log
- ✅ point_no_axis_domain_grid
- ✅ point_offset_random
- ✅ point_ordinal_bin_offset_random
- ✅ point_ordinal_color
- ✅ point_params
- ✅ point_quantile_quantile
- ✅ point_scale_range_field
- ✅ point_shape_custom
- ✅ point_tooltip
- ✅ stacked_area
- ✅ stacked_bar_1d