de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie dynamische Diagramme schnell auf D3 mit Plottable.js

Die kostenlose D3.js-Bibliothek ist nur eine von vielen, mit denen Sie interaktive Grafiken auf der Seite erstellen können . Während D3 ist vielleicht der beliebteste der Gruppe, zu lernen, es zu benutzen ist keine leichte Aufgabe.

Aus diesem Grund ist Plottable.js eine solch wertvolle Bibliothek. Es ist ein kostenloses Open-Source-Projekt, das auf D3.js aufsetzt und es jedem ermöglicht, interaktive Datendiagramme von Grund auf neu zu erstellen.

Diese Bibliothek behandelt alle schmutzigen Arbeiten, sodass Sie sich auf die Besonderheiten wie Daten konzentrieren können. Plottable generiert den richtigen Code für Größe und Position jedes von Ihnen gewählten Diagramms.

Jedes Diagramm verfügt über eine eigene Komponente in Plotable, in die Sie den Vorlagencode kopieren und einfügen können, um das Diagramm selbst neu zu erstellen . Zum Zeitpunkt des Schreibens können Sie aus 10 Diagrammdarstellungsstilen auswählen, einschließlich Balkendiagrammen, Kreisdiagrammen, Punktdiagrammen und Flächendiagrammen.

Sie können Komponenten einzeln neu erstellen und ihre Einstellungen dynamisch anpassen . Auf diese Weise können Sie interaktive Elemente, Farben, Animationen, Positionierungen, Größen und was Sie sonst noch brauchen einfach ändern.

Die vollständige Bibliothek ist auf GitHub verfügbar, wenn Sie den Quellcode durchsuchen und eine Kopie herunterladen möchten.

Aber der beste Weg zu lernen ist durch ein Beispiel. Deshalb sollten Sie sich die Beispielgrafiken ansehen, die Plottable ausführen, um zu sehen, wie es in Aktion funktioniert.

Jeder Graph ist vollständig interaktiv, mit Quellcode zum Booten. Wenn Sie ein ähnliches Diagramm erstellen möchten, kopieren Sie einfach den JS-Code und fügen Sie ihn nach Bedarf neu ein.

Ich habe zwei persönliche Favoriten von ihrer Seite: die Kalender-Heatmap nach GitHubs Activity Board und die Synchronized Charts mit dynamischen Auswahlfunktionen.

Wenn Sie D3.js noch nie zuvor benutzt haben, werden Sie Schwierigkeiten haben, diese Bibliothek zu lernen. Vor allem, weil es in TypeScript geschrieben ist, werden Sie das wahrscheinlich auch aufgreifen wollen. Der endgültige Code ist in ES5 JavaScript kompiliert, also sollte es in allen gängigen Browsern funktionieren .

Wenn Sie bereit sind zu tauchen, werfen Sie einen Blick auf ihre Tutorial-Seite voller nützlicher Ressourcen. Sie lernen alles, was Sie benötigen, um mit Plottable zu beginnen und dynamische webbasierte Graphen von Grund auf neu zu erstellen .

Steuern der CSS3-Animation mit der Funktion steps ()

Steuern der CSS3-Animation mit der Funktion steps ()

Animation ist eine der großartigsten Funktionen, die in CSS eingeführt wurden. In der Vergangenheit war Webanimation nur im JavaScript- oder Flash-Bereich verfügbar. Aber heute entscheiden sich viele Websites für CSS, um subtile Animationen hinzuzufügen . In früheren Artikeln haben wir einige Dinge mit CSS-Animationen durchgespielt, wie das Hinzufügen eines Marquee-Effekts und das Hinzufügen eines Bounce-Effekts zu etwas.In dies

(Tech- und Design-Tipps)

15 Nützliche Slack Tipps, die Sie wissen sollten

15 Nützliche Slack Tipps, die Sie wissen sollten

Slacks Einfachheit und Vielseitigkeit machten es schnell zu einem der leistungsfähigsten Produktivitätswerkzeuge unserer Tage, auf die sich viele Teams in ihrer täglichen Kommunikation verlassen . Trotz seiner unkomplizierten Benutzeroberfläche können wir dennoch einige nützliche und sogar skurrile Einstellungen verpassen - zumindest, wenn wir nicht an den richtigen Stellen suchen.In di

(Tech- und Design-Tipps)