inżynier w RisingStack, zainteresowany js, Golang,. Net Core.
ostatnio mieliśmy przyjemność uczestniczyć w projekcie uczenia maszynowego, który obejmuje biblioteki takie jak React i D3.js. Wśród wielu zadań opracowałem kilka wykresów, które pomagają przetwarzać wynik modeli ML, takich jak naiwny Bayes w postaci wykresu liniowego lub pogrupowanego wykresu słupkowego.,
w tym artykule chciałbym przedstawić moje postępy z D3.js do tej pory i pokazać podstawowe wykorzystanie biblioteki poprzez prosty przykład wykresu słupkowego.
Po przeczytaniu tego artykułu dowiesz się, jak utworzyć D3.wykresy js takie jak to łatwo:
Pełny kod źródłowy jest dostępny tutaj.
W RisingStack lubimy również ekosystem JavaScript, backend i front-end. Osobiście jestem zainteresowany obydwoma., Na zapleczu mogę przejrzeć podstawową logikę biznesową aplikacji, podczas gdy mam również możliwość tworzenia fantastycznie wyglądających rzeczy na front-endzie. Tam D3.js pojawia się na zdjęciu!
Update: a 2nd part of my D3.dostępna jest również seria samouczków js: budowanie D3.js Calendar Heatmap (do wizualizacji danych użycia StackOverflow)
Co to jest D3.js?
D3.js jest opartą na danych biblioteką JavaScript do manipulowania elementami DOM.
„D3 pomaga ożywić dane za pomocą HTML, SVG i CSS., Nacisk D3 na standardy internetowe daje pełne możliwości nowoczesnych przeglądarek bez przywiązywania się do zastrzeżonego frameworka, łącząc potężne komponenty wizualizacji i oparte na danych podejście do manipulacji DOM.”- d3js.org
Dlaczego tworzysz wykresy za pomocą D3.js w ogóle? Dlaczego po prostu nie wyświetlić obrazu?
dobrze, wykresy są oparte na informacjach pochodzących z zasobów innych firm, które wymagają dynamicznej wizualizacji w czasie renderowania. Ponadto SVG jest bardzo potężnym narzędziem, które dobrze pasuje do tego przypadku aplikacji.,
przyjrzyjmy się jakie korzyści możemy uzyskać z używania SVG.
zalety SVG
SVG oznacza skalowalną grafikę wektorową, która jest technicznie językiem znaczników opartym na XML.
jest powszechnie używany do rysowania grafiki wektorowej, określania linii i kształtów lub modyfikowania istniejących obrazów. Listę dostępnych elementów znajdziesz tutaj.
plusy:
- obsługiwany we wszystkich głównych przeglądarkach;
- ma interfejs DOM, nie wymaga lib innych firm;
- skalowalny, może utrzymać wysoką rozdzielczość;
- Zmniejszony rozmiar w porównaniu do innych formatów obrazu.,
wady:
- może wyświetlać tylko obrazy dwuwymiarowe;
- długa krzywa uczenia się;
- renderowanie może trwać długo przy operacjach wymagających dużych nakładów obliczeniowych.
pomimo swoich wad, SVG jest doskonałym narzędziem do wyświetlania ikon, logo, ilustracji lub w tym przypadku wykresów.
pierwsze kroki z D3.js
wybrałem wykres słupkowy, aby rozpocząć, ponieważ reprezentuje element wizualny o niskiej złożoności, podczas gdy uczy podstawowego zastosowania D3.sam js. Nie powinno to cię zwodzić, D3 zapewnia świetny zestaw narzędzi do wizualizacji danych., Sprawdź jego stronę github, aby znaleźć naprawdę fajne przypadki użycia!
wykres słupkowy może być poziomy lub pionowy w zależności od jego orientacji. Pójdę z pionowym jednym aka Kolumna Wykres.
na tym diagramie wyświetlę 10 najpopularniejszych języków programowania w oparciu o wynik ankiety programistycznej Stack Overflow z 2018 roku.
czas na losowanie!
SVG ma układ współrzędnych zaczynający się od lewego górnego rogu (0;0). Dodatnia oś x idzie w prawo, podczas gdy dodatnia oś y kieruje się na dół., Tak więc wysokość SVG musi być brana pod uwagę przy obliczaniu współrzędnej y elementu.
wystarczy sprawdzić tło, napiszmy jakiś kod!
chcę utworzyć wykres o szerokości 1000 pikseli i wysokości 600 pikseli.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>w powyższym fragmencie kodu wybieram utworzony element<svg>w pliku HTML z d3select. Ta metoda selekcji akceptuje wszystkie rodzaje łańcuchów selektora i zwraca pierwszy pasujący element., Użyj selectAll jeśli chcesz uzyskać wszystkie z nich.
definiuję również wartość marginesu, która daje nieco dodatkowe dopełnienie wykresu. Wypełnienie może być zastosowane za pomocą elementu<g> tłumaczonego przez żądaną wartość. Od teraz, rysuję na tej grupie, aby zachować zdrowy dystans od wszelkich innych treści strony.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);dodawanie atrybutów do elementu jest tak proste, jak wywołanie metodyattr. Pierwszy parametr metody przyjmuje atrybut, który chcę zastosować do wybranego elementu DOM., Drugi parametr to wartość lub funkcja zwrotna, która zwraca jej wartość. Powyższy kod po prostu przesuwa początek wykresu do pozycji (60;60) pliku SVG.
obsługiwane D3.formaty wejściowe js
aby rozpocząć rysowanie, muszę zdefiniować źródło danych, z którego pracuję. W tym tutorialu używam zwykłej tablicy JavaScript, która zawiera obiekty z nazwami języków i ich wskaźnikami procentowymi, ale ważne jest, aby wspomnieć, że D3.js obsługuje wiele formatów danych.
biblioteka posiada wbudowaną funkcjonalność do ładowania z XMLHttpRequest, .pliki csv, pliki tekstowe itp., Każde z tych źródeł może zawierać dane, które D3.js może używać, jedyną ważną rzeczą jest skonstruowanie z nich tablicy. Zauważ, że od wersji 5.0 biblioteka używa obietnic zamiast wywołań zwrotnych do ładowania danych, które nie są kompatybilne wstecz.
skalowanie, osie
przejdźmy do osi wykresu. Aby narysować oś y, muszę ustawić najniższy i najwyższy limit wartości, które w tym przypadku są 0 i 100.
pracuję z procentami w tym tutorialu, ale są funkcje użytkowe dla typów danych innych niż liczby, które wyjaśnię później.,
muszę podzielić wysokość wykresu między te dwie wartości na równe części. W tym celu tworzę coś, co nazywa się funkcją skalowania.
const yScale = d3.scaleLinear() .range() .domain();skala liniowa jest najczęściej znanym typem skalowania. Przekształca ciągłą domenę wejściową w ciągły zakres wyjściowy. Zwróć uwagę na metodę range I domain. Pierwsza przyjmuje długość, która powinna być podzielona między granice wartości domeny.,
pamiętaj, że układ współrzędnych SVG zaczyna się od lewego górnego rogu, dlatego zakres przyjmuje wysokość jako pierwszy parametr, a nie zero.
utworzenie osi po lewej stronie jest tak proste, jak dodanie innej grupy i wywołanie metody d3axisLeft z funkcją skalowania jako parametrem.
chart.append('g') .call(d3.axisLeft(yScale));teraz kontynuuj z osią X.
należy pamiętać, że używam scaleBand dla osi x, który pomaga podzielić Zakres na pasma i obliczyć współrzędne i szerokości pasków z dodatkową wyściółką.
D3.,js jest również w stanie obsługiwać Typ daty między wieloma innymi. scaleTime jest bardzo podobny do scaleLinear z tym wyjątkiem, że domena jest tutaj tablicą dat.
rysowanie pasków w D3.js
zastanów się, jakiego rodzaju wejścia potrzebujemy, aby narysować paski. Każdy z nich reprezentuje wartość ilustrowaną prostymi kształtami, w szczególności prostokątami. W następnym fragmencie kodu dołączam je do utworzonego elementu group.
Po pierwsze, iselectAll elementy na wykresie, które zwracają z pustym zestawem wyników., Następniedata funkcja informuje, ile elementów DOM ma zostać zaktualizowanych na podstawie długości tablicy. enter identyfikuje elementy, których brakuje, Jeśli dane wejściowe są dłuższe niż wybór. Zwraca nową selekcję reprezentującą elementy, które należy dodać. Zazwyczaj następuje po nim append, który dodaje elementy do DOM.
w zasadzie mówię D3.js dołącza prostokąt dla każdego elementu tablicy.
teraz dodaje się tylko prostokąty, które nie mają wysokości ani szerokości., Te dwa atrybuty muszą zostać obliczone i w tym miejscu funkcje skalowania przydają się ponownie.
widzisz, dodaję współrzędne prostokątów wywołaniemattr. Drugim parametrem może być wywołanie zwrotne, które przyjmuje 3 parametry: rzeczywisty element danych wejściowych, jego indeks i całe wejście.
.attr(’x’, (actual, index, array) => xScale(actual.value))funkcja skalowania zwraca współrzędną dla danej wartości domeny. Obliczanie współrzędnych to bułka z masłem, sztuczka polega na wysokości poprzeczki., Obliczona współrzędna y musi zostać odjęta od wysokości wykresu, aby uzyskać prawidłową reprezentację wartości jako kolumny.
definiuję również szerokość prostokątów za pomocą funkcji skalowania. scaleBandma bandwidth funkcja, która zwraca obliczoną szerokość dla jednego elementu na podstawie ustawionego wypełnienia.
Dobra robota, ale nie taka fantazyjna, prawda?
aby uchronić naszych odbiorców przed krwawieniem z oczu, dodajmy trochę informacji i ulepszmy wizualizację!, 😉
Wskazówki dotyczące tworzenia wykresów słupkowych
istnieją pewne podstawowe zasady dotyczące wykresów słupkowych, które warto wspomnieć.
- Unikaj używania efektów 3D;
- intuicyjnie porządkuj punkty danych – alfabetycznie lub posortowane;
- zachowaj odległość między pasmami;
- Zacznij oś y od 0, a nie od najniższej wartości;
- używaj spójnych kolorów;
- Dodaj etykiety osi, tytuł, linię źródłową.
D3.js Grid System
chcę podświetlić wartości, dodając linie siatki w tle.,
śmiało, eksperymentuj zarówno z pionowymi, jak i poziomymi liniami, ale radzę wyświetlać tylko jedną z nich. Nadmierne linie mogą rozpraszać. Ten fragment kodu przedstawia jak dodać oba rozwiązania.
wolę pionowe linie siatki w tym przypadku, ponieważ prowadzą oczy i utrzymują ogólny obraz Prosty i prosty.
etykiety w D3.js
chcę również, aby schemat był bardziej wyczerpujący, dodając kilka wskazówek tekstowych. Nadajmy nazwę wykresowi i dodajmy etykiety dla osi.,
teksty są elementami SVG, które można dołączać do SVG lub grup. Mogą być pozycjonowane za pomocą współrzędnych x i y, podczas gdy wyrównanie tekstu odbywa się za pomocą atrybutu text-anchor. Aby dodać etykietę, wystarczy wywołać metodę text na elemencie tekstowym.
interaktywność z D3.js
mamy dość pouczający Wykres, ale wciąż są możliwości, aby uczynić go interaktywnym.
w następnym bloku kodu pokażę jak dodać event listeners do elementów SVG.,
zauważ, że używam wyrażenia funkcji zamiast funkcji strzałki, ponieważ uzyskuję dostęp do elementu za pomocą słowa kluczowegothis.
po najechaniu myszą ustawiam krycie zaznaczonego elementu SVG na połowę oryginalnej wartości i resetuję je, gdy kursor opuści ten obszar.
Możesz również uzyskać współrzędne myszy za pomocąd3.mouse. Zwraca tablicę ze współrzędną x i Y. W ten sposób wyświetlenie podpowiedzi na końcu kursora nie stanowi problemu.
tworzenie efektownych diagramów nie jest łatwą formą sztuki.,
można wymagać mądrości grafików, badaczy UX i innych potężnych stworzeń. W poniższym przykładzie pokażę kilka możliwości zwiększenia wykresu!
mam bardzo podobne wartości wyświetlane na wykresie, więc aby podkreślić rozbieżności między wartościami słupków, ustawiłem detektor zdarzeń dla zdarzenia mouseenter. Za każdym razem, gdy użytkownik znajduje się nad określoną kolumną a, na tym pasku rysowana jest pozioma linia. Ponadto obliczam również różnice w porównaniu z innymi pasmami i wyświetlam je na paskach.,
całkiem nieźle, co? Dodałem również przykład nieprzezroczystości do tego i zwiększyłem Szerokość paska.
metodatransition wskazuje, że chcę animować zmiany w DOM. Jego interwał jest ustawiany za pomocą funkcji duration, która pobiera milisekundy jako argumenty. To przejście powyżej zanika kolor zespołu i poszerzyć Szerokość paska.
aby narysować linię SVG, potrzebuję początku i punktu docelowego., Można to ustawić za pomocąx1,y1 Ix2,y2. Linia nie będzie widoczna, dopóki nie ustawię jej koloru atrybutem stroke.
ujawniłem tylko część zdarzeniamouseenter, więc pamiętaj, że musisz przywrócić lub usunąć zmiany w zdarzeniumouseout. Pełny kod źródłowy jest dostępny na końcu artykułu.
dodajmy jakiś styl do wykresu!,
zobaczmy, co osiągnęliśmy do tej pory i jak możemy potrząsnąć tym wykresem stylem. Atrybuty klas można dodawać do elementów SVG za pomocą tej samej funkcji attr, której wcześniej używaliśmy.
schemat ma ładny zestaw funkcjonalności. Zamiast nudnego, statycznego obrazu, ujawnia on również rozbieżności między reprezentowanymi wartościami po najechaniu myszą. Tytuł umieszcza wykres w kontekście, a etykiety pomagają zidentyfikować osie z jednostką miary. Dodaję również nową etykietę w prawym dolnym rogu, aby zaznaczyć źródło wejściowe.,
pozostaje tylko uaktualnić kolory i czcionki!
wykresy z ciemnym tłem sprawiają, że jasne kolorowe paski wyglądają fajnie. Zastosowałem również rodzinę czcionek Open Sans do wszystkich tekstów i ustawiłem rozmiar i wagę dla różnych etykiet.
zauważyłeś, że linia została przerwana? Można to zrobić ustawiając atrybuty stroke-width I stroke-dasharray. Za pomocą stroke-dasharray można zdefiniować wzór kresek i przerw, które zmieniają obrys kształtu.
linie siatki, gdzie robi się trudne., Muszę zastosować stroke-width: 0 do elementów ścieżki w grupie, aby ukryć ramkę diagramu, a także zmniejszyć ich widoczność, ustawiając krycie linii.
wszystkie pozostałe reguły css obejmują rozmiary i kolory czcionek, które można znaleźć w kodzie źródłowym.
js Bar Chart Tutorial
D3.js to niesamowita biblioteka do manipulacji domami. Jej głębokość skrywa niezliczone Ukryte (właściwie nie Ukryte, jest to naprawdę dobrze udokumentowane) skarby, które czekają na odkrycie., To pismo obejmuje tylko fragmenty jego zestawu narzędzi, które pomagają stworzyć niezbyt Przeciętny wykres słupkowy.
zwiedzaj, wykorzystuj i twórz spektakularne wizualizacje!