Kometov\u00e9 grafy jsou podle m\u011b jeden z nejintuitivn\u011bj\u0161\u00edch zp\u016fsob\u016f, jak porovnat dva okam\u017eiky v \u010dase.<\/p>\n
Probl\u00e9m nikdy nebyl v tom n\u00e1padu.
\nProbl\u00e9m byl v n\u00e1stroj\u00edch.<\/p>\n
N\u011bkter\u00e9 grafy jsou skv\u011bl\u00e9 t\u00edm, \u017ee jsou p\u0159esn\u00e9. Jin\u00e9 t\u00edm, \u017ee jsou okam\u017eit\u011b pochopiteln\u00e9.<\/p>\n
Kometov\u00fd graf zvl\u00e1d\u00e1 oboj\u00ed.<\/p>\n
Princip je jednoduch\u00fd: vezmete dv\u011b hodnoty v \u010dase. \u201eOcas\u201c ukazuje, kde n\u011bco za\u010dalo, \u201ehlava\u201c ukazuje, kde to skon\u010dilo. Sm\u011br ukazuje, co se zm\u011bnilo. D\u00e9lka ukazuje, o kolik. A cel\u00fd tvar pom\u00e1h\u00e1 tomu, \u017ee zm\u011bnu \u010dlov\u011bk skoro fyzicky vid\u00ed.<\/p>\n
Nemus\u00edte dlouze vysv\u011btlovat, co se v grafu d\u011bje.<\/p>\n
Lid\u00e9 hned vid\u00ed, kter\u00e9 komety let\u00ed dop\u0159edu, kter\u00e9 se vracej\u00ed zp\u00e1tky, a hlavn\u011b si rychle v\u0161imnou t\u011bch, kter\u00e9 se chovaj\u00ed jinak ne\u017e ostatn\u00ed.<\/p>\n
A p\u0159esn\u011b proto se mi tenhle typ grafu v\u017edycky l\u00edbil.<\/p>\n
Poprv\u00e9 jsem se do kometov\u00fdch graf\u016f zamilovala na workshopu Steva Wexlera. P\u0159ipadaly mi elegantn\u00ed, kompaktn\u00ed a velmi snadno \u010diteln\u00e9. \u0158e\u0161ily p\u0159itom \u00fapln\u011b b\u011b\u017enou business ot\u00e1zku:<\/p>\n
Co se zm\u011bnilo mezi tehdy a te\u010f?<\/p>\n
A pak jsem je v praxi skoro nikdy nepou\u017eila.<\/p>\n
Ne proto, \u017ee by nebyly u\u017eite\u010dn\u00e9.<\/p>\n
Ale proto, \u017ee jsem je neum\u011bla jednodu\u0161e vytvo\u0159it.<\/p>\n
A to je na datov\u00e9 vizualizaci trochu zvl\u00e1\u0161tn\u00ed. N\u011bkter\u00e9 skv\u011bl\u00e9 n\u00e1pady na grafy se do b\u011b\u017en\u00e9ho business reportingu v\u016fbec nedostanou jen proto, \u017ee nejsou jako v\u00fdchoz\u00ed mo\u017enost v Excelu, Power BI nebo v n\u00e1stroji, kter\u00fd zrovna t\u00fdm pou\u017e\u00edv\u00e1.<\/p>\n
Tak\u017ee \u010dasto pou\u017e\u00edv\u00e1me grafy, kter\u00e9 se snadno vytv\u00e1\u0159ej\u00ed. Ne nutn\u011b ty, kter\u00fdm se nejsn\u00e1ze rozum\u00ed.<\/p>\n
Kdy\u017e chceme porovnat dva okam\u017eiky v \u010dase, mo\u017enost\u00ed m\u00e1me spoustu: slope chart, bullet graph, \u0161ipkov\u00fd graf, seskupen\u00e9 nebo p\u0159ekr\u00fdvaj\u00edc\u00ed se pruhy\u2026<\/p>\n
Nic z toho nen\u00ed \u0161patn\u011b.<\/p>\n
Ale kometov\u00fd graf m\u00e1 n\u011bco nav\u00edc. D\u00edky n\u011bmu zm\u011bna p\u016fsob\u00ed jako pohyb.<\/p>\n
Ocas ukazuje minulost.
\nHlava ukazuje sou\u010dasnost.
\nSm\u011br ukazuje p\u0159\u00edb\u011bh.<\/p>\n
V p\u0159\u00edkladu v\u00fd\u0161e graf porovn\u00e1v\u00e1 pr\u016fm\u011brnou cenu za jednotku mezi lety 2021 a 2026 nap\u0159\u00ed\u010d n\u011bkolika produktov\u00fdmi \u0159adami.<\/p>\n
A to nejzaj\u00edmav\u011bj\u0161\u00ed nejsou jednotliv\u00e1 \u010d\u00edsla. Zaj\u00edmav\u00fd je vzorec.<\/p>\n
V\u011bt\u0161ina produktov\u00fdch \u0159ad se pohybuje jedn\u00edm sm\u011brem. Eco-friendly \u0159ada jde opa\u010dn\u011b. A pr\u00e1v\u011b proto ji \u010dlov\u011bk okam\u017eit\u011b vid\u00ed jako v\u00fdjimku.<\/p>\n
Nemus\u00edte pro\u010d\u00edtat tabulku ani porovn\u00e1vat dvojice sloupc\u016f. Oko si prost\u011b v\u0161imne jedn\u00e9 \u201ekomety\u201c, kter\u00e1 let\u00ed proti ostatn\u00edm.<\/p>\n
V tom je s\u00edla toho grafu: neukazuje jen \u010d\u00edsla. Pom\u00e1h\u00e1 vid\u011bt anom\u00e1lie, v\u00fdjimky a v\u011bci, kter\u00e9 stoj\u00ed za dal\u0161\u00ed ot\u00e1zku.<\/p>\n
To je v businessu hodn\u011b u\u017eite\u010dn\u00e9, proto\u017ee \u010dasto nepot\u0159ebujeme jako prvn\u00ed v\u011bd\u011bt p\u0159esnou hodnotu na dv\u011b desetinn\u00e1 m\u00edsta. Pot\u0159ebujeme rychle pochopit:<\/p>\n
Co se zm\u011bnilo?
\nKde je n\u011bco jinak?
\nA kam se m\u00e1me pod\u00edvat d\u00e1l?<\/p>\n
Kometov\u00fd graf m\u016f\u017ee dob\u0159e fungovat t\u0159eba pro zm\u011bny cen nap\u0159\u00ed\u010d produktov\u00fdmi \u0159adami, v\u00fdvoj mar\u017ee podle kategori\u00ed, r\u016fst z\u00e1kazn\u00edk\u016f podle segment\u016f, posuny tr\u017en\u00edho pod\u00edlu v regionech, produktivitu prodeje p\u0159ed a po n\u011bjak\u00e9m programu, skladov\u00e9 dny podle business jednotek, zm\u011bny n\u00e1klad\u016f podle dodavatel\u016f, v\u00fdvoj NPS podle z\u00e1kaznick\u00fdch skupin nebo t\u0159eba metriky udr\u017eitelnosti v \u010dase.<\/p>\n
Spole\u010dn\u00fd princip je v\u017edycky stejn\u00fd: m\u00e1te dva porovnateln\u00e9 body v \u010dase, v\u00edce kategori\u00ed a pot\u0159ebujete rychle vid\u011bt sm\u011br i velikost zm\u011bny.<\/p>\n
Tam kometov\u00e9 grafy opravdu d\u00e1vaj\u00ed smysl.<\/p>\n
Samoz\u0159ejm\u011b nejsou ide\u00e1ln\u00ed v\u017edycky. Pokud pot\u0159ebujete uk\u00e1zat mnoho obdob\u00ed mezi za\u010d\u00e1tkem a koncem, pou\u017eila bych rad\u011bji \u010d\u00e1rov\u00fd graf. Pokud je hlavn\u00ed sd\u011blen\u00ed p\u0159esn\u00e1 odchylka, p\u0159idala bych popisky nebo pou\u017eila graf odchylek. A pokud m\u00e1te moc kategori\u00ed, i kometov\u00fd graf se m\u016f\u017ee rychle st\u00e1t nep\u0159ehledn\u00fdm.<\/p>\n
Ale kdy\u017e jde o srovn\u00e1n\u00ed \u201etehdy versus te\u010f\u201c \u2014 a zvl\u00e1\u0161\u0165 kdy\u017e chcete uk\u00e1zat polo\u017eky, kter\u00e9 se h\u00fdbou jinak ne\u017e zbytek \u2014 kometov\u00e9 grafy se hledaj\u00ed t\u011b\u017eko lep\u0161\u00ed.<\/p>\n
A dnes je mnohem men\u0161\u00ed probl\u00e9m je vytvo\u0159it.<\/p>\n
Nemus\u00edm \u010dekat, a\u017e n\u011bkdo p\u0159id\u00e1 dokonal\u00fd nativn\u00ed vizu\u00e1l do Power BI. Nemus\u00edm ru\u010dn\u011b skl\u00e1dat tvary a obch\u00e1zet limity n\u00e1stroje. M\u016f\u017eu po\u017e\u00e1dat AI, aby mi takov\u00fd graf postavila.<\/p>\n
Postup je p\u0159ekvapiv\u011b jednoduch\u00fd:<\/p>\n
Otev\u0159\u00edt canvas.
\nPou\u017e\u00edt D3.js.
\nVykreslit interaktivn\u00ed minimalistick\u00fd kometov\u00fd graf na b\u00edl\u00e9m pozad\u00ed.
\nVz\u00edt data z CSV.<\/p>\n
A pak ho postupn\u011b ladit, podobn\u011b jako bych ho ladila s design\u00e9rem.<\/p>\n