Boost D3.js wykresy z gradientami SVG

Nadieh Bremer będzie Generować Londyn We wrześniu, gdzie będzie wykazać, jak wziąć SVG poza zwykłymi kształtami , Korzystając z JavaScript, CSS i D3.js, aby wprowadzać wizualizacje danych jeszcze bardziej zabawne i ekscytujące. Zarezerwuj teraz bilet !

D3.js przejęły świat interaktywnej wizualizacji danych. Można znaleźć ogromną liczbę przykładów, każdy prezentuje swój własny zabawny i przydatny zwrot w bibliotece. Widzisz, D3 nie jest biblioteką wykresu, ale coś znacznie lepszego. Daje Ci tylko podstawowe narzędzia do tworzenia wizualizacji danych, a w ten sposób umożliwia tworzenie praktycznie cokolwiek, o czym możesz myśleć. Chociaż niektóre pomysły mogą trwać więcej czasu niż inni, w końcu dotrzesz tam. A ta wolność jest dokładnie tym, co kocham w D3.

W jego rdzeniu każdy wizualny D3 jest zbudowany z elementów SVG. Na przykład, dla każdego datapoint na wykresie rozproszenia, aby utworzyć wykres słupkowy, jako oś, współrzędne równoległe lub wykres nachylenia, jako etykiety, a niezwykle przydatne dla praktycznie wszystko inne. Ponadto SVG są niezależne od rozdzielczości, a tym samym świetnie wyglądają na dowolnym wyświetlaczu lub poziomie powiększenia.

Nawet jeśli używasz SVGS dla ich kształtów, możesz stworzyć wspaniałe wizualizacje. Jednak mogą zrobić znacznie więcej - pomyśl o filtry SVG na przykład. W tym samouczku weźmiemy głęboką nurkowanie w jeden konkretny aspekt i spojrzeć na kilka różnych sposobów, jakie można stosować, aby rozjaśnić wizualizację. Pozwól, że przedstawię Cię gradienty SVG!

Znajdź wszystkie potrzebne pliki do tego samouczka tutaj .

Gradienty liniowe.

Czasami, gdy tworzę wykres liniowy z jedną linią, po prostu czuje się trochę zbyt pusty i może się zgubić na białym tle. Aby wyróżnić się więcej, umieszczam gradient światła poniżej, używając D3 d3.svg.area. Funkcja, wypełniona gradientem SVG (patrz rys. 1).

Chcę gradientu uruchomić pionowo z góry (gdzie jest taki sam kolor jak linia, ale lżejszy odcień) na dno (gdzie powinien stać się biały lub przezroczysty). To jest znany jako gradient liniowy; coś, co zmienia kolor wzdłuż linii prostej.

Zaczynamy od SVG. Jest to płótno, na którym zostanie narysowana nasza wykres liniowy. Następnie tworzymy defs element, do którego możemy dołączyć gradient liniowy element. Bardzo ważne jest, aby dać gradientowi wyjątkowy identyfikator - użyjemy tego później, gdy musimy podać okolicę poniżej linii jego wypełnienie.

 VAR ALEGRADIENT = svg.append ("defs")
.append ("lineargradient")
.attr ("ID", "Aregegradient")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Ostatnie dwie linie kodu powyżej określa, w jaki sposób gradient powinien działać. Pomyśl o tym jako niewidzialnej linii: x1. i Y1. są pozycjami wyjściowymi linii niewidzialnej i x2. i Y2. Wskazać punkt końcowy, aby dać kierunek gradientu. Często jest najłatwiejszy, aby określić te jako procenty, chociaż możliwe jest użycie dokładnych lokalizacji pikseli. Domyślnie lokalizacje odnoszą się do skrzynki ograniczającej elementu, na który stosuje się gradient. Chcemy gradientu działać pionowo, więc x1. i x2. powinien być taki sam ( 0% jest w porządku), Y1. musi być 0% i y2 100% .

Teraz możemy zdefiniować kolory gradientu. Co najmniej dwa kolory są potrzebne dla gradientu, ale możesz użyć tylu jak chcesz. Dla każdego koloru gradientu dodajesz zatrzymać element. W tym celu określiłeś cień Stop-Color. oraz lokalizacja (wzdłuż niewidzialnej linii), w której chcesz, aby ten kolor był czysty (dokładny kolor) offsetowy .

Opcjonalnie możemy również ustawić krycie każdego koloru zatrzymaj się . Tutaj czyniam cień lekko lżejszy na górze i całkowicie przezroczysty na dole.

rozegradient.append ("stop")
.attr ("offset", "0%")
.attr ("Stop-Color", "# 21825C")
.attr ("zatrzymanie krycia", 0,6);
rozegradient.append ("stop")
.attr ("offset", "80%")
.attr ("Stop-Color", "White")
.attr ("zatrzymanie", 0); 

Teraz konfiguruje się gradient liniowy, możemy utworzyć wykres obszarowy i wypełnić go gradientem. Aby to zrobić, użyj URL (# gradient-id) W stylu wypełnienia wraz z unikalnym identyfikatorem, który wcześniej ustawiliśmy.

 svg.append ("ścieżka")
.Style ("Wypełnienie", "URL (#areagradient)")
.attr ("D", awator (DataSet)); 

Następnie narysuj linię na górnej części tego obszaru wykresu, aby przeglądarka może odczytać wyników wykresu. Na moim wykresie umieściłem również kręgi, aby podkreślić lokalizacje określonych punktów danych.

Gładka legenda

Legendy są bardzo powszechne w wizualizacji danych. Gdy używasz kolorów, aby reprezentować określony aspekt danych, musisz wyjaśnić, co oznacza każdy kolor. W tym miejscu pojawia się legenda.

W niektórych wykresach będziesz używać koloru do dyskryminowania między dyskretnymi przypadkami (na przykład, różne kraje), w którym to przypadku kolory są często bardzo różne. Można jednak również użyć koloru, aby wskazać wartość ilościową.

Tutaj reprezentujemy temperaturę na zewnątrz (patrz rys. 2). Kolor zmienia się stopniowo, aby wskazać temperaturę od niskiej do wysokości. Aby pokazać to w legendzie, będziemy stworzyć długi prostokąt i wypełnić go gradientem idzie od lewej do prawej. Możemy ponownie wykorzystać gradient stworzony dla naszego wykresu linii, ale odwrócił się o 90 stopni ( x2. teraz biegnie 100% , a nie Y2. ). Chociaż generalnie paleta tęczowa nie jest zalecana w wizualizacji danych, ludzie są wykorzystywane do widzenia kolorowych map temperatury i wybrałem dziewięć kolorów do wykorzystania w naszym przykładzie.

Zamiast pisać każdy zatrzymać Aby dołączyć, możemy umieścić wszystkie kolory w zestawie danych i użyć NIFTY D3 dane krok, aby proces szybciej. Dzięki D3 możliwe jest uzyskanie dostępu do dowolnej właściwości zbioru danych w kolejnych etapach łańcuchowych za pomocą funkcji anonimowej, umożliwiając tym samym ustawienie koloru i przesunięcia w dwóch liniach.

 Svg.append ("Defs")
.append ("lineargradient")
.attr ("ID", "legendgradientMulti")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.selektall ("stop")
.dane([
{offset: "0%", kolor: "# 2C7BB6"},
{offset: "12,5%", kolor: "# 00a6ca"},
{offset: "25%", kolor: "# 00CCBC"},
{OFFSET: "37,5%", kolor: "# 90EB9D"},
{offset: "50%", kolor: "# ffff8c"},
{offset: "62,5%", kolor: "# F9D057"},
{offset: "75%", kolor: "# f29e2e"},
{offset: "87,5%", kolor: "# E76818"},
{offset: "100%", kolor: "# d719c"}])
.ENTER (). Dołącz ("Stop")
.attr ("offset", funkcja (D) {RETURN D.OFFSET;})
.attr ("Stop-Color", funkcja (D) {RETURN D.Color;}); 

Jak poprzednio ostatni krok jest stworzenie rect i wypełnij to przy użyciu unikalnego identyfikatora gradientu.

 svg.append ("Rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("szerokość", 500) .attr ("wysokość", 20)
.Style ("Wypełnienie", "URL (#legendgradientMulti)"); 

Wykresy te legendy są odtworzone po wspaniałej pracy www.weather-radials.com. Wyświetlanie temperatury w Nowym Jorku lub Pekinie w 2015 r. Średnia temperatura każdego dnia jest wskazywana przez kolorową linię, a linie te są ułożone, aby utworzyć okrągły wykres. Poniższa legenda wyjaśnia, co oznacza każdy kolor. Jeden wykres wykorzystuje gradient z jednego koloru do drugiego, a drugi postępuje przez wszystkie dziewięć kolorów.

Gradienty oparte na danych

W sposób podobny do poprzedniego przykładu możemy również utworzyć wiele gradientów. Możemy wykonać unikalny gradient dla każdego punktu danych, w oparciu o określony aspekt danych. Użyłem tego podejścia w Wizualizacja egzoplantu , gdzie każda planeta otrzymała gradient w oparciu o klasę gwiazd gwiazdy. Użyłem subtelnej efektu kuli, aby dać wrażenie, każdy był oświetlony gwiazdą w centrum.

Wróćmy więc do lat 90. i zamienimy kolekcję płaskich okręgów reprezentujących planety w naszym własnym układzie słonecznym na kule 3D z gradientami promieniowymi (rys. 4). Stworzyłem mały zestaw danych zawierający nazwę i średnicę planety. Każdy będzie uogólniony przez jeden kolor, którego użyjemy, aby stworzyć unikalny gradient dla każdej planety.

 var gradientRadial = svg.append ("defs")
.selektall ("Radialgradient")
.data (planety)
.ENTER (). Dołącz ("Radialgradient")
.attr ("ID", funkcja (D) {Powrót "gradient-" + D.Planet;})
.attr ("cx", "15%")
.attr ("CY", "50%")
.attr ("R", "85%"); 

Kod jest tutaj nieco inny: zamiast najpierw dołączyć element gradientowy, natychmiast dołączymy planety. zestaw danych i dopiero po wchodzić Czy tworzymy element gradientowy (w tym przypadku RadialGradient. ). W ten sposób tworzony jest gradient dla każdego punktu w zestawie danych. Trzymaj identyfikator każdego punktu unikalnego, opierając go na danych. Indeks ja Zwykle działa, ale tutaj nazwa planety jest bezpieczniejsza. Zapewnia to, możemy uzyskać dostęp do prawidłowego gradientu później.

Gradient promieniowy jest nieznacznie różni się od liniowego. Tworzymy go w podobny sposób do okręgu SVG: dostarczamy centrum gradientu w odniesieniu do granic obiektu, do którego zostanie zastosowany, używając cx. i CY. . Te wartości domyślnie 50% , który jest środkiem obiektu.

Aby symulować wygląd gwiazdy świecącej na planetach z jednej strony, przesuniemy centrum gradientu w lewo, ustawienie cx. do 15% . Promień gradientu (gdzie zatrzymanie gradientu 100% powinien kończyć się) jest wskazany przez R. . Domyślnie to również 50% , ale z powodu naszego cx. offset, to jest teraz 85% Wypełnia więc całe koło.

Możemy skorzystać z danych planety, aby dołączyć ograniczenia kolorów. Aby stworzyć wygląd sfery, na którym się świeci, kolor na 0% powinien być lżejszy. Używając D3.RGB (). Jaśniejszy (k) Nie muszę określać oddzielnego koloru, ponieważ D3 zrobi to dla mnie obliczenia. Wartość K. Określa, ile lżejszy chcę, aby kolor stać się. Wokół 50% Ustawiłem prawdziwy kolor w zestawie danych. Na krawędzi chcę kolor, który jest nieco ciemniejszy, podając wygląd cienia. Logicznie jest też D3.RGB (). Ciemniej (K) że możemy użyć.

 GradientRadial.append ("Stop")
.attr ("offset", "0%")
.attr ("Stop-Color", funkcja (D) {
RETURN D3.RGB (D.Color) .brak (1); });
gradientRadial.append ("stop")
.attr ("offset", "50%")
.attr ("Stop-Color", funkcja (D) {RETURN D.Color;});
gradientRadial.append ("stop")
.attr ("offset", "100%")
.attr ("Stop-Color", funkcja (D) {
Powrót D3.RGB (D.Color) .darker (2,5); }); 

Jeśli miałbyś sprawdzić HTML po uruchomieniu, byłoby osiem różnych gradientów obecnych. Ostatni, musimy stworzyć osiem kół, daj im promień zgodnie z definicją przez dane i wypełnić je prawidłowym gradientem.

 Svg.selectall (". Planety")
.data (planety)
.ENTER (). Dołącz ("Okrąg")
/ * Ustaw atrybuty klasy, lokalizacji i promienia ... * /
.Style ("Wypełnienie", funkcja (D) {
Powrót "URL (# gradient-" + d.Planet + ")"; }); 

Dodałem też słońce, które ma swój własny gradient promieniowy, ale wyszedłem cx. , CY. i R. z domyślnym ustawieniem 50% Aby to wyglądać, jak słońce świeci przed środkiem na zewnątrz.

Zrzeczenie się: Chociaż średnice wszystkich kulek są poprawne względem siebie, odległości są oczywiście całkowicie fałszywe. Przykro mi, że Saturn nie ma pierścieni

Grając z orientacjami

Obecnie zbadaliśmy, jak ustawić aspekty kolorów na podstawie danych, ale istnieje wiele możliwości. Możemy ustawić praktycznie wszystko na podstawie danych - nawet orientacji każdego gradientu.

Aby tego wypróbować, wykonajmy diagram CHORD D3 pokazujący współpracę między Avengers w wszechświecie Cyple Cinematic (rys. 5). Akordy, które działają między sześcioma mosgami są wielkości według liczby filmów, w których pojawiają się. Zamierzamy wypełnić te akordy prostym gradientem liniowym, zmieniającym się z koloru jednego Avengera do drugiego.

Akord zwykle nie jest dokładnie poziomym ani pionowym. Więc będziemy musieli ustawić X1, x2. , Y1. i Y2. Wartości oparte na lokalizacjach łuku zewnętrznego każdego Avengera. Te dane nie są w naszym oryginalnym zestawie danych, ale po tym, jak dostaliśmy go do D3 d3.layout.Chord. Funkcja, odzyskamy nowy zestaw danych zawierający kąty startowego i końcowego każdego łuku (jak d.source.startangle. i d.target.dangong. ). To jest DataSet, który dostarczamy podczas tworzenia gradientów.

Musimy znać pozycje pikseli niewidzialnej linii, która biegnie z jednego końca akordu do drugiego. Są one następnie używane do dania x1, .., y2 atrybuty każdego gradientu. Możemy zastosować trochę trygonometrii za pomocą promienia diagramu Chord i lokalizacji w połowie drogi wzdłuż każdego łuku Avengera, aby odzyskać te pozycje. Pełna formuła trygonometryczna została usunięta z poniższego kodu, ale znajdziesz go Github repo towarzyszy temu artykułu .

Aby wykonać unikalny identyfikator dla każdego akordu, tworzymy kombinację łańcucha wartości indeksu Avengera na każdym końcu akordu. D3's. d3.layout.Chord. zawsze ustawiają jeden (z padających) do źródło a drugi cel , co czyni wyjątkową parę. Później, przyciągając akordy, możemy użyć tej samej techniki, aby zadzwonić do właściwego gradientu.

 Var Grads = svg.append ("Defs"). Wybierz ("lineargradient")
.data (Chord.Chords ())
.ENTER (). Dołącz ("lineargradient")
.attr ("ID", funkcja (D) {Powrót "GradientCord-" + D.Source.
indeks + "-" + d.target.index; })
.attr ("gradientunity", "UsersPaceonuse")
// Lokalizacja pikseli jednego końca akordu
.ATtr ("X1", funkcja (D, I) {RETURN / * ... trygonometria na podstawie
Wartości D.Source ... * /; })
.attr ("Y1", funkcja (D, I) {RETURN / * ... * /})
// Lokalizacja pikseli drugiego końca akordu
.attr ("x2", funkcja (D, I) {RETURN / * ... * /})
.attr ("Y2", funkcja (D, I) {Powrót / * ... * /}); 

Ponieważ każdy Avenger jest zdefiniowany przez własny numer indeksu, możemy dokonać funkcji kolorów, zabarwienie , co zwraca kolor każdego mściwiącej na wartość indeksu. Ułatwia to odnoszą się do odpowiedniego koloru, jednocześnie dołączając dwa przystanki.

 Grads.append ("Stop")
.attr ("offset", "0%")
.ATtr ("Stop-Color", Funkcja (D) {Kolory powrotne (D.Source.index);
});
grads.append ("stop")
.attr ("offset", "100%")
.attr ("Stop-Color", Funkcja (D) {Kolory powrotne (D.Target.index);
}); 

Wszystko, co pozostaje, jest zadzwonić do właściwego identyfikatora gradientu podczas ustawiania stylu wypełnienia akordów (z taką samą funkcją, jak użyliśmy do ustawiania identyfikatora gradientu).

Zaokrąglać w górę

Podczas tego samouczka spojrzeliśmy na cztery różne sposoby korzystania z gradientów SVG w wizualizacji danych, ale zawsze istnieje więcej rzeczy, które możesz zrobić. Z animacje gradientu można na przykład symulować przepływ z jednej części wizualizacji danych na inny.

Następnym razem, gdy projektujesz wizualizację danych, niech twoja kreatywność będzie wolna. Z D3.JS nie musisz być ograniczony przez to, co myślisz, są granice narzędzia. Z małym wychodzącym myśleniem i wysiłkiem, możesz zrobić najbardziej niesamowite rzeczy.

Nie przegap sesji Nadieha, SVG poza zwykłymi kształtami, w Generate London, 21-23 września. Rezerwuj teraz !

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 280; Kupuj tutaj !