Erstellen Sie eine SVG-Datenvisualisierung mit PHP

Ein guter Programmierer ist ein fauler Programmierer. In einer wachsenden Welt der Datenvisualisierung lässt sich die Handarbeit jedes Designs nicht skalieren. Ich wollte sehen, ob es eine Möglichkeit gibt, Aspekte von Visualisierungen mit einem Programm zu erstellen, um die Ausgabe einfach zu erstellen und wiederzuverwenden. War es ähnlich wie in der UNIX-Philosophie von lose verknüpften Programmen möglich, eine kleine Toolbox aus lose verknüpften Skripten zu erstellen, die Bausteine ​​für Visualisierungen erstellen?

Es scheint keinen akzeptierten Begriff dafür zu geben. Ich habe die Sätze 'deterministisches Design', 'programmatisches Design' und 'rechnergestütztes Design' gehört. Was sie alle anstreben, ist die Fähigkeit, basierend auf der Dateneingabe konsistent ein grafisches Element zu erstellen.

Wir sehen das die ganze Zeit in der realen Welt. Die alten Quecksilberthermometer nahmen Daten aus der Umgebung und der Temperatur auf und wandelten diese in eine Visualisierung um, indem sie das Quecksilber über die Pipette bewegten. Was ist das digitale Äquivalent?

Es gibt einige Kandidatentechnologien. Wenn Sie online arbeiten, fällt Ihnen die Leinwand ein. Sie können damit schnell und einfach Rastergrafiken zeichnen. Wenn Sie möchten, gibt es auch viele Bildcode-Bibliotheken, die auf Anfrage GIFs, JPEGs und PNGs generieren können. Aber was ist, wenn Ihr Ziel nicht immer online ist? Was ist, wenn Sie drucken möchten? Dann könnten Sie eine Rastergrafik verwenden, die jedoch ziemlich groß sein müsste. Eine bessere Lösung besteht darin, aus Ihrem Code ein vektorbasiertes Bildformat zu erstellen. Hier setzt SVG (Scalable Vector Graphics) an.

Was ist SVG?

SVG ist die kleine Technologie, die es könnte! Es ist über 10 Jahre alt und die Spezifikation wird noch verfeinert. SVG wurde mit Blick auf ein XML-Web entworfen und neu gestaltet. SVG Tiny sollte die mobile Welt im Sturm erobern, tat es aber nie. Das Web verfügt über zoombare Grafiken, die mit Ihrem reaktionsschnellen Webdesign skaliert werden können, aber nur wenige Browser unterstützen SVG von Haus aus. Wenn Sie sich umschauen, würden Sie denken, dass SVG fehlgeschlagen ist und eine Abschreibung ist. Der Verlust des Webs ist ein Gewinn für Programmierer!

SVG ist eine XML-basierte Sprache zur Beschreibung von Vektorgrafiken. Es gibt eine Handvoll Grundelemente, die Sie kennen müssen, wie Linie, Kreis, Rechteck und Pfad. Daraus können Sie viel komplexere Bilder erstellen. Da XML nur Text ist, können Sie in jedem Texteditor eine SVG-Datei schreiben. Selbst einfache Programmierskripte können SVG schnell ausgeben. Da es sich bei dem Format um Text handelt, können Sie es auch nach Fertigstellung Ihres Codes eingeben und optimieren. Wenn Ihnen die Farbe nicht gefällt, öffnen Sie den Editor und suchen und ersetzen Sie ihn.

SVG ist eine sehr einfache Sache zu lernen. Viele Jahre lang habe ich mich nie mit dem Programmieren von Grafiken beschäftigt, weil man sich mit Bildformaten auskennen musste und es wie eine Fremdsprache war, aber mit SVG ist es nur Text. Das Web hat gewonnen, weil Sie 'Quelle anzeigen' konnten. SVG ist ein großartiges Bildformat, weil Sie das Gleiche tun können!



Verwenden von Code zum Erstellen von SVG

Der Aufbau von SVG aus Code hat seine Vorteile. Sie können jedes Mal mathematisch genaue Ergebnisse erzielen. Mithilfe von Algorithmen können Sie Objekte in genauen Intervallen schnell platzieren. Ich habe Designer gesehen, die versucht haben, Objekte an Linien auszurichten oder die Regeln zu verwenden, um Entfernungen zu messen, nur um sie zu vergrößern, zu überprüfen, zu verkleinern und sie trotzdem von meinen Toleranzen im Submillimeterbereich abzuhalten. Im Code kann dies alles ignoriert werden. Unglaublich komplexe Kurven lassen sich mit wenigen Linien in einem Pfad erklären und das Beste ist, dass sie immer wieder reproduzierbar sind. Das Generieren von 10.000 zufälligen Punkten in einem Skript ist eine for-Schleife. Von Hand würde dies viel Kopieren und Einfügen erfordern und dann wäre es nicht wirklich zufällig. Die Fähigkeit des Codes, schnell Designs zu generieren, die für Designer entweder zu anspruchsvoll oder zu langweilig sind, ist der Sweet Spot.

Ich befürworte nicht, den Profis das Design von Grafiken zu nehmen, sondern Code das tun zu lassen, was er am besten kann. Ein guter Programmierer ist ein fauler Programmierer. Ein guter Designer sollte faul sein. Es ist nicht erforderlich, 10.000 zufällige Punkte von Hand zu erstellen. Ihre Zeit könnte viel besser genutzt werden.

Das Erstellen von SVG über Code ist der schnellste Weg, um eine Basis zu erhalten, die einfach in komplexere Vektorsoftware wie Adobe Illustrator oder Inkscape importiert werden kann. Von dort aus kann das Design weiter an die Anforderungen jedes einzelnen Projekts angepasst werden.

Beispiele

Wenn wir ein Beispiel nehmen, werden die Dinge viel klarer. Ich sehe überall großartige Designs und frage mich, wie sie es gemacht haben und wie oder ob es in Code gemacht werden könnte. Einer meiner Favoriten ist Dieses Poster zum 15-jährigen Jubiläum des WIRED-Magazins . An sich ist es eine schöne Sache, sie anzusehen, aber bis Sie sie verstehen, erhalten Sie nicht die subtile Referenz. Jedes der Farbräder repräsentiert die Hauptfarben des Deckblatts jeder Ausgabe. Sie können im Laufe der Zeit sehen, wie sie dunkle und helle Perioden durchlaufen haben. Ich überlegte mir, wie ich so etwas machen könnte, und schrieb ein einfaches PHP-Skript, das ein .net-Magazin-Cover nehmen und einen ähnlichen Effekt erzielen würde.

Um sein Jubiläum zu feiern, beauftragte das WIRED Magazine 2008 Fernanda Vigas und Martin Wattenberg mit der Visualisierung seiner Geschichte und Kultur

Um sein Jubiläum zu feiern, beauftragte das WIRED Magazine 2008 Fernanda Vigas und Martin Wattenberg mit der Visualisierung seiner Geschichte und Kultur

Das Erstellen des .net umfasst Visualisierungen

Für diejenigen unter Ihnen, die nicht mit PHP, SVG oder deren Anzeige vertraut sind, ist es ziemlich einfach. Ich werde Sie durch den Code führen und Ihnen zeigen, wie Sie SVG im Browser und in einem Texteditor anzeigen. Wenn Sie Ihre eigene Lieblingssprache verwenden möchten, sollte es nicht schwer sein, mitzumachen.

Als erstes müssen wir das JPG-Bild laden, das wir analysieren möchten. In PHP können Sie die verwenden imagegreatefromjpeg() Funktion, wenn Sie die richtigen Bibliotheken installiert haben. Dies gibt ein Bildhandle zurück, sodass wir weitere Fragen zur Grafik stellen können.

Als nächstes ermitteln wir die Höhe und Breite des Bildes mithilfe von imagesx () und imagest () Funktionen.

Unser Ziel ist es, jede Pixelfarbe im Bild nachzuschlagen und deren Häufigkeit zu zählen. Also brauchen wir eine Art Array. In diesem Fall habe ich ein Array namens erstellt $ rgb = array () , die ich für jede Farbe einen neuen Schlüssel machen und den Wert als Zähler erhöhen kann.

Da wir die Höhe und Breite des Bildes haben, können wir zwei verschachtelte for-Schleifen erstellen. Wir können jetzt Spalte für Spalte gehen und jedes x- und y-Pixel mit der Taste betrachten imagecolorat () Funktion. Die Linie $ rgb [imagecolorat ($ im, $ i, $ j)] ++; greift auf das RGB-Array zu, wobei der Schlüssel dem Pixelwert entspricht, und fügt diesem Wert einen hinzu. Wenn die beiden for-Schleifen fertig sind, haben wir uns jedes einzelne Pixel angesehen und eine schöne, kompakte Anordnung nur der bekannten Farben und ihrer Häufigkeit erstellt.

Schließlich sortieren wir dieses Array mit asort () Die beliebtesten Farben sind also am Ende und die kleinsten Werte am Anfang.

Der Code in PHP sieht folgendermaßen aus:

Zu diesem Zeitpunkt ist unser $ rgb-Array voll. Wir brauchen das Quellbild nicht mehr und werden basierend auf den Daten eine neue Visualisierung in SVG erstellen.

SVG ist XML-basiert, dh es handelt sich nur um Text. So können wir einfach den SVG-Code wiedergeben und die Ergebnisse sehen. Als erstes sollten wir den Browser darüber informieren, dass dies eher SVG als einfacher Text ist. In diesem Fall müssen wir die verwenden Header() Funktion mit dem entsprechenden Inhaltstyp ' image / svg + xml '. Jetzt können Browser oder andere Anwendungen dies verwenden, um es richtig zu rendern. Ohne dies könnte es funktionieren, aber es ist besser, ein guter Netzbürger zu sein und dies auszugeben, wenn Sie können.

Danach drucken wir die XML-Deklaration und SVG DOCTYPE aus.

Jetzt können wir tatsächlich zu dem SVG-Teil gelangen, der für unser Bild spezifisch ist. Ähnlich wie jede HTML-Seite eine Wurzel von hat, hat SVG eine Wurzel von. Dies erfordert einige Parameter wie die Höhe und Breite des endgültigen Bildes. Da wir nicht immer wissen, wie groß unser Quellbild sein wird, ist es einfacher, diese 100% für jeden Wert festzulegen.

Konzentrische Ringe gestapelt, um den Effekt zu erzielen

Konzentrische Ringe gestapelt, um den Effekt zu erzielen

Die Logik zur Ausgabe des Designs ist ziemlich einfach. Wir nehmen den kleinsten vorkommenden Farbwert im Bild und erstellen einen Kreis, der der Höhe mal der Breite entspricht.

bester Computer für 3D-Modellierung und Rendering 2019

Es scheint nicht intuitiv zu sein, dass der größtmögliche Kreis der kleinstmögliche Wert ist! Was wir als nächstes tun, wird dazu beitragen, dies zu klären.

Dieser große Kreis ist unsere Basisschicht. Wir werden dies zuerst ablegen und zusätzliche Kreise darauf stapeln, die jedes Mal etwas kleiner werden. Am Ende ist das einzige, was von unserem riesigen Startkreis aus sichtbar ist, ein winziger Splitter am Rand.

Um all dies zu erreichen, werden wir die durchlaufen $ rgb Array, das den Schlüssel extrahiert, der die Farbe ist, und den Wert, der die Frequenz ist. Wir können das mit machen foreach ($ rgb als $ k => $ v) . In den nächsten Zeilen wird der RGB-Wert in einen Wert von $ r, $ g, $ b aufgeteilt, der zur Konvertierung in hexadezimal bereit ist. In PHP haben Sie dechex () Funktion, die eine Dezimalzahl verwendet und ein Hex-Äquivalent erstellt. Wir müssen die Zeichenfolge auch mit führenden Nullen auffüllen, falls der Farbwert kleiner als 16 ist. Wenn wir sie insgesamt zusammenfassen, erhalten wir die $ hex Wert.

Bis zu diesem Zeitpunkt haben wir noch nicht einmal ein grafisches SVG-Element ausgegeben. Dies wird unser erster sein, ein Kreis. In SVG verwenden Sie die, um einen Kreis zu bilden Element mit einigen Attributen. Diese Attribute beschreiben sowohl den Kreis als auch seine Position. Die Attribute cx und cy sind der Mittelpunkt des Kreises im x, y-Raster. Das Attribut r ist der Radius und die Füllung ist eine hexadezimale Farbe, mit der der Kreis gefüllt werden soll. Das Erstellen grafischer Elemente könnte nicht einfacher sein.

Jetzt müssen wir das Gelernte auf unsere Farbpalette anwenden. Es gibt zwei Variablen, die wir im Auge behalten müssen: die maximale Größe des Kreises und die Größe des vorherigen Kreises. Um sicherzustellen, dass die Größe der Dinge nicht außer Kontrolle gerät, habe ich eine hinzugefügt $ scaler variabel, damit die Größe nicht zu groß explodiert.

Die Variable $ c ist die maximale Größe, von der aus wir den Radius kontinuierlich verringern. Schon seit $ c Ist die Breite mal die Höhe, wird jedes Pixel in der Originalgrafik im Radius des Kreises dargestellt. Die nächste Variable $ prev ist die Größe des vorherigen Kreises, den wir gezeichnet haben. Auf diese Weise können wir den Radius langsam verkleinern, basierend auf der Anzahl der Pixel, für die wir bereits Kreise erstellt haben.

$v){ if($v > 0) { $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $hex = str_pad(dechex($r),2,'0',STR_PAD_LEFT).str_pad(dechex($g),2,'0',STR_PAD_LEFT).str_pad(dechex($b),2,'0',STR_PAD_LEFT); echo ''; echo ' '; $prev += (int)($v/$scaler); }}echo '';?>

Nahaufnahme der Ringe ohne Kombination ähnlicher Farben

Nahaufnahme der Ringe ohne Kombination ähnlicher Farben

Wenn wir uns eine Beispielausgabe ansehen, werden wir schnell feststellen, dass jeder winzige Farbton jeder Farbe einen eigenen Ring erhält. Dies bedeutet, dass Anti-Alias-Text viele Graustufen erzeugt, die wir zu einer einzigen repräsentativen Farbe zusammenfassen sollten. Dadurch wird die Anzahl der Ringe verringert, gleichzeitig wird jedoch klarer, welche Farben am meisten hervorstechen. Wir könnten einfach die fünf beliebtesten Farben nehmen, aber was normalerweise passiert, ist, dass Sie ähnliche Schattierungen derselben Farbe erhalten, anstatt das gesamte Spektrum darzustellen. Ein besserer Weg ist es, Farben mit ähnlichen Werten beim beliebtesten Nachbarn bekannt zu machen. Dazu müssen wir eine einfache Funktion schreiben, die wir vor der SVG-Ausgabe einfügen.

$rgb = reduceColors($rgb);

Wenn wir die Liste der $ rgb-Farben übergeben, erhalten wir deren Wert und Häufigkeit. Die Idee ist, diese vollständige Liste zu durchlaufen und eine neue Liste mit den reduzierten Farben zu erstellen. Ich habe einen Plus- oder Minusbereich von 75 gewählt. Dies bedeutet, dass ein RGB-Wert von 100.100.100 in die beliebteste Farbe befördert wird, die zwischen 25,25,25 und 175.175.175 liegt. Sie können diesen Wert anpassen, um verzeihender oder strenger zu sein. Abhängig von Ihren Werten erhalten Sie mehr oder weniger Ringe.

Zuerst müssen wir das Array umgekehrt sortieren, damit die beliebtesten Farben zuerst angezeigt werden. Dies bedeutet, dass wir eher zu den beliebtesten als zu den geringsten werben. Während wir durch das $ schleifen rgb Array benötigen wir auch eine Unterschleife durch die $ temp Array. Wenn dies eine neue Farbe ist, die wir noch nicht gesehen haben, setzen wir sie in die neue ein $ temp Array. Andernfalls können wir es beim Durchlaufen dem ersten hinzufügen $ rgb Wert, den wir als passend zu unserem Plus / Minus-Bereich finden. Am Ende setzen wir das Array so um, dass das kleinste zuerst kommt, und geben es zurück, damit wir das SVG ausgeben können.

function reduceColors($rgb){ $plusminus = 75; arsort($rgb); $temp = array(); // do colour merger foreach($list as $k=>$v){ if($v != 0){ $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $matched = false; foreach($temp as $m=>$n){ if($m != $k){ $rs = ($m >> 16) & 0xFF; $gs = ($m >> 8) & 0xFF; $bs = $m & 0xFF; if ( ($rs = ($r-$plusminus)) && ($gs = ($g-$plusminus)) && ($bs = ($b-$plusminus)) && $matched == false ) { $temp[$m] += $v; $matched = true; } } } if(!($matched)){ $temp[$k] = $v; } } } asort($temp); return $temp;}

Anstatt die Funktion zu verwenden, besteht eine andere Option darin, die integrierte Funktion zu verwenden imagetruecolortopalette () , die eine maximale Anzahl von Farben für die Farbpalette annehmen kann. Dadurch wird die Anzahl der möglichen Farben in den Ringen festgelegt und die Farbreduzierung für Sie durchgeführt. Die Ergebnisse können oder können nicht das sein, was Sie beabsichtigt haben, aber es ist eine einfachere Alternative.

.net-Abdeckungen und der Ring, der aus dem Code für die Farbmengen erstellt wurde

.net-Abdeckungen und der Ring, der aus dem Code für die Farbmengen erstellt wurde

Verbesserungen

Es gibt viele Möglichkeiten, dies zu verbessern. Ein besserer Farbclustering-Algorithmus, einige optimierte Schleifen, invertieren ihn möglicherweise, sodass die beliebtesten Farben auf dem äußeren Ring statt auf dem inneren liegen. Dies war nur ein schneller Einstieg in die Welt der dynamisch generierten Visualisierungen. Von hier an müssen Sie Ihre Kreativität einsetzen und sehen, worauf Sie sie anwenden können.

SVG ist kaum die gruselige Technologie, die Sie vielleicht gedacht haben. Da es sich lediglich um ein Text-XML-Format handelt, können Sie Skripte in Ihrer Lieblingssprache schreiben, um schnell und einfach eine Ausgabe zu generieren. Das Ausführen dieser Skripte mit unterschiedlichen Daten führte zu unterschiedlichen Ausgaben, der zugrunde liegende Code bleibt jedoch derselbe, sodass Sie schnell und einfach neue Designs erstellen können. Das Wissen über SVG und das Skripten seiner Ausgabe ist ein weiteres Werkzeug in Ihrer Toolbox, das in vielerlei Hinsicht bei der Arbeit und beim Spielen hilfreich ist.