Przejdź do narzędzia
ViewCSV
Plik nie jest nigdzie wysyłany

Zrób animowany wykres wideo z pliku CSV

quarterly-revenue-example.csv· DANE PRZYKŁADOWE48 wierszy · 4 kolumny
Układ tabeli
Jeden wiersz na okres i kategorię: kolumna czasu, kolumna nazw i kolumna wartości.
Podgląd1280 × 720 px
Oś czasu
0 / 12 s

Okres: 2024-Q1

Sprawdzanie, jakie formaty wideo potrafi utworzyć ta przeglądarka…

Wartości w tej klatce (6 kategorii)
Wartości w okresie 2024-Q1
regionWartość
Łódź76,3
Gdańsk53,3
Warszawa52
Kraków39,7
Poznań33,9
Wrocław26,1

Wiersze: 48 → okresy: 8 × kategorie: 6. Użyte liczby: 48, puste komórki okres/kategoria: 0.

Aby zrobić film z pliku CSV, otwórz plik z kolumną czasu (lata, miesiące, daty lub kwartały), wybierz kolumnę kategorii i kolumnę wartości, a potem animację, np. wyścig słupków, i kliknij Utwórz wideo. Film jest rysowany i kodowany w Twojej przeglądarce: jako MP4 lub WebM, jeśli ta przeglądarka potrafi je zakodować, a w przeciwnym razie jako animowany GIF; dowolną klatkę zapiszesz też jako PNG. Brakujące wartości pozostają lukami, dopóki nie wybierzesz inaczej, powtórzone wiersze trzeba połączyć wybraną regułą, a plik CSV nie jest wysyłany ani zmieniany.

Jak zrobić film z pliku CSV

  1. Otwórz, przeciągnij lub wklej plik CSV albo użyj pliku otwartego już w innym narzędziu ViewCSV. Przykład to syntetyczna tabela przychodów kwartalnych.
  2. Na karcie Dane wybierz układ tabeli. Tabela w układzie długim ma kolumnę czasu, kategorii i wartości; w układzie szerokim każda seria ma własną kolumnę.
  3. Na karcie Prezentacja wybierz animację i styl, dodaj tytuł, źródło, jednostkę i opcjonalnie logo lub obraz tła.
  4. Na karcie Wideo ustaw format (16:9, 1:1 lub 9:16), rozdzielczość, długość, liczbę klatek na sekundę oraz pierwszy i ostatni okres.
  5. Przewiń oś czasu lub przejdź okres po okresie, aby sprawdzić klatki, a potem wybierz format pobierania i kliknij Utwórz wideo.

Dziesięć rodzajów animacji

Wyścig słupkówPoziome słupki rosną i wyprzedzają się, gdy zmienia się ranking. Wartości ujemne sięgają na lewo od zera.
Rosnące linieJedna linia na kategorię, rysowana okres po okresie na stałej osi, dzięki czemu wcześniejsze wartości się nie przesuwają.
Pierścień udziałówUdział każdej kategorii w sumie wszystkich kategorii w danym okresie; kategorie ponad wybraną liczbę trafiają do grupy „Pozostałe”.
Karty KPIDo sześciu kart z bieżącą wartością i procentową zmianą względem poprzedniego okresu.
Realizacja celuWykonanie wobec wspólnego celu lub kolumny celu, z procentem realizacji – także powyżej 100%.
Mapa cieplna w czasieSiatka kategorie × okresy, która wypełnia się do bieżącego okresu. Brakujące komórki domyślnie pozostają puste albo podlegają wybranej regule dla braków (powtórzenie ostatniej wartości lub zero).
Wykres bąbelkowyKolumna wartości na osi pionowej, druga kolumna na osi poziomej, a trzecia jako pole koła.
Wykres kaskadowyDodatnie i ujemne wkłady w kolejności z pliku, prowadzące do wyniku netto, np. mostek zysku.
Struktura w czasieJeden słupek 100% na okres, dzięki czemu porównasz strukturę w kilku okresach naraz.
Kolumny 3DKolumny na oświetlonej scenie 3D z opcjonalnym powolnym obrotem kamery. Wymaga grafiki WebGL 2.

Przygotowanie danych: okresy, duplikaty i braki

  • Kolejność okresów. Kolejność automatyczna raz sprawdza całą kolumnę czasu: jeśli każdy okres jest liczbą, sortuje liczbowo; w przeciwnym razie, jeśli każdy okres jest datą, np. 2024, 2024-03, 2024-03-31 lub 2024-Q1, sortuje według daty; a jeśli nie, układa wszystkie okresy jako tekst w porządku naturalnym, więc week 10 trafia za week 9. Kolumna, w której mieszają się liczby, daty i tekst, nie jest sortowana według typu każdej komórki osobno. Możesz też zachować kolejność z pliku. Nieistniejące daty, np. 2023-02-29, są przy kolejności według daty odrzucane.
  • Powtórzone wiersze. Jeśli ten sam okres i kategoria występują więcej niż raz, wideo nie powstaje, a narzędzie podaje, ile par się powtarza. Wybierz, czy je zsumować, uśrednić, zostawić najmniejszą lub największą wartość albo ostatni wiersz; nic nie jest łączone po cichu.
  • Brakujące wartości. Domyślnie brakujący okres zostaje luką: słupka lub linii w tym okresie nie ma. Możesz zamiast tego powtórzyć ostatnią znaną wartość lub pokazać zero – film informuje wtedy o tym w wierszu stanu. Wartości nigdy nie są uzupełniane wstecz.
  • Indeks i zmiana. Indeks dzieli wartości przez pierwszą niezerową wartość kategorii (= 100); seria, która zaczyna się poniżej zera, nie ma sensownego indeksu i pozostaje pusta. Zmiana porównuje każdy okres z bezpośrednio poprzednim; po pustym lub zerowym okresie pozostaje pusta.

Etykiety są używane dokładnie w zapisanej postaci: North i North to dwie kategorie. Sam plik CSV nigdy nie jest zmieniany.

Jak liczby są odczytywane i pokazywane

Wartość jest używana tylko wtedy, gdy cała komórka jest zwykłą liczbą, np. 1200, -4.5 lub 3e5, z wybranym separatorem dziesiętnym. Komórki z jednostkami, symbolami walut lub separatorami tysięcy (1,200) oraz liczby, których typ double nie potrafi wiernie przechować, są pomijane i zliczane w ostrzeżeniu, a nigdy nie są rysowane jako zero.

Między dwoma okresami ruch jest liniowym przejściem między dwiema rzeczywistymi wartościami, a wiersz stanu podaje, między którymi okresami się odbywa. Klatki pośrednie nie są danymi. Tabela wartości pokazuje dokładnie to, co widać w bieżącej klatce; razem z wierszem stanu mówi, czy to okres z danymi, przejście między dwoma okresami, czy klatka z wartościami uzupełnionymi według reguły dla braków. Liczby w filmie mają format Twojego języka i wybraną liczbę miejsc po przecinku; udziały i realizacja są pokazywane w procentach. Jeśli obliczenia dałyby liczby zbyt duże, by narysować je wiarygodnie, narzędzie o tym informuje, zamiast rysować błędny wykres.

Pobieranie wideo, GIF-ów i PNG

MP4 i WebMDostępne tylko wtedy, gdy ta przeglądarka potrafi je utworzyć. Tam, gdzie działa WebCodecs, klatki są kodowane po kolei w dokładnych momentach, więc film jest płynny na każdym urządzeniu. W przeciwnym razie przeglądarka nagrywa animację w czasie rzeczywistym, a karta musi pozostać na pierwszym planie.
Animowany GIF10 klatek na sekundę, 640 pikseli na dłuższym boku, do 30 sekund.
PNGKlatka w bieżącym miejscu osi czasu, w pełnym rozmiarze wideo.
Rozmiary16:9, 1:1 lub 9:16 w 720p lub 1080p, od 2 do 60 sekund, 24, 30 lub 60 klatek na sekundę. Jeden pobierany plik może mieć do 64 MB.

Filmy nie mają dźwięku. Na początku i na końcu film zatrzymuje się na pierwszym i ostatnim okresie, żeby widz zdążył je odczytać. Zmiana danych lub ustawień albo opuszczenie strony przerywa trwający eksport, więc nieaktualny plik nigdy nie zostanie zapisany.

Limity i prywatność

Film może pokazać do 500 okresów, 200 kategorii i 100 000 komórek okres × kategoria, z plików do 25 MB, 100 000 wierszy lub 2 milionów komórek. Przy większym pliku najpierw przefiltruj wiersze albo podsumuj je tabelą przestawną. Statyczny wykres zrobisz w narzędziu Wykresy z CSV.

Wszystko, łącznie z logo i obrazem tła, pozostaje w karcie przeglądarki. Ani plik, ani film nie są nigdzie wysyłane.

Przykład: przychód według regionów jako wyścig słupków

Tabela w układzie długim z jednym wierszem na kwartał i region. Gdy czasem jest quarter, kategorią region, a wartością revenue, w każdej klatce wyścigu są trzy słupki. Brakująca wartość West za 2024-Q2 zostaje luką: w tym okresie West nie ma słupka.

CSV
quarter,region,revenue
2024-Q1,North,52
2024-Q1,South,33
2024-Q1,West,69
2024-Q2,North,64
2024-Q2,South,54
2024-Q3,North,76
2024-Q3,South,75
2024-Q3,West,77
Dane w czasie, z których powstaje film
{
  "periods": ["2024-Q1", "2024-Q2", "2024-Q3"],
  "series": {
    "North": [52, 64, 76],
    "South": [33, 54, 75],
    "West": [69, null, 77]
  },
  "missing": 1
}

Pytania i odpowiedzi

Dlaczego nie mogę wybrać MP4?

Nie każda przeglądarka potrafi tworzyć pliki MP4. Lista formatów pokazuje tylko to, co ta przeglądarka naprawdę zakoduje; GIF i PNG działają zawsze. Do MP4 użyj aktualnej wersji Chrome, Edge lub Safari.

Moje dane mają osobną kolumnę dla każdego kraju. Czy to zadziała?

Tak. Wybierz układ szeroki i zaznacz kolumny do animacji; każda kolumna stanie się jedną serią nazwaną tak jak jej nagłówek.

Dlaczego w niektórych okresach brakuje słupka?

Ta kategoria nie ma w danym okresie zwykłej liczby, więc zostaje luka. Jeśli pasuje to do Twoich danych, w polu „Brakujące wartości” wybierz „Powtórz ostatnią znaną wartość” lub „Pokaż jako zero” albo popraw komórki w edytorze CSV.

Standardy i źródła