Dr Keuper Consulting Data to Design
DEEN
Request Project

Tag: interactive

  • User Experience

    User Experience

    Interactive UX Elements: Sliders, Bubble Charts & More

    We live in an era where web design is immersive, biomimetic, and hyper-personalized. Here, you’ll experience a world of Spatial UI, Glassmorphism 3.0, and Neo-Brutalism. Discover how modern interfaces not only guide your users, they inspire them. Good user experience doesn’t happen by accident. It is based on thoughtful interaction that guides the user intuitively through content without explanation, without friction.

    Why Interactive Elements

    Static content gets scrolled past. Interactive elements keep visitors on the page, increase dwell time and make complex comparisons or product information self-explanatory. Whether real estate exposé, product configurator or year-over-year comparison: the right interaction makes the difference.

    Here you will find examples of interactive UX components that we developed with pure JavaScript: A bubble chart that makes product portfolios playfully explorable, and a before/after slider that makes changes visually tangible. All elements are responsive, touch-optimized and work on desktop and smartphone. They are based on pure JavaScript, no framework, no external dependency.

    The Product Portfolio as a Bubble Chart

    The circles move gently, like soap bubbles in motion. But here, you can touch and move them without bursting. A zoom effect enlarges the content when hovering with the mouse or tapping with your finger on a smartphone. Your customers can take a closer look at each product right here.

    The Slider for Your Future Vision

    The slider is perfect for illustrating transformation. Drag the arrow in the center left or right to switch between reality and vision.

    New York

    A Future Vision

    VisionToday
    Today Vision

    Munich

    A Future Vision

    VisionToday
    Today Vision

    Sydney

    A Future Vision

    VisionToday
    Today Vision

    Dublin

    A Future Vision

    VisionToday
    Today Vision

    Buenos Aires

    A Future Vision

    VisionToday
    Today Vision
    1 / 5

    Employee Skill Analysis

    Here you see employee profiles as radar spider charts. These can be switched by clicking on employees. An average button displays the team average as a dashed reference line. A statistics area shows the average value, top competency, and development potential.

    Example Company · HR Analysis

    Competency Radar

    Compare employee profiles at a glance

  • Plots

    Plots

    Interactive Visualizations

    Data that tells Stories

    Each of these visualizations uses real or realistically simulated data and is fully interactive. Hover, click, zoom – discover patterns that remain hidden in spreadsheets.

    World GDP Analysis 2024
    Area-weighted by nominal GDP and relative change
    Interactive
    What you see: Each cell represents a country. The area is proportional to nominal GDP – letting you see at a glance which economies dominate the world. Data source: IMF estimate October 2025.
    Hover for details · Source: IMF Oct. 2025
    Mobile Data Stream
    Mobile traffic share by region · Feb. 2025 – Feb. 2026
    Live Data
    What you see: Particle streams visualize the mobile internet traffic share in four countries. The denser the stream, the higher the mobile share. Move your mouse over the animation. Data source: Cloudflare Radar.
    Hover over particles · Buttons filter regions
    User DNA Explorer
    5,000 simulated user profiles · 5 clustering perspectives
    Interactive
    What you see: 5,000 data points represent fictional user profiles. At the press of a button, the algorithm sorts them by region, emotion, age or interests – revealing hidden clusters.
    User DNA: Origin
    5,000 profiles in the digital ether. Simulation.
    Switch tabs · Watch clustering in real time
    Global Earthquake Activity
    Earthquakes (magnitude 2.5+) last 30 days · Real-time data
    Real-time
    What you see: A 3D globe shows earthquakes from the last 30 days. Column height corresponds to cumulative magnitude per region. Rotate the globe, zoom and hover over hotspots. Data source: USGS Earthquake Feed (live).
    Rotate and zoom globe · Hover over columns · Live USGS data
    Siemens Corporate Structure
    Interactive sunburst · Click segments to drill down
    Org Chart
    What you see: The Siemens organizational structure as a zoomable sunburst diagram. Click a colored segment to drill down. Click the center to return. Data source: Siemens Annual Report 2024.
    Click segments to drill down · Center = Back
    Global Trade Network
    Top-20 trade relationships · Goods trade 2023
    D3 Force
    What you see: Each node is an economy. Connection strength shows bilateral trade volume. Drag nodes to observe network dynamics. Data source: UN Comtrade / WTO, goods trade 2023 (bn USD).
    Drag nodes · Hover for details · Source: UN Comtrade 2023
    Global Energy Flows
    Energy source → Consumption sector · Chord diagram
    D3 Chord
    What you see: A chord diagram showing how primary energy is distributed across consumption sectors. Bandwidth corresponds to energy flow in EJ. Data: IEA World Energy Outlook 2024.
    Hover over segments and ribbons · Source: IEA WEO 2024
    Daily Revenue Heatmap 2025
    Simulated online retail · Calendar view
    D3 Calendar
    What you see: A calendar heatmap shows simulated daily revenue for an online retailer in 2025. Darker cells = higher revenue. Spot seasonal patterns (Christmas business, Black Friday, summer slump).
    Hover for daily values · Simulated seasonal patterns

    Like what you see? Let’s talk about a visualization for your data.

    Get in Touch →
  • Statistics

    Statistics

    Data Analysis · Interactive Case Studies

    Statistics make decisions safer

    Discover how statistical analyses can move your business forward — with real examples you can explore yourself.

    📊

    Descriptive Statistics

    Key metrics & distributions — the first look at your data

    Retail & E-Commerce
    Use case: An online shop analyses its daily orders over the last quarter. Mean, variance and skewness help steer inventory, staffing and ad campaigns with data.

    ⚙ Adjust parameters

    80
    18
    60
    Frequency
    Mean
    ±1 Std. dev.
    🔬

    Inferential Statistics — Two-sample t-test (Welch)

    From sample to validated statement about the population

    Production & Quality
    Use case: A food manufacturer tests two production lines. Line A (control) vs. Line B (new recipe). Is the difference in package weight statistically significant — or just chance?

    ⚙ Configure groups

    502
    510
    8
    30
    Line A
    Line B
    🔍

    Exploratory Data Analysis — K-Means Clustering

    Automatically identify hidden customer segments

    Marketing & CRM
    Use case: A fitness studio segments its members by visit frequency and monthly spending — without any prior knowledge. Clusters emerge automatically and enable targeted offers for each segment.

    ⚙ Configure clustering

    3
    90
    🔗

    Causal Analysis — Linear Regression (OLS)

    Measure cause-and-effect relationships and validate them statistically

    HR & Production
    Use case: A plant manager asks: Do more training hours actually reduce the error rate? OLS regression quantifies the effect — and uses t-test and R² to check whether the relationship is statistically robust.

    ⚙ Simulate relationship

    -1.2
    2.5
    45
    Observations
    Regression line
    95% confidence band
    📈

    Predictive Analysis — Time Series Forecast (Holt-Winters)

    Detect historical patterns and plan the future with data

    Energy & Finance
    Use case: An energy provider forecasts monthly electricity consumption for the coming months — the Holt-Winters model accounts for trend, seasonality and provides prediction intervals for planning certainty.

    ⚙ Configure model

    1.5
    12
    6
    6
    Historical
    Forecast
    95% prediction interval

    Your data. Your insights.

    Let’s find out together which analyses deliver the greatest value for your business.