Rule Tick
Population Barcode Chart
A barcode-style chart showing US state population distributions by age group, inspired by the Observable Plot barcode example. Each vertical tick mark represents one state’s share of population in a given age group, normalized so each state sums to 100%. The overlapping ticks create a barcode-like pattern revealing the distribution shape. The chart includes: - Tick marks (Plot.tickX) with Plot.normalizeX(“sum”) transform to show proportional population by age - Interactive tooltip on hover (via Plot.tip with Plot.pointer) showing the state name, age group, and normalized percentage - A “Highlight State” dropdown to select a specific state, which dims all other states and emphasizes the selected one with a thicker, more opaque stroke - A “Color” dropdown to change the tick stroke color (Steel Blue, Dark Red, Forest Green, Purple, Dark Orange, Black) - A “Tick Opacity” slider to control the transparency of the overlapping tick marks from very faint to bold - Summary statistics cards showing total states, total population, youth percentage (under 20), and senior percentage (70+) — stats update when a specific state is highlighted - Seed data for 12 US states across 9 age groups (108 data points)
Germany Traffic Patterns
A sorted-groups tick chart showing hourly vehicle counts at 12 German highway counting stations, inspired by the Observable Plot sorted-groups example. Each semi-transparent tick mark represents one hourly measurement, while a thicker colored tick shows the aggregate statistic (median by default) for each location. Locations are sorted by the aggregate value so the busiest stations appear at the top. The chart includes: - Individual tickX marks for every measurement at each location, with adjustable opacity - Aggregate tickX marks (via Plot.groupY) shown in a configurable color, sorted by the aggregate value - Tooltip on hover (via Plot.tip with Plot.pointer) showing the location name and exact vehicle count - An “Aggregate” dropdown to switch between Median, Mean, Min, and Max for the summary tick - A “Sort By” dropdown to order locations by the chosen aggregate or alphabetically by name - An “Aggregate Color” dropdown to change the summary tick color (Red, Steel Blue, Green, Orange, Purple, Black) - A “Tick Opacity” slider to control the transparency of individual measurement ticks - A “Highlight Location” dropdown to select a specific station, dimming all others and showing a detail panel with min, median, mean, max, and reading count - Summary statistics cards showing total locations, total measurements, busiest station, and quietest station - Seed data for 12 German highway/road locations with 12 measurements each (144 data points)
Band Chart with Rule
A temperature band chart showing daily min/max temperature ranges for a full year of synthetic weather data. Each day is rendered as a vertical rule (line) spanning from the minimum to the maximum temperature, colored using a diverging color scheme. The chart includes: - A horizontal rule at 0°C as a baseline reference - Interactive tooltip on hover (via Plot.tip with pointerX) showing the date, min/max temps, and daily range - A “Color Scheme” dropdown to switch between BuRd, Viridis, Turbo, Warm, Cool, Plasma, Inferno, and Magma color schemes - A “Color By” dropdown to color the rules by Min Temperature, Max Temperature, or the daily Range - “From Month” and “To Month” dropdowns to filter the displayed date range - Summary statistics cards below the chart showing the coldest day, average min/max, and hottest day for the selected month range
Bar & Tick Chart
A letter frequency chart combining translucent bars with tick marks to show exact values, inspired by the Observable Plot bar-and-tick example. Each of the 26 English letters is shown as a semi-transparent bar with a solid tick mark at the top indicating the precise frequency percentage. The chart includes: - Translucent barY marks with overlaid tickY marks for precise value reading - A horizontal rule at y=0 as baseline - Interactive tooltip on hover (via Plot.tip with pointerX) showing the letter and its exact frequency percentage - A “Sort” dropdown to order letters alphabetically, by ascending frequency, or by descending frequency - A “Color” dropdown to change the bar and tick color (Steel Blue, Red, Green, Purple, Orange, Tableau Blue, Teal) - A “Bar Opacity” slider to control the translucency of the bars from nearly transparent to bold - A “Tick Marks” checkbox toggle to show or hide the tick marks overlaying the bars - Summary statistics cards showing the most common letter, least common letter, average frequency, and total letter count
Candlestick Chart
An OHLC candlestick chart displaying ~65 days of synthetic stock price data. Each trading day is rendered as two overlapping vertical rules: a thin wick line spanning from Low to High, and a thicker body line from Open to Close colored green for up days and red for down days. The chart includes: - Interactive crosshair (via Plot.crosshairX) that tracks the cursor and shows the close price - Tooltip on hover (via Plot.tip with pointerX) showing date, open, high, low, close, and percentage change - A “Days” slider to control how many recent trading days are displayed (10 to 65) - A “Volume” checkbox toggle that shows/hides a secondary volume bar chart below the main chart, with bars colored by price direction - A “SMA” checkbox toggle to overlay a simple moving average line on the candlestick chart - An SMA “Period” dropdown (5, 10, 20) that appears when SMA is enabled - Summary statistics cards showing Latest Close, Period Change (%), Period High, and Period Low