Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Stack Sorting Struggle

✓ Published0🌍 Public
LLuis
Last edited Dec 29, 2019
Created on Dec 29, 2019

This visualization shows suicide rates aggregated by year and age group, with bars stacked by age. The color legend uses a custom sort order, but the stacking order of the bars fails to match that order, highlighting a mismatch in the Vega-Lite API. The code uses `vl.aggregate` to sum suicides, `vl.markBar`, and encodes color and order with `fieldO('age')` and a custom `sort` array. Data comes from a CSV loaded via `d3.csv`, and the visualization is rendered using the Vega-Lite API with D3 v5.

AI-generated description

This visualization demonstrates frustrations with the vega-lite-api in trying to get the sort order of stacking to match the sort order of the color scale. Notice that the ordering of the color legend is correct (a custom sort order), but the order of the layering does not match it.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Stack Sorting Struggle

This visualization demonstrates a stacking order issue with the Vega-Lite API. It displays suicide rates by age group across years as stacked bar marks, where the color legend is correctly sorted by a custom age order, but the bar layering does not match that same sorted sequence. Using D3’s CSV loader for data ingestion, the code applies a viridis color scheme and attempts to set both color and order encodings with the same sort specification, revealing a mismatch in how Vega-Lite interprets these properties.

CCurran Kelleher
94% match
Loading thumbnail…

Suicide Statistics in 30 years

A stacked bar chart displays global suicide counts aggregated by year and age group over 30 years. The visualization uses the vega-lite-api to create marks, with d3.csv loading the Suicide_Rates_Overview dataset. Age groups are color-encoded via the viridis scale, while tooltips reveal exact suicide numbers per year-age combination. The chart is rendered with Vega, Vega-Lite, and vega-tooltip, with custom styling from a config object improving readability against a dark theme.

JJane Wang
78% match
Loading thumbnail…

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1
78% match
Loading thumbnail…

Suicide Statistics in 30 years

This visualization presents suicide statistics over 30 years, showing the total number of suicides per year as stacked bar segments colored by age group. The chart uses vega-lite-api to define an aggregate transformation on the CSV data source, summing suicides by year and age. The view renders with vega and vega-lite, using a dark configuration for axis styling and a viridis color scheme for age categories, with a tooltip handling from vega-tooltip.

CCurran Kelleher
77% match
Loading thumbnail…

Suicide Statistics in 30 years

This visualization displays global suicide statistics over a 30-year period, using a grouped bar chart where each year’s total suicides are broken down by age category. The data comes from a CSV file loaded via `d3.csv`, and the chart is constructed using the vega-lite-api, which builds the specification programmatically. The visualization aggregates suicide counts with `vl.aggregate` and encodes year on the x-axis, suicide totals on the y-axis, and age groups as color-coded bars using the viridis scale. A custom config improves readability with adjusted font sizes and axis styling.

Mmtabaka
76% match
Loading thumbnail…

Suicide Statistics in 30 years

This visualization displays total suicide numbers by age group for each year across 30 years, using grouped bars colored with the viridis scheme. The chart is built with Vega-Lite API, which wraps D3.js, and reads data from a CSV file loaded via d3.csv. A clickable tooltip, enabled through vega-tooltip, reveals exact suicide counts for each bar segment, while a custom config adjusts font sizes and colors for readability.

WW9183907
76% match
Loading thumbnail…

Vega-Lite API Template

This example displays a bar chart of U.S. counties with death counts, sorted in descending order, with a tooltip for population. Built with the Vega-Lite API, the visualization uses a D3 CSV loader to fetch the data from a GitHub gist. The chart is rendered as SVG via Vega, and the code applies a custom configuration to adjust fonts and axis styling. The visualization is sized to fit the browser window.

Mmtabaka
75% match
Loading thumbnail…

Stacked Line: Deaths by Suicide, Firearm, Alcohol

This stacked bar visualization displays total deaths from suicide, firearms, and alcohol from 2003 to 2017, revealing an upward trend and consistently higher alcohol-related deaths than suicide, which exceed firearm deaths. It uses vega-lite-api with d3.csv to load data from a Gist-hosted GitHub raw file, rendering bars with encoded time, quantitative total, and nominal type fields. The visualization applies a custom color scheme and styled axes from a config object, with a React-based bundle and tooltip support via vega-tooltip.

PPeter Maida
75% match