D3 Część NR.1 Wizualizacja danych. Kiedyś do pracy w trakcie marszu śmierci musiałem szybko napisać kod który by rysował wykres. Skorzystałem wtedy z biblioteki JavaScript Highchart.js. Obecnie sobie uświadamiań, że te głupie wykresy które napisałem spełniają bardzo ważną rolę biznesową dla klientów. Postanowiłem więc nauczyć się bardziej zawansowanej biblioteki stworzeń do tworzenia grafik i wykresów.
Wizualizacja D3.js
Jak zrobić wykresy w JavaScript? Proste skorzystać z d3.js
2. Wykres liniowy z SVG
W poprzednim wpisie narysowaliśmy prosty wykres słupkowy przy użyciu D3.
W tamtym przykładzie nie użyliśmy SVG. Można narysować prostokąty przy użyciu elementów div. Sprawa jednak się komplikuje, gdy chcemy narysować nawet proste linie.
Nie ma co ukrywać, że w takim wypadku lepiej zabrać do swojego arsenału SVG.
SVG pozwala na rysowanie przeróżnych figur i elementów, które normalnie w HTML nie są łatwe do narysowania.
3. Wykres liniowy z SVG C.D.N
W poprzednim wpisie narysowaliśmy wykres liniowy przy użyciu SVG i skryptu JavaScript D3.
Czas dodać pewne małe zmiany do naszego wykresu liniowego. Po pierwsze do wyświetlania danych zazwyczaj otrzymamy tablice obiektów, a nie tablice wartości.
Sam wykres nie ma też kropek w miejscach, gdzie powinny być wartości. Osie X i Y nie mają strzałek. Wykres nie ma tytułu. Osie nie są podpisane.
Są to drobne rzeczy, ale bez nich wykres może wyglądać blado. Zacznijmy więc przerabiać kod.
Jak obsłużyć tablice obiektów?