defuss-shadcn / Presentations / presentations
Deck Gallery
33 ready-made presentation decks - led by The System in Numbers (the flagship: defuss-shadcn presenting itself with its real, measured numbers), plus 32 design languages from the ECharts design-language lab, each re-imagined as a 12-slide deck about its own topic - commuting, coffee, rents, budgets, waste, elections, storms, festivals - built on the Presentation and Chart components. Every deck is one self-contained HTML block: open a page, copy the example source, swap the data.
The System in Numbers
Newsroom Study Report - The flagship: defuss-shadcn presents itself with its real, measured numbers - curtain transitions, section route, bespoke SVG set-piecesEditorial Highlight Bars
Swiss International - The commute shift - e-bike trips up 142%Lollipop Ranking
Bauhaus Primary Poster - Caffeine per brew method - the ranking flips per 100 mlDumbbell Before/After
Financial Broadsheet - Rents 2019 → 2025 in seven districtsSlopegraph
Terminal Data Noir - Programming languages in job ads, 2020 → 2025Diverging Bars
Neo-Brutalist Zine - Who wants a four-day week, by industryWaterfall
Art Deco Night - A cinema chain’s revenue bridge to €55.3 MNormalized Stack
Engineering Blueprint - A decade of the electricity mixBump Ranking
Neo Tokyo Neon - Music genres on a streaming platform - K-pop from sixth to firstBar Race
Sports Broadcast - A golden-boot race, replayed liveConfidence Band
Scientific Journal - Forecasting a flu season - and checking the forecastAnnotated Time Series
Sunday Magazine - The first year of a new tram lineSmall Multiples
1960s Modernist Grid - Rooftop solar yield by roof orientationScatter Quadrants
Annual Report - A software portfolio by growth and retentionJittered Distribution
Organic Data Garden - Raspberry yield under four growing methodsHeatmap Matrix
Cyber Matrix - One week of security alerts - and a 3 a.m. burstCalendar Heatmap
Pastel Stationery - A year of running in 365 squaresTheme River
Aurora Gradient — What a library lends — three years of loans by formatTreemap
Mondrian Composition — Where a city’s €2.4 billion budget goesSunburst
Celestial Observatory — One year of telescope time, field by programmeSankey
Industrial Schematic — 412,000 tonnes of a city’s waste, doorstep to destinationChord
Glass Hologram - Air passengers between six world regionsEditorial Gauge
Aviation Cockpit - An airport’s summer punctualityParliament Hemicycle
Civic Parchment - A fictional 400-seat assembly and its coalition mathsElection Majority Bar
Election Desk - A city-council election night - who gets to 36?Election Hex Cartogram
Election Night Newspaper - A rail-link referendum in 64 districtsElection Shift Arrows
Transit Infographic - Turnout change along a metro lineUniversal Transition
Kinetic Typography - 120,000 festival tickets in four formsWaffle Dot Matrix
Pixel Arcade - Where 100 players playBoxplot
Academic Monograph - Reading scores under five teaching methodsViolin - Custom Series
Fashion Editorial - The resale premium on sneakersCustom Wind Vectors
Meteorological Radar - A coastal storm, hour by hourStory State Machine
Cinematic Presentation - Five streaming services, told as four claims
Newsroom Study Report - The flagship: defuss-shadcn presents itself with its real, measured numbers - curtain transitions, section route, bespoke SVG set-piecesEditorial Highlight Bars
Swiss International - The commute shift - e-bike trips up 142%Lollipop Ranking
Bauhaus Primary Poster - Caffeine per brew method - the ranking flips per 100 mlDumbbell Before/After
Financial Broadsheet - Rents 2019 → 2025 in seven districtsSlopegraph
Terminal Data Noir - Programming languages in job ads, 2020 → 2025Diverging Bars
Neo-Brutalist Zine - Who wants a four-day week, by industryWaterfall
Art Deco Night - A cinema chain’s revenue bridge to €55.3 MNormalized Stack
Engineering Blueprint - A decade of the electricity mixBump Ranking
Neo Tokyo Neon - Music genres on a streaming platform - K-pop from sixth to firstBar Race
Sports Broadcast - A golden-boot race, replayed liveConfidence Band
Scientific Journal - Forecasting a flu season - and checking the forecastAnnotated Time Series
Sunday Magazine - The first year of a new tram lineSmall Multiples
1960s Modernist Grid - Rooftop solar yield by roof orientationScatter Quadrants
Annual Report - A software portfolio by growth and retentionJittered Distribution
Organic Data Garden - Raspberry yield under four growing methodsHeatmap Matrix
Cyber Matrix - One week of security alerts - and a 3 a.m. burstCalendar Heatmap
Pastel Stationery - A year of running in 365 squaresTheme River
Aurora Gradient — What a library lends — three years of loans by formatTreemap
Mondrian Composition — Where a city’s €2.4 billion budget goesSunburst
Celestial Observatory — One year of telescope time, field by programmeSankey
Industrial Schematic — 412,000 tonnes of a city’s waste, doorstep to destinationChord
Glass Hologram - Air passengers between six world regionsEditorial Gauge
Aviation Cockpit - An airport’s summer punctualityParliament Hemicycle
Civic Parchment - A fictional 400-seat assembly and its coalition mathsElection Majority Bar
Election Desk - A city-council election night - who gets to 36?Election Hex Cartogram
Election Night Newspaper - A rail-link referendum in 64 districtsElection Shift Arrows
Transit Infographic - Turnout change along a metro lineUniversal Transition
Kinetic Typography - 120,000 festival tickets in four formsWaffle Dot Matrix
Pixel Arcade - Where 100 players playBoxplot
Academic Monograph - Reading scores under five teaching methodsViolin - Custom Series
Fashion Editorial - The resale premium on sneakersCustom Wind Vectors
Meteorological Radar - A coastal storm, hour by hourStory State Machine
Cinematic Presentation - Five streaming services, told as four claims
Anatomy of a deck
- Transitions - every slide comes and goes through the shared df$.anim engine: declare
data-anim-in/data-anim-out(plus-direction,-duration,-color…) once on the deck or per slide. Default is a 1.5 s fade;blocksInmakes a curtain, whose colour the runtime keeps distinct from both slide surfaces. - One morphing chart - a single
<div class="chart presentation-stage">plays every chart slide. Slides name the state they show withdata-chart-state;df$.shadcn.chart.deck(deck, { base, states })morphs bars into donuts, dots into bars, maps into scatters - keep series ids and item names stable and ECharts does the rest. - Content slides - counters (
data-count), a photo (Image) or an ambient video that only plays while its slide is on stage, a Table, a quote with an Avatar, and an exclusive Accordion for the Q&A. Components on a slide take the slide’s colours automatically.
Design studies adapted from the ECharts design-language lab (echarts-feat/). Topics are real-world, but organisations, people and figures are fictional or synthetic unless a deck says otherwise.
Comments, ideas or improvements? Edit this page's source on GitHub