Jak dodać wykresy do swojej witryny WordPress za pomocą D3.js

Być może znasz termin „wizualizacja danych”, ponieważ stał się bardziej powszechny zarówno jako praktyka, jak i ścieżka kariery. Jest powód, dla którego ta rozwijająca się dziedzina jest już w toku — ważne jest, abyśmy stale dowiadywali się więcej o naszych użytkownikach, a także pokazywali im dane, które uzasadniają nasze twierdzenia.

Gdy dane są prezentowane w przejrzysty i profesjonalny sposób, łatwo je zrozumieć i zinterpretować. W większości przypadków Twoi użytkownicy to ludzie wizualni, więc czy jest lepszy sposób na zilustrowanie danych niż za pomocą wykresów? D3.js, zwany również dokumentami opartymi na danych, to świetny sposób na dodawanie wykresów do witryny WordPress.

Dlaczego D3?

Ta biblioteka pomaga projektantom prezentować dane w Internecie. Możliwości są nieograniczone, dzięki czemu jest to bardzo popularna biblioteka. Od prostych do skomplikowanych po wszystko pomiędzy, D3 można dostosować, aby renderować prawie każdy rodzaj wykresu. Świetnie współpracuje ze standardowymi technologiami sieciowymi, może manipulować DOM, jest bardzo elastyczny, a wykresy można dostosować dokładnie do własnych upodobań.

Do tej pory najprawdopodobniej spotkałeś się ze skalowalną grafiką wektorową, często określaną jako SVG. Jest to typ formatu, który tworzy biblioteka D3. Pliki SVG są świetne, ponieważ są małe, skalowalne i niezależne od rozdzielczości.

Żeby było jasne, to rozwiązanie nie jest dostarczane z żadnymi gotowymi mapami po wyjęciu z pudełka – musisz wymyślić własne! Zajrzyj do galerii D3, a zobaczysz wiele wspaniałych przykładów, które Cię zainspirują.

Jako rozwiązanie Open Source nie musisz martwić się o licencje i koszty. Ponieważ jest to oprogramowanie Open Source, rozwój trwa. Aby być na bieżąco z najnowszą wersją, możesz rozwidlić D3 na Github.

Tworzenie prostego wykresu D3

Teraz, gdy wiemy, jak świetny jest D3, zbudujmy coś. Stworzymy prosty wykres pierścieniowy, który obejmie podstawowe pojęcia D3.

Krok pierwszy: dodaj skrypty do swojej witryny

Najpierw musisz dodać skrypt D3 do swojej witryny WordPress. Witryna d3 udostępnia go do pobrania lub możesz połączyć się bezpośrednio z najnowszą wersją. Zauważysz, że do tego samouczka używam wersji zminifikowanej. D3 jest oczywiście dość mały, ale minifikowany jest nadal nieco mniejszy i ma tylko 148 KB.

Następnie utworzysz nowy plik JavaScript, do którego trafi skrypt niestandardowego wykresu. Nadaj plikowi rozpoznawalną nazwę, aby łatwo go było znaleźć.

Bardzo ważne jest, aby skrypt D3 był wywoływany przed kodem JavaScript specyficznym dla wykresu. Jeśli rzeczy nie zostaną wywołane we właściwej kolejności, wykresy nie będą renderowane. (Wiem to z własnego doświadczenia i jeśli nie złapiesz tego od razu, prawdopodobnie spędzisz dużo czasu próbując naprawić rzeczy, które nie są zepsute).

Skrypty te należy dodać do witryny po zamykającym tagu body. Sprawdzając stronę, upewnij się, że wygląda mniej więcej tak:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Pamiętaj, że ścieżka pliku może być inna niż ta, w zależności od struktury pliku.

Krok drugi: dodaj skrypty, aby utworzyć wykres

W ogóle nie będziesz dotykać pliku d3.js , pracujesz tylko w określonym pliku wykresu. W tym przypadku nazywa się to charts.js .

Podzielmy rzeczy kawałek po kawałku. Najpierw utwórz zmienną i ustal, czego będziesz potrzebować w swojej funkcji. Nazwę tę zmienną donut .

var donut = (function(one) {
})();

Wewnątrz nawiasów klamrowych dodasz informacje o rozmiarze.

var width = 400,

height = 400,

radius = 200

Następnie zdefiniuj swoje kolory. Co powiesz na szaro-niebieski wykres? Pierwszy wymieniony tutaj kolor to jasnoszary, który będzie kolorem domyślnym. Drugi to niebieski kolor, który będzie reprezentował dane.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Będziesz potrzebować danych, aby to przetestować, więc dodajmy to w następnej kolejności. W tym samouczku dane są zakodowane na stałe, ale w D3 można również używać danych z arkusza kalkulacyjnego i danych dynamicznych.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Teraz możesz dodać więcej szczegółów, które pomogą określić sposób renderowania wykresu.

Łuk definiuje promień wewnętrzny. Wyobraź sobie promień zewnętrzny wykresu – chcesz, aby był dość gruby, więc odjęcie 100 powinno wystarczyć.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Spowoduje to utworzenie kontenera SVG, a #donut jest tym, na co będziesz kierować na swojej stronie, aby faktycznie renderować wykres. W tym miejscu zaczniesz widzieć swoje kolory z powyższego kroku.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Gotowy kod

Na wypadek, gdybyś chciał porównać to, co masz z próbką, oto kompletny fragment kodu.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Widząc wykres

Będziesz musiał utworzyć nową stronę lub post, aby „wywołać” wykres pierścieniowy, aby go zobaczyć. Upewnij się, że jesteś w trybie edycji tekstu.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Pole widzenia i proporcje do tabeli rozmiarów

W tagu SVG jest coś dodatkowego, czyli viewBox i preserveAspectRatio . Nie zostało to wygenerowane przez D3 i jest całkowicie opcjonalne. Możesz mieć inną preferowaną metodę określania rozmiaru, ale zwykle działa to dobrze i pomaga w responsywności wykresów.

Zwłaszcza w tym przypadku, ponieważ chcemy zachować idealnie okrągły kształt, ustawienie proporcji zapewni, że SVG będzie się odpowiednio skalować. Tutaj do gry wkracza viewBox . Zaletą viewBox jest to, że definiuje jak wszystkie pomiary i współrzędne użyte wewnątrz SVG powinny być skalowane, aby zmieściły się w dostępnej przestrzeni. Jeśli używasz również 400 jako miary, oto krótkie wyjaśnienie, jak zachować okrągły kształt.

Mamy dwie wartości 400, które są takie same; powodem tego jest prawidłowe skalowanie obrazu. Za pomocą naszego viewBox="0 0 400 400" tworzymy układ współrzędnych grafiki. Ma 400 jednostek szerokości i 400 jednostek wysokości. Szerokość i wysokość grafiki SVG określa widoczny obszar, a ustawienie viewBox pozwala na określenie, że grafika może zostać rozciągnięta w celu dopasowania do określonego kontenera (najprawdopodobniej domyślnie okna widoku, czyli części strony internetowej, którą użytkownik może obecnie patrz).

Jest w tym trochę więcej, ponieważ nawet ze zdefiniowanym viewBox nadal nie będzie się idealnie skalować. Nie będzie zniekształcony, co jest dobrą rzeczą, ale w równaniu jest coś więcej. Poznaj skrzydłowego, preserveAspectRatio . Nie ma to żadnego efektu, chyba że istnieje viewBox , który definiuje proporcje obrazu. Skala zostanie dostosowana w celu zachowania proporcji, dzięki czemu możesz zachować idealnie okrągły wykres. Włączając funkcję preserveAspectRatio , planujesz sytuacje, w których viewBox nie pasuje do proporcji rzutni lub kontenera, w którym znajduje się wykres. W większości przypadków domyślnie obraz będzie skalowany, dopóki nie będzie pasował zarówno do wysokości, jak i szerokości, ale centruje się w dowolnej dodatkowej przestrzeni. Dodaliśmy preserveAspectRatio="xMidYMid" , które informuje przeglądarkę, aby wyśrodkować grafikę w rzutni w obu kierunkach.

Najważniejszym wnioskiem jest świadomość, że grafika nie zostanie obcięta i że jest skalowalna. Kluczem do prawdziwego zrozumienia tego jest eksperymentowanie z wartościami. Dobrym sposobem, aby to zrobić, jest zobaczenie, co się stanie, gdy wartości zostaną zmienione i jaki ma to związek z widocznym obszarem.

Obsługa przeglądarki i d3

Możliwe, że korzystasz z nowoczesnej przeglądarki, ale warto wspomnieć, jeśli musisz obsługiwać starsze przeglądarki. Ogólnie rzecz biorąc, obsługa przeglądarek jest świetna i prawdopodobnie nie napotkasz żadnych problemów, ale D3.js nie działa dobrze ze starszymi przeglądarkami, takimi jak IE8.

Stworzenie prostego wykresu to świetny sposób na rozpoczęcie pracy z D3.js. Znajomość podstaw i zapoznanie się z wykresami początkowymi D3 będzie bardzo pomocna podczas projektowania danych i przechodzenia do większej liczby typów wykresów. Od prostych do złożonych, możliwości projektowania są nieskończone.

Jak wypadł twój wykres? Daj nam znać w komentarzach!

Co dalej?

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów! Odkryliśmy, że wszystkie te wtyczki są proste w użyciu, nie mają zbyt dużej wydajności w Twojej witrynie i są po prostu niezawodne.

Gotowy do zainstalowania nowej ulubionej wtyczki? Kliknij poniżej!