Bar

Bar and Tick

Interactive bar-and-tick chart based on Observable Plot’s bar-and-tick gallery example, using deterministic English letter frequency data with bars and overlaid tick marks on a percent-scaled y-axis. Users can switch ordering between alphabetical, descending frequency, and ascending frequency to compare rank and distribution patterns across letters. Slider controls adjust bar opacity and tick thickness for visual emphasis, and hover exploration combines Plot.tip with Plot.pointer plus Plot.crosshair to inspect exact letter frequency percentages.


State Population Change Diverging Bars

Interactive diverging horizontal bar chart based on Observable Plot’s state population change example, showing percent change from 2010 to 2019 for seeded U.S. states. Users can filter to all states, growth-only, or decline-only and can adjust a visible-state slider to focus on the largest absolute changes. Hover exploration uses Plot.tip with Plot.pointer and Plot.crosshairX to inspect exact percent change and region details while bars diverge around a zero baseline.


Diverging Stacked Likert Bars

Interactive diverging stacked bar chart based on Observable Plot’s diverging stacked bar gallery example, using deterministic survey responses grouped by question and Likert response category. Users can toggle between normalized percentages and raw answer counts, and they can change question ordering by favorable share, net sentiment score, or alphabetical order. Hover exploration uses Plot.tip with Plot.pointer to inspect each segment’s question, response label, count, total, and percentage while the custom Likert offset keeps stacks centered around the neutral midpoint.


Faceted Lollipop by State

Interactive faceted lollipop chart based on Observable Plot’s faceted lollipop gallery example, using deterministic state-by-year population rows with state, year, and population columns. The chart uses Plot.ruleX and Plot.dot marks in small-multiple state facets to compare year-level population patterns, with a year-range control to focus the x-domain on selected years. Users can change facet ordering, adjust the number of visible state panels, and switch color schemes; hover exploration combines Plot.tip with Plot.pointer and Plot.crosshair to inspect exact state, year, and population values.


Grouped Bar Chart by State and Age Group

Interactive grouped bar chart based on Observable Plot’s grouped bar gallery example, using faceted state panels (fx) and age-group categories on each panel with population on the y-axis. The app seeds deterministic state-age population data and ranks states by total population, then a state panel slider lets users choose how many top states are shown at once. A color scheme dropdown updates the bar fill palette in real time, and hover interaction is enabled with Plot.tip plus Plot.pointer so users can inspect the exact population value for each state and age-group bar.


Olympians Grouped Bar Chart

Interactive grouped bar chart based on Observable Plot’s olympians grouped bar gallery example, faceting by sport (fx) and grouping bars by sex on the x-axis. Users can switch between counting athlete entries and summing medal totals, and a top-sports slider dynamically limits facets to the highest-ranked sports for the selected metric. Hover exploration uses Plot.tip with Plot.pointer so users can inspect sport, sex, and medal values directly over the chart while comparing grouped bars.


Horizontal Bar Chart

Interactive horizontal bar chart based on Observable Plot’s horizontal bar gallery example, using English letter frequencies on a top-oriented percent axis with grid lines. Users can change sorting between descending frequency, ascending frequency, and alphabetical order, and they can limit the visible bars with a top-N slider. A threshold slider filters out letters below a selected frequency so users can focus on dominant letters, while hover exploration uses Plot.tip with Plot.pointer plus Plot.crosshairX to inspect exact percentages.


Horizontal Bars with a Label

Interactive horizontal bar chart based on Observable Plot’s horizontal-bar-with-label gallery example, using deterministic company market-value data in billions. The chart recreates in-bar value labels with Plot.text anchored at the bar end, while users can change sorting order and adjust a top-N slider to control how many companies are shown. Label-format options switch between rounded billions, exact billions, and trillions, and hover exploration uses Plot.tip with Plot.pointer plus Plot.crosshairX to inspect exact values and sectors.


Horizontal Stacked Bars

Interactive horizontal stacked bar chart based on Observable Plot’s horizontal stacked bars gallery example, using deterministic congressional-style records with party, gender, chamber, and region dimensions. Users can choose which dimension forms each horizontal bar, choose a different dimension for stacked segments, and switch sorting between largest-first, smallest-first, and alphabetical order. A normalization toggle switches between absolute member counts and 100% composition shares, while a color-scheme selector updates the categorical palette; hover exploration combines Plot.tip with Plot.pointer and Plot.crosshairX so users can inspect segment counts, totals, and percentages.


Lollipop Chart

Interactive lollipop chart based on Observable Plot’s lollipop gallery example, using deterministic English letter frequency data with Plot.ruleX stems and Plot.dot heads on a percent-scaled y-axis. Users can switch ordering between alphabetical, descending frequency, and ascending frequency, then use a top-N slider to limit the visible letters for focused comparisons. Additional sliders adjust dot radius and stem width, while hover exploration combines Plot.tip with Plot.pointer and Plot.crosshair to inspect exact frequency percentages for each letter.


Ordinal Time Bar Chart

Interactive quarterly bar chart based on Observable Plot’s ordinal bar chart example, using deterministic labor-market style data with quarter, vacancies, and applications columns. The chart reproduces the dual x-axis treatment by showing quarter ticks (Q1Q4) and year labels on second-quarter positions, with bars drawn over a zero baseline. Users can switch between vacancy and application metrics and adjust how many recent quarters are visible; hover exploration combines Plot.tip with Plot.pointerX and Plot.crosshairX to inspect exact values for each quarter.


Single Stacked Percentage Bar

Interactive single stacked percentage bar based on Observable Plot’s stacked percentages gallery example, using deterministic English letter-frequency data where all segments compose one 100% horizontal bar. Users can change segment order between descending share, ascending share, and alphabetical order, which updates the sequence of stacked segments across the bar. A minimum-label-share slider controls which segments show centered text labels, and hover exploration uses Plot.tip with Plot.pointer plus Plot.crosshairX so users can inspect exact percentage values for each letter segment.


Single Stacked Bar by Olympian Sport Share

Interactive single stacked horizontal bar based on Observable Plot’s single stacked bar example, using deterministic olympian sport participation counts converted into share of total athletes. Users can reorder segments by largest share, smallest share, or alphabetical sport name; a label-threshold slider controls which segments display rotated sport labels; and an opacity slider adjusts segment emphasis for readability. Hover exploration uses Plot.tip with Plot.pointer and Plot.crosshairX to inspect each sport’s athlete count and percentage share directly on the stacked bar.


Stacked Bars by Island and Species

Interactive stacked bar chart based on Observable Plot’s stacked bars gallery example, showing deterministic penguin island data with species-specific stacked segments. Users can switch the metric between observation counts and average body mass, choose among categorical color schemes, and toggle normalization to compare either composition share or absolute stacked totals. Hover exploration uses Plot.tip with Plot.pointer so users can inspect each segment’s island, species, and exact metric value directly on the chart.


Crimean War Stacked Bars by Cause

Interactive stacked monthly bar chart based on Observable Plot’s Crimean War barY example, using deterministic long-form data with date, cause, and deaths columns. Users can switch the campaign window between the full timeline, early peak months, and later decline months, and can toggle stack mode between absolute deaths and normalized 100% composition. Hover exploration combines Plot.tip with Plot.pointerX plus Plot.crosshairX so users can inspect monthly totals while comparing disease, wounds, and other causes over time.


Stacked Vertical Histogram

Interactive vertical histogram based on Observable Plot’s stacked olympians histogram example, using deterministic athlete records with weight, sex, sport, and athlete name fields. The chart uses Plot.rectY with Plot.binX to bin weight values on the x-axis and stack each bin by sex, with controls for sex filtering and histogram bin count to explore distribution shape at different granularities. Users can switch the y-axis between raw counts and proportional share mode, while hover exploration combines Plot.tip with Plot.pointerX and Plot.crosshairX to inspect exact athlete-level values at the cursor.


Stacked Waffles by Weight and Sex

Interactive faceted waffle chart based on Observable Plot’s stacked waffles gallery example, using deterministic athlete rows with weight, sex, and sport fields. The chart reproduces Plot.waffleY with Plot.groupZ and a signed y-channel (female = +1, male = -1) so waffle stacks diverge around zero while faceting by weight bins. Users can filter to all/female/male athletes, adjust the facet interval and waffle unit size with sliders, and switch categorical color schemes; hover exploration uses Plot.tip with Plot.pointer to inspect athlete, sex, weight, and sport details.


Survey Waffle

Interactive waffle chart based on Observable Plot’s survey waffle gallery example, using deterministic survey question rows with baseline yes counts from a 120-person survey. The chart shows one waffle panel per question with a subdued full respondent backdrop and highlighted yes-response waffle cells, plus percentage labels for each panel. Users can change the respondent base (80, 120, or 160), choose ranking order (highest yes, lowest yes, or original order), adjust how many questions are visible, and switch the highlight color; hover exploration uses Plot.tip with Plot.pointer to inspect each question’s yes count, percent, and theme.


Temporal Bar Chart

Interactive temporal bar chart based on Observable Plot’s temporal bar chart example, using deterministic daily weather-style records with date, wind, temperature, and precipitation columns. The app renders bars with Plot.rectY on a UTC time axis and supports both daily and weekly interval binning to change the temporal aggregation of bars. Users can switch the plotted metric and adjust the visible day window with a slider, while hover exploration uses Plot.tip with Plot.pointerX and Plot.crosshairX to inspect exact date/value pairs.


Vertical Bar Chart

Interactive vertical bar chart inspired by Observable Plot’s vertical bar gallery example, using English letter frequencies on a percent-scaled y-axis with a zero baseline rule. Users can change ordering between descending frequency, ascending frequency, and alphabetical sorting, and they can adjust a top-N slider to control how many bars are displayed. Hover exploration is enabled with Plot.tip combined with Plot.pointer and Plot.crosshair so users can inspect exact letter frequency percentages directly on the chart.


Vertical Bars with Rotated Labels

Interactive vertical bar chart based on Observable Plot’s rotated-label bars gallery example, showing deterministic brand market values with long category names on the x-axis. Users can choose ordering (top values descending, top values ascending, or alphabetical), adjust how many brands are displayed with a visible-bars slider, and tune the x-axis tick label rotation angle. Hover exploration combines Plot.tip with Plot.pointerX and Plot.crosshairX so users can inspect each brand’s exact market value in billions while comparing bars against the zero baseline.