moon_vegalite gallery

Left: SVG rendered by moon_vegalite. Middle: the SVG produced by vega-lite 5.23.0 + vega 5.33.1 for the same specification. Right: the same chart in the hand-drawn style (moon_rough, seed 7, coordinates rounded to 2 decimals), which equals what vega-lite + vega + rough.js 4.6.6 give. Same specification and seed, same bytes. Regenerate with node scripts/gen_gallery.mjs.

Specificationmoon_vegalitevega (official)hand-drawn (moon_rough)
Bar chart
bar
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: barvega: barhand-drawn: bar
Aggregated horizontal bars
bar_aggregate
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: bar_aggregatevega: bar_aggregatehand-drawn: bar_aggregate
Binned histogram
histogram
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: histogramvega: histogramhand-drawn: histogram
Stacked bars with a colour legend
stacked_bar_v
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: stacked_bar_vvega: stacked_bar_vhand-drawn: stacked_bar_v
Scatter plot
point_2d
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: point_2dvega: point_2dhand-drawn: point_2d
Scatter plot with colour legend
point_color
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: point_colorvega: point_colorhand-drawn: point_color
Circles
circle
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: circlevega: circlehand-drawn: circle
Time series line
line
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: linevega: linehand-drawn: line
Monotone line over a time unit
line_month
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: line_monthvega: line_monthhand-drawn: line_month
Area chart
area
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: areavega: areahand-drawn: area
Bars over a time unit
bar_month
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: bar_monthvega: bar_monthhand-drawn: bar_month
Tick strip
tick_strip
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: tick_stripvega: tick_striphand-drawn: tick_strip
Rule ranges
rule_extent
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: rule_extentvega: rule_extenthand-drawn: rule_extent
Coloured text marks
text_scatterplot_colored
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: text_scatterplot_coloredvega: text_scatterplot_coloredhand-drawn: text_scatterplot_colored
Log scale
point_log
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: point_logvega: point_loghand-drawn: point_log
Pie chart
arc_pie
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: arc_pievega: arc_piehand-drawn: arc_pie
Donut chart
arc_donut
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: arc_donutvega: arc_donuthand-drawn: arc_donut
Ordinal colour
point_ordinal_color
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: point_ordinal_colorvega: point_ordinal_colorhand-drawn: point_ordinal_color
Stacked area, ordinal colour
stacked_area_ordinal
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: stacked_area_ordinalvega: stacked_area_ordinalhand-drawn: stacked_area_ordinal
Layers: bars and a line
layer_bar_line
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_bar_linevega: layer_bar_linehand-drawn: layer_bar_line
Layers: shared bins
layer_histogram
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_histogramvega: layer_histogramhand-drawn: layer_histogram
Layers: histogram and a mean rule
layer_histogram_global_mean
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_histogram_global_meanvega: layer_histogram_global_meanhand-drawn: layer_histogram_global_mean
Layers: a rect over the extent
layer_rect_extent
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_rect_extentvega: layer_rect_extenthand-drawn: layer_rect_extent
Layers: annotated bars
layer_bar_annotations
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_bar_annotationsvega: layer_bar_annotationshand-drawn: layer_bar_annotations
Layers: a datum rule
layer_line_datum_rule
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_line_datum_rulevega: layer_line_datum_rulehand-drawn: layer_line_datum_rule
Layers: legend on the left
layer_color_legend_left
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_color_legend_leftvega: layer_color_legend_lefthand-drawn: layer_color_legend_left
Layers: independent legends
layer_circle_independent_color
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: layer_circle_independent_colorvega: layer_circle_independent_colorhand-drawn: layer_circle_independent_color
MoonFrame-generated: bar
moonframe_bar
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: moonframe_barvega: moonframe_barhand-drawn: moonframe_bar
MoonFrame-generated: bar_stacked
moonframe_bar_stacked
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: moonframe_bar_stackedvega: moonframe_bar_stackedhand-drawn: moonframe_bar_stacked
MoonFrame-generated: point_color
moonframe_point_color
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: moonframe_point_colorvega: moonframe_point_colorhand-drawn: moonframe_point_color
MoonFrame-generated: line
moonframe_line
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: moonframe_linevega: moonframe_linehand-drawn: moonframe_line
MoonFrame-generated: bar_titled
moonframe_bar_titled
identical to vega output (ignoring accessibility attributes)
hand-drawn: identical to vega-lite + rough.js		moon_vegalite: moonframe_bar_titledvega: moonframe_bar_titledhand-drawn: moonframe_bar_titled