Data graph animation

Create a single, fully standalone HTML file containing an animated data visualization comparing multiple companies, organizations, countries, or products over time.

IMPORTANT:

Base the visualization as much as possible on all the information I paste below this prompt.

Deduce yourself:

- the theme
- the best title
- which parties need to be compared
- the unit of the values
- the available periods
- the correct order of the dates
- any logos or brand names
- a logical animation duration
- a logical moving window
- appropriate colors per party

If certain information is missing, make a professional and logical choice yourself.
Ask for nothing in return.

Return only the complete HTML code.

ALL IN ONE HTML FILE:

- HTML
- CSS
- JavaScript
- No external libraries
- No external chart libraries
- No canvas
- Use SVG for the chart

GOAL
Create a premium, smooth animated data visualization based on the data and context I paste below.

The visualization should feel like a high-quality business/LinkedIn visual:

- calm
- premium
- clear
- professional
- easy to read
- not cluttered
- suitable for screen recording or use as visual content

INPUT
I will paste information below this prompt. This can consist of:

- raw data
- table data
- text
- company names
- countries
- user numbers
- percentages
- revenue figures
- periods
- sources
- logo URLs
- comments on style or title

Use that information as the primary source. If the data is not perfectly structured:

- interpret the data as accurately as possible
- convert it internally into a usable JavaScript dataset
- preserve the values ​​as accurately as possible
- use only data that is clearly evident from the pasted information
- do not invent extra data points

DATA INTERPRETATION
Automatically recognize which column or series belongs to which party.

Automatically recognize whether values ​​are percentages, millions, billions, user counts, euros, dollars, or other units.

Use a short, readable representation of values, for example:

- 42%
- 900 mln
- 1.2 bld
- €1.2M
- $450M
- 3.4M users

Missing values ​​can occur as:

- null
- —
-
-
- empty
- n/a
- unknown
- unavailable

Rules for missing values:

- A line should only become visible from the moment data becomes available. - Do not draw a line through before the first data point.

- Do not draw a line through after the last data point if no more data is available afterwards.

- Use interpolation between existing data points so that the animation grows smoothly.

LOGOS
If there are logo URLs in the pasted information:

- use those logos with the correct party
- display the logo in the statistics chart
- display the logo at the moving endpoint of the line

If a logo is missing:

- use a neat circle with the first letter of the party
- make the fallback visually premium
- use the color of the relevant line as an accent

BRANDING
Where possible, use my brand “The Future” subtly in the visual. Header:

- Top left: title of the visualization
- Top right: “The Future” or the included company logo if it appears in the pasted information
- Below or near the logo: the current period
- The current period is text-only: no border, no background, no map

LAYOUT
Create a premium, calm business style. General Style:

- Background: warm light gray/off-white
- Main container: white or subtly transparent glass morphism card
- Main container must be 100vh high
- No white space above or below
- No scrolling on desktop/laptop
- Everything must be responsive for desktop, laptop, tablet, and mobile
- Use clamp() for font sizes, padding, and heights
- Maximum 1rem vertical padding/margin on head sections
- Ensure everything fits neatly within the screen

Header:

- Title left-aligned
- Title in uppercase
- Light font-weight
- No ellipsis
- Title must shrink as the screen size decreases
- Branding is located in the top right
- Current period is located below or next to the branding

Statistics Cards:

- Below the header, statistics cards for each party will appear
- Each card shows:

- logo or fallback font
- name
- current value
- unit
- Use a unique color per party
- Automatically select premium colors with good contrast
- Keep the cards compact so that the chart gets enough space

GRAPH
Create the chart in SVG.

Technical requirements:

- Do not use canvas
- Do not use external chart libraries
- Create SVG elements once and then only update attributes
- Do not use `svg.innerHTML = ""` during the animation
- Prevent flicker
- Month labels/period labels must be created in advance
- Labels must not blink
- Labels must only be adjusted with x, y, opacity, and visibility

Animation:

- Use requestAnimationFrame
- The animation starts automatically
- No pause button
- No play button
- No speed slider
- Choose a logical animation duration yourself based on the amount of data
- Guideline:

- little data: 15–20 seconds
- average dataset: 25–35 seconds
- long dataset: 35–50 seconds
- Default: approximately 30 seconds

Chart behavior:

- The graph must move horizontally over time
- Use a moving window that logically fits the dataset
- For monthly data: usually show 8 to 14 periods at a time
- For annual data: usually show 5 to 8 periods at a time
- New periods appear smoothly on the right
- Old periods disappear smoothly from the left
- Labels must fade and move, not appear suddenly
- The last period must not be visible from the start
- At the end, the last two periods must be clearly visible

Lines:

- Each party gets its own line
- The line grows smoothly via interpolation

- Place the logo or fallback letter exactly at the moving endpoint of the line
- The endpoint is located in a small white round badge circle with a subtle shadow
- Show the current value alongside the endpoint
- The value must be short and readable
- Ensure labels overlap as little as possible

End of animation:

- The animation must end at the last relevant data point
- No horizontal line should continue after a party has reached its end value
- If parties end at different times:

- have each line stop at its own last data point
- ensure this looks visually logical
- At the end, the graph must be calm and finished
- No “loading” feeling at the end

Y-Axis
Automatically determine a neat y-axis scale based on the highest value. - Round the maximum y-axis value logically

- Show subtle horizontal grid lines
- Show subtle y-axis labels
- Avoid visual noise
- Use sufficient margin above the highest line

RESPONSIVE BEHAVIOR
Desktop/laptop:

- Everything must fit within 100vh
- No scrolling required
- Title, charts, and graph must remain in proportion

Tablet:

- Header may stack
- Statistics charts may be in 1 or 2 columns
- Graph must remain readable

Mobile:

- Layout may be vertical
- Text must remain readable
- Graph may shrink but not break
- No horizontal overflow

QUALITY REQUIREMENTS
The code must:

- be clean and organized
- work immediately when saved as a .html file
- have no external dependencies
- handle missing values ​​robustly
- scale automatically
- choose colors automatically
- format labels automatically
- animate smoothly without flickering

OUTPUT
Deliver only the full Return HTML code.

No explanation.

No markdown.

No extra text.

BELOW IS ALL THE INFORMATION, CONTEXT, AND DATA YOU NEED TO USE:

[PASTE YOUR DATA HERE]