├── .eslintrc.json ├── .gitattributes ├── .github └── FUNDING.yml ├── .gitignore ├── .tours └── vega-viewer.tour ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs └── images │ ├── vega-viewer-advanced-charts.png │ ├── vega-viewer-boxplot.png │ ├── vega-viewer-commands.png │ ├── vega-viewer-contour.png │ ├── vega-viewer-contributions.png │ ├── vega-viewer-data-preview-command-setting.png │ ├── vega-viewer-data-preview.png │ ├── vega-viewer-gistpad-integration.png │ └── vscode-vega-viewer-dev-screen.png ├── examples ├── airport-connections.vg.json ├── airport_connections.vl.json ├── annual-precipitation.vg.json ├── annual-temperature.vg.json ├── arc-diagram.vg.json ├── arc_color_mappings.vl.json ├── arc_donut.vl.json ├── arc_facet.vl.json ├── arc_ordinal_theta.vl.json ├── arc_params.vl.json ├── arc_pie.vl.json ├── arc_pie_normalize_tooltip.vl.json ├── arc_pie_pyramid.vl.json ├── arc_radial.vl.json ├── arc_radial_histogram.vl.json ├── area-chart.vg.json ├── area.vl.json ├── area_cumulative_freq.vl.json ├── area_density.vl.json ├── area_density_facet.vl.json ├── area_density_stacked.vl.json ├── area_density_stacked_fold.vl.json ├── area_gradient.vl.json ├── area_horizon.vl.json ├── area_overlay.vl.json ├── area_overlay_with_y2.vl.json ├── area_params.vl.json ├── area_temperature_range.vl.json ├── area_vertical.vl.json ├── argmin_spaces.vl.json ├── bar-chart.vg.json ├── bar.vl.json ├── bar_1d.vl.json ├── bar_1d_binned.vl.json ├── bar_1d_rangestep_config.vl.json ├── bar_1d_step_config.vl.json ├── bar_aggregate.vl.json ├── bar_aggregate_count.vl.json ├── bar_aggregate_format.vl.json ├── bar_aggregate_size.vl.json ├── bar_aggregate_sort_by_encoding.vl.json ├── bar_aggregate_sort_mean.vl.json ├── bar_aggregate_transform.vl.json ├── bar_aggregate_vertical.vl.json ├── bar_argmax.vl.json ├── bar_argmax_transform.vl.json ├── bar_array_aggregate.vl.json ├── bar_axis_orient.vl.json ├── bar_axis_orient_signal_future.vl.json ├── bar_axis_space_saving.vl.json ├── bar_binned_data.vl.json ├── bar_bullet_expr_bind.vl.json ├── bar_color_disabled_scale.vl.json ├── bar_column_fold.vl.json ├── bar_column_pivot.vl.json ├── bar_config_no_zero.vl.json ├── bar_corner_radius_end.vl.json ├── bar_count_minimap.vl.json ├── bar_custom_sort_full.vl.json ├── bar_custom_sort_partial.vl.json ├── bar_custom_time_domain.vl.json ├── bar_default_tooltip_title_null.vl.json ├── bar_distinct.vl.json ├── bar_diverging_stack_population_pyramid.vl.json ├── bar_diverging_stack_transform.vl.json ├── bar_filter_calc.vl.json ├── bar_fit.vl.json ├── bar_gantt.vl.json ├── bar_gantt_config_no_zero.vl.json ├── bar_grouped.vl.json ├── bar_grouped_custom_padding.vl.json ├── bar_grouped_errorbar.vl.json ├── bar_grouped_facet.vl.json ├── bar_grouped_facet_independent_scale.vl.json ├── bar_grouped_facet_independent_scale_fixed_width.vl.json ├── bar_grouped_fixed_width.vl.json ├── bar_grouped_horizontal.vl.json ├── bar_grouped_label.vl.json ├── bar_grouped_repeated.vl.json ├── bar_grouped_stacked.vl.json ├── bar_grouped_step_for_offset.vl.json ├── bar_grouped_step_for_position.vl.json ├── bar_grouped_thin.vl.json ├── bar_heatlane.vl.json ├── bar_layered_transparent.vl.json ├── bar_layered_weather.vl.json ├── bar_month.vl.json ├── bar_month_band.vl.json ├── bar_month_band_config.vl.json ├── bar_month_temporal.vl.json ├── bar_month_temporal_initial.vl.json ├── bar_multi_values_per_categories.vl.json ├── bar_negative.vl.json ├── bar_negative_horizontal_label.vl.json ├── bar_params.vl.json ├── bar_params_bound.vl.json ├── bar_percent_of_total.vl.json ├── bar_ranged_not_binned.vl.json ├── bar_size_default.vl.json ├── bar_size_explicit.vl.json ├── bar_size_explicit_bad.vl.json ├── bar_size_fit.vl.json ├── bar_size_rangestep_small.vl.json ├── bar_size_responsive.vl.json ├── bar_size_step_small.vl.json ├── bar_sort_by_count.vl.json ├── bar_swap_axes.vl.json ├── bar_swap_custom.vl.json ├── bar_title.vl.json ├── bar_title_start.vl.json ├── bar_tooltip.vl.json ├── bar_tooltip_aggregate.vl.json ├── bar_tooltip_groupby.vl.json ├── bar_tooltip_multi.vl.json ├── bar_tooltip_title.vl.json ├── bar_x_offset_without_x_broken.vl.json ├── bar_yearmonth.vl.json ├── bar_yearmonth_custom_format.vl.json ├── barley-trellis-plot.vg.json ├── beeswarm-plot.vg.json ├── binned-scatter-plot.vg.json ├── box-plot.vg.json ├── boxplot_1D_horizontal.vl.json ├── boxplot_1D_horizontal_custom_mark.vl.json ├── boxplot_1D_horizontal_explicit.vl.json ├── boxplot_1D_invalid.vl.json ├── boxplot_1D_vertical.vl.json ├── boxplot_2D_horizontal.vl.json ├── boxplot_2D_horizontal_color_size.vl.json ├── boxplot_2D_horizontal_explicit_aggregate.vl.json ├── boxplot_2D_vertical.vl.json ├── boxplot_groupped.vl.json ├── boxplot_minmax_2D_horizontal.vl.json ├── boxplot_minmax_2D_horizontal_custom_midtick_color.vl.json ├── boxplot_minmax_2D_vertical.vl.json ├── boxplot_preaggregated.vl.json ├── boxplot_tooltip_aggregate.vl.json ├── boxplot_tooltip_not_aggregate.vl.json ├── brush_table.vl.json ├── brushing-scatter-plots.vg.json ├── budget-forecasts.vg.json ├── calendar-view.vg.json ├── circle-packing.vg.json ├── circle.vl.json ├── circle_binned.vl.json ├── circle_binned_maxbins_2.vl.json ├── circle_binned_maxbins_20.vl.json ├── circle_binned_maxbins_5.vl.json ├── circle_bubble_health_income.vl.json ├── circle_custom_tick_labels.vl.json ├── circle_flatten.vl.json ├── circle_github_punchcard.vl.json ├── circle_labelangle_orient_signal.vl.json ├── circle_labelangle_orient_signal_future.vl.json ├── circle_natural_disasters.vl.json ├── circle_opacity.vl.json ├── circle_scale_quantile.vl.json ├── circle_scale_quantize.vl.json ├── circle_scale_threshold.vl.json ├── circle_wilkinson_dotplot.vl.json ├── circle_wilkinson_dotplot_stacked.vl.json ├── clock.vg.json ├── concat_bar_layer_circle.vl.json ├── concat_bar_scales_discretize.vl.json ├── concat_bar_scales_discretize_2_cols.vl.json ├── concat_hover.vl.json ├── concat_hover_filter.vl.json ├── concat_layer_voyager_result.vl.json ├── concat_layer_voyager_result_future.vl.json ├── concat_marginal_histograms.vl.json ├── concat_population_pyramid.vl.json ├── concat_weather.vl.json ├── config_numberFormatType_test.vl.json ├── connected-scatter-plot.vg.json ├── connected_scatterplot.vl.json ├── contour-plot.vg.json ├── county-unemployment.vg.json ├── crossfilter-flights.vg.json ├── data │ ├── 7zip.png │ ├── airports.csv │ ├── annual-precip.json │ ├── anscombe.json │ ├── barley.json │ ├── birdstrikes.csv │ ├── birdstrikes.json │ ├── budget.json │ ├── budgets.json │ ├── burtin.json │ ├── cars.json │ ├── climate.json │ ├── co2-concentration.csv │ ├── countries.json │ ├── crimea.json │ ├── disasters.csv │ ├── driving.json │ ├── earthquakes.json │ ├── ffox.png │ ├── flare-dependencies.json │ ├── flare.json │ ├── flights-10k.json │ ├── flights-200k.arrow │ ├── flights-200k.json │ ├── flights-20k.json │ ├── flights-2k.json │ ├── flights-3m.csv │ ├── flights-5k.json │ ├── flights-airport.csv │ ├── football.json │ ├── gapminder-health-income.csv │ ├── gapminder.json │ ├── gimp.png │ ├── github.csv │ ├── graticule.json │ ├── income.json │ ├── iowa-electricity.csv │ ├── iris.json │ ├── jobs.json │ ├── la-riots.csv │ ├── londonBoroughs.json │ ├── londonCentroids.json │ ├── londonTubeLines.json │ ├── lookup_groups.csv │ ├── lookup_people.csv │ ├── miserables.json │ ├── monarchs.json │ ├── movies.json │ ├── normal-2d.json │ ├── obesity.json │ ├── ohlc.json │ ├── penguins.json │ ├── platformer-terrain.json │ ├── points.json │ ├── political-contributions.json │ ├── population.json │ ├── population_engineers_hurricanes.csv │ ├── seattle-temps.csv │ ├── seattle-weather-hourly-normals.csv │ ├── seattle-weather.csv │ ├── sf-temps.csv │ ├── sp500-2000.csv │ ├── sp500.csv │ ├── stocks.csv │ ├── udistrict.json │ ├── unemployment-across-industries.json │ ├── unemployment.tsv │ ├── uniform-2d.json │ ├── us-10m.json │ ├── us-employment.csv │ ├── us-state-capitals.json │ ├── visual-vocabulary-categories.csv │ ├── visual-vocabulary-categories.json │ ├── visual-vocabulary-charts.csv │ ├── visual-vocabulary-charts.json │ ├── volcano.json │ ├── weather.csv │ ├── weather.json │ ├── weball26.json │ ├── wheat.json │ ├── windvectors.csv │ ├── world-110m.json │ └── zipcodes.csv ├── density-heatmaps.vg.json ├── distortion-comparison.vg.json ├── donut-chart.vg.json ├── dorling-cartogram.vg.json ├── dot-plot.vg.json ├── earthquakes.vg.json ├── edge-bundling.vg.json ├── embedded_csv.vl.json ├── error-bars.vg.json ├── errorband_2d_horizontal_color_encoding.vl.json ├── errorband_2d_vertical_borders.vl.json ├── errorband_tooltip.vl.json ├── errorbar_2d_vertical_ticks.vl.json ├── errorbar_aggregate.vl.json ├── errorbar_horizontal_aggregate.vl.json ├── errorbar_tooltip.vl.json ├── facet_bullet.vl.json ├── facet_column_facet_column_point_future.vl.json ├── facet_column_facet_row_point_future.vl.json ├── facet_cross_independent_scale.vl.json ├── facet_custom.vl.json ├── facet_custom_header.vl.json ├── facet_grid_bar.vl.json ├── facet_independent_scale.vl.json ├── facet_independent_scale_layer_broken.vl.json ├── facet_row_facet_row_point_future.vl.json ├── falkensee-population.vg.json ├── flight-passengers.vg.json ├── force-directed-layout.vg.json ├── geo_choropleth.vl.json ├── geo_circle.vl.json ├── geo_constant_value.vl.json ├── geo_custom_projection.vl.json ├── geo_graticule.vl.json ├── geo_graticule_object.vl.json ├── geo_layer.vl.json ├── geo_layer_line_london.vl.json ├── geo_layer_multi.vl.json ├── geo_line.vl.json ├── geo_params_projections.vl.json ├── geo_point.vl.json ├── geo_repeat.vl.json ├── geo_rule.vl.json ├── geo_sphere.vl.json ├── geo_text.vl.json ├── geo_trellis.vl.json ├── global-development.vg.json ├── grouped-bar-chart.vg.json ├── hconcat_weather.vl.json ├── heatmap.vg.json ├── histogram-null-values.vg.json ├── histogram.vg.json ├── histogram.vl.json ├── histogram_bin_change.vl.json ├── histogram_bin_spacing.vl.json ├── histogram_bin_spacing_reverse.vl.json ├── histogram_bin_transform.vl.json ├── histogram_invalid_null.vl.json ├── histogram_log.vl.json ├── histogram_no_spacing.vl.json ├── histogram_nonlinear.vl.json ├── histogram_ordinal.vl.json ├── histogram_ordinal_sort.vl.json ├── histogram_rel_freq.vl.json ├── histogram_reverse.vl.json ├── horizon-graph.vg.json ├── hypothetical-outcome-plots.vg.json ├── interactive-bar-chart.vl.json ├── interactive-legend.vg.json ├── interactive_area_brush.vl.json ├── interactive_bar_select_highlight.vl.json ├── interactive_bin_extent.vl.json ├── interactive_bin_extent_bottom.vl.json ├── interactive_brush.vl.json ├── interactive_concat_layer.vl.json ├── interactive_dashboard_europe_pop.vl.json ├── interactive_geo_earthquakes.vl.json ├── interactive_global_development.vl.json ├── interactive_histogram_full_height_hover.vl.json ├── interactive_index_chart.vl.json ├── interactive_layered_crossfilter.vl.json ├── interactive_layered_crossfilter_discrete.vl.json ├── interactive_legend.vl.json ├── interactive_legend_dblclick.vl.json ├── interactive_line_brush_cursor.vl.json ├── interactive_line_hover.vl.json ├── interactive_line_point_hover.vl.json ├── interactive_multi_line_label.vl.json ├── interactive_multi_line_pivot_tooltip.vl.json ├── interactive_multi_line_tooltip.vl.json ├── interactive_overview_detail.vl.json ├── interactive_paintbrush.vl.json ├── interactive_paintbrush_color.vl.json ├── interactive_paintbrush_color_nearest.vl.json ├── interactive_paintbrush_interval.vl.json ├── interactive_paintbrush_simple_all.vl.json ├── interactive_paintbrush_simple_false.vl.json ├── interactive_paintbrush_simple_none.vl.json ├── interactive_paintbrush_simple_true.vl.json ├── interactive_panzoom_splom.vl.json ├── interactive_panzoom_vconcat_shared.vl.json ├── interactive_point_init.vl.json ├── interactive_query_widgets.vl.json ├── interactive_seattle_weather.vl.json ├── interactive_splom.vl.json ├── interactive_stocks_nearest_index.vl.json ├── isotype_bar_chart.vl.json ├── isotype_bar_chart_emoji.vl.json ├── isotype_grid.vl.json ├── job-voyager.vg.json ├── joinaggregate_mean_difference.vl.json ├── joinaggregate_mean_difference_by_year.vl.json ├── joinaggregate_percent_of_total.vl.json ├── joinaggregate_residual_graph.vl.json ├── labeled-scatter-plot.vg.json ├── layer_arc_label.vl.json ├── layer_bar_annotations.vl.json ├── layer_bar_circle_grouped.vl.json ├── layer_bar_dual_axis.vl.json ├── layer_bar_dual_axis_minmax.vl.json ├── layer_bar_fruit.vl.json ├── layer_bar_grouped_line_ungrouped.vl.json ├── layer_bar_labels.vl.json ├── layer_bar_labels_grey.vl.json ├── layer_bar_labels_style.vl.json ├── layer_bar_line.vl.json ├── layer_bar_line_union.vl.json ├── layer_bar_month.vl.json ├── layer_bar_tick_datum_grouped.vl.json ├── layer_boxplot_circle.vl.json ├── layer_candlestick.vl.json ├── layer_circle_independent_color.vl.json ├── layer_color_legend_left.vl.json ├── layer_cumulative_histogram.vl.json ├── layer_dual_axis.vl.json ├── layer_falkensee.vl.json ├── layer_histogram.vl.json ├── layer_histogram_global_mean.vl.json ├── layer_likert.vl.json ├── layer_line_co2_concentration.vl.json ├── layer_line_color_rule.vl.json ├── layer_line_datum_rule.vl.json ├── layer_line_datum_rule_datetime.vl.json ├── layer_line_errorband_2d_horizontal_borders_strokedash.vl.json ├── layer_line_errorband_ci.vl.json ├── layer_line_errorband_pre_aggregated.vl.json ├── layer_line_mean_point_raw.vl.json ├── layer_line_rolling_mean_point_raw.vl.json ├── layer_line_window.vl.json ├── layer_overlay.vl.json ├── layer_point_errorbar_1d_horizontal.vl.json ├── layer_point_errorbar_1d_vertical.vl.json ├── layer_point_errorbar_2d_horizontal.vl.json ├── layer_point_errorbar_2d_horizontal_ci.vl.json ├── layer_point_errorbar_2d_horizontal_color_encoding.vl.json ├── layer_point_errorbar_2d_horizontal_custom_ticks.vl.json ├── layer_point_errorbar_2d_horizontal_iqr.vl.json ├── layer_point_errorbar_2d_horizontal_stdev.vl.json ├── layer_point_errorbar_2d_vertical.vl.json ├── layer_point_errorbar_ci.vl.json ├── layer_point_errorbar_pre_aggregated_asymmetric_error.vl.json ├── layer_point_errorbar_pre_aggregated_symmetric_error.vl.json ├── layer_point_errorbar_pre_aggregated_upper_lower.vl.json ├── layer_point_errorbar_stdev.vl.json ├── layer_point_line_loess.vl.json ├── layer_point_line_regression.vl.json ├── layer_precipitation_mean.vl.json ├── layer_ranged_dot.vl.json ├── layer_rect_extent.vl.json ├── layer_scatter_errorband_1D_stdev_global_mean.vl.json ├── layer_scatter_errorband_1d_stdev.vl.json ├── layer_single_color.vl.json ├── layer_text_heatmap.vl.json ├── layer_text_heatmap_joinaggregate.vl.json ├── layer_timeunit_rect.vl.json ├── line-chart.vg.json ├── line.vl.json ├── line_bump.vl.json ├── line_calculate.vl.json ├── line_color.vl.json ├── line_color_binned.vl.json ├── line_color_halo.vl.json ├── line_color_label.vl.json ├── line_concat_facet.vl.json ├── line_conditional_axis.vl.json ├── line_conditional_axis_config.vl.json ├── line_conditional_grid_dash.vl.json ├── line_conditional_grid_dash_config.vl.json ├── line_dashed_part.vl.json ├── line_detail.vl.json ├── line_domainminmax.vl.json ├── line_encoding_impute_keyvals.vl.json ├── line_encoding_impute_keyvals_sequence.vl.json ├── line_impute_frame.vl.json ├── line_impute_keyvals.vl.json ├── line_impute_method.vl.json ├── line_impute_transform_frame.vl.json ├── line_impute_transform_value.vl.json ├── line_impute_value.vl.json ├── line_inside_domain_using_clip.vl.json ├── line_inside_domain_using_transform.vl.json ├── line_max_year.vl.json ├── line_mean_month.vl.json ├── line_mean_year.vl.json ├── line_monotone.vl.json ├── line_month.vl.json ├── line_month_center_band.vl.json ├── line_outside_domain.vl.json ├── line_overlay.vl.json ├── line_overlay_stroked.vl.json ├── line_params.vl.json ├── line_quarter_legend.vl.json ├── line_shape_overlay.vl.json ├── line_skip_invalid.vl.json ├── line_skip_invalid_mid.vl.json ├── line_skip_invalid_mid_cap_square.vl.json ├── line_skip_invalid_mid_overlay.vl.json ├── line_slope.vl.json ├── line_sort_axis.vl.json ├── line_step.vl.json ├── line_strokedash.vl.json ├── line_timestamp_domain.vl.json ├── line_timeunit_transform.vl.json ├── loess-regression.vg.json ├── lookup.vl.json ├── nested-bar-chart.vg.json ├── nested_concat_align.vl.json ├── overview-plus-detail.vg.json ├── packed-bubble-chart.vg.json ├── pacman.vg.json ├── parallel-coordinates.vg.json ├── parallel_coordinate.vl.json ├── param_expr.vl.json ├── pi-monte-carlo.vg.json ├── pie-chart.vg.json ├── platformer.vg.json ├── point_1d.vl.json ├── point_1d_array.vl.json ├── point_2d.vl.json ├── point_2d_aggregate.vl.json ├── point_2d_array.vl.json ├── point_2d_array_named.vl.json ├── point_2d_config_no_zero.vl.json ├── point_2d_tooltip.vl.json ├── point_2d_tooltip_data.vl.json ├── point_aggregate_detail.vl.json ├── point_angle_windvector.vl.json ├── point_background.vl.json ├── point_binned_color.vl.json ├── point_binned_opacity.vl.json ├── point_binned_size.vl.json ├── point_bubble.vl.json ├── point_color.vl.json ├── point_color_custom.vl.json ├── point_color_ordinal.vl.json ├── point_color_quantitative.vl.json ├── point_color_shape_constant.vl.json ├── point_color_with_shape.vl.json ├── point_colorramp_size.vl.json ├── point_diverging_color.vl.json ├── point_dot_timeunit_color.vl.json ├── point_filled.vl.json ├── point_grouped.vl.json ├── point_href.vl.json ├── point_invalid_color.vl.json ├── point_log.vl.json ├── point_no_axis_domain_grid.vl.json ├── point_offset_random.vl.json ├── point_ordinal_bin_offset_random.vl.json ├── point_ordinal_color.vl.json ├── point_overlap.vl.json ├── point_params.vl.json ├── point_quantile_quantile.vl.json ├── point_scale_range_field.vl.json ├── point_shape_custom.vl.json ├── point_tooltip.vl.json ├── population-pyramid.vg.json ├── probability-density.vg.json ├── projections.vg.json ├── quantile-dot-plot.vg.json ├── quantile-quantile-plot.vg.json ├── radar-chart.vg.json ├── radial-plot.vg.json ├── radial-tree-layout.vg.json ├── rect_binned_heatmap.vl.json ├── rect_heatmap.vl.json ├── rect_heatmap_weather.vl.json ├── rect_lasagna.vl.json ├── rect_lasagna_future.vl.json ├── rect_mosaic_labelled.vl.json ├── rect_mosaic_labelled_with_offset.vl.json ├── rect_mosaic_simple.vl.json ├── rect_params.vl.json ├── regression.vg.json ├── reorderable-matrix.vg.json ├── repeat_child_layer.vl.json ├── repeat_histogram.vl.json ├── repeat_histogram_autosize.vl.json ├── repeat_histogram_flights.vl.json ├── repeat_independent_colors.vl.json ├── repeat_layer.vl.json ├── repeat_line_weather.vl.json ├── repeat_splom.vl.json ├── repeat_splom_cars.vl.json ├── repeat_splom_iris.vl.json ├── rule_color_mean.vl.json ├── rule_extent.vl.json ├── rule_params.vl.json ├── sample_scatterplot.vl.json ├── scatter-plot-null-values.vg.json ├── scatter-plot.vg.json ├── scatter_image.vl.json ├── selection_bind_cylyr.vl.json ├── selection_bind_origin.vl.json ├── selection_brush_timeunit.vl.json ├── selection_clear_brush.vl.json ├── selection_composition_and.vl.json ├── selection_composition_or.vl.json ├── selection_concat.vl.json ├── selection_filter.vl.json ├── selection_filter_composition.vl.json ├── selection_filter_false.vl.json ├── selection_filter_true.vl.json ├── selection_heatmap.vl.json ├── selection_insert.vl.json ├── selection_interval_mark_style.vl.json ├── selection_layer.json ├── selection_layer_bar_month.vl.json ├── selection_multi_condition.vl.json ├── selection_project_binned_interval.vl.json ├── selection_project_interval.vl.json ├── selection_project_interval_x.vl.json ├── selection_project_interval_x_y.vl.json ├── selection_project_interval_y.vl.json ├── selection_project_multi.vl.json ├── selection_project_multi_cylinders.vl.json ├── selection_project_multi_cylinders_origin.vl.json ├── selection_project_multi_origin.vl.json ├── selection_project_single.vl.json ├── selection_project_single_cylinders.vl.json ├── selection_project_single_cylinders_origin.vl.json ├── selection_project_single_origin.vl.json ├── selection_resolution_global.vl.json ├── selection_resolution_intersect.vl.json ├── selection_resolution_union.vl.json ├── selection_toggle_altKey.vl.json ├── selection_toggle_altKey_shiftKey.vl.json ├── selection_toggle_shiftKey.vl.json ├── selection_translate_brush_drag.vl.json ├── selection_translate_brush_shift-drag.vl.json ├── selection_translate_scatterplot_drag.vl.json ├── selection_translate_scatterplot_shift-drag.vl.json ├── selection_type_interval.vl.json ├── selection_type_interval_invert.vl.json ├── selection_type_multi.vl.json ├── selection_type_point.vl.json ├── selection_type_single.vl.json ├── selection_type_single_dblclick.vl.json ├── selection_type_single_mouseover.vl.json ├── selection_zoom_brush_shift-wheel.vl.json ├── selection_zoom_brush_wheel.vl.json ├── selection_zoom_scatterplot_shift-wheel.vl.json ├── selection_zoom_scatterplot_wheel.vl.json ├── sequence_line.vl.json ├── sequence_line_fold.vl.json ├── square.vl.json ├── stacked-area-chart.vg.json ├── stacked-bar-chart.vg.json ├── stacked_area.vl.json ├── stacked_area_normalize.vl.json ├── stacked_area_ordinal.vl.json ├── stacked_area_overlay.vl.json ├── stacked_area_stream.vl.json ├── stacked_bar_1d.vl.json ├── stacked_bar_count.vl.json ├── stacked_bar_count_corner_radius_config.vl.json ├── stacked_bar_count_corner_radius_mark.vl.json ├── stacked_bar_count_corner_radius_mark_x.vl.json ├── stacked_bar_count_corner_radius_stroke.vl.json ├── stacked_bar_h.vl.json ├── stacked_bar_h_normalized_labeled.vl.json ├── stacked_bar_h_order.vl.json ├── stacked_bar_h_order_custom.vl.json ├── stacked_bar_normalize.vl.json ├── stacked_bar_population.vl.json ├── stacked_bar_population_transform.vl.json ├── stacked_bar_size.vl.json ├── stacked_bar_sum_opacity.vl.json ├── stacked_bar_unaggregate.vl.json ├── stacked_bar_v.vl.json ├── stacked_bar_weather.vl.json ├── stock-index-chart.vg.json ├── sunburst.vg.json ├── test_aggregate_nested.vl.json ├── test_embedded_csv.vl.json ├── test_field_with_spaces.vl.json ├── test_minimal.json ├── test_single_point_color.vl.json ├── test_subobject.vl.json ├── test_subobject_missing.vl.json ├── test_subobject_nested.vl.json ├── text_format.vl.json ├── text_params.vl.json ├── text_scatterplot_colored.vl.json ├── text_tooltip_image.vl.json ├── tick_dot.vl.json ├── tick_dot_thickness.vl.json ├── tick_grouped.vl.json ├── tick_sort.vl.json ├── tick_strip.vl.json ├── tick_strip_tick_band.vl.json ├── time-units.vg.json ├── time_custom_step.vl.json ├── time_output_utc_scale.vl.json ├── time_output_utc_timeunit.vl.json ├── time_parse_local.vl.json ├── time_parse_utc.vl.json ├── time_parse_utc_format.vl.json ├── timelines.vg.json ├── top-k-plot-with-others.vg.json ├── top-k-plot.vg.json ├── trail_color.vl.json ├── trail_comet.vl.json ├── tree-layout.vg.json ├── treemap.vg.json ├── trellis_anscombe.vl.json ├── trellis_area.vl.json ├── trellis_area_seattle.vl.json ├── trellis_area_sort_array.vl.json ├── trellis_bar.vl.json ├── trellis_bar_histogram.vl.json ├── trellis_bar_histogram_label_rotated.vl.json ├── trellis_bar_no_header.vl.json ├── trellis_barley.vl.json ├── trellis_barley_independent.vl.json ├── trellis_barley_layer_median.vl.json ├── trellis_column_year.vl.json ├── trellis_cross_sort.vl.json ├── trellis_cross_sort_array.vl.json ├── trellis_line_quarter.vl.json ├── trellis_row_column.vl.json ├── trellis_scatter.vl.json ├── trellis_scatter_binned_row.vl.json ├── trellis_scatter_small.vl.json ├── trellis_selections.vl.json ├── trellis_stacked_bar.vl.json ├── u-district-cuisine.vg.json ├── vconcat_flatten.vl.json ├── vconcat_weather.vl.json ├── violin-plot.vg.json ├── visual-vocabulary │ ├── arc.vg.json │ ├── area-chart.vg.json │ ├── bar.vg.json │ ├── barcode-plot.vg.json │ ├── basic-choropleth.vg.json │ ├── boxplot.vg.json │ ├── bubble.vg.json │ ├── bullet.vg.json │ ├── bump.vg.json │ ├── calendar-heatmap.vg.json │ ├── candlestick.vg.json │ ├── chord.vg.json │ ├── circle-timeline.vg.json │ ├── column-2.vg.json │ ├── column-line-timeline-2.vg.json │ ├── column-line-timeline.vg.json │ ├── column.vg.json │ ├── connected-scatterplot-2.vg.json │ ├── connected-scatterplot.vg.json │ ├── contour-map.vg.json │ ├── cumulative-curve.vg.json │ ├── data │ │ ├── area-chart.csv │ │ ├── barcode-plot.csv │ │ ├── boxplot.csv │ │ ├── bubble.csv │ │ ├── bullet.csv │ │ ├── bump.csv │ │ ├── calendar-heatmap.csv │ │ ├── candlestick.csv │ │ ├── column-line-timeline.csv │ │ ├── connected-scatterplot.csv │ │ ├── cumulative-curve.csv │ │ ├── diverging-bar.csv │ │ ├── diverging-stacked-bar.csv │ │ ├── dot-plot.csv │ │ ├── dot-strip-plot.csv │ │ ├── fan-chart-projections.csv │ │ ├── frequency-polygons.csv │ │ ├── histogram.csv │ │ ├── marimekko.csv │ │ ├── ordered-bar.csv │ │ ├── ordered-proportional-symbol.csv │ │ ├── paired-column.csv │ │ ├── parallel-coordinates.csv │ │ ├── population-pyramid.csv │ │ ├── priestley-timeline.csv │ │ ├── radar.csv │ │ ├── scatterplot.csv │ │ ├── slope-2.csv │ │ ├── slope.csv │ │ ├── spine.csv │ │ ├── surplus-deficit-filled-line.csv │ │ ├── treemap.csv │ │ ├── us-10m.json │ │ ├── violin-plot.csv │ │ └── xy-heatmap.csv │ ├── diverging-bar.vg.json │ ├── diverging-stacked-bar.vg.json │ ├── donut.vg.json │ ├── dot-density.vg.json │ ├── dot-plot.vg.json │ ├── dot-strip-plot-2.vg.json │ ├── dot-strip-plot.vg.json │ ├── equalised-cartogram.vg.json │ ├── fan-chart-projections.vg.json │ ├── flow-map.vg.json │ ├── frequency-polygons.vg.json │ ├── gridplot.vg.json │ ├── grouped-symbol.vg.json │ ├── heat-map.vg.json │ ├── histogram.vg.json │ ├── isotype.vg.json │ ├── line.vg.json │ ├── lollipop-2.vg.json │ ├── lollipop.vg.json │ ├── marimekko-2.vg.json │ ├── marimekko.vg.json │ ├── network.vg.json │ ├── ordered-bar.vg.json │ ├── ordered-column.vg.json │ ├── ordered-proportional-symbol.vg.json │ ├── paired-bar.vg.json │ ├── paired-column.vg.json │ ├── parallel-coordinates.vg.json │ ├── pie.vg.json │ ├── population-pyramid.vg.json │ ├── priestley-timeline.vg.json │ ├── proportional-symbol-map.vg.json │ ├── proportional-symbol.vg.json │ ├── radar.vg.json │ ├── sankey.vg.json │ ├── scaled-cartogram.vg.json │ ├── scatterplot.vg.json │ ├── seismogram.vg.json │ ├── slope-2.vg.json │ ├── slope.vg.json │ ├── spine.vg.json │ ├── stacked-column.vg.json │ ├── streamgraph.vg.json │ ├── surplus-deficit-filled-line-2.vg.json │ ├── surplus-deficit-filled-line.vg.json │ ├── treemap.vg.json │ ├── venn.vg.json │ ├── vertical-timeline.vg.json │ ├── violin-plot.vg.json │ ├── voronoi.vg.json │ ├── waterfall-2.vg.json │ ├── waterfall.vg.json │ └── xy-heatmap.vg.json ├── volcano-contours.vg.json ├── watch.vg.json ├── waterfall_chart.vl.json ├── weekly-temperature.vg.json ├── wheat-and-wages.vg.json ├── wheat-plot.vg.json ├── wheat_wages.vl.json ├── wind-vectors.vg.json ├── window_cumulative_running_average.vl.json ├── window_mean_difference.vl.json ├── window_mean_difference_by_year.vl.json ├── window_percent_of_total.vl.json ├── window_rank.vl.json ├── window_residual_graph.vl.json ├── window_sum_waterfall_chart.vl.json ├── window_top_k.vl.json ├── window_top_k_others.vl.json ├── word-cloud.vg.json ├── world-map.vg.json ├── zoomable-binned-plot.vg.json ├── zoomable-scatter-plot.vg.json └── zoomable-world-map.vg.json ├── images ├── vega-viewer.png ├── vega-viewer.svg └── visual-vocabulary.svg ├── language-configuration.json ├── package-lock.json ├── package.json ├── src ├── config.ts ├── extension.ts ├── logger.ts ├── preview.manager.ts ├── template.manager.ts ├── test │ ├── runTest.ts │ └── suite │ │ ├── extension.test.ts │ │ └── index.ts └── vega.preview.ts ├── tsconfig.json └── web ├── scripts ├── vega-embed.min.js ├── vega-embed.min.js.map ├── vega-lite.min.js ├── vega-lite.min.js.map ├── vega-viewer.js ├── vega.min.js └── vega.min.js.map ├── styles └── vega-viewer.css ├── vega.lite.vl.json ├── vega.preview.html ├── vega.vg.json └── visual.vocabulary.html /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module" 7 | }, 8 | "plugins": [ 9 | "@typescript-eslint" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/class-name-casing": "warn", 13 | "@typescript-eslint/semi": "warn", 14 | "curly": "warn", 15 | "eqeqeq": "warn", 16 | "no-throw-literal": "warn", 17 | "semi": "off" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set default behavior to automatically normalize line endings. 2 | * text=auto 3 | 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [RandomFractals] 2 | ko_fi: dataPixy 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules 3 | .vscode-test/ 4 | *.vsix 5 | src/test/examples 6 | src/test/vega-examples.ts 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "RandomFractalsInc.vscode-data-preview" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "out": false // set this to true to hide the "out" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "out": true // set this to false to include "out" folder in search results 8 | }, 9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 10 | "typescript.tsc.autoDetect": "off" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "never" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | out/test/** 4 | src/** 5 | docs/images/** 6 | .gitignore 7 | 8 | **/tsconfig.json 9 | **/tslint.json 10 | **/*.map 11 | **/*.ts 12 | -------------------------------------------------------------------------------- /docs/images/vega-viewer-advanced-charts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-advanced-charts.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-boxplot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-boxplot.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-commands.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-contour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-contour.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-contributions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-contributions.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-data-preview-command-setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-data-preview-command-setting.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-data-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-data-preview.png -------------------------------------------------------------------------------- /docs/images/vega-viewer-gistpad-integration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vega-viewer-gistpad-integration.png -------------------------------------------------------------------------------- /docs/images/vscode-vega-viewer-dev-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/docs/images/vscode-vega-viewer-dev-screen.png -------------------------------------------------------------------------------- /examples/arc_donut.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple donut chart with embedded data.", 4 | "data": { 5 | "values": [ 6 | {"category": 1, "value": 4}, 7 | {"category": 2, "value": 6}, 8 | {"category": 3, "value": 10}, 9 | {"category": 4, "value": 3}, 10 | {"category": 5, "value": 7}, 11 | {"category": 6, "value": 8} 12 | ] 13 | }, 14 | "mark": {"type": "arc", "innerRadius": 50}, 15 | "encoding": { 16 | "theta": {"field": "value", "type": "quantitative"}, 17 | "color": {"field": "category", "type": "nominal"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/arc_facet.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "mark": "arc", 5 | "encoding": { 6 | "column": {"field": "year"}, 7 | "theta": {"field": "yield", "type": "quantitative", "aggregate": "sum"}, 8 | "color": {"field": "site", "type": "nominal"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/arc_ordinal_theta.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"dir": "1N", "strength": 1}, 6 | {"dir": "2NE", "strength": 2}, 7 | {"dir": "3E", "strength": 3}, 8 | {"dir": "4SE", "strength": 4}, 9 | {"dir": "5S", "strength": 5}, 10 | {"dir": "6SW", "strength": 6}, 11 | {"dir": "7W", "strength": 7}, 12 | {"dir": "8NW", "strength": 8} 13 | ] 14 | }, 15 | "encoding": { 16 | "theta": {"field": "dir", "type": "ordinal"}, 17 | "radius" : {"field": "strength", "type":"quantitative"}, 18 | "color": {"field": "dir", "type": "nominal"} 19 | }, 20 | "mark": {"type":"arc"} 21 | } 22 | -------------------------------------------------------------------------------- /examples/arc_pie.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple pie chart with embedded data.", 4 | "data": { 5 | "values": [ 6 | {"category": 1, "value": 4}, 7 | {"category": 2, "value": 6}, 8 | {"category": 3, "value": 10}, 9 | {"category": 4, "value": 3}, 10 | {"category": 5, "value": 7}, 11 | {"category": 6, "value": 8} 12 | ] 13 | }, 14 | "mark": "arc", 15 | "encoding": { 16 | "theta": {"field": "value", "type": "quantitative"}, 17 | "color": {"field": "category", "type": "nominal"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/arc_pie_normalize_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Pie Chart with percentage_tooltip", 4 | "data": { 5 | "values": [ 6 | {"category": 1, "value": 4}, 7 | {"category": 2, "value": 6}, 8 | {"category": 3, "value": 10}, 9 | {"category": 4, "value": 3}, 10 | {"category": 5, "value": 7}, 11 | {"category": 6, "value": 8} 12 | ] 13 | }, 14 | "mark": {"type": "arc", "tooltip": true}, 15 | "encoding": { 16 | "theta": {"field": "value", "type": "quantitative", "stack": "normalize"}, 17 | "color": {"field": "category", "type": "nominal"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/arc_radial.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple radial chart with embedded data.", 4 | "data": { 5 | "values": [12, 23, 47, 6, 52, 19] 6 | }, 7 | "layer": [{ 8 | "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"} 9 | },{ 10 | "mark": {"type": "text", "radiusOffset": 10}, 11 | "encoding": { 12 | "text": {"field": "data", "type": "quantitative"} 13 | } 14 | }], 15 | "encoding": { 16 | "theta": {"field": "data", "type": "quantitative", "stack": true}, 17 | "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}}, 18 | "color": {"field": "data", "type": "nominal", "legend": null} 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/area.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 300, 4 | "height": 200, 5 | "data": {"url": "data/unemployment-across-industries.json"}, 6 | "mark": "area", 7 | "encoding": { 8 | "x": { 9 | "timeUnit": "yearmonth", "field": "date", 10 | "axis": {"format": "%Y"} 11 | }, 12 | "y": { 13 | "aggregate": "sum", "field": "count", 14 | "title": "count" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/area_cumulative_freq.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "transform": [{ 5 | "sort": [{"field": "IMDB Rating"}], 6 | "window": [{"op": "count", "field": "count", "as": "Cumulative Count"}], 7 | "frame": [null, 0] 8 | }], 9 | "mark": "area", 10 | "encoding": { 11 | "x": { 12 | "field": "IMDB Rating", 13 | "type": "quantitative" 14 | }, 15 | "y": { 16 | "field": "Cumulative Count", 17 | "type": "quantitative" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/area_density.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/movies.json" 5 | }, 6 | "width": 400, 7 | "height": 100, 8 | "transform":[{ 9 | "density": "IMDB Rating", 10 | "bandwidth": 0.3 11 | }], 12 | "mark": "area", 13 | "encoding": { 14 | "x": { 15 | "field": "value", 16 | "title": "IMDB Rating", 17 | "type": "quantitative" 18 | }, 19 | "y": { 20 | "field": "density", 21 | "type": "quantitative" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/area_density_facet.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "title": "Distribution of Body Mass of Penguins", 4 | "width": 400, 5 | "height": 80, 6 | "data": { 7 | "url": "data/penguins.json" 8 | }, 9 | "mark": "area", 10 | "transform": [ 11 | { 12 | "density": "Body Mass (g)", 13 | "groupby": ["Species"], 14 | "extent": [2500, 6500] 15 | } 16 | ], 17 | "encoding": { 18 | "x": {"field": "value", "type": "quantitative", "title": "Body Mass (g)"}, 19 | "y": {"field": "density", "type": "quantitative", "stack": "zero"}, 20 | "row": {"field": "Species"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/area_density_stacked.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "title": "Distribution of Body Mass of Penguins", 4 | "width": 400, 5 | "height": 80, 6 | "data": { 7 | "url": "data/penguins.json" 8 | }, 9 | "mark": "area", 10 | "transform": [ 11 | { 12 | "density": "Body Mass (g)", 13 | "groupby": ["Species"], 14 | "extent": [2500, 6500] 15 | } 16 | ], 17 | "encoding": { 18 | "x": {"field": "value", "type": "quantitative", "title": "Body Mass (g)"}, 19 | "y": {"field": "density", "type": "quantitative", "stack": "zero"}, 20 | "color": {"field": "Species", "type": "nominal"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/area_overlay.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": {"type": "area", "line": true, "point": true}, 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/area_overlay_with_y2.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": {"type": "area", "line": true, "point": true}, 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"}, 10 | "y2": {"datum": 0, "type": "quantitative"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/area_temperature_range.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "title": "Seattle Temperature Range, 2012-2015", 4 | "data": { 5 | "url": "data/seattle-weather.csv" 6 | }, 7 | "width": 600, 8 | "height": 300, 9 | "mark": "area", 10 | "encoding": { 11 | "x": { 12 | "axis": {"format": "%b"}, 13 | "title": "Date", 14 | "field": "date", 15 | "timeUnit": "monthdate" 16 | }, 17 | "y": { 18 | "title": "Daily Temperature Range (C)", 19 | "aggregate": "max", 20 | "field": "temp_max" 21 | }, 22 | "y2": {"aggregate": "min", "field": "temp_min"}, 23 | "opacity": { "value": 0.7 } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/area_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Area chart showing weight of cars over time (vertical).", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": { 6 | "type": "area", 7 | "interpolate": "monotone" 8 | }, 9 | "encoding": { 10 | "x": {"aggregate": "sum", "field": "Weight_in_lbs"}, 11 | "y": {"timeUnit": "year", "field": "Year"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/bar.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_1d.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { "url": "data/population.json"}, 4 | "transform": [{ 5 | "filter": "datum.year == 2000" 6 | }], 7 | "mark": "bar", 8 | "encoding": { 9 | "x": { 10 | "aggregate": "sum", "field": "people", 11 | "title": "population" 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_1d_binned.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/flights-5k.json"}, 4 | "mark": {"type": "bar"}, 5 | "encoding": { 6 | "x": { 7 | "field": "delay", 8 | "type": "quantitative", 9 | "bin": {"maxbins": 100, "minstep": 1}, 10 | "axis": {"title": "delay", "titleAnchor": "start", "format": "d"} 11 | } 12 | }, 13 | "width": 300, 14 | "height": 50, 15 | "config": {"view": {"stroke": null}} 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_1d_rangestep_config.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v3.json", 3 | "data": { "url": "data/population.json"}, 4 | "transform": [{ 5 | "filter": "datum.year == 2000" 6 | }], 7 | "mark": "bar", 8 | "encoding": { 9 | "x": { 10 | "aggregate": "sum", "field": "people", "type": "quantitative", 11 | "axis": {"title": "population"}} 12 | }, 13 | "config": {"scale": {"rangeStep": 21}} 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_1d_step_config.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { "url": "data/population.json"}, 4 | "transform": [{ 5 | "filter": "datum.year == 2000" 6 | }], 7 | "mark": "bar", 8 | "encoding": { 9 | "x": { 10 | "aggregate": "sum", "field": "people", "title": "population" 11 | } 12 | }, 13 | "config": {"view": {"step": 15}} 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart showing the US population distribution of age groups in 2000.", 4 | "height": {"step": 17}, 5 | "data": { "url": "data/population.json"}, 6 | "transform": [{"filter": "datum.year == 2000"}], 7 | "mark": "bar", 8 | "encoding": { 9 | "y": {"field": "age"}, 10 | "x": { 11 | "aggregate": "sum", "field": "people", 12 | "title": "population" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/bar_aggregate_count.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"bin": true, "field": "precipitation"}, 7 | "y": {"aggregate": "count"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_aggregate_format.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart showing the US population distribution of age groups in 2000.", 4 | "data": { "url": "data/population.json"}, 5 | "transform": [{"filter": "datum.year == 2000"}], 6 | "height": {"step": 17}, 7 | "mark": "bar", 8 | "encoding": { 9 | "y": {"field": "age", "type": "ordinal"}, 10 | "x": { 11 | "aggregate": "sum", "field": "people", 12 | "title": "population", 13 | "axis": {"format": ".2e"} 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_aggregate_size.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart showing the US population distribution of age groups in 2000.", 4 | "data": { "url": "data/population.json"}, 5 | "transform": [{ 6 | "filter": "datum.year == 2000" 7 | }], 8 | "width": {"step": 17}, 9 | "mark": "bar", 10 | "encoding": { 11 | "y": { 12 | "aggregate": "sum", "field": "people", 13 | "title": "population" 14 | }, 15 | "x": { 16 | "field": "age", "type": "ordinal" 17 | }, 18 | "size": {"value": 10} 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/bar_aggregate_sort_by_encoding.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart that sorts the y-values by the x-values.", 4 | "data": {"url": "data/population.json"}, 5 | "transform": [{"filter": "datum.year == 2000"}], 6 | "height": {"step": 17}, 7 | "mark": "bar", 8 | "encoding": { 9 | "y": { 10 | "field": "age", 11 | "type": "ordinal", 12 | "sort": "-x" 13 | }, 14 | "x": { 15 | "aggregate": "sum", 16 | "field": "people", 17 | "title": "population" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/bar_aggregate_sort_mean.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart that sorts the y-values by the x-values.", 4 | "data": {"url": "data/population.json"}, 5 | "transform": [{"filter": "datum.year == 2000"}], 6 | "mark": "bar", 7 | "encoding": { 8 | "y": { 9 | "field": "age", 10 | "type": "ordinal", 11 | "sort": {"op": "sum", "field": "people"} 12 | }, 13 | "x": { 14 | "aggregate": "sum", 15 | "field": "people", 16 | "title": "population" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/bar_aggregate_transform.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { "url": "data/cars.json" }, 4 | "transform": [ 5 | { 6 | "aggregate": [{ 7 | "op": "mean", 8 | "field": "Acceleration", 9 | "as": "mean_acc" 10 | }], 11 | "groupby": ["Cylinders"] 12 | } 13 | ], 14 | "mark": "bar", 15 | "encoding": { 16 | "x": { "field": "Cylinders", "type": "ordinal" }, 17 | "y": { "field": "mean_acc", "type": "quantitative" } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/bar_aggregate_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"field": "Cylinders"}, 7 | "y": {"aggregate": "mean", "field": "Acceleration"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_argmax.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "The production budget of the movie that has the highest US Gross in each major genre.", 4 | "data": {"url": "data/movies.json"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": { 8 | "aggregate": {"argmax": "US Gross"}, 9 | "field": "Production Budget", 10 | "type": "quantitative" 11 | }, 12 | "y": {"field": "Major Genre", "type": "nominal"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_argmax_transform.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "The production budget of the movie that has the highest US Gross in each major genre.", 4 | "data": {"url": "data/movies.json"}, 5 | "transform": [{ 6 | "aggregate": [{ 7 | "op": "argmax", 8 | "field": "US Gross", 9 | "as": "argmax_US_Gross" 10 | }], 11 | "groupby": ["Major Genre"] 12 | }], 13 | "mark": "bar", 14 | "encoding": { 15 | "x": {"field": "argmax_US_Gross['Production Budget']", "type": "quantitative"}, 16 | "y": {"field": "Major Genre", "type": "nominal"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/bar_array_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "bar", 11 | "encoding": { 12 | "x": {"field": "a", "type": "nominal"}, 13 | "y": {"aggregate": "average", "field": "b", "type": "quantitative"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/bar_column_fold.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"country": "USA", "gold": 10, "silver": 20}, 6 | {"country": "Canada", "gold": 7, "silver": 26} 7 | ] 8 | }, 9 | "transform": [{"fold": ["gold", "silver"]}], 10 | "mark": "bar", 11 | "encoding": { 12 | "column": {"field": "key", "type": "nominal"}, 13 | "x": {"field": "country", "type": "nominal"}, 14 | "y": {"field": "value", "type": "quantitative"}, 15 | "color": {"field": "country", "type": "nominal"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_config_no_zero.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | }, 16 | "config": { "scale": { "zero": false } } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_corner_radius_end.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with rounded corners at the end of the bar.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": {"type": "bar", "cornerRadiusEnd": 4}, 12 | "encoding": { 13 | "x": {"field": "a", "type": "ordinal"}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_custom_sort_full.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43} 6 | ] 7 | }, 8 | "mark": "bar", 9 | "encoding": { 10 | "x": {"field": "a", "type": "ordinal", "sort": ["B", "A", "C"]}, 11 | "y": {"field": "b", "type": "quantitative"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/bar_custom_sort_partial.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 6 | {"a": "Z", "b": 91}, {"a": "Y", "b": 81}, {"a": "X", "b": 53} 7 | ] 8 | }, 9 | "mark": "bar", 10 | "encoding": { 11 | "x": {"field": "a", "type": "ordinal", "sort": ["B", "A", "C"]}, 12 | "y": {"field": "b", "type": "quantitative"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_custom_time_domain.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Customizing time scale domain.", 4 | "data": { 5 | "values": [ 6 | {"a": "December 17, 1995 03:00:00", "b": 28}, 7 | {"a": "December 17, 1995 09:00:00", "b": 30}, 8 | {"a": "December 17, 1995 15:00:00", "b": 30} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": { 14 | "timeUnit": "hours", 15 | "field": "a", 16 | "scale": { 17 | "domain": [{"hours": 0}, {"hours": 24}] 18 | } 19 | }, 20 | "y": {"field": "b", "type": "quantitative"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/bar_default_tooltip_title_null.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Field definition's title is applied to both axis title and tooltip's field title. Meanwhile, axis.title is specific to axis.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": {"type": "bar", "tooltip": true}, 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal", "title": ""}, 14 | "y": {"field": "b", "type": "quantitative", "axis": {"title": null}} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_distinct.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"field": "Origin"}, 7 | "y": {"aggregate": "distinct", "field": "Name"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_filter_calc.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data that uses a filter and calculate.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, 7 | {"a": "B", "b": 55}, 8 | {"a": "C", "b": 43}, 9 | {"a": "G", "b": 19}, 10 | {"a": "H", "b": 87}, 11 | {"a": "I", "b": 52}, 12 | {"a": "D", "b": 91}, 13 | {"a": "E", "b": 81}, 14 | {"a": "F", "b": 53} 15 | ] 16 | }, 17 | "transform": [ 18 | {"calculate": "2*datum.b", "as": "b2"}, 19 | {"filter": "datum.b2 > 60"} 20 | ], 21 | "mark": "bar", 22 | "encoding": { 23 | "y": {"field": "b2", "type": "quantitative"}, 24 | "x": {"field": "a", "type": "ordinal"} 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/bar_fit.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data that fits exactly into 300px width.", 4 | "width": 300, 5 | "autosize": { 6 | "type": "fit", 7 | "contains": "padding" 8 | }, 9 | "data": { 10 | "values": [ 11 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 12 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 13 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 14 | ] 15 | }, 16 | "mark": "bar", 17 | "encoding": { 18 | "x": {"field": "a", "type": "ordinal"}, 19 | "y": {"field": "b", "type": "quantitative"} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/bar_gantt.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with ranged data (aka Gantt Chart).", 4 | "data": { 5 | "values": [ 6 | {"task": "A", "start": 1, "end": 3}, 7 | {"task": "B", "start": 3, "end": 8}, 8 | {"task": "C", "start": 8, "end": 10} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "y": {"field": "task", "type": "ordinal"}, 14 | "x": {"field": "start", "type": "quantitative"}, 15 | "x2": {"field": "end"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_gantt_config_no_zero.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with ranged data (aka Gantt Chart).", 4 | "data": { 5 | "values": [ 6 | {"task": "A", "start": 1, "end": 3}, 7 | {"task": "B", "start": 3, "end": 8}, 8 | {"task": "C", "start": 8, "end": 10} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "y": {"field": "task", "type": "ordinal"}, 14 | "x": {"field": "start", "type": "quantitative"}, 15 | "x2": {"field": "end"} 16 | }, 17 | "config": { "scale": { "zero": false } } 18 | } 19 | -------------------------------------------------------------------------------- /examples/bar_grouped_repeated.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/movies.json" 5 | }, 6 | "repeat": {"layer": ["Worldwide Gross", "US Gross"]}, 7 | "spec": { 8 | "mark": "bar", 9 | "encoding": { 10 | "x": { 11 | "field": "Major Genre", 12 | "type": "nominal" 13 | }, 14 | "y": { 15 | "aggregate": "sum", 16 | "field": {"repeat": "layer"}, 17 | "type": "quantitative", 18 | "title": "Total Gross" 19 | }, 20 | "color": {"datum": {"repeat": "layer"}, "title": "Gross"}, 21 | "xOffset": {"datum": {"repeat": "layer"}} 22 | } 23 | }, 24 | "config": { 25 | "mark": {"invalid": null} 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/bar_grouped_stacked.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"field": "Cylinders", "type": "nominal"}, 7 | "xOffset": {"field": "Origin", "type": "nominal"}, 8 | "y": {"aggregate": "sum", "field": "Weight_in_lbs", "type": "quantitative"}, 9 | "color": {"timeUnit": "year", "field": "Year", "type": "nominal", "scale": {"scheme": "category20"}} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/bar_grouped_thin.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "width": 500, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": {"field": "Director", "type": "nominal"}, 8 | "xOffset": {"field": "Title", "type": "nominal"}, 9 | "y": { 10 | "aggregate": "mean", 11 | "field": "Rotten Tomatoes Rating", 12 | "type": "quantitative" 13 | }, 14 | "color": { 15 | "condition": { 16 | "test": "datum['IMDB Rating'] === null || datum['Rotten Tomatoes Rating'] === null", 17 | "value": "#aaa" 18 | } 19 | } 20 | }, 21 | "config": {"mark": {"invalid": null}} 22 | } 23 | -------------------------------------------------------------------------------- /examples/bar_month.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date", "type": "ordinal"}, 7 | "y": {"aggregate": "mean", "field": "precipitation"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_month_band.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": {"type": "bar", "width": {"band": 0.7}}, 5 | "encoding": { 6 | "x": { 7 | "timeUnit": "month", 8 | "field": "date" 9 | }, 10 | "y": { 11 | "aggregate": "mean", 12 | "field": "precipitation" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/bar_month_band_config.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "timeUnit": "month", 8 | "field": "date" 9 | }, 10 | "y": { 11 | "aggregate": "mean", 12 | "field": "precipitation" 13 | } 14 | }, 15 | "config": { 16 | "mark": { 17 | "timeUnitBandSize": 0.7 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/bar_month_temporal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date", "type": "temporal"}, 7 | "y": {"aggregate": "mean", "field": "precipitation"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_month_temporal_initial.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Using `labelExpr` to show only initial letters of month names.", 4 | "data": {"url": "data/seattle-weather.csv"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "month", 9 | "field": "date", 10 | "axis": { 11 | "labelAlign": "left", 12 | "labelExpr": "datum.label[0]" 13 | } 14 | }, 15 | "y": {"aggregate": "mean", "field": "precipitation"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_multi_values_per_categories.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "background": "white", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "A", "b": 12}, {"a": "B", "b": 55}, 7 | {"a": "C", "b": 43}, {"a": "D", "b": 91}, {"a": "E", "b": 81}, 8 | {"a": "F", "b": 53}, {"a": "F", "b": 7}, {"a": "G", "b": 21}, 9 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 10 | ] 11 | }, 12 | "mark": "bar", 13 | "encoding": { 14 | "x": {"field": "a", "type": "nominal"}, 15 | "y": {"field": "b", "type": "quantitative", "stack": true}, 16 | "fill": {"value": "steelblue"}, 17 | "stroke": {"value": "white"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/bar_params.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data.", 4 | "params": [ 5 | { "name": "cornerRadius", "value": 5} 6 | ], 7 | "data": { 8 | "values": [ 9 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 10 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 11 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 12 | ] 13 | }, 14 | "mark": { 15 | "type": "bar", 16 | "cornerRadius": {"expr": "cornerRadius"} 17 | }, 18 | "encoding": { 19 | "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}}, 20 | "y": {"field": "b", "type": "quantitative"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/bar_ranged_not_binned.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | { "b": 28, "b2": 0}, { "b": 55, "b2": 0}, { "b": 43, "b2": 0}, 6 | { "b": 91, "b2": 0}, { "b": 81, "b2": 0}, { "b": 53, "b2": 0}, 7 | { "b": 19, "b2": 0}, { "b": 87, "b2": 0}, { "b": 52, "b2": 0} 8 | ] 9 | }, 10 | "mark": {"type": "bar"}, 11 | "encoding": { 12 | "x": {"field": "b", "type": "quantitative"}, 13 | "y": {"field": "b", "type": "quantitative"}, 14 | "y2": {"field": "b2"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_size_default.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"field": "Origin"}, 7 | "y": {"aggregate": "count"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_size_explicit.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v3.json", 3 | "width": 120, 4 | "height": 120, 5 | "data": {"url": "data/cars.json"}, 6 | "mark": "bar", 7 | "encoding": { 8 | "x": { 9 | "field": "Origin", 10 | "type": "nominal" 11 | }, 12 | "y": { 13 | "aggregate": "count", 14 | "type": "quantitative" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_size_explicit_bad.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 120, 4 | "height": 120, 5 | "data": {"url": "data/cars.json"}, 6 | "mark": "bar", 7 | "encoding": { 8 | "x": { 9 | "field": "Name", 10 | "scale": {"round": false} 11 | }, 12 | "y": {"aggregate": "count"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/bar_size_fit.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 200, 4 | "height": 200, 5 | "data": {"url": "data/cars.json"}, 6 | "mark": "bar", 7 | "encoding": { 8 | "x": {"field": "Origin"}, 9 | "y": {"aggregate": "count"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/bar_size_rangestep_small.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v3.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, 6 | {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, 7 | {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} 8 | ] 9 | }, 10 | "mark": "bar", 11 | "encoding": { 12 | "x": { 13 | "field": "a", "type": "ordinal", 14 | "scale": {"rangeStep": 11} 15 | }, 16 | "y": {"field": "b", "type": "quantitative"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/bar_size_responsive.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": "container", 4 | "height": 250, 5 | "data": {"url": "data/cars.json"}, 6 | "mark": "bar", 7 | "encoding": { 8 | "x": {"field": "Origin"}, 9 | "y": {"aggregate": "count", "title": "Number of Cars"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/bar_size_step_small.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": {"step": 40}, 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": {"field": "Origin"}, 8 | "y": {"aggregate": "count"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/bar_sort_by_count.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": {"field": "Cylinders", "sort": {"op": "count", "order": "descending"}}, 8 | "y": {"aggregate": "count"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/bar_swap_axes.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "bar", 11 | "encoding": { 12 | "y": {"field": "a", "type": "nominal"}, 13 | "x": {"aggregate": "average", "field": "b", "type": "quantitative"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/bar_swap_custom.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "bar", 11 | "encoding": { 12 | "y": {"field": "a", "type": "nominal"}, 13 | "x": { 14 | "aggregate": "average", "field": "b", "type": "quantitative", 15 | "title": "Mean of b" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/bar_title.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "title": "A Simple Bar Chart", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal"}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/bar_title_start.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "title": { 4 | "text": "A Simple Bar Chart", 5 | "anchor": "start" 6 | }, 7 | "data": { 8 | "values": [ 9 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 10 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 11 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 12 | ] 13 | }, 14 | "mark": "bar", 15 | "encoding": { 16 | "x": {"field": "a", "type": "nominal"}, 17 | "y": {"field": "b", "type": "quantitative"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/bar_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A simple bar chart with embedded data with tooltip.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 7 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 8 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal"}, 14 | "y": {"field": "b", "type": "quantitative"}, 15 | "tooltip": {"field": "b", "type": "quantitative"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/bar_tooltip_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"values": [28, 55, 28, 91, 81, 55, 19, 81, 52]}, 4 | "mark": "tick", 5 | "encoding": { 6 | "y": {"field": "data", "aggregate": "mean"}, 7 | "tooltip": {"field": "data", "aggregate": "mean"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_tooltip_groupby.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"values": [28, 55, 28, 91, 81, 55, 19, 81, 52]}, 4 | "mark": "tick", 5 | "encoding": { 6 | "y": {"field": "data", "aggregate": "mean"}, 7 | "tooltip": {"field": "data"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/bar_tooltip_multi.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, 6 | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, 7 | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} 8 | ] 9 | }, 10 | "mark": "bar", 11 | "encoding": { 12 | "x": {"field": "a", "type": "nominal"}, 13 | "y": {"field": "b", "type": "quantitative"}, 14 | "tooltip": [ 15 | {"field": "a", "type": "nominal"}, 16 | {"field": "b", "type": "quantitative"} 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/bar_tooltip_title.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A", "b": 28}, 6 | {"a": "B", "b": 55}, 7 | {"a": "C", "b": 43}, 8 | {"a": "D", "b": 91}, 9 | {"a": "E", "b": 81}, 10 | {"a": "F", "b": 53}, 11 | {"a": "G", "b": 19}, 12 | {"a": "H", "b": 87}, 13 | {"a": "I", "b": 52} 14 | ] 15 | }, 16 | "mark": "bar", 17 | "encoding": { 18 | "x": {"field": "a", "type": "ordinal"}, 19 | "y": {"field": "b", "type": "quantitative"}, 20 | "tooltip": [ 21 | {"field": "a", "type": "ordinal", "title": "Field A"}, 22 | {"field": "b", "type": "quantitative", "title": "Field B"} 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/bar_yearmonth.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Temperature in Seattle as a bar chart with yearmonth time unit.", 4 | "data": {"url": "data/seattle-weather.csv"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": {"timeUnit": "yearmonth", "field": "date"}, 8 | "y": {"aggregate": "mean", "field": "temp_max"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/bar_yearmonth_custom_format.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Custom time format on x-axis.", 4 | "data": {"url": "data/seattle-weather.csv"}, 5 | "mark": "bar", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "yearmonth", "field": "date", 9 | "axis": {"format": "%B of %Y"} 10 | }, 11 | "y": {"aggregate": "mean", "field": "temp_max"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/boxplot_1D_horizontal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "x": { 8 | "field": "Body Mass (g)", 9 | "type": "quantitative", 10 | "scale": {"zero": false} 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/boxplot_1D_horizontal_custom_mark.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": { 6 | "type": "boxplot", 7 | "extent": 1.5, 8 | "median": {"color": "red"}, 9 | "ticks": true 10 | }, 11 | "encoding": { 12 | "x": { 13 | "field": "Body Mass (g)", 14 | "type": "quantitative", 15 | "scale": {"zero": false} 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/boxplot_1D_horizontal_explicit.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": { 6 | "type": "boxplot", 7 | "extent": 1.5 8 | }, 9 | "encoding": { 10 | "x": { 11 | "field": "Body Mass (g)", 12 | "type": "quantitative", 13 | "scale": {"zero": false} 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/boxplot_1D_invalid.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "null", "b": 28}, {"a": 33, "b": 55}, {"a": 33, "b": 43}, 6 | {"a": "null", "b": 91}, {"a": "null", "b": 81}, {"a": "null", "b": 53} 7 | ] 8 | }, 9 | "mark": {"type": "boxplot", "invalid": "filter"}, 10 | "encoding": { 11 | "x": {"field": "a", "type": "quantitative", "axis": {"labelAngle": 0}}, 12 | "y": {"field": "b", "type": "quantitative"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/boxplot_1D_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": { 8 | "field": "Body Mass (g)", 9 | "type": "quantitative", 10 | "scale": {"zero": false} 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/boxplot_2D_horizontal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": {"field": "Species", "type": "nominal"}, 8 | "x": { 9 | "field": "Body Mass (g)", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/boxplot_2D_horizontal_color_size.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": {"field": "Species", "type": "nominal"}, 8 | "x": { 9 | "field": "Body Mass (g)", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | }, 13 | "size": {"value": 10}, 14 | "color": {"value" : "teal"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/boxplot_2D_horizontal_explicit_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v3.json", 3 | "description": "A horizontal box plot showing median, min, and max in the US population distribution of age groups in 2000.", 4 | "data": {"url": "data/population.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": {"field": "age","type": "ordinal"}, 8 | "x": { 9 | "aggregate": "boxplot", 10 | "field": "people", 11 | "type": "quantitative", 12 | "axis": {"title": "population"} 13 | } 14 | } 15 | } 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/boxplot_2D_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "x": {"field": "Species", "type": "nominal"}, 8 | "color": {"field": "Species", "type": "nominal", "legend": null}, 9 | "y": { 10 | "field": "Body Mass (g)", 11 | "type": "quantitative", 12 | "scale": {"zero": false} 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/boxplot_groupped.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A vertical box plot showing median, min, and max body mass of penguins.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": { 6 | "type": "boxplot" 7 | }, 8 | "encoding": { 9 | "x": {"field": "Cylinders", "type": "nominal"}, 10 | "color": {"field": "Origin", "type": "nominal"}, 11 | "xOffset": {"field": "Origin", "type": "nominal"}, 12 | "y": { 13 | "field": "Acceleration", 14 | "type": "quantitative" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/boxplot_minmax_2D_horizontal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median, min, and max body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": { 6 | "type": "boxplot", 7 | "extent": "min-max" 8 | }, 9 | "encoding": { 10 | "y": {"field": "Species", "type": "nominal"}, 11 | "x": { 12 | "field": "Body Mass (g)", 13 | "type": "quantitative", 14 | "scale": {"zero": false} 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/boxplot_minmax_2D_horizontal_custom_midtick_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median, min, and max body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": { 6 | "type": "boxplot", 7 | "extent": "min-max" 8 | }, 9 | "encoding": { 10 | "y": {"field": "Species", "type": "nominal"}, 11 | "x": { 12 | "field": "Body Mass (g)", 13 | "type": "quantitative", 14 | "scale": {"zero": false} 15 | } 16 | }, 17 | "config": { 18 | "boxplot": {"median": {"color": "orange"}} 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/boxplot_minmax_2D_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A vertical box plot showing median, min, and max body mass of penguins.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": { 6 | "type": "boxplot", 7 | "extent": "min-max" 8 | }, 9 | "encoding": { 10 | "x": {"field": "Species", "type": "nominal"}, 11 | "color": {"field": "Species", "type": "nominal", "legend": null}, 12 | "y": { 13 | "field": "Body Mass (g)", 14 | "type": "quantitative", 15 | "scale": {"zero": false} 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/boxplot_tooltip_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins. The tooltip shows the mean mass.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": {"field": "Species", "type": "nominal"}, 8 | "x": { 9 | "field": "Body Mass (g)", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | }, 13 | "tooltip": { 14 | "field": "Body Mass (g)", 15 | "aggregate": "mean" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/boxplot_tooltip_not_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A horizontal box plot showing median and lower and upper quartiles of the distribution of body mass of penguins. The tooltip shows the mass of the outliers.", 4 | "data": {"url": "data/penguins.json"}, 5 | "mark": "boxplot", 6 | "encoding": { 7 | "y": {"field": "Species", "type": "nominal"}, 8 | "x": { 9 | "field": "Body Mass (g)", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | }, 13 | "tooltip": { 14 | "field": "Body Mass (g)", 15 | "type": "quantitative" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/circle.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/circle_binned.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 10}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": { 11 | "bin": {"maxbins": 10}, 12 | "field": "Rotten Tomatoes Rating" 13 | }, 14 | "size": {"aggregate": "count"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/circle_binned_maxbins_2.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 2}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": { 11 | "bin": {"maxbins": 2}, 12 | "field": "Rotten Tomatoes Rating" 13 | }, 14 | "size": {"aggregate": "count"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/circle_binned_maxbins_20.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 20}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": { 11 | "bin": {"maxbins": 20}, 12 | "field": "Rotten Tomatoes Rating" 13 | }, 14 | "size": {"aggregate": "count"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/circle_binned_maxbins_5.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 5}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": { 11 | "bin": {"maxbins": 5}, 12 | "field": "Rotten Tomatoes Rating" 13 | }, 14 | "size": {"aggregate": "count"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/circle_custom_tick_labels.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/movies.json" 5 | }, 6 | "mark": {"size": 80, "type": "circle"}, 7 | "encoding": { 8 | "x": { 9 | "aggregate": "mean", 10 | "axis": { 11 | "labelExpr": "datum.label == 0 ? 'Poor' : datum.label == 5 ? 'Neutral' : 'Great'", 12 | "labelFlush": false, 13 | "values": [0, 5, 10] 14 | }, 15 | "field": "IMDB Rating", 16 | "scale": {"domain": [0, 10]}, 17 | "title": null 18 | }, 19 | "y": {"field": "Major Genre", "sort": "x", "title": null} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/circle_flatten.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"key": "alpha", "foo": [1, 2], "bar": ["A", "B"]}, 6 | {"key": "beta", "foo": [3, 4, 5], "bar": ["C", "D"]} 7 | ] 8 | }, 9 | "transform": [{"flatten": ["foo", "bar"]}], 10 | "mark": "circle", 11 | "encoding": { 12 | "x": {"field": "foo", "type": "quantitative"}, 13 | "y": {"field": "bar", "type": "nominal"}, 14 | "color":{"field": "key", "type": "nominal"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/circle_opacity.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "circle", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "opacity": {"field": "Miles_per_Gallon", "type": "quantitative"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/circle_wilkinson_dotplot.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A Wilkinson Dot Plot", 4 | "height": 100, 5 | "data": { 6 | "values": [ 7 | 1,1,1,1,1,1,1,1,1,1, 8 | 2,2,2, 9 | 3,3, 10 | 4,4,4,4,4,4 11 | ] 12 | }, 13 | "transform": [{ 14 | "window": [{"op": "rank", "as": "id"}], 15 | "groupby": ["data"] 16 | }], 17 | "mark": { 18 | "type": "circle", 19 | "opacity": 1 20 | }, 21 | "encoding": { 22 | "x": {"field": "data", "type": "ordinal"}, 23 | "y": {"field": "id", "type": "ordinal", "axis": null, "sort": "descending"} 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/circle_wilkinson_dotplot_stacked.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A Wilkinson Dot Plot created by generating an id and stacking data points", 4 | "height": 100, 5 | "data": { 6 | "values": [ 7 | 1,1,1,1,1,1,1,1,1,1, 8 | 2,2,2, 9 | 3,3, 10 | 4,4,4,4,4,4 11 | ] 12 | }, 13 | "transform": [{ 14 | "window": [{"op": "rank", "as": "id"}] 15 | }], 16 | "mark": "circle", 17 | "encoding": { 18 | "x": {"field": "data", "type": "ordinal"}, 19 | "y": {"aggregate": "count", "stack": true, "bandPosition": 0.5}, 20 | "detail": {"field": "id"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/connected_scatterplot.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/driving.json"}, 4 | "mark": {"type": "line", "point": true}, 5 | "encoding": { 6 | "x": { 7 | "field": "miles", "type": "quantitative", 8 | "scale": {"zero": false} 9 | }, 10 | "y": { 11 | "field": "gas", "type": "quantitative", 12 | "scale": {"zero": false} 13 | }, 14 | "order": {"field": "year"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/data/7zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/examples/data/7zip.png -------------------------------------------------------------------------------- /examples/data/ffox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/examples/data/ffox.png -------------------------------------------------------------------------------- /examples/data/flights-200k.arrow: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/examples/data/flights-200k.arrow -------------------------------------------------------------------------------- /examples/data/gimp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/examples/data/gimp.png -------------------------------------------------------------------------------- /examples/data/lookup_groups.csv: -------------------------------------------------------------------------------- 1 | group,person 2 | 1,Alan 3 | 1,George 4 | 1,Fred 5 | 2,Steve 6 | 2,Nick 7 | 2,Will 8 | 3,Cole 9 | 3,Rick 10 | 3,Tom -------------------------------------------------------------------------------- /examples/data/lookup_people.csv: -------------------------------------------------------------------------------- 1 | name,age,height 2 | Alan,25,180 3 | George,32,174 4 | Fred,39,182 5 | Steve,42,161 6 | Nick,23,180 7 | Will,21,168 8 | Cole,51,160 9 | Rick,63,181 10 | Tom,54,179 -------------------------------------------------------------------------------- /examples/data/monarchs.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"name":"Elizabeth","start":1565,"end":1603,"index":0}, 3 | {"name":"James I","start":1603,"end":1625,"index":1}, 4 | {"name":"Charles I","start":1625,"end":1649,"index":2}, 5 | {"name":"Cromwell","start":1649,"end":1660,"commonwealth":true,"index":3}, 6 | {"name":"Charles II","start":1660,"end":1685,"index":4}, 7 | {"name":"James II","start":1685,"end":1689,"index":5}, 8 | {"name":"W&M","start":1689,"end":1702,"index":6}, 9 | {"name":"Anne","start":1702,"end":1714,"index":7}, 10 | {"name":"George I","start":1714,"end":1727,"index":8}, 11 | {"name":"George II","start":1727,"end":1760,"index":9}, 12 | {"name":"George III","start":1760,"end":1820,"index":10}, 13 | {"name":"George IV","start":1820,"end":1820,"index":11} 14 | ] -------------------------------------------------------------------------------- /examples/embedded_csv.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": "a\n1\n2\n3\n4", 5 | "format": { 6 | "type": "csv" 7 | } 8 | }, 9 | "mark": "point", 10 | "encoding": { 11 | "y": {"field": "a", "type": "quantitative"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/errorband_2d_horizontal_color_encoding.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "layer": [ 5 | { 6 | "mark": { 7 | "type": "errorband", 8 | "extent": "ci", 9 | "borders": true 10 | }, 11 | "encoding": { 12 | "y": { 13 | "field": "Miles_per_Gallon", 14 | "type": "quantitative", 15 | "scale": {"zero": false}, 16 | "title": "Miles per Gallon (95% CIs)" 17 | }, 18 | "x": {"timeUnit": "year", "field": "Year"}, 19 | "color": {"value": "black"} 20 | } 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /examples/errorband_2d_vertical_borders.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": { 5 | "type": "errorband", 6 | "extent": "ci", 7 | "borders": true 8 | }, 9 | "encoding": { 10 | "y": { 11 | "field": "Miles_per_Gallon", 12 | "type": "quantitative", 13 | "scale": {"zero": false}, 14 | "title": "Miles per Gallon (95% CIs)" 15 | }, 16 | "x": {"timeUnit": "year", "field": "Year"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/errorband_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/cars.json" 5 | }, 6 | "mark": "errorband", 7 | "encoding": { 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "x": {"timeUnit": "year", "field": "Year"}, 10 | "tooltip": {"field": "Miles_per_Gallon", "type": "quantitative"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/errorbar_2d_vertical_ticks.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": { 5 | "type": "errorbar", 6 | "extent": "ci", 7 | "ticks": true 8 | }, 9 | "encoding": { 10 | "y": { 11 | "field": "Miles_per_Gallon", 12 | "type": "quantitative", 13 | "scale": {"zero": false}, 14 | "title": "Miles per Gallon (95% CIs)" 15 | }, 16 | "x": {"timeUnit": "year", "field": "Year"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/errorbar_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/barley.json" 5 | }, 6 | "mark": "errorbar", 7 | "encoding": { 8 | "x": { 9 | "field": "yield", 10 | "type": "quantitative", 11 | "scale": { 12 | "zero": false 13 | } 14 | }, 15 | "y": { 16 | "field": "variety", 17 | "type": "ordinal" 18 | }, 19 | "tooltip": { 20 | "field": "variety", 21 | "type": "ordinal" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/facet_column_facet_column_point_future.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "facet": {"column": {"field": "Origin"}}, 5 | "spec": { 6 | "facet": {"column": {"field": "Cylinders"}}, 7 | "spec": { 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Acceleration", "type": "quantitative"} 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/facet_column_facet_row_point_future.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "facet": {"column": {"field": "Origin"}}, 5 | "spec": { 6 | "facet": {"row": {"field": "Cylinders"}}, 7 | "spec": { 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Acceleration", "type": "quantitative"} 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/facet_cross_independent_scale.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"values": [ 4 | {"r": "r1", "c": "c1", "a": "a1", "b": "b1"}, 5 | {"r": "r1", "c": "c1", "a": "a2", "b": "b2"}, 6 | {"r": "r2", "c": "c2", "a": "a1", "b": "b1"}, 7 | {"r": "r3", "c": "c2", "a": "a3", "b": "b2"} 8 | ]}, 9 | "facet": { 10 | "row": {"field": "r"}, 11 | "column": {"field": "c"} 12 | }, 13 | "spec": { 14 | "mark": "rect", 15 | "encoding": { 16 | "y": {"field": "b", "type": "nominal"}, 17 | "x": {"field": "a", "type": "nominal"} 18 | } 19 | }, 20 | "resolve": { 21 | "scale": { 22 | "x": "independent", 23 | "y": "independent" 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/facet_row_facet_row_point_future.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "facet": {"row": {"field": "Origin"}}, 5 | "spec": { 6 | "facet": {"row": {"field": "Cylinders"}}, 7 | "spec": { 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Acceleration", "type": "quantitative"} 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/geo_choropleth.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 500, 4 | "height": 300, 5 | "data": { 6 | "url": "data/us-10m.json", 7 | "format": { 8 | "type": "topojson", 9 | "feature": "counties" 10 | } 11 | }, 12 | "transform": [{ 13 | "lookup": "id", 14 | "from": { 15 | "data": { 16 | "url": "data/unemployment.tsv" 17 | }, 18 | "key": "id", 19 | "fields": ["rate"] 20 | } 21 | }], 22 | "projection": { 23 | "type": "albersUsa" 24 | }, 25 | "mark": "geoshape", 26 | "encoding": { 27 | "color": { 28 | "field": "rate", 29 | "type": "quantitative" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/geo_circle.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 500, 4 | "height": 300, 5 | "data": { 6 | "url": "data/zipcodes.csv" 7 | }, 8 | "transform": [{"calculate": "substring(datum.zip_code, 0, 1)", "as": "digit"}], 9 | "projection": { 10 | "type": "albersUsa" 11 | }, 12 | "mark": "circle", 13 | "encoding": { 14 | "longitude": { 15 | "field": "longitude", 16 | "type": "quantitative" 17 | }, 18 | "latitude": { 19 | "field": "latitude", 20 | "type": "quantitative" 21 | }, 22 | "size": {"value": 1}, 23 | "color": {"field": "digit", "type": "nominal"} 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/geo_graticule.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 200, 4 | "height": 200, 5 | "data": { 6 | "graticule": true 7 | }, 8 | "projection": { 9 | "type": "orthographic" 10 | }, 11 | "mark": { 12 | "type": "geoshape" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/geo_graticule_object.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 200, 4 | "height": 200, 5 | "projection": { 6 | "type": "orthographic", 7 | "rotate": [ 8 | 0, 9 | -45, 10 | 0 11 | ] 12 | }, 13 | "data": { 14 | "graticule": { 15 | "step": [ 16 | 15, 17 | 15 18 | ] 19 | } 20 | }, 21 | "mark": { 22 | "type": "geoshape" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/geo_point.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 500, 4 | "height": 300, 5 | "data": { 6 | "url": "data/airports.csv" 7 | }, 8 | "projection": { 9 | "type": "albersUsa" 10 | }, 11 | "mark": "circle", 12 | "encoding": { 13 | "longitude": { 14 | "field": "longitude", 15 | "type": "quantitative" 16 | }, 17 | "latitude": { 18 | "field": "latitude", 19 | "type": "quantitative" 20 | }, 21 | "size": {"value": 10} 22 | }, 23 | "config": { 24 | "view": { 25 | "stroke": "transparent" 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/geo_sphere.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 200, 4 | "height": 200, 5 | "projection": { 6 | "type": "orthographic", 7 | "scale": 100, 8 | "translate": [ 9 | 100, 10 | 100 11 | ] 12 | }, 13 | "layer": [ 14 | { 15 | "data": { 16 | "sphere": true 17 | }, 18 | "mark": { 19 | "type": "geoshape", 20 | "fill": "aliceblue" 21 | } 22 | }, 23 | { 24 | "data": { 25 | "graticule": true 26 | }, 27 | "mark": { 28 | "type": "geoshape", 29 | "stroke": "black", 30 | "strokeWidth": 0.5 31 | } 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /examples/geo_trellis.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 500, 4 | "height": 300, 5 | "data": { 6 | "url": "data/income.json" 7 | }, 8 | "transform": [ 9 | { 10 | "lookup": "id", 11 | "from": { 12 | "data": { 13 | "url": "data/us-10m.json", 14 | "format": { 15 | "type": "topojson", 16 | "feature": "states" 17 | } 18 | }, 19 | "key": "id" 20 | }, 21 | "as": "geo" 22 | } 23 | ], 24 | "projection": {"type": "albersUsa"}, 25 | "mark": "geoshape", 26 | "encoding": { 27 | "shape": {"field": "geo", "type": "geojson"}, 28 | "color": {"field": "pct", "type": "quantitative"}, 29 | "row": {"field": "group"} 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/histogram.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": {"aggregate": "count"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/histogram_bin_change.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 30}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": {"aggregate": "count"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/histogram_bin_spacing.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": {"type": "bar", "binSpacing": 3}, 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": {"aggregate": "count"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/histogram_bin_spacing_reverse.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": {"type": "bar", "binSpacing": 3}, 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating", 9 | "scale": {"reverse": true} 10 | }, 11 | "y": {"aggregate": "count"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/histogram_bin_transform.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "transform": [ 5 | { 6 | "bin": true, 7 | "field": "IMDB Rating", 8 | "as": "binned rating" 9 | } 10 | ], 11 | "mark": "bar", 12 | "encoding": { 13 | "x": { 14 | "field": "binned rating", 15 | "title": "IMDB Rating (binned)", 16 | "bin": { 17 | "binned": true, 18 | "step": 1 19 | } 20 | }, 21 | "x2": {"field": "binned rating_end"}, 22 | "y": {"aggregate": "count"} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/histogram_invalid_null.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": {"aggregate": "count"} 11 | }, 12 | "config": { 13 | "mark": {"invalid": null} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/histogram_no_spacing.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": {"type": "bar", "binSpacing": 0}, 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 10}, 8 | "field": "IMDB Rating" 9 | }, 10 | "y": {"aggregate": "count"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/histogram_ordinal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating", 9 | "type": "ordinal" 10 | }, 11 | "y": {"aggregate": "count"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/histogram_ordinal_sort.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating", 9 | "type": "ordinal", 10 | "sort": { 11 | "op": "count", 12 | "order": "descending" 13 | } 14 | }, 15 | "y": {"aggregate": "count"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/histogram_reverse.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": true, 8 | "field": "IMDB Rating", 9 | "scale": {"reverse": true} 10 | }, 11 | "y": {"aggregate": "count"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/interactive_area_brush.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/unemployment-across-industries.json"}, 4 | "encoding": { 5 | "x": {"timeUnit": "yearmonth", "field": "date"}, 6 | "y": {"aggregate": "sum", "field": "count"} 7 | }, 8 | "layer": [{ 9 | "params": [{ 10 | "name": "brush", 11 | "select": {"type": "interval", "encodings": ["x"]} 12 | }], 13 | "mark": "area" 14 | }, { 15 | "transform": [ 16 | {"filter": {"param": "brush"}} 17 | ], 18 | "mark": {"type": "area", "color": "goldenrod"} 19 | }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/interactive_brush.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Drag out a rectangular brush to highlight points.", 4 | "data": {"url": "data/cars.json"}, 5 | "params": [{ 6 | "name": "brush", 7 | "select": "interval", 8 | "value": {"x": [55, 160], "y": [13, 37]} 9 | }], 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "Horsepower", "type": "quantitative"}, 13 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 14 | "color": { 15 | "condition": {"param": "brush", "field": "Cylinders", "type": "ordinal"}, 16 | "value": "grey" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Select multiple points with the shift key.", 4 | "data": {"url": "data/cars.json"}, 5 | "params": [{ 6 | "name": "paintbrush", 7 | "select": {"type": "point", "on": "mouseover", "nearest": true} 8 | }], 9 | "mark": "point", 10 | "encoding": { 11 | "x": {"field": "Horsepower", "type": "quantitative"}, 12 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 13 | "size": { 14 | "condition": {"param": "paintbrush", "value": 300}, 15 | "value": 50 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Select multiple points with the shift key.", 4 | "data": {"url": "data/cars.json"}, 5 | "params": [{ 6 | "name": "paintbrush", 7 | "select": { 8 | "type": "point", 9 | "on": "mouseover" 10 | } 11 | }], 12 | "mark": "circle", 13 | "encoding": { 14 | "x": {"field": "Horsepower", "type": "quantitative"}, 15 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 16 | "color": { 17 | "condition": { 18 | "param": "paintbrush", 19 | "field": "Cylinders", "type": "ordinal" 20 | }, 21 | "value": "grey" 22 | }, 23 | "size": {"value": 75} 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush_color_nearest.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Select multiple points with the shift key.", 4 | "data": {"url": "data/cars.json"}, 5 | "params": [{ 6 | "name": "paintbrush", 7 | "select": { 8 | "type": "point", 9 | "on": "mouseover", 10 | "nearest": true 11 | } 12 | }], 13 | "mark": "circle", 14 | "encoding": { 15 | "x": {"field": "Horsepower", "type": "quantitative"}, 16 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 17 | "color": { 18 | "condition": { 19 | "param": "paintbrush", 20 | "field": "Cylinders", "type": "ordinal" 21 | }, 22 | "value": "grey" 23 | }, 24 | "size": {"value": 75} 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush_interval.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Select multiple points by dragging an interval.", 4 | "data": {"url": "data/cars.json"}, 5 | "params": [{"name": "paintbrush", "select": "interval"}], 6 | "mark": "point", 7 | "encoding": { 8 | "x": {"field": "Horsepower", "type": "quantitative"}, 9 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 10 | "size": { 11 | "condition": {"param": "paintbrush", "value": 300}, 12 | "value": 50 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush_simple_all.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": {"url": "data/cars.json"}, 4 | "selection": { 5 | "paintbrush": { 6 | "type": "multi", 7 | "on": "mouseover", "empty": "all" 8 | } 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "Horsepower", "type": "quantitative"}, 13 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 14 | "size": { 15 | "condition": { 16 | "selection": "paintbrush", "value": 300 17 | }, 18 | "value": 50 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/interactive_paintbrush_simple_none.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": {"url": "data/cars.json"}, 4 | "selection": { 5 | "paintbrush": { 6 | "type": "multi", 7 | "on": "mouseover", "empty": "none" 8 | } 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "Horsepower", "type": "quantitative"}, 13 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 14 | "size": { 15 | "condition": { 16 | "selection": "paintbrush", "value": 300 17 | }, 18 | "value": 50 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/interactive_panzoom_splom.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "repeat": { 5 | "row": ["Horsepower", "Acceleration", "Miles_per_Gallon"], 6 | "column": ["Miles_per_Gallon", "Acceleration", "Horsepower"] 7 | }, 8 | "spec": { 9 | "params": [{ 10 | "name": "grid", 11 | "select": "interval", 12 | "bind": "scales" 13 | }], 14 | "mark": "point", 15 | "encoding": { 16 | "x": {"field": {"repeat": "column"}, "type": "quantitative"}, 17 | "y": { 18 | "field": {"repeat": "row"}, 19 | "type": "quantitative", 20 | "axis": {"minExtent": 30} 21 | }, 22 | "color": {"field": "Origin", "type": "nominal"} 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/interactive_panzoom_vconcat_shared.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "vconcat": [ 5 | { 6 | "params": [{ 7 | "name": "region", 8 | "select": "interval", 9 | "bind": "scales" 10 | }], 11 | "mark": "point", 12 | "encoding": { 13 | "x": {"field": "Horsepower", "type": "quantitative"}, 14 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 15 | } 16 | }, { 17 | "mark": "point", 18 | "encoding": { 19 | "x": {"field": "Horsepower", "type": "quantitative"}, 20 | "y": {"field": "Acceleration", "type": "quantitative"} 21 | } 22 | } 23 | ], 24 | "resolve": {"scale": {"x": "shared"}} 25 | } 26 | -------------------------------------------------------------------------------- /examples/interactive_point_init.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "transform": [{"calculate": "year(datum.Year)", "as": "Year"}], 5 | "params": [{ 6 | "name": "CylYr", 7 | "select": {"type": "point", "fields": ["Cylinders", "Year"]}, 8 | "value": [ 9 | {"Cylinders": 4, "Year": 1981}, 10 | {"Cylinders": 8, "Year": 1972} 11 | ] 12 | }], 13 | "mark": "circle", 14 | "encoding": { 15 | "x": {"field": "Horsepower", "type": "quantitative"}, 16 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 17 | "color": { 18 | "condition": {"param": "CylYr", "field": "Origin", "type": "nominal"}, 19 | "value": "grey" 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/layer_bar_labels.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Bar chart with text labels. Set domain to make the frame cover the labels.", 4 | "data": { 5 | "values": [ 6 | {"a": "A", "b": 28}, 7 | {"a": "B", "b": 55}, 8 | {"a": "C", "b": 43} 9 | ] 10 | }, 11 | "encoding": { 12 | "y": {"field": "a", "type": "nominal"}, 13 | "x": {"field": "b", "type": "quantitative", "scale": {"domain": [0, 60]}} 14 | }, 15 | "layer": [{ 16 | "mark": "bar" 17 | }, { 18 | "mark": { 19 | "type": "text", 20 | "align": "left", 21 | "baseline": "middle", 22 | "dx": 3 23 | }, 24 | "encoding": { 25 | "text": {"field": "b", "type": "quantitative"} 26 | } 27 | }] 28 | } 29 | -------------------------------------------------------------------------------- /examples/layer_bar_month.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "layer": [{ 5 | "mark": "bar", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "month", 9 | "field": "date", 10 | "type": "ordinal" 11 | }, 12 | "y": { 13 | "aggregate": "mean", 14 | "field": "precipitation", 15 | "type": "quantitative" 16 | } 17 | } 18 | }, { 19 | "mark": "rule", 20 | "encoding": { 21 | "y": { 22 | "aggregate": "mean", 23 | "field": "precipitation", 24 | "type": "quantitative" 25 | }, 26 | "color": {"value": "firebrick"}, 27 | "size": {"value": 3} 28 | } 29 | }] 30 | } 31 | -------------------------------------------------------------------------------- /examples/layer_color_legend_left.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock price over time with color legend orient = left.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "encoding": { 6 | "x": {"field": "date", "type": "temporal"}, 7 | "y": {"field": "price", "type": "quantitative"}, 8 | "color": {"field": "symbol", "type": "nominal", "legend": {"orient": "left"}} 9 | }, 10 | "layer": [ 11 | {"mark": "line"}, 12 | {"mark": {"type":"point", "filled": true}} 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/layer_histogram.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/flights-2k.json"}, 4 | "layer": [ 5 | { 6 | "mark": "bar", 7 | "encoding": { 8 | "x": {"field": "distance", "bin": true}, 9 | "y": {"aggregate": "count"} 10 | } 11 | }, 12 | { 13 | "transform": [{"filter": "datum.delay < 5"}], 14 | "mark": "bar", 15 | "encoding": { 16 | "x": {"field": "distance", "bin": true}, 17 | "y": {"aggregate": "count"}, 18 | "color": {"value": "goldenrod"} 19 | } 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /examples/layer_histogram_global_mean.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "layer": [{ 5 | "mark": "bar", 6 | "encoding": { 7 | "x": {"field": "IMDB Rating", "bin": true}, 8 | "y": {"aggregate": "count"} 9 | } 10 | },{ 11 | "mark": "rule", 12 | "encoding": { 13 | "x": {"aggregate": "mean", "field": "IMDB Rating"}, 14 | "color": {"value": "red"}, 15 | "size": {"value": 5} 16 | } 17 | }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/layer_line_color_rule.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time with Averages.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "layer": [ 6 | { 7 | "mark": "line", 8 | "encoding": { 9 | "x": {"field": "date", "type": "temporal"}, 10 | "y": {"field": "price", "type": "quantitative"}, 11 | "color": {"field": "symbol", "type": "nominal"} 12 | } 13 | }, 14 | { 15 | "mark": "rule", 16 | "encoding": { 17 | "y": {"field": "price", "aggregate": "mean"}, 18 | "size": {"value": 2}, 19 | "color": {"field": "symbol"} 20 | } 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /examples/layer_line_datum_rule.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "layer": [ 4 | { 5 | "data": {"url": "data/stocks.csv"}, 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"}, 10 | "color": {"field": "symbol", "type": "nominal"} 11 | } 12 | }, 13 | { 14 | "data": {"values": [{}]}, 15 | "mark": {"type": "rule", "strokeDash": [2, 2], "size": 2}, 16 | "encoding": { 17 | "y": {"datum": 300} 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /examples/layer_line_datum_rule_datetime.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "layer": [ 4 | { 5 | "data": {"url": "data/stocks.csv"}, 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"}, 10 | "color": {"field": "symbol", "type": "nominal"} 11 | } 12 | }, 13 | { 14 | "data": {"values": [{}]}, 15 | "mark": {"type": "rule", "strokeDash": [2, 2], "size": 2}, 16 | "encoding": { 17 | "x": {"datum": {"year": 2006}} 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /examples/layer_line_errorband_ci.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "encoding": { 5 | "x": { 6 | "field": "Year", 7 | "timeUnit": "year" 8 | } 9 | }, 10 | "layer": [ 11 | { 12 | "mark": {"type": "errorband", "extent": "ci"}, 13 | "encoding": { 14 | "y": { 15 | "field": "Miles_per_Gallon", 16 | "type": "quantitative", 17 | "title": "Mean of Miles per Gallon (95% CIs)" 18 | } 19 | } 20 | }, 21 | { 22 | "mark": "line", 23 | "encoding": { 24 | "y": { 25 | "aggregate": "mean", 26 | "field": "Miles_per_Gallon" 27 | } 28 | } 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /examples/layer_line_mean_point_raw.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Plot showing average data with raw values in the background.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "layer": [{ 7 | "mark": {"type": "point", "opacity": 0.3}, 8 | "encoding": { 9 | "x": {"timeUnit":"year", "field": "date"}, 10 | "y": {"field": "price", "type": "quantitative"} 11 | } 12 | }, { 13 | "mark": "line", 14 | "encoding": { 15 | "x": {"timeUnit":"year", "field": "date"}, 16 | "y": {"aggregate": "mean", "field": "price"} 17 | } 18 | }] 19 | } 20 | -------------------------------------------------------------------------------- /examples/layer_point_errorbar_1d_horizontal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "layer": [ 5 | { 6 | "mark": "errorbar", 7 | "encoding": { 8 | "x": { 9 | "field": "yield", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | } 13 | } 14 | }, 15 | { 16 | "mark": { 17 | "type": "point", 18 | "filled": true, 19 | "color": "black" 20 | }, 21 | "encoding": { 22 | "x": { 23 | "field": "yield", 24 | "aggregate": "mean", 25 | "type": "quantitative" 26 | } 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /examples/layer_point_errorbar_1d_vertical.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "layer": [ 5 | { 6 | "mark": "errorbar", 7 | "encoding": { 8 | "y": { 9 | "field": "yield", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | } 13 | } 14 | }, 15 | { 16 | "mark": { 17 | "type": "point", 18 | "filled": true, 19 | "color": "black" 20 | }, 21 | "encoding": { 22 | "y": { 23 | "field": "yield", 24 | "aggregate": "mean", 25 | "type": "quantitative" 26 | } 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /examples/layer_single_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/stocks.csv"}, 4 | "layer": [ 5 | { 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"}, 10 | "color": {"field": "symbol", "type": "nominal"} 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/line.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_calculate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "transform": [ 5 | {"calculate": "datum.temp_max - datum.temp_min", "as": "temp_range"} 6 | ], 7 | "mark": "line", 8 | "encoding": { 9 | "x": { 10 | "timeUnit": "month", 11 | "field": "date" 12 | }, 13 | "y": { 14 | "aggregate": "mean", 15 | "field": "temp_range" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "line", 6 | "encoding": { 7 | "x": {"field": "date", "type": "temporal"}, 8 | "y": {"field": "price", "type": "quantitative"}, 9 | "color": {"field": "symbol", "type": "nominal"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_color_binned.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "line", 6 | "encoding": { 7 | "y": {"aggregate": "mean", "field": "Horsepower"}, 8 | "x": {"field": "Year", "type": "temporal"}, 9 | "color": {"bin": true, "field": "Acceleration"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_detail.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies Over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "line", 6 | "encoding": { 7 | "x": {"field": "date", "type": "temporal"}, 8 | "y": {"field": "price", "type": "quantitative"}, 9 | "detail": {"field": "symbol", "type": "nominal"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_domainminmax.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal", "scale": { 9 | "domainMin": {"year": 2002}, 10 | "domainMax": {"year": 2012} 11 | }}, 12 | "y": {"field": "price", "type": "quantitative"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/line_encoding_impute_keyvals.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [{"a": 0, "b": 28, "c": 0}, 5 | {"a": 0, "b": 91, "c": 1}, 6 | {"a": 1, "b": 43, "c": 0}, 7 | {"a": 1, "b": 55, "c": 1}, 8 | {"a": 2, "b": 81, "c": 0}, 9 | {"a": 2, "b": 53, "c": 1}, 10 | {"a": 3, "b": 19, "c": 0}] 11 | }, 12 | "mark": "line", 13 | "encoding": { 14 | "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}}, 15 | "y": {"field": "b", "type": "quantitative", "impute": {"value": 100, "keyvals": [4]}}, 16 | "color": {"field": "c", "type": "nominal"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_encoding_impute_keyvals_sequence.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [{"a": 0, "b": 28, "c": 0}, 5 | {"a": 0, "b": 91, "c": 1}, 6 | {"a": 1, "b": 43, "c": 0}, 7 | {"a": 1, "b": 55, "c": 1}, 8 | {"a": 2, "b": 81, "c": 0}, 9 | {"a": 2, "b": 53, "c": 1}, 10 | {"a": 3, "b": 19, "c": 0}] 11 | }, 12 | "mark": "line", 13 | "encoding": { 14 | "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}}, 15 | "y": {"field": "b", "type": "quantitative", "impute": {"value": 100, "keyvals": {"start": 4, "stop": 6}}}, 16 | "color": {"field": "c", "type": "nominal"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_impute_method.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [{"a": 0, "b": 28, "c": 0}, 5 | {"a": 0, "b": 91, "c": 1}, 6 | {"a": 1, "b": 43, "c": 0}, 7 | {"a": 1, "b": 55, "c": 1}, 8 | {"a": 2, "b": 81, "c": 0}, 9 | {"a": 2, "b": 53, "c": 1}, 10 | {"a": 3, "b": 19, "c": 0}] 11 | }, 12 | "mark": "line", 13 | "encoding": { 14 | "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}}, 15 | "y": {"field": "b", "type": "quantitative", "impute": {"method": "mean"}}, 16 | "color": {"field": "c", "type": "nominal"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_impute_value.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [{"a": 0, "b": 28, "c": 0}, 5 | {"a": 0, "b": 91, "c": 1}, 6 | {"a": 1, "b": 43, "c": 0}, 7 | {"a": 1, "b": 55, "c": 1}, 8 | {"a": 2, "b": 81, "c": 0}, 9 | {"a": 2, "b": 53, "c": 1}, 10 | {"a": 3, "b": 19, "c": 0}] 11 | }, 12 | "mark": "line", 13 | "encoding": { 14 | "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}}, 15 | "y": {"field": "b", "type": "quantitative", "impute": {"value": 0}}, 16 | "color": {"field": "c", "type": "nominal"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_inside_domain_using_clip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"wavelength": 250, "power": 1}, 6 | {"wavelength": 300, "power": 2}, 7 | {"wavelength": 420, "power": 4}, 8 | {"wavelength": 450, "power": 1.8}, 9 | {"wavelength": 500, "power": 1.1} 10 | ] 11 | }, 12 | "mark": { 13 | "type": "line", 14 | "clip": true 15 | }, 16 | "encoding": { 17 | "x": { 18 | "field": "wavelength", 19 | "type": "quantitative", 20 | "scale": {"domain": [300,450]} 21 | }, 22 | "y": { 23 | "field": "power", 24 | "type": "quantitative" 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/line_inside_domain_using_transform.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"wavelength": 250, "power": 1}, 6 | {"wavelength": 300, "power": 2}, 7 | {"wavelength": 420, "power": 4}, 8 | {"wavelength": 450, "power": 1.8}, 9 | {"wavelength": 500, "power": 1.1} 10 | ] 11 | }, 12 | "transform": [{ 13 | "filter": {"field": "wavelength", "range": [300, 450]} 14 | }], 15 | "mark": "line", 16 | "encoding": { 17 | "x": { 18 | "field": "wavelength", 19 | "type": "quantitative", 20 | "scale": {"domain": [300,450]} 21 | }, 22 | "y": { 23 | "field": "power", 24 | "type": "quantitative" 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/line_max_year.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "line", 5 | "encoding": { 6 | "x": {"timeUnit": "yearmonth", "field": "date"}, 7 | "y": {"aggregate": "max", "field": "temp_max"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/line_mean_month.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "line", 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date"}, 7 | "y": {"aggregate": "mean", "field": "precipitation"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/line_mean_year.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "line", 5 | "encoding": { 6 | "x": {"timeUnit": "year", "field": "date"}, 7 | "y": {"aggregate": "mean", "field": "temp_max"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/line_monotone.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/stocks.csv"}, 4 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 5 | "mark": { 6 | "type": "line", 7 | "interpolate": "monotone" 8 | }, 9 | "encoding": { 10 | "x": {"field": "date", "type": "temporal"}, 11 | "y": {"field": "price", "type": "quantitative"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/line_month.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": { 5 | "type": "line", 6 | "interpolate": "monotone" 7 | }, 8 | "encoding": { 9 | "x": {"timeUnit": "month", "field": "date"}, 10 | "y": {"aggregate": "mean", "field": "temp_max"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/line_month_center_band.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Line with center band for timeUnit", 4 | "data": {"url": "data/seattle-weather.csv"}, 5 | "mark": { 6 | "type": "line", 7 | "interpolate": "monotone" 8 | }, 9 | "encoding": { 10 | "x": {"timeUnit": "month", "field": "date", "bandPosition": 0.5}, 11 | "y": {"aggregate": "mean", "field": "temp_max"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/line_outside_domain.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"wavelength": 250, "power": 1}, 6 | {"wavelength": 300, "power": 2}, 7 | {"wavelength": 420, "power": 4}, 8 | {"wavelength": 450, "power": 1.8}, 9 | {"wavelength": 500, "power": 1.1} 10 | ] 11 | }, 12 | "mark": "line", 13 | "encoding": { 14 | "x": { 15 | "field": "wavelength", 16 | "type": "quantitative", 17 | "scale": {"domain": [300,450]} 18 | }, 19 | "y": { 20 | "field": "power", 21 | "type": "quantitative" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/line_overlay.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": { 6 | "type": "line", 7 | "point": true 8 | }, 9 | "encoding": { 10 | "x": {"timeUnit": "year", "field": "date"}, 11 | "y": {"aggregate":"mean", "field": "price", "type": "quantitative"}, 12 | "color": {"field": "symbol", "type": "nominal"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/line_overlay_stroked.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": { 6 | "type": "line", 7 | "point": { 8 | "filled": false, 9 | "fill": "white" 10 | } 11 | }, 12 | "encoding": { 13 | "x": {"timeUnit": "year", "field": "date"}, 14 | "y": {"aggregate":"mean", "field": "price", "type": "quantitative"}, 15 | "color": {"field": "symbol", "type": "nominal"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/line_quarter_legend.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock price average broken down by quarter.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "line", 6 | "encoding": { 7 | "x": {"field": "date", "type": "temporal", "timeUnit": "year"}, 8 | "y": {"field": "price", "type": "quantitative", "aggregate": "mean"}, 9 | "color": {"field": "date", "type": "temporal", "timeUnit": "quarter"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_shape_overlay.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": "line", 7 | "encoding": { 8 | "x": {"field": "date", "type": "temporal"}, 9 | "y": {"field": "price", "type": "quantitative"}, 10 | "shape": {"value": "square"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/line_skip_invalid.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | { 6 | "x": 1, 7 | "y": 10 8 | }, 9 | { 10 | "x": 2, 11 | "y": 30 12 | }, 13 | { 14 | "x": 3, 15 | "y": null 16 | }, 17 | { 18 | "x": 4, 19 | "y": 15 20 | }, 21 | { 22 | "x": 5, 23 | "y": 30 24 | }, 25 | { 26 | "x": 6, 27 | "y": 40 28 | }, 29 | { 30 | "x": 7, 31 | "y": 20 32 | } 33 | ] 34 | }, 35 | "mark": "line", 36 | "encoding": { 37 | "x": {"field": "x", "type": "quantitative"}, 38 | "y": {"field": "y", "type": "quantitative"} 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/line_skip_invalid_mid.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | { 6 | "x": 1, 7 | "y": 10 8 | }, 9 | { 10 | "x": 2, 11 | "y": 30 12 | }, 13 | { 14 | "x": 3, 15 | "y": null 16 | }, 17 | { 18 | "x": 4, 19 | "y": 15 20 | }, 21 | { 22 | "x": 5, 23 | "y": null 24 | }, 25 | { 26 | "x": 6, 27 | "y": 40 28 | }, 29 | { 30 | "x": 7, 31 | "y": 20 32 | } 33 | ] 34 | }, 35 | "mark": "line", 36 | "encoding": { 37 | "x": {"field": "x", "type": "quantitative"}, 38 | "y": {"field": "y", "type": "quantitative"} 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/line_slope.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "description": "Slope graph showing the change in yield for different barley sites. It shows the error in the year labels for the Morris site.", 5 | "mark": "line", 6 | "width": {"step": 50}, 7 | "encoding": { 8 | "x": { 9 | "field": "year", 10 | "type": "ordinal", 11 | "scale": {"padding": 0.5} 12 | }, 13 | "y": { 14 | "aggregate": "median", 15 | "field": "yield", 16 | "type": "quantitative" 17 | }, 18 | "color": {"field": "site", "type": "nominal"} 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/line_sort_axis.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"Name": "Peter", "Score": 3}, 6 | {"Name": "Paul", "Score": 1}, 7 | {"Name": "Mary", "Score": 5} 8 | ] 9 | }, 10 | "mark": "line", 11 | "encoding": { 12 | "x": { 13 | "type": "nominal", 14 | "field": "Name", 15 | "sort": ["Peter", "Mary", "Paul"] 16 | }, 17 | "y": {"type": "quantitative", "field": "Score"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/line_step.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Google's stock price over time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "transform": [{"filter": "datum.symbol==='GOOG'"}], 6 | "mark": { 7 | "type": "line", 8 | "interpolate": "step-after" 9 | }, 10 | "encoding": { 11 | "x": {"field": "date", "type": "temporal"}, 12 | "y": {"field": "price", "type": "quantitative"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/line_strokedash.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "line", 6 | "encoding": { 7 | "x": {"field": "date", "type": "temporal"}, 8 | "y": {"field": "price", "type": "quantitative"}, 9 | "strokeDash": {"field": "symbol", "type": "nominal"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/line_timestamp_domain.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"ts": 1500400000000, "v": 1}, 6 | {"ts": 1500500000000, "v": 2}, 7 | {"ts": 1500600000000, "v": 3}, 8 | {"ts": 1500700000000, "v": 2} 9 | ] 10 | }, 11 | "width": 800, 12 | "height": 300, 13 | "mark": {"type": "line"}, 14 | "encoding": { 15 | "x": {"field": "ts", "type": "temporal", "scale": {"domain": [1500000000000, 1500900000000]}}, 16 | "y": {"field": "v", "type": "quantitative", "scale": {"domain": [0, 5]}} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/line_timeunit_transform.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Time unit transform.", 4 | "data": {"url": "data/seattle-weather.csv"}, 5 | "mark": "line", 6 | "transform": [{ 7 | "timeUnit": "month", 8 | "field": "date", 9 | "as": "month" 10 | }], 11 | "encoding": { 12 | "x": { 13 | "field": "month", "type": "temporal", 14 | "axis": {"format": "%b"} 15 | }, 16 | "y": {"aggregate": "max", "field": "temp_max"} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/lookup.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/lookup_groups.csv"}, 4 | "transform": [{ 5 | "lookup": "person", 6 | "from": { 7 | "data": {"url": "data/lookup_people.csv"}, 8 | "key": "name", 9 | "fields": ["age", "height"] 10 | } 11 | }], 12 | "mark": "bar", 13 | "encoding": { 14 | "x": {"field": "group"}, 15 | "y": {"field": "age", "aggregate": "mean"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/param_expr.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [ 5 | { 6 | "name": "opacityVar", 7 | "value": 50, 8 | "bind": {"input": "range", "min": 1, "max": 100} 9 | }, 10 | { 11 | "name": "sel", 12 | "select": {"type": "point", "fields": ["Miles_per_Gallon"], "toggle": false} 13 | } 14 | ], 15 | "mark": { 16 | "type": "point", 17 | "size": {"expr": "sel.Miles_per_Gallon * 10 || 75"}, 18 | "opacity": {"expr": "opacityVar/100"} 19 | }, 20 | "encoding": { 21 | "x": {"field": "Horsepower", "type": "quantitative"}, 22 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/point_1d.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "IMDB Rating", "type": "quantitative"} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/point_1d_array.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "a", "type": "nominal"} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/point_2d.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_2d_aggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "a", "type": "nominal"}, 13 | "y": {"aggregate": "average", "field": "b", "type": "quantitative"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/point_2d_array.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "x": {"field": "a", "type": "nominal"}, 13 | "y": {"field": "b", "type": "quantitative"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/point_2d_array_named.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "name": "plotname", 4 | "data": { 5 | "values": [ 6 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 7 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 8 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 9 | ] 10 | }, 11 | "mark": "point", 12 | "encoding": { 13 | "x": {"field": "a", "type": "nominal"}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/point_2d_config_no_zero.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": { "url": "data/cars.json" }, 5 | "mark": "point", 6 | "encoding": { 7 | "x": { "field": "Horsepower", "type": "quantitative" }, 8 | "y": { "field": "Miles_per_Gallon", "type": "quantitative" } 9 | }, 10 | "config": { "scale": { "zero": false } } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_2d_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": {"type": "point", "tooltip": true}, 6 | "encoding": { 7 | "x": {"field": "Horsepower","type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon","type": "quantitative"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_2d_tooltip_data.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": {"type": "point", "tooltip": {"content": "data"}}, 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_aggregate_detail.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing average horsepower and displacement for cars from different origins.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"aggregate": "mean", "field": "Horsepower"}, 8 | "y": {"aggregate": "mean", "field": "Displacement"}, 9 | "detail": {"field": "Origin"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_background.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot with orange overall background and yellow view background.", 4 | "background": "orange", 5 | "view": {"fill": "yellow"}, 6 | "data": {"url": "data/cars.json"}, 7 | "mark": "point", 8 | "encoding": { 9 | "x": {"field": "Horsepower", "type": "quantitative"}, 10 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/point_binned_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons with binned acceleration on color.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "color": {"bin": true, "field": "Acceleration"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_binned_opacity.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons with binned acceleration on opacity.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "opacity": {"bin": true, "field": "Acceleration"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_binned_size.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons with binned acceleration on size.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "size": {"bin": true, "field": "Acceleration"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_bubble.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "size": {"field": "Acceleration", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "color": {"field": "Origin", "type": "nominal"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_color_custom.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "color": { 9 | "field": "Origin", "type": "nominal", 10 | "scale": {"range": ["purple", "#ff0000", "teal"]} 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/point_color_ordinal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "color": {"field": "Cylinders", "type": "ordinal"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_color_quantitative.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "color": {"field": "Displacement", "type": "quantitative"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/point_color_shape_constant.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 8 | "color": {"value": "#ff9900"}, 9 | "shape": {"value": "square"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_color_with_shape.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing body mass and flipper lengths of penguins.", 4 | "data": { 5 | "url": "data/penguins.json" 6 | }, 7 | "mark": "point", 8 | "encoding": { 9 | "x": { 10 | "field": "Flipper Length (mm)", 11 | "type": "quantitative", 12 | "scale": {"zero": false} 13 | }, 14 | "y": { 15 | "field": "Body Mass (g)", 16 | "type": "quantitative", 17 | "scale": {"zero": false} 18 | }, 19 | "color": {"field": "Species", "type": "nominal"}, 20 | "shape": {"field": "Species", "type": "nominal"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/point_colorramp_size.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Acceleration", "type": "quantitative"}, 8 | "color": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "size": {"field": "Miles_per_Gallon", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_diverging_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bubbleplot showing horsepower on x, miles per gallons on y, and weight with a diverging color scale.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "color": { 10 | "field": "Weight_in_lbs", 11 | "type": "quantitative", 12 | "scale": { 13 | "domainMid": 3250, 14 | "range": "diverging" 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/point_dot_timeunit_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "point", 5 | "encoding": { 6 | "color": {"timeUnit": "yearmonth", "field": "date"}, 7 | "x": {"aggregate": "mean", "field": "temp_max"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/point_filled.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": {"type": "point", "filled": true}, 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/point_href.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons that opens a Google search for the car that you click on.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "transform": [{ 7 | "calculate": "'https://www.google.com/search?q=' + datum.Name", "as": "url" 8 | }], 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": {"field": "Origin", "type": "nominal"}, 13 | "tooltip": {"field": "Name", "type": "nominal"}, 14 | "href": {"field": "url", "type": "nominal"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/point_invalid_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/movies.json" 5 | }, 6 | "mark": "point", 7 | "encoding": { 8 | "x": { 9 | "field": "IMDB Rating", 10 | "type": "quantitative" 11 | }, 12 | "y": { 13 | "field": "Rotten Tomatoes Rating", 14 | "type": "quantitative" 15 | }, 16 | "color": { 17 | "condition": { 18 | "test": "datum['IMDB Rating'] === null || datum['Rotten Tomatoes Rating'] === null", 19 | "value": "#aaa" 20 | } 21 | } 22 | }, 23 | "config": { 24 | "mark": {"invalid": null} 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/point_log.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "mark": "point", 4 | "data": { 5 | "values": [ 6 | {"x": 0, "y": 1}, {"x": 1, "y": 10}, 7 | {"x": 2, "y": 100}, {"x": 3, "y": 1000}, 8 | {"x": 4, "y": 10000}, {"x": 5, "y": 100000}, 9 | {"x": 6, "y": 1000000}, {"x": 7, "y": 10000000} 10 | ] 11 | }, 12 | "encoding": { 13 | "x": {"field": "x", "type": "quantitative"}, 14 | "y": {"field": "y", "scale": {"type": "log"}} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/point_no_axis_domain_grid.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 9 | }, 10 | "config": {"axis": {"domain": false, "grid": false}} 11 | } 12 | -------------------------------------------------------------------------------- /examples/point_offset_random.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering).", 4 | "data": {"url": "data/cars.json"}, 5 | "transform": [{"calculate": "random()", "as": "random"}], 6 | "height": {"step": 50}, 7 | "mark": "point", 8 | "encoding": { 9 | "x": {"field": "Horsepower", "type": "quantitative"}, 10 | "y": {"field": "Cylinders", "type": "ordinal"}, 11 | "yOffset": {"field": "random", "type": "quantitative"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/point_ordinal_bin_offset_random.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "transform": [{"calculate": "random()", "as": "random"}], 5 | "height": {"step": 50}, 6 | "mark": "point", 7 | "encoding": { 8 | "x": {"field": "Horsepower","type": "quantitative"}, 9 | "y": {"bin": true, "field": "Miles_per_Gallon","type": "ordinal"}, 10 | "yOffset": {"field": "random", "type": "quantitative"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/point_ordinal_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "B", "x": 2,"y": 2}, 6 | {"a": "A", "x": 1,"y": 1}, 7 | {"a": "A", "x": 4,"y": 4}, 8 | {"a": "B", "x": 5,"y": 5}, 9 | {"a": "C", "x": 3,"y": 3}, 10 | {"a": "C", "x": 6,"y": 6} 11 | ] 12 | }, 13 | "mark": "point", 14 | "encoding": { 15 | "x": {"field": "x", "type": "quantitative"}, 16 | "y": {"field": "y", "type": "quantitative"}, 17 | "color": {"field": "a", "type": "ordinal"} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/point_overlap.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4}, 6 | {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6}, 7 | {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": {} 12 | } 13 | -------------------------------------------------------------------------------- /examples/point_scale_range_field.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Using the field \"c\" as the color scale's range. Note that this only works if there is a 1:1 mapping between the color domain field (`l`) and the range field (`c`).", 4 | "mark": { "type": "circle" }, 5 | "encoding": { 6 | "y": { 7 | "type": "nominal", 8 | "field": "y" 9 | }, 10 | "color": { 11 | "type": "nominal", 12 | "field": "l", 13 | "scale": {"range": {"field": "c"}} 14 | } 15 | }, 16 | "data": {"values":[ 17 | {"y": "X", "l": "A", "c": "red"}, 18 | {"y": "Y", "l": "B", "c": "blue"}, 19 | {"y": "Z", "l": "C", "c": "green"} 20 | ]} 21 | } 22 | -------------------------------------------------------------------------------- /examples/point_shape_custom.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot with custom star shapes.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "color": {"field": "Cylinders", "type": "nominal"}, 10 | "size": {"field": "Weight_in_lbs", "type": "quantitative"}, 11 | "shape": {"value": "M0,0.2L0.2351,0.3236 0.1902,0.0618 0.3804,-0.1236 0.1175,-0.1618 0,-0.4 -0.1175,-0.1618 -0.3804,-0.1236 -0.1902,0.0618 -0.2351,0.3236 0,0.2Z"} 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /examples/point_tooltip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A scatterplot showing horsepower and miles per gallons for various cars.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "tooltip": {"field": "Origin", "type": "nominal"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/rect_heatmap.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "rect", 5 | "encoding": { 6 | "y": {"field": "Origin", "type": "nominal"}, 7 | "x": {"field": "Cylinders", "type": "ordinal"}, 8 | "color": {"aggregate": "mean", "field": "Horsepower"} 9 | }, 10 | "config": { 11 | "axis": {"grid": true, "tickBand": "extent"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/repeat_histogram.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "repeat": ["Horsepower", "Miles_per_Gallon", "Acceleration", "Displacement"], 4 | "columns": 2, 5 | "spec": { 6 | "data": {"url": "data/cars.json"}, 7 | "mark": "bar", 8 | "encoding": { 9 | "x": {"field": {"repeat": "repeat"}, "bin": true}, 10 | "y": {"aggregate": "count"}, 11 | "color": {"field": "Origin"} 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/repeat_histogram_autosize.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "repeat": ["Horsepower", "Miles_per_Gallon"], 4 | "columns": 1, 5 | "spec": { 6 | "data": {"url": "data/cars.json"}, 7 | "mark": "bar", 8 | "encoding": { 9 | "x": { 10 | "field": {"repeat": "repeat"}, 11 | "bin": true 12 | }, 13 | "y": {"aggregate": "count"} 14 | } 15 | }, 16 | "autosize": {"type": "fit-x", "contains": "padding"} 17 | } 18 | -------------------------------------------------------------------------------- /examples/repeat_histogram_flights.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/flights-2k.json", 5 | "format": {"parse": {"date": "date"}} 6 | }, 7 | "transform": [{"calculate": "hours(datum.date)", "as": "time"}], 8 | "repeat": {"column": ["distance", "delay", "time"]}, 9 | "spec": { 10 | "mark": "bar", 11 | "encoding": { 12 | "x": { 13 | "field": {"repeat": "column"}, 14 | "bin": {"maxbins": 20} 15 | }, 16 | "y": {"aggregate": "count"} 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/repeat_independent_colors.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "repeat": {"column": ["Origin", "Cylinders"]}, 4 | "spec": { 5 | "data": {"url": "data/cars.json"}, 6 | "mark": "point", 7 | "encoding": { 8 | "x": {"field": "Horsepower", "type": "quantitative"}, 9 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 10 | "color": {"field": {"repeat": "column"}, "type": "nominal"} 11 | } 12 | }, 13 | "resolve": {"scale": {"color": "independent"}} 14 | } 15 | -------------------------------------------------------------------------------- /examples/repeat_layer.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "url": "data/movies.json" 5 | }, 6 | "repeat": { 7 | "layer": ["US Gross", "Worldwide Gross"] 8 | }, 9 | "spec": { 10 | "mark": "line", 11 | "encoding": { 12 | "x": { 13 | "bin": true, 14 | "field": "IMDB Rating", 15 | "type": "quantitative" 16 | }, 17 | "y": { 18 | "aggregate": "mean", 19 | "field": {"repeat": "layer"}, 20 | "type": "quantitative", 21 | "title": "Mean of US and Worldwide Gross" 22 | }, 23 | "color": { 24 | "datum": {"repeat": "layer"}, 25 | "type": "nominal" 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/repeat_line_weather.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "", 4 | "data": { 5 | "url": "data/weather.csv" 6 | }, 7 | "repeat": [ 8 | "temp_max", 9 | "precipitation", 10 | "wind" 11 | ], 12 | "spec": { 13 | "mark": "line", 14 | "encoding": { 15 | "x": {"field": "date", "timeUnit": "month"}, 16 | "y": { 17 | "field": {"repeat": "repeat"}, 18 | "aggregate": "mean" 19 | }, 20 | "color": {"field": "location"} 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/repeat_splom_cars.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "repeat": { 5 | "row": ["Displacement", "Miles_per_Gallon"], 6 | "column": ["Horsepower", "Miles_per_Gallon"] 7 | }, 8 | "spec": { 9 | "mark": "point", 10 | "encoding": { 11 | "x": {"field": {"repeat": "column"}, "type": "quantitative"}, 12 | "y": {"field": {"repeat": "row"}, "type": "quantitative"}, 13 | "color": {"field": "Origin", "type": "nominal"} 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/rule_color_mean.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Average Stock prices of 5 Tech Companies.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "rule", 6 | "encoding": { 7 | "y": { 8 | "field": "price", 9 | "type": "quantitative", 10 | "aggregate": "mean" 11 | }, 12 | "size": {"value": 2}, 13 | "color": {"field": "symbol", "type": "nominal"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/rule_extent.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Minimum and maxmimum horsepower of cars from different origins.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "rule", 6 | "encoding": { 7 | "x": {"field": "Origin"}, 8 | "y": {"field": "Horsepower", "aggregate": "min"}, 9 | "y2": {"field": "Horsepower", "aggregate": "max"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/sample_scatterplot.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "hconcat": [ 5 | { 6 | "mark": "point", 7 | "encoding": { 8 | "x": {"field": "Horsepower", "type": "quantitative"}, 9 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 10 | } 11 | }, 12 | { 13 | "transform": [{"sample" : 200}], 14 | "mark": "point", 15 | "encoding": { 16 | "x": {"field": "Horsepower", "type": "quantitative"}, 17 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /examples/scatter_image.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"x": 0.5, "y": 0.5, "img": "data/ffox.png"}, 6 | {"x": 1.5, "y": 1.5, "img": "data/gimp.png"}, 7 | {"x": 2.5, "y": 2.5, "img": "data/7zip.png"} 8 | ] 9 | }, 10 | "mark": {"type": "image", "width": 50, "height": 50}, 11 | "encoding": { 12 | "x": {"field": "x", "type": "quantitative"}, 13 | "y": {"field": "y", "type": "quantitative"}, 14 | "url": {"field": "img", "type": "nominal"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/selection_bind_origin.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "org", 6 | "select": {"type": "point", "fields": ["Origin"]}, 7 | "bind": {"input": "select", "options": [null, "Europe", "Japan", "USA"]} 8 | }], 9 | "mark": "point", 10 | "encoding": { 11 | "x": {"field": "Horsepower", "type": "quantitative"}, 12 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 13 | "color": { 14 | "condition": { 15 | "param": "org", 16 | "field": "Cylinders", "type": "ordinal" 17 | }, 18 | "value": "grey" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/selection_clear_brush.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "brush", 6 | "value": {"x": [55, 160], "y": [13, 37]}, 7 | "select": {"type": "interval", "clear": "mouseup"} 8 | }], 9 | "mark": "point", 10 | "encoding": { 11 | "x": {"field": "Horsepower", "type": "quantitative"}, 12 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 13 | "color": { 14 | "condition": {"param": "brush", "field": "Cylinders", "type": "ordinal"}, 15 | "value": "grey" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/selection_insert.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "paintbrush", 6 | "select": {"type": "point", "toggle": false} 7 | }], 8 | "mark": "circle", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": { 13 | "condition": { 14 | "param": "paintbrush", 15 | "field": "Cylinders", "type": "ordinal" 16 | }, 17 | "value": "grey" 18 | }, 19 | "size": {"value": 75} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/selection_project_binned_interval.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "layer": [ 5 | { 6 | "params": [{ 7 | "name": "brush", 8 | "select": {"type": "interval", "encodings": ["x"]} 9 | }], 10 | "mark": "bar", 11 | "encoding": { 12 | "x": {"field": "Acceleration", "bin": true}, 13 | "y": {"aggregate": "count"} 14 | } 15 | }, 16 | { 17 | "transform": [{"filter": {"param": "brush"}}], 18 | "mark": "bar", 19 | "encoding": { 20 | "x": {"field": "Acceleration", "bin": true}, 21 | "y": {"aggregate": "count"}, 22 | "color": {"value": "goldenrod"} 23 | } 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /examples/selection_project_interval.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "pts", "select": "interval"}], 5 | "mark": "rect", 6 | "encoding": { 7 | "y": {"field": "Origin", "type": "ordinal"}, 8 | "x": {"field": "Cylinders", "type": "ordinal"}, 9 | "color": { 10 | "condition": { 11 | "param": "pts", 12 | "aggregate": "count" 13 | }, 14 | "value": "grey" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/selection_project_interval_x.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "interval", "encodings": ["x"]} 7 | }], 8 | "mark": "rect", 9 | "encoding": { 10 | "y": {"field": "Origin"}, 11 | "x": {"field": "Cylinders"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "aggregate": "count" 16 | }, 17 | "value": "grey" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/selection_project_interval_x_y.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "interval", "encodings": ["x", "y"]} 7 | }], 8 | "mark": "rect", 9 | "encoding": { 10 | "y": {"field": "Origin"}, 11 | "x": {"field": "Cylinders"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "aggregate": "count" 16 | }, 17 | "value": "grey" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/selection_project_interval_y.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "interval", "encodings": ["y"]} 7 | }], 8 | "mark": "rect", 9 | "encoding": { 10 | "y": {"field": "Origin"}, 11 | "x": {"field": "Cylinders"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "aggregate": "count" 16 | }, 17 | "value": "grey" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/selection_project_multi.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": "point" 7 | }], 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "field": "Cylinders", "type": "ordinal", 16 | "scale": {"scheme": "yelloworangebrown"} 17 | }, 18 | "value": "grey" 19 | }, 20 | "size": { 21 | "condition": {"param": "pts", "empty": false, "value": 200}, 22 | "value": 50 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/selection_project_multi_cylinders.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "point", "fields": ["Cylinders"]} 7 | }], 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "field": "Cylinders", "type": "ordinal", 16 | "scale": {"scheme": "yelloworangebrown"} 17 | }, 18 | "value": "grey" 19 | }, 20 | "size": { 21 | "condition": {"param": "pts", "value": 200}, 22 | "value": 50 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/selection_project_single.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "point", "toggle": false} 7 | }], 8 | "mark": "point", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "field": "Cylinders", "type": "ordinal", 16 | "scale": {"scheme": "yelloworangebrown"} 17 | }, 18 | "value": "grey" 19 | }, 20 | "size": { 21 | "condition": {"param": "pts", "value": 200}, 22 | "value": 50 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/selection_toggle_altKey.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "paintbrush", 6 | "select": { 7 | "type": "point", 8 | "toggle": "event.altKey" 9 | } 10 | }], 11 | "mark": "circle", 12 | "encoding": { 13 | "x": {"field": "Horsepower", "type": "quantitative"}, 14 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 15 | "color": { 16 | "condition": { 17 | "param": "paintbrush", 18 | "field": "Cylinders", "type": "ordinal" 19 | }, 20 | "value": "grey" 21 | }, 22 | "size": {"value": 75} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_toggle_altKey_shiftKey.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "paintbrush", 6 | "select": { 7 | "type": "point", 8 | "toggle": "event.altKey && event.shiftKey" 9 | } 10 | }], 11 | "mark": "circle", 12 | "encoding": { 13 | "x": {"field": "Horsepower", "type": "quantitative"}, 14 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 15 | "color": { 16 | "condition": { 17 | "param": "paintbrush", 18 | "field": "Cylinders", "type": "ordinal" 19 | }, 20 | "value": "grey" 21 | }, 22 | "size": {"value": 75} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_toggle_shiftKey.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "paintbrush", "select": "point"}], 5 | "mark": "circle", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 9 | "color": { 10 | "condition": { 11 | "param": "paintbrush", 12 | "field": "Cylinders", "type": "ordinal" 13 | }, 14 | "value": "grey" 15 | }, 16 | "size": {"value": 75} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/selection_translate_brush_drag.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "brush", "select": "interval"}], 5 | "mark": {"type": "circle", "clip": true}, 6 | "encoding": { 7 | "x": { 8 | "field": "Horsepower", "type": "quantitative", 9 | "scale": {"domain": [75, 150]} 10 | }, 11 | "y": { 12 | "field": "Miles_per_Gallon", "type": "quantitative", 13 | "scale": {"domain": [20, 40]} 14 | }, 15 | "size": {"field": "Cylinders", "type": "quantitative"}, 16 | "color": { 17 | "condition": { 18 | "param": "brush", 19 | "field": "Origin", "type": "nominal" 20 | }, 21 | "value": "grey" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_translate_scatterplot_drag.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "grid", 6 | "select": "interval", 7 | "bind": "scales" 8 | }], 9 | "mark": "circle", 10 | "encoding": { 11 | "x": { 12 | "field": "Horsepower", "type": "quantitative", 13 | "scale": {"domain": [75, 150]} 14 | }, 15 | "y": { 16 | "field": "Miles_per_Gallon", "type": "quantitative", 17 | "scale": {"domain": [20, 40]} 18 | }, 19 | "size": {"field": "Cylinders", "type": "quantitative"} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/selection_translate_scatterplot_shift-drag.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "grid", 6 | "select": { 7 | "type": "interval", 8 | "translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!" 9 | }, 10 | "bind": "scales" 11 | }], 12 | "mark": "circle", 13 | "encoding": { 14 | "x": { 15 | "field": "Horsepower", "type": "quantitative", 16 | "scale": {"domain": [75, 150]} 17 | }, 18 | "y": { 19 | "field": "Miles_per_Gallon", "type": "quantitative", 20 | "scale": {"domain": [20, 40]} 21 | }, 22 | "size": {"field": "Cylinders", "type": "quantitative"} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_type_interval.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "pts", "select": "interval"}], 5 | "mark": "rect", 6 | "encoding": { 7 | "y": {"field": "Origin"}, 8 | "x": {"field": "Cylinders"}, 9 | "color": { 10 | "condition": { 11 | "param": "pts", 12 | "aggregate": "count" 13 | }, 14 | "value": "grey" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/selection_type_interval_invert.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "pts", "select": "interval"}], 5 | "mark": "rect", 6 | "encoding": { 7 | "y": {"field": "Origin"}, 8 | "x": {"field": "Cylinders"}, 9 | "color": { 10 | "condition": { 11 | "test": {"not": {"param": "pts"}}, 12 | "value": "grey" 13 | }, 14 | "aggregate": "count" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/selection_type_multi.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": {"url": "data/cars.json"}, 4 | "selection": { 5 | "pts": {"type": "multi"} 6 | }, 7 | "mark": "rect", 8 | "encoding": { 9 | "y": {"field": "Origin"}, 10 | "x": {"field": "Cylinders"}, 11 | "color": { 12 | "condition": { 13 | "selection": "pts", 14 | "aggregate": "count" 15 | }, 16 | "value": "grey" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/selection_type_point.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "pts", "select": "point"}], 5 | "mark": "rect", 6 | "encoding": { 7 | "y": {"field": "Origin"}, 8 | "x": {"field": "Cylinders"}, 9 | "color": { 10 | "condition": { 11 | "param": "pts", 12 | "aggregate": "count" 13 | }, 14 | "value": "grey" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/selection_type_single.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": {"url": "data/cars.json"}, 4 | "selection": { 5 | "pts": {"type": "single"} 6 | }, 7 | "mark": "rect", 8 | "encoding": { 9 | "y": {"field": "Origin"}, 10 | "x": {"field": "Cylinders"}, 11 | "color": { 12 | "condition": { 13 | "selection": "pts", 14 | "aggregate": "count" 15 | }, 16 | "value": "grey" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/selection_type_single_dblclick.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "point", "on": "dblclick"} 7 | }], 8 | "mark": "rect", 9 | "encoding": { 10 | "y": {"field": "Origin"}, 11 | "x": {"field": "Cylinders"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "aggregate": "count" 16 | }, 17 | "value": "grey" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/selection_type_single_mouseover.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "pts", 6 | "select": {"type": "point", "on": "mouseover"} 7 | }], 8 | "mark": "rect", 9 | "encoding": { 10 | "y": {"field": "Origin"}, 11 | "x": {"field": "Cylinders"}, 12 | "color": { 13 | "condition": { 14 | "param": "pts", 15 | "aggregate": "count" 16 | }, 17 | "value": "grey" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/selection_zoom_brush_wheel.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{"name": "brush", "select": "interval"}], 5 | "mark": {"type": "circle", "clip": true}, 6 | "encoding": { 7 | "x": { 8 | "field": "Horsepower", "type": "quantitative", 9 | "scale": {"domain": [75, 150]} 10 | }, 11 | "y": { 12 | "field": "Miles_per_Gallon", "type": "quantitative", 13 | "scale": {"domain": [20, 40]} 14 | }, 15 | "size": {"field": "Cylinders", "type": "quantitative"}, 16 | "color": { 17 | "condition": { 18 | "param": "brush", 19 | "field": "Origin", "type": "nominal" 20 | }, 21 | "value": "grey" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_zoom_scatterplot_shift-wheel.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "grid", 6 | "select": { 7 | "type": "interval", 8 | "zoom": "wheel![event.shiftKey]" 9 | }, 10 | "bind": "scales" 11 | }], 12 | "mark": "circle", 13 | "encoding": { 14 | "x": { 15 | "field": "Horsepower", "type": "quantitative", 16 | "scale": {"domain": [75, 150]} 17 | }, 18 | "y": { 19 | "field": "Miles_per_Gallon", "type": "quantitative", 20 | "scale": {"domain": [20, 40]} 21 | }, 22 | "size": {"field": "Cylinders", "type": "quantitative"} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/selection_zoom_scatterplot_wheel.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "params": [{ 5 | "name": "grid", 6 | "select": "interval", 7 | "bind": "scales" 8 | }], 9 | "mark": "circle", 10 | "encoding": { 11 | "x": { 12 | "field": "Horsepower", "type": "quantitative", 13 | "scale": {"domain": [75, 150]} 14 | }, 15 | "y": { 16 | "field": "Miles_per_Gallon", "type": "quantitative", 17 | "scale": {"domain": [20, 40]} 18 | }, 19 | "size": {"field": "Cylinders", "type": "quantitative"} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/sequence_line.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Plots a function using a generated sequence.", 4 | "width": 300, 5 | "height": 150, 6 | "data": { 7 | "sequence": { 8 | "start": 0, 9 | "stop": 12.7, 10 | "step": 0.1, 11 | "as": "x" 12 | } 13 | }, 14 | "transform": [ 15 | { 16 | "calculate": "sin(datum.x)", 17 | "as": "sin(x)" 18 | } 19 | ], 20 | "mark": "line", 21 | "encoding": { 22 | "x": { 23 | "field": "x", 24 | "type": "quantitative" 25 | }, 26 | "y": { 27 | "field": "sin(x)", 28 | "type": "quantitative" 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/square.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "square", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/stacked_area.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 300, "height": 200, 4 | "data": {"url": "data/unemployment-across-industries.json"}, 5 | "mark": "area", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "yearmonth", "field": "date", 9 | "axis": {"format": "%Y"} 10 | }, 11 | "y": { 12 | "aggregate": "sum", "field": "count" 13 | }, 14 | "color": { 15 | "field": "series", 16 | "scale": {"scheme": "category20b"} 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/stacked_area_normalize.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/unemployment-across-industries.json"}, 4 | "width": 300, "height": 200, 5 | "mark": "area", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "yearmonth", "field": "date", 9 | "axis": {"domain": false, "format": "%Y"} 10 | }, 11 | "y": { 12 | "aggregate": "sum", "field": "count", 13 | "axis": null, 14 | "stack": "normalize" 15 | 16 | }, 17 | "color": {"field":"series", "scale":{"scheme": "category20b"}} 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/stacked_area_ordinal.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": { 5 | "type": "area", 6 | "interpolate": "monotone" 7 | }, 8 | "encoding": { 9 | "x": {"timeUnit": "year", "field": "Year"}, 10 | "y": {"aggregate": "sum", "field": "Weight_in_lbs"}, 11 | "color": {"field": "Cylinders", "type": "ordinal"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/stacked_area_overlay.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { "url": "data/population.json"}, 4 | "transform": [ 5 | {"filter": "datum.year == 2000"}, 6 | {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"} 7 | ], 8 | "mark": {"type": "area", "line": true}, 9 | "encoding": { 10 | "y": {"aggregate": "sum", "field": "people"}, 11 | "x": {"field": "age"}, 12 | "color": { 13 | "field": "gender", 14 | "scale": {"range": ["#675193", "#ca8861"]} 15 | }, 16 | "opacity": {"value": 0.7} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/stacked_area_stream.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 300, "height": 200, 4 | "data": {"url": "data/unemployment-across-industries.json"}, 5 | "mark": "area", 6 | "encoding": { 7 | "x": { 8 | "timeUnit": "yearmonth", "field": "date", 9 | "axis": {"domain": false, "format": "%Y", "tickSize": 0} 10 | }, 11 | "y": { 12 | "aggregate": "sum", "field": "count", 13 | "axis": null, 14 | "stack": "center" 15 | }, 16 | "color": {"field":"series", "scale":{"scheme": "category20b"}} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/stacked_bar_1d.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"aggregate": "sum", "field": "Acceleration"}, 7 | "color": {"field": "Origin"} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/stacked_bar_count.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "timeUnit": "month", 8 | "field": "date", 9 | "type": "ordinal" 10 | }, 11 | "y": { 12 | "aggregate": "count", 13 | "type": "quantitative" 14 | }, 15 | "color": { 16 | "field": "weather", 17 | "type": "nominal" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/stacked_bar_count_corner_radius_config.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date", "type": "ordinal"}, 7 | "y": {"aggregate": "count"}, 8 | "color": {"field": "weather"} 9 | }, 10 | "config": {"bar": {"cornerRadiusTopLeft": 8, "cornerRadiusTopRight": 8}} 11 | } 12 | -------------------------------------------------------------------------------- /examples/stacked_bar_count_corner_radius_mark.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": {"type": "bar", "cornerRadiusTopLeft": 3, "cornerRadiusTopRight": 3}, 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date", "type": "ordinal"}, 7 | "y": {"aggregate": "count"}, 8 | "color": {"field": "weather"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/stacked_bar_count_corner_radius_mark_x.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": {"type": "bar", "cornerRadiusTopRight": 8, "cornerRadiusBottomRight": 8}, 5 | "encoding": { 6 | "y": {"timeUnit": "month", "field": "date", "type": "ordinal"}, 7 | "x": {"aggregate": "count"}, 8 | "color": {"field": "weather"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/stacked_bar_count_corner_radius_stroke.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": {"type": "bar", "cornerRadius": 10, "stroke": "black"}, 5 | "encoding": { 6 | "x": {"timeUnit": "month", "field": "date", "type": "ordinal"}, 7 | "y": {"aggregate": "count"}, 8 | "color": {"field": "weather"} 9 | }, 10 | "config": {"bar": {"strokeWidth": 2}} 11 | } 12 | -------------------------------------------------------------------------------- /examples/stacked_bar_h.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"aggregate": "sum", "field": "yield"}, 7 | "y": {"field": "variety"}, 8 | "color": {"field": "site"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/stacked_bar_h_order.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"aggregate": "sum", "field": "yield"}, 7 | "y": {"field": "variety"}, 8 | "color": {"field": "site"}, 9 | "order": {"aggregate": "sum", "field": "yield"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/stacked_bar_h_order_custom.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "transform": [{ 5 | "calculate": "if(datum.site === 'University Farm', 0, if(datum.site === 'Grand Rapids', 1, 2))", 6 | "as": "siteOrder" 7 | }], 8 | "mark": "bar", 9 | "encoding": { 10 | "x": {"aggregate": "sum", "field": "yield"}, 11 | "y": {"field": "variety"}, 12 | "color": {"field": "site"}, 13 | "order": {"field": "siteOrder"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/stacked_bar_normalize.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { "url": "data/population.json"}, 4 | "transform": [ 5 | {"filter": "datum.year == 2000"}, 6 | {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"} 7 | ], 8 | "mark": "bar", 9 | "width": {"step": 17}, 10 | "encoding": { 11 | "y": { 12 | "aggregate": "sum", "field": "people", 13 | "title": "population", 14 | "stack": "normalize" 15 | }, 16 | "x": {"field": "age"}, 17 | "color": { 18 | "field": "gender", 19 | "scale": {"range": ["#675193", "#ca8861"]} 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/stacked_bar_population.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart showing the US population distribution of age groups and gender in 2000.", 4 | "data": { "url": "data/population.json"}, 5 | "transform": [ 6 | {"filter": "datum.year == 2000"}, 7 | {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"} 8 | ], 9 | "width": {"step": 17}, 10 | "mark": "bar", 11 | "encoding": { 12 | "y": { 13 | "aggregate": "sum", "field": "people", 14 | "title": "population" 15 | }, 16 | "x": {"field": "age"}, 17 | "color": { 18 | "field": "gender", 19 | "scale": {"range": ["#675193", "#ca8861"]} 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/stacked_bar_size.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "timeUnit": "month", 8 | "field": "date", 9 | "type": "ordinal" 10 | }, 11 | "y": { 12 | "aggregate": "count", 13 | "type": "quantitative" 14 | }, 15 | "size": { 16 | "field": "weather", 17 | "type": "ordinal" 18 | }, 19 | "opacity": {"value": 0.5} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/stacked_bar_sum_opacity.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A bar chart showing the US population distribution of age groups and gender in 2000.", 4 | "data": {"url": "data/population.json"}, 5 | "transform": [ 6 | {"filter": "datum.year == 2000"}, 7 | {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"} 8 | ], 9 | "width": {"step": 17}, 10 | "mark": "bar", 11 | "encoding": { 12 | "x": { 13 | "field": "age", 14 | "type": "ordinal" 15 | }, 16 | "y": { 17 | "aggregate": "sum", 18 | "field": "people", 19 | "type": "quantitative", 20 | "title": "population" 21 | }, 22 | "opacity": {"field": "people", "type": "quantitative"} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/stacked_bar_unaggregate.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [ 5 | {"a": "A1", "b": 28, "c": "x"}, 6 | {"a": "A1", "b": 23, "c": "y"}, 7 | {"a": "A2", "b": 18, "c": "x"}, 8 | {"a": "A2", "b": 21, "c": "y"} 9 | ] 10 | }, 11 | "mark": {"type": "bar"}, 12 | "encoding": { 13 | "x": {"field": "a", "type": "ordinal"}, 14 | "y": {"field": "b", "type": "quantitative", "stack": "zero"}, 15 | "color": {"field": "c", "type": "nominal"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/stacked_bar_v.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": {"field": "variety"}, 7 | "y": {"aggregate": "sum", "field": "yield"}, 8 | "color": {"field": "site"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/stacked_bar_weather.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "timeUnit": "month", 8 | "field": "date", 9 | "type": "ordinal", 10 | "title": "Month of the year" 11 | }, 12 | "y": { 13 | "aggregate": "count", 14 | "type": "quantitative" 15 | }, 16 | "color": { 17 | "field": "weather", 18 | "type": "nominal", 19 | "scale": { 20 | "domain": ["sun", "fog", "drizzle", "rain", "snow"], 21 | "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] 22 | }, 23 | "title": "Weather type" 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/test_embedded_csv.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v3.json", 3 | "data": { 4 | "values": "a\n1\n2\n3\n4", 5 | "format": { 6 | "type": "csv" 7 | } 8 | }, 9 | "mark": "point", 10 | "encoding": { 11 | "y": {"field": "a", "type": "quantitative"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/test_minimal.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values": [{}] 5 | }, 6 | "mark": "point", 7 | "encoding": {} 8 | } 9 | -------------------------------------------------------------------------------- /examples/test_single_point_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"values": [{"a": 2}]}, 4 | "mark": "point", 5 | "encoding": {}, 6 | "config": {"mark": {"color": "purple"}} 7 | } 8 | -------------------------------------------------------------------------------- /examples/test_subobject_missing.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": { 4 | "values":[ 5 | { 6 | "rank": "1" 7 | }, 8 | { 9 | "rank": "2", 10 | "options": { 11 | "price": 16 12 | } 13 | }, 14 | { 15 | "rank": "3", 16 | "options": { 17 | "price": 17 18 | } 19 | } 20 | ] 21 | }, 22 | "transform": [{"filter": "datum.options != null"}], 23 | "mark": "line", 24 | "encoding": { 25 | "x": {"field": "rank", "type": "ordinal"}, 26 | "y": {"field": "options.price", "type": "quantitative"} 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/text_format.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "width": 50, 5 | "mark": "text", 6 | "encoding": { 7 | "y": { 8 | "field": "Origin", 9 | "type": "ordinal" 10 | }, 11 | "text": { 12 | "aggregate": "mean", 13 | "field": "Horsepower", 14 | "type": "quantitative", 15 | "format": ".2f" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/text_scatterplot_colored.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "transform": [{ 5 | "calculate": "datum.Origin[0]", 6 | "as": "OriginInitial" 7 | }], 8 | "mark": "text", 9 | "encoding": { 10 | "x": {"field": "Horsepower", "type": "quantitative"}, 11 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 12 | "color": {"field": "Origin", "type": "nominal"}, 13 | "text": {"field": "OriginInitial", "type": "nominal"} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/text_tooltip_image.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "view": {"stroke": null}, 4 | "description": "A simple chart with an image tooltip.", 5 | "data": { 6 | "values": [ 7 | {"image": "data/ffox.png"}, 8 | {"image": "data/gimp.png"}, 9 | {"image": "data/7zip.png"} 10 | ] 11 | }, 12 | "mark": "text", 13 | "encoding": { 14 | "text": {"field": "image"}, 15 | "y": {"field": "image", "axis": null}, 16 | "tooltip": [{"field": "image"}] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/tick_dot.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/seattle-weather.csv"}, 4 | "mark": "tick", 5 | "encoding": { 6 | "x": {"field": "precipitation", "type": "quantitative"} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/tick_dot_thickness.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "tick", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"} 7 | }, 8 | "config": { 9 | "tick": { 10 | "thickness": 2, 11 | "bandSize": 10 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/tick_sort.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "tick", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative", "sort": "descending"} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/tick_strip.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Shows the relationship between horsepower and the number of cylinders using tick marks.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "tick", 6 | "encoding": { 7 | "x": {"field": "Horsepower", "type": "quantitative"}, 8 | "y": {"field": "Cylinders", "type": "ordinal"} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/tick_strip_tick_band.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "tick", 5 | "encoding": { 6 | "x": {"field": "Horsepower", "type": "quantitative"}, 7 | "y": { 8 | "field": "Cylinders", 9 | "type": "ordinal", 10 | "axis": {"grid": true, "tickBand": "extent"} 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/time_output_utc_timeunit.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Using utc timeunit with local time input.", 4 | "data": { 5 | "values": [ 6 | {"date": "Sun, 01 Jan 2012 23:00:00", "price": 150}, 7 | {"date": "Sun, 02 Jan 2012 00:00:00", "price": 100}, 8 | {"date": "Sun, 02 Jan 2012 01:00:00", "price": 170}, 9 | {"date": "Sun, 02 Jan 2012 02:00:00", "price": 165}, 10 | {"date": "Sun, 02 Jan 2012 03:00:00", "price": 200} 11 | ] 12 | }, 13 | "mark": "line", 14 | "encoding": { 15 | "x": { 16 | "field": "date", 17 | "timeUnit": "utcyearmonthdatehoursminutes", 18 | "axis": {"labelAngle": 15} 19 | }, 20 | "y": {"field": "price", "type": "quantitative"} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/time_parse_local.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Non-ISO time strings are parsed as local time.", 4 | "data": { 5 | "values": [ 6 | {"date": "10 Oct 2011 22:48:00"}, 7 | {"date": "11 Oct 2022 23:00:00"} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "y": { 13 | "timeUnit": "hoursminutes", 14 | "field": "date", 15 | "type": "ordinal", 16 | "title": "time" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/time_parse_utc.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Parsing a date in utc and outputting utc.", 4 | "data": { 5 | "values": [ 6 | {"date": "2011-10-10"}, 7 | {"date": "2011-10-12"} 8 | ] 9 | }, 10 | "mark": "point", 11 | "encoding": { 12 | "y": { 13 | "timeUnit": "utchours", 14 | "field": "date", 15 | "type": "ordinal", 16 | "title": "time" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/time_parse_utc_format.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Using format parse to parsing of input time data as utc time.", 4 | "data": { 5 | "values": [ 6 | {"date": "10 Oct 2011 22:48:00"}, 7 | {"date": "11 Oct 2022 23:00:00"} 8 | ], 9 | "format": { 10 | "parse": {"date": "utc:'%d %b %Y %H:%M:%S'"} 11 | } 12 | }, 13 | "mark": "point", 14 | "encoding": { 15 | "y": { 16 | "timeUnit": "hoursminutes", 17 | "field": "date", 18 | "type": "ordinal", 19 | "title": "time" 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/trail_color.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock prices of 5 Tech Companies over Time.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "trail", 6 | "encoding": { 7 | "x": {"field": "date", "type": "temporal"}, 8 | "y": {"field": "price", "type": "quantitative"}, 9 | "size": {"field": "price", "type": "quantitative"}, 10 | "color": {"field": "symbol", "type": "nominal"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/trellis_anscombe.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Anscombe's Quartet", 4 | "data": {"url": "data/anscombe.json"}, 5 | "mark": "circle", 6 | "encoding": { 7 | "column": {"field": "Series"}, 8 | "x": { 9 | "field": "X", 10 | "type": "quantitative", 11 | "scale": {"zero": false} 12 | }, 13 | "y": { 14 | "field": "Y", 15 | "type": "quantitative", 16 | "scale": {"zero": false} 17 | }, 18 | "opacity": {"value": 1} 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/trellis_bar.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A trellis bar chart showing the US population distribution of age groups and gender in 2000.", 4 | "data": { "url": "data/population.json"}, 5 | "transform": [ 6 | {"filter": "datum.year == 2000"}, 7 | {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"} 8 | ], 9 | "width": {"step": 17}, 10 | "mark": "bar", 11 | "encoding": { 12 | "row": {"field": "gender"}, 13 | "y": { 14 | "aggregate": "sum", "field": "people", 15 | "title": "population" 16 | }, 17 | "x": {"field": "age"}, 18 | "color": { 19 | "field": "gender", 20 | "scale": {"range": ["#675193", "#ca8861"]} 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/trellis_bar_histogram.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 15}, 8 | "field": "Horsepower", 9 | "type": "quantitative" 10 | }, 11 | "y": { 12 | "aggregate": "count", 13 | "type": "quantitative" 14 | }, 15 | "row": {"field": "Origin"} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/trellis_bar_histogram_label_rotated.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "x": { 7 | "bin": {"maxbins": 15}, 8 | "field": "Horsepower", 9 | "type": "quantitative" 10 | }, 11 | "y": { 12 | "aggregate": "count", 13 | "type": "quantitative" 14 | }, 15 | "row": { 16 | "field": "Origin", 17 | "type": "nominal", 18 | "header": {"labelAngle": -90} 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/trellis_column_year.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock price mean per quarter broken down by years.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "line", 6 | "encoding": { 7 | "x": {"timeUnit": "quarter", "field": "date", "type": "ordinal"}, 8 | "y": {"field": "price", "type": "quantitative", "aggregate": "mean"}, 9 | "color": {"field": "symbol", "type": "nominal"}, 10 | "column": {"field": "date", "timeUnit": "year"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/trellis_line_quarter.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "Stock price mean per quarter broken down by years.", 4 | "data": {"url": "data/stocks.csv"}, 5 | "mark": "point", 6 | "encoding": { 7 | "x": {"timeUnit": "quarter", "field": "date", "type": "ordinal"}, 8 | "y": {"field": "price", "type": "quantitative", "aggregate": "mean"}, 9 | "color": {"field": "symbol", "type": "nominal"}, 10 | "column": {"field": "date", "timeUnit": "year"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/trellis_row_column.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/cars.json"}, 4 | "mark": "point", 5 | "encoding": { 6 | "row": {"field": "Cylinders"}, 7 | "column": {"field": "Origin"}, 8 | "x": {"field": "Horsepower", "type": "quantitative"}, 9 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, 10 | "color": {"field": "Cylinders", "type": "nominal"}, 11 | "shape": {"field": "Origin", "type": "nominal"} 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/trellis_scatter.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/movies.json"}, 4 | "mark": "point", 5 | 6 | "encoding": { 7 | "facet": {"field": "MPAA Rating", "type": "ordinal", "columns": 2}, 8 | "x": {"field": "Worldwide Gross", "type": "quantitative"}, 9 | "y": {"field": "US DVD Sales", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/trellis_scatter_binned_row.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "A trellis scatterplot showing Horsepower and Miles per gallons, faceted by binned values of Acceleration.", 4 | "data": {"url": "data/cars.json"}, 5 | "mark": "point", 6 | "encoding": { 7 | "row": {"field": "Acceleration", "bin": true}, 8 | "x": {"field": "Horsepower", "type": "quantitative"}, 9 | "y": {"field": "Miles_per_Gallon", "type": "quantitative"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/trellis_scatter_small.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "width": 75, 4 | "height": 75, 5 | "data": {"url": "data/movies.json"}, 6 | "mark": "point", 7 | "encoding": { 8 | "column": {"field": "MPAA Rating"}, 9 | "x": {"field": "Worldwide Gross", "type": "quantitative"}, 10 | "y": {"field": "US DVD Sales", "type": "quantitative"} 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/trellis_stacked_bar.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "data": {"url": "data/barley.json"}, 4 | "mark": "bar", 5 | "encoding": { 6 | "column": {"field": "year"}, 7 | "x": {"field": "yield", "type": "quantitative", "aggregate": "sum"}, 8 | "y": {"field": "variety", "type": "nominal"}, 9 | "color": {"field": "site", "type": "nominal"} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/bullet.csv: -------------------------------------------------------------------------------- 1 | Category,Sales,Target,poor,average,good 2 | Technology,836154,600000,300000,500000,900000 3 | Furniture,741999,800000,500000,650000,900000 4 | Office Supplies,719047,550000,350000,450000,900000 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/column-line-timeline.csv: -------------------------------------------------------------------------------- 1 | Order Date,Sales,Profit 2 | 2015 Mar,148895.592,7622.458 3 | 2015 Jun,173077.5192,22408.1384 4 | 2015 Sep,287266.4246,25609.4436 5 | 2015 Dec,359255.4604,43447.9082 6 | 2016 Mar,137703.4772,18529.8832 7 | 2016 Jun,178248.374,24381.8448 8 | 2016 Sep,260519.1504,33707.2388 9 | 2016 Dec,364594.0164,46618.2406 10 | 2017 Mar,186474.362,22882.7416 11 | 2017 Jun,272164.602,32780.6788 12 | 2017 Sep,287574.7244,31647.2096 13 | 2017 Dec,472197.5076,76279.7186 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/diverging-bar.csv: -------------------------------------------------------------------------------- 1 | Sub-Category,Profit Ratio 2 | Furnishings,-26 3 | Appliances,-11 4 | Tables,-9 5 | Bookcases,-8 6 | Supplies,-7 7 | Machines,-6 8 | Binders,-2 9 | Storage,4 10 | Chairs,8 11 | Phones,17 12 | Art,21 13 | Accessories,21 14 | Fasteners,30 15 | Envelopes,38 16 | Paper,40 17 | Copiers,42 18 | Labels,44 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/frequency-polygons.csv: -------------------------------------------------------------------------------- 1 | Time,Type,Frequency 2 | 350,A,0 3 | 350,B,0 4 | 450,A,5 5 | 450,B,0 6 | 550,A,10 7 | 550,B,3 8 | 650,A,5 9 | 650,B,6 10 | 750,A,0 11 | 750,B,5 12 | 850,A,0 13 | 850,B,5 14 | 950,A,0 15 | 950,B,0 16 | 1050,A,0 17 | 1050,B,1 18 | 1150,A,0 19 | 1150,B,0 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/histogram.csv: -------------------------------------------------------------------------------- 1 | Bin,CountV 2 | 68,1 3 | 66,1 4 | 64,2 5 | 62,8 6 | 60,15 7 | 58,40 8 | 56,58 9 | 54,104 10 | 52,100 11 | 50,139 12 | 48,124 13 | 46,99 14 | 44,74 15 | 42,63 16 | 40,23 17 | 38,13 18 | 36,2 19 | 34,2 20 | 32,0 21 | 30,1 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/marimekko.csv: -------------------------------------------------------------------------------- 1 | Region,Year,Sales 2 | West,2018,250137.86 3 | West,2017,187458.3 4 | West,2016,139940.81 5 | West,2015,147848.3 6 | East,2018,213069.43 7 | East,2017,180691.57 8 | East,2016,156323.32 9 | East,2015,128696.92 10 | Central,2018,147113.91 11 | Central,2017,147414.65 12 | Central,2016,102854.43 13 | Central,2015,103856.91 14 | South,2018,122922.33 15 | South,2017,93621.53 16 | South,2016,71371.73 17 | South,2015,103845.48 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/ordered-bar.csv: -------------------------------------------------------------------------------- 1 | Region,Sales 2 | South,391721.9 3 | Central,501239.89 4 | East,678781.24 5 | West,725457.82 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/paired-column.csv: -------------------------------------------------------------------------------- 1 | Region,Year,Sales 2 | West,2018,250128.37 3 | West,2015,147883.03 4 | East,2018,213082.9 5 | East,2015,128680.46 6 | Central,2018,147098.13 7 | Central,2015,103838.16 8 | South,2018,122905.86 9 | South,2015,103845.84 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/priestley-timeline.csv: -------------------------------------------------------------------------------- 1 | Name,Born,Died 2 | Elgar,02-06-1857,23-02-1934 3 | Brahms,07-05-1833,03-04-1897 4 | Schumann,08-06-1810,29-07-1856 5 | Berlioz,11-12-1803,08-03-1869 6 | Schubert,31-01-1797,19-11-1828 7 | Beethoven,17-12-1770,26-03-1827 8 | Mozart,27-01-1756,05-12-1791 9 | Haydn,31-03-1732,31-05-1809 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/radar.csv: -------------------------------------------------------------------------------- 1 | body,city-mpg,cylinders,highway-mpg,horsepower,price 2 | convertible,20.5,5.0,26.0,131.67,21890.5 3 | hatchback,26.31,4.11,12.17,101.33,9957.44 4 | sedan,15.32,2.43,30.83,103.1,14459.76 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/slope-2.csv: -------------------------------------------------------------------------------- 1 | Department,Color,Year,Sales 2 | Tools,False,2016,91303.0 3 | Tools,False,2017,85144.0 4 | Sports,False,2016,94912.0 5 | Sports,False,2017,80557.0 6 | Home,False,2016,91107.0 7 | Home,False,2017,87179.0 8 | Shoes,True,2016,88651.0 9 | Shoes,True,2017,92840.0 10 | Baby,True,2016,79577.0 11 | Baby,True,2017,90282.0 -------------------------------------------------------------------------------- /examples/visual-vocabulary/data/treemap.csv: -------------------------------------------------------------------------------- 1 | Category,Sub-Category,Sales 2 | Technology,Phones,330007.05 3 | Technology,Machines,189238.63 4 | Technology,Copiers,149528.03 5 | Technology,Accessories,167380.32 6 | Office Supplies,Supplies,46673.54 7 | Office Supplies,Storage,223843.61 8 | Office Supplies,Paper,78479.21 9 | Office Supplies,Labels,12486.31 10 | Office Supplies,Fasteners,3024.28 11 | Office Supplies,Envelopes,16476.4 12 | Office Supplies,Binders,203412.73 13 | Office Supplies,Art,27118.79 14 | Office Supplies,Appliances,107532.16 15 | Furniture,Tables,206965.53 16 | Furniture,Furnishings,91705.16 17 | Furniture,Chairs,328449.1 18 | Furniture,Bookcases,114880.0 -------------------------------------------------------------------------------- /images/vega-viewer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RandomFractals/vscode-vega-viewer/8043d1ab41d9957c55a601a449b09a51d1b6b272/images/vega-viewer.png -------------------------------------------------------------------------------- /images/vega-viewer.svg: -------------------------------------------------------------------------------- 1 | 5 | 📈 6 | 7 | -------------------------------------------------------------------------------- /images/visual-vocabulary.svg: -------------------------------------------------------------------------------- 1 | 5 | ⿻ 6 | 7 | -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | import { LogLevel } from "./logger"; 2 | 3 | // log level setting for prod. vs. dev run of this ext. 4 | export const logLevel: LogLevel = LogLevel.Info; // change to .Debug for ext. dev debug 5 | -------------------------------------------------------------------------------- /src/test/runTest.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | 3 | import { runTests } from 'vscode-test'; 4 | 5 | async function main() { 6 | try { 7 | // The folder containing the Extension Manifest package.json 8 | // Passed to `--extensionDevelopmentPath` 9 | const extensionDevelopmentPath = path.resolve(__dirname, '../../'); 10 | 11 | // The path to test runner 12 | // Passed to --extensionTestsPath 13 | const extensionTestsPath = path.resolve(__dirname, './suite/index'); 14 | 15 | // Download VS Code, unzip it and run the integration test 16 | await runTests({ extensionDevelopmentPath, extensionTestsPath }); 17 | } catch (err) { 18 | console.error('Failed to run tests'); 19 | process.exit(1); 20 | } 21 | } 22 | 23 | main(); 24 | -------------------------------------------------------------------------------- /web/vega.lite.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v5.json", 3 | "description": "simple bar chart with embedded data", 4 | "data": { 5 | "values": [ 6 | {"a": "A","b": 28}, 7 | {"a": "B","b": 55}, 8 | {"a": "C","b": 43} 9 | ] 10 | }, 11 | "mark": "bar", 12 | "encoding": { 13 | "x": {"field": "a", "type": "ordinal"}, 14 | "y": {"field": "b", "type": "quantitative"} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /web/vega.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega/v5.json", 3 | "width": 400, 4 | "height": 200, 5 | "padding": 5 6 | } --------------------------------------------------------------------------------