| Lautsprecher |
Transkript |
| Jopowe |
Hallo und herzlich willkommen zu meinem Vortrag. |
| |
Anlass für diesen Vortrag war eine Diskussion in der JMP-Nutzergemeinschaft. Dr. Anderson Mayfield ist Meeresbiologe bei der NOAA und der Universität Miami. |
| |
Er erforscht die Gesundheit von Riffkorallen. Er hat in unserer Sondersendung zum Tag der Erde von JMP On Air einen Vortrag gehalten. Und er wird auch auf dieser Konferenz einen Vortrag halten. |
| |
In diesem Beitrag der JMP-Benutzergemeinschaft hat er also dieses Bild hier gepostet. Und wie Sie sehen können, enthält es lauter Grafiken, die Korallen oder Korallenriffe darstellen. |
| |
Sie stellen mehrere Datenelemente in einer kleinen Grafik dar, ähnlich wie in einem Videospiel, wenn man Spielerstatistiken hat. |
| |
Und sie umkreisen den Spieler, während er sich in der Szene bewegt. Jetzt versteht ihr wahrscheinlich, warum ich meinen Vortrag so genannt habe: „Was passiert, wenn man ein Videospiel, einen Meeresbiologen und JMP kombiniert?“ Also, weiter geht’s. |
| |
Ich werde über spielbasierte oder spielinspirierte Lösungen sprechen, die in JMP möglich sind, einschließlich der Verwendung benutzerdefinierter Grafikskripte. |
| |
Benutzerdefinierte Karten. Und dann werde ich über eine von mir entwickelte webbasierte 3D-Streudiagrammanwendung sprechen und darüber, wie ich JMP-Datensätze in diese Anwendung integriert habe. |
| |
Hier ist ein Beispiel für das grafische Skript. |
| |
Hier ist ein Beispiel für die Verwendung benutzerdefinierter Karten. Und hier ist meine Anwendung für 3D-Streudiagramme. |
| |
Dann legen wir mal los. Um zu sehen, wie benutzerdefinierte Grafikskripte verwendet werden, habe ich hier ein kleines Beispiel. |
| |
Und wenn ich JMP öffne und ausführe |
| |
Diese kleine Grafik, und darüber werde ich tatsächlich sprechen. |
| |
Ich verwende diesen fiktiven Datensatz, den ich von Grund auf selbst erstellt habe. Und im Grunde geht es dabei um ein Fischrennen, das vom Great Barrier Reef bis nach Sydney führt. |
| |
Um zu den grafischen Skripten zu gelangen, gehen Sie auf „Anpassen“. |
| |
Und mit diesem kleinen Plus-Button können Sie ein neues Skript hinzufügen. Es ist anfangs leer, aber wir haben einige Beispiele in JMP. |
| |
Ich mag das Polygon-Skript. Es ist sehr einfach. Es zeichnet einfach ein Dreieck. Wenn ich es also auf mein Diagramm anwende, kann man dort ein Dreieck erkennen. |
| |
Und dazu brauchten wir nur drei Zeilen: die Transparenz einstellen, eine Füllfarbe festlegen und dann das Polygon zeichnen. |
| |
Aber worauf wir hinauswollen, ist: Wie bettet man das konkret in ein Skript ein? Am einfachsten finden Sie das heraus, indem Sie auf die Antworttaste klicken. |
| |
Und Sie speichern das Skript im Skriptfenster. Hier ist das Skript. Es beginnt mit dem Start meiner kleinen bivariaten Plattform, die Breiten- und Längengradwerte verwendet. Darunter befindet sich ein Befehl mit einem Skript zum Hinzufügen einer Grafik. |
| |
Und dann die drei Zeilen des Beispiels. |
| |
Hier also ein ganz einfaches Beispiel für die Verwendung eines grafischen Skripts. |
| |
Dies ist nun ein Grafikskript, das ich einbetten werde. Es zeichnet diese Balken, die über jedem Punkt schweben. |
| |
Als Erstes stelle ich in dieser Anwendung die Transparenz ein und zeichne dann einen Hintergrund für meine kleine Grafik. |
| |
Einen für den Hunger, einen für die Kraft und einen für die Geschwindigkeit. |
| |
Jetzt zeige ich euch das gesamte Skript, da es von anderen Dingen abhängt. Es verwendet Konstanten, die ich hauptsächlich für Farben, Hintergründe und einige andere Dinge eingerichtet habe. |
| |
Das ist meine Funktion zum Zeichnen von Balken. Sie benötigt eine Position, eine Länge und eine Farbe. Diese Parameter können für jeden Balken verwendet werden. Wenn ich also dieses Skript ausführe… |
| |
Da ist es ja, die Grafik mit dem kleinen |
| |
Eine Art von spielinspirierten Gesundheitsmonitoren, die über jedem Fisch schweben, während sie mit der ostaustralischen Strömung nach Sydney schwimmen und rasen. |
| |
Dies soll Ihnen einen Überblick geben, im Grunde eine Schritt-für-Schritt-Anleitung, wie diese Funktion funktioniert. Wir begannen mit einer einfachen Markierung auf dem Bildschirm und legten für jede Markierung den Pixelursprung fest. |
| |
Dann beginnen wir mit dem Zeichnen des Hintergrunds, aber das erfordert einige Schritte. Beim ersten Festlegen der Linienstärke sieht man zunächst gar nichts. |
| |
Dann legen wir die Farbe fest, die Schwarz sein wird. Anschließend ziehen wir eine Linie, die den Hintergrund und eine sehr dicke Linie zeichnet. |
| |
Für jeden Balken legen wir die Farbe fest, positionieren ihn und zeichnen dann eine Linie. Anschließend zeichnen wir den Hintergrund, legen dessen Farbe fest und setzen den Balken fort. Das Gleiche machen wir natürlich auch für die anderen beiden Linien. |
| |
Jetzt stehen Ihnen viele verschiedene Grafikfunktionen zur Verfügung. Hier finden Sie den Abschnitt zu den Grafikfunktionen in der JSL-Syntaxreferenz. Damit können Sie alles Mögliche erstellen. Legen Sie also los! |
| |
Als nächstes werde ich über die Verwendung benutzerdefinierter Karten sprechen. |
| |
Verzeihung. |
| |
Um benutzerdefinierte Karten zu verwenden, benötigen Sie im Prinzip zwei Tabellen. Die erste Tabelle definiert alle gewünschten Formen. Die zweite Tabelle benennt die Formen. |
| |
Für diese Namensspalte müssen Sie im Grunde eine Spalteneigenschaft vom Typ „Kartenrolle“ hinzufügen, und zwar vom Typ „Formnamensdefinition“. Ich zeige Ihnen das gleich. |
| |
Um es an einem ganz einfachen Beispiel zu verdeutlichen: Wir benötigen natürlich eine große Klasse. Und ich werde ein ganz einfaches Beispiel verwenden. |
| |
Es gibt auch eine Karte dafür, die nur aus zwei Rechtecken besteht. Ich öffne mal die Dateien. |
| |
Es ist also eine sehr kleine Karte, wie gesagt. Und um Ihnen diese Koordinaten zu zeigen, habe ich ein kleines |
| |
Hier ist ein Skript, das im Wesentlichen die Punkte aufzeigt. |
| |
Wenn ich diese vier oben markiere, ergibt das das obere Rechteck, und die nächsten vier bilden das untere Rechteck. |
| |
Die obere Angabe ist das Gewicht, die untere die Größe. Und wenn Sie sich die Spalteneigenschaften ansehen, |
| |
Es handelt sich um die Kartenrolle und die Definition des Formnamens. |
| |
Sobald diese Karte fertig ist, können wir Big Class öffnen. |
| |
Wir können sie nicht direkt wiederverwenden. Zuerst müssen wir die Spalten für Höhe und Gewicht übereinanderlegen. Dazu öffnen wir eine Tabelle. Ich lege sie mal übereinander. |
| |
Und jetzt habe ich eine Tabelle, in der diese Spalten gestapelt sind. |
| |
Sie sehen, dass die Beschriftung abwechselnd Höhe und Gewicht enthält. Um dies mit der Kartendatei zu verknüpfen, müssen wir eine weitere Spalteneigenschaft hinzufügen. |
| |
Diese hier unten ist wieder die Kartenrolle. Aber wir sagen nicht Definition des geformten Namens, sondern Verwendung des geformten Namens, und wir müssen die richtige auswählen. |
| |
Map-Datei, der Name der Map-Datei. |
| |
Und benennen Sie die Spalte auch. |
| |
Und dann sind wir fertig. Jetzt, wo wir das haben, kann ich es tatsächlich in einem Diagramm verwenden. |
| |
Das Diagramm, das wir erstellen möchten, verwendet im Grunde die Beschriftungsspalte für die Kartenform, wodurch die obere und untere Form festgelegt werden. Anschließend können wir die Datenspalte, die alle Daten enthält, hineinziehen. |
| |
in die Farbrolle. Und da haben wir es, das ist eine Zusammenfassung aller Schüler in der großen Klasse, aber wir wollen eigentlich noch mehr |
| |
Eins pro Schüler. Wenn ich das in die Zeilenumbruch-Funktion ziehe, wird es etwas eng, aber ich werde es verteilen, indem ich „Ebenen pro Zeile“ erstelle und das auf 10 setze. |
| |
So, das war's. Und genau das wollte ich erreichen. Und dieses Diagramm kann nützlich sein. |
| |
von allein. |
| |
Machen wir nun etwas Komplizierteres. |
| |
Wenn Sie etwas Komplizierteres vorhaben, sollten Sie vielleicht das Add-in zur Erstellung benutzerdefinierter Karten verwenden. |
| |
Und das ist eine tolle Ergänzung. Man kann damit ein Bild hineinziehen und es dann nachzeichnen. |
| |
Und wenn Sie alle Formen nachgezeichnet haben, klicken Sie auf „Mit Zufallsdaten fertigstellen“, und es werden neue Daten generiert. |
| |
Sie benötigen die beiden Shapefiles sowie einen zufälligen Datensatz, mit dem Sie Ihre benutzerdefinierte Karte testen können. Hier ist ein Beispiel mit vier Variablen und einer in der Mitte. Es handelt sich also im Grunde um eine quadratische Version der Karte aus meiner ursprünglichen Präsentation. |
| |
Das war nicht genau das, was wir anstrebten. Wir wollten etwas Rundes, und ich glaube, es war Dr. Mayfield, der es als komplexen Kuchen bezeichnete. |
| |
Ich weiß nicht, ob das ein offizieller Begriff ist, aber ich habe beschlossen, diese Dinger mit Skripten zu bauen. |
| |
Ich wollte also Shapefiles erstellen und sicherstellen, dass ich genau das bekomme, was ich brauche. Und das waren vier Shapes mit etwas in der Mitte. |
| |
Und dann dachte ich: Nun ja, ich bin Programmierer. Ich möchte gerne etwas mehr machen und etwas flexibler sein. |
| |
Deshalb dachte ich, dass manche Leute vielleicht das Gleiche tun möchten, aber nur zwei Variablen plus eine Durchschnitts- oder Zentrumsvariable oder mehr haben wollen. |
| |
Und ich dachte, es wäre vielleicht schön, auch andere Formen wie Rauten oder Quadrate darstellen zu können. Ich bin ja kein Genie. Ich hatte einfach Glück. Und Xan Gregg hat tatsächlich auf einen Beitrag geantwortet, in dem es darum ging, wie man in JMP ein Polardiagramm erstellt. |
| |
Und nun ist es soweit. |
| |
So, da haben wir's. |
| |
Sie suchten nach einer Form wie dieser, die dem, was ich brauchte, sehr ähnlich sah. |
| |
Was Xan gemacht hat, war wirklich toll. Es ist ein flexibles Skript, das genau das kann und diese Segmente um einen Kreis herum erzeugt, aber das Einzige, was fehlte, war der Mittelpunkt und die Benennung der Dateien auf eine bestimmte Art und Weise, wie ich es mir gewünscht hatte. |
| |
Aber es war gar nicht so schwer. Und genau das macht mein Skript. Wenn man einen komplexen Kuchen backt, öffnet man das Rezept dafür und gibt dann die Zutaten ein. Zuerst muss man die Anzahl der Formen angeben. |
| |
Und dann die Frage, ob Sie es mittig platzieren, entweder oben oder etwas seitlich. |
| |
Dann gibt es noch eine Variable für die Glättung. |
| |
Und dann müssten Sie auch noch den Innenradius, die gewünschte Füllmenge (mehr oder weniger) und den Außenradius angeben. |
| |
Der nächste Schritt ist natürlich, das Skript auszuführen, und es wird Folgendes generieren: |
| |
diese |
| |
Wir erstellen Shapefiles für Sie und führen auch einen Beispieltest durch, genau wie beim benutzerdefinierten Tortendiagramm-Generator oder dem benutzerdefinierten Karten-Add-in. Hier ist ein Beispiel für ein komplexes Tortendiagramm mit fünf Formen. |
| |
und die Glättung auf sieben einstellen. Fünf oder sechs wären wahrscheinlich auch in Ordnung, wenn sie … |
| |
Ich habe es sehr klein gezeichnet. Die Größe ist eigentlich egal. Wichtiger ist das Verhältnis von Innen- zu Außenradius. Und das entspricht ungefähr dem, was Dr. Mayfield vorschlug, also habe ich mich für vier als Innenradius und neun als Außenradius entschieden. |
| |
Schauen wir uns also an, wie wir diese Dinge konkret anwenden können. Genau wie bei der Demo mit der großen Klasse müssen wir die Spalten stapeln. Ein Unterschied besteht jedoch darin, dass die Variablen für Stärke und Gesundheit nicht in meiner Shapefile enthalten sind. Sie sind tatsächlich |
| |
In der Shapefile sind sie als Keil 1, 2, 3 und … benannt. |
| |
Center. |
| |
Ich werde also ein/e bauen müssen. |
| |
Datei, die |
| |
Verbinde die beiden miteinander. |
| |
Als erstes habe ich dieses Beispiel einer kleinen, nacheinander eingerichteten Schule. |
| |
Das habe ich getan, indem ich die Spalten für Gesundheit, Stärken und Geschwindigkeit übereinander gestapelt habe. |
| |
Und hier ist die Shape-Datei, die ich verwenden werde. |
| |
Beachten Sie, dass es eine Spalteneigenschaft besitzt. |
| |
der Kartenrolle |
| |
Richtig, Kartenrollendefinition. |
| |
Das ist erforderlich, wenn Sie Ihre eigenen, individuellen Formen erstellen. |
| |
Die verknüpfte Datei, die die Spalten den Formen zuordnet, habe ich im Grunde erstellt, indem ich die Beschriftungen innerhalb meiner Datei aufgelistet habe. |
| |
gestapelte Datei. |
| |
Und dann habe ich in einer weiteren Spalte, Formname, die Formen und ihre Namen aufgelistet. |
| |
Nun ist es wichtig, dass der Name der Form hier angegeben wird. |
| |
hat eine Eigenschaft, die eine Kartenrolle hat, aber diese hier ist für die Verwendung als Formname. |
| |
Diese Datenspalte mit der Bezeichnung wird eine Link-ID haben, sodass sie virtuell mit meiner gestapelten Tabelle verknüpft werden kann. |
| |
Nachdem ich nun alle Tabellen eingerichtet habe, |
| |
Der nächste Schritt besteht darin, tatsächlich einen Graphen zu erstellen. |
| |
Das Vorgehen ist ähnlich wie zuvor. Der einzige Unterschied besteht darin, dass ich die Beschriftung nicht einfach auf die Kartenform ziehe, sondern eine virtuelle Spalte verknüpfe. Diese ziehe ich dann ebenfalls auf die Kartenform, und schon habe ich die gewünschte Form. Als Nächstes muss ich die Daten in die Farbspalte einfügen. |
| |
Und dann füge den Namen zum Wrap hinzu. Und da sind alle meine Fische mit |
| |
Für jedes Bild gibt es eine Grafik. Um den richtigen Farbverlauf zu erhalten, gehe ich hier auf „Farbverlauf“ und das ist dann dieser hier. |
| |
Ich möchte sichergehen, dass das Grün gut aussieht, deshalb werde ich die Farben umkehren. |
| |
Und da haben wir es. Das ist der/die/das |
| |
Die Karte ist an sich schon nützlich, weil man jeden einzelnen Fisch beobachten und seinen Zustand verfolgen kann. Aber ich möchte sie natürlich noch etwas erweitern. |
| |
Ich möchte diese Bilder in einen Tooltip einfügen können. |
| |
Um das zu tun, werden wir eine Datentabelle erstellen. |
| |
Bring mir bitte die Datei und die Grafik zurück, die ich hatte. |
| |
Hier wird unter den roten Dreieckssymbolen eine Datentabelle erstellt. Dadurch wird eine neue Datentabelle erzeugt. |
| |
Mit all diesen Bildern ist das wirklich nützlich, besonders wenn wir darauf verlinken. Ich würde das dann als Link-ID festlegen, damit ich von meiner kleinen Schuldatei darauf verweisen kann und so für jede Markierung den entsprechenden Graphen finde. |
| |
Okay, ich habe das in einer anderen Datei gespeichert und werde diese jetzt öffnen. Ich habe sie „Gesundheitsbilder“ genannt. |
| |
Wir brauchen das also nicht mehr. |
| |
Und wir brauchen die gestapelte Datei nicht mehr. |
| |
Was wir aber brauchen, ist das Beispiel der kleinen Schule, mit dem ich begonnen habe. |
| |
Als Erstes müssen Sie Folgendes tun, damit diese angezeigt werden: |
| |
Das Diagramm dient dazu, diese Bildspalte, diese virtuelle Spalte, festzulegen. |
| |
wie gekennzeichnet. |
| |
Das lässt sich auch in einem einfachen Diagramm darstellen. |
| |
Wir haben also bereits ein Beispiel... nun, ich öffne es noch einmal. Warum nicht? Mein Rennskript, nur um Ihnen zu zeigen, dass ich ganz von vorne anfange. Da ich diese Spalte aber beschriftet habe, erscheint jetzt beim Überfahren einer dieser Grafiken mit der Maus... die drei |
| |
Sie können Informationen zu dieser Grafik hinzufügen und beliebig viele dieser Zeichen anheften. |
| |
Das ist also eine Möglichkeit, diese Grafiken zu verwenden. |
| |
Eine andere Möglichkeit ist die Verwendung von „use“ für Marker. |
| |
Die Grafiken, die Sie erhalten werden, werden über den Punkten schweben und anstelle der rautenförmigen Elemente verwendet, die ich zuvor hatte. |
| |
Ich werde die Gesundheitsbilder, die Bilder von der kleinen Schule und sogar diese Grafik wieder einbringen. |
| |
Wir haben also jetzt diese Diamanten. Um sie in diese Formen hier zu bringen, |
| |
Wir mussten noch einen weiteren hinzufügen |
| |
Dieses virtuelle Beitrittsabzeichen kennzeichnet diese Spalte. Es wird immer beliebter, daher dient es als Markierung. Und hier erscheint ein neues Abzeichen. Und hinter mir, |
| |
Sie werden sehen, dass diese Bilder in die Szene eingefügt wurden. Eine letzte Anmerkung: Mir gefällt das Weiß um das Bild herum nicht besonders. Und das ist tatsächlich in die Grafik integriert. |
| |
Eine Möglichkeit, das zu beheben, besteht darin, ein Skript zu verwenden, das die weißen Bereiche erkennt und den Alphakanal so einstellt, dass sie transparent werden. So erhalten wir nun Diagramme mit einer ansprechenden Darstellung. |
| |
Runde Form, nicht quadratischer Hintergrund. Sie könnten außerdem die Markergröße vergrößern. |
| |
Und wir können bis 11 gehen. |
| |
Wie sieht das aus? Das sieht ziemlich genau so aus wie das, was ich hatte; 10 wäre wahrscheinlich besser gewesen. Aber ich gehe gerne auf 11. Okay, also das ist |
| |
Wir verwenden die Markierungen. Wir möchten ein etwas komplexeres Diagramm erstellen. Genau das hatte Dr. Anderson Mayfield im Sinn: eine Heatmap hinter den Markierungen. Das ist ziemlich kompliziert, aber JMP kann das. Das ist eigentlich eine Kontur. |
| |
Eines der Dinge, die ich hier habe, ist eine weitere Version einer kleinen Schule. Diesmal habe ich jedoch Meerestemperaturen. |
| |
ganz unten |
| |
und sie sind versteckt, damit sie nicht als tatsächliche Punkte angezeigt werden. |
| |
Ich habe also bereits Images dafür erstellt. |
| |
Im Grunde dieselben Bilder, die ich schon einmal erstellt habe. |
| |
Und ich fange an mit |
| |
Hier endet das Ganze, damit wir sehen können, was ich eigentlich vorhabe. Ich möchte also im Grunde diese Grafiken haben. |
| |
Der Cursor schwebt über der Kontur, und hier befinden sich ein paar Legenden, die erklären, worum es sich bei den einzelnen Elementen handelt. |
| |
Das sollte nicht allzu schwierig sein. Ich fange schon mal damit an, eine Karte bereits einzufügen und die Längen- und Breitengrade bereits auf den x- und y-Koordinaten zu haben. |
| |
Als erstes möchte ich also eine Kontur hinzufügen. |
| |
Und wir müssen noch etwas Farbe hinzufügen, deshalb ziehe ich die Temp-Rolle über die Farbrolle und passe die Anzahl der Stufen dieser Kontur an. |
| |
Verändere den Alpha-Wert ein wenig und füge etwas Glättung hinzu. |
| |
Als nächstes möchte ich es etwas transparenter gestalten. |
| |
Setzen wir darauf eine 0,6. |
| |
Das ist ungefähr dasselbe wie vorher. Um nun die Markierungen hinzuzufügen, gibt es zwei Möglichkeiten. Sie können die Punkte per Shift-Klick anklicken oder sie einfach per Drag & Drop hineinziehen. Zum Hineinziehen: |
| |
Dann können Sie die Markergröße erneut einstellen. |
| |
das tun, indem man |
| |
Wir gehen hierhin und machen es mit „andere“ und nehmen diesmal 10. Ich glaube, 11 war etwas zu groß. Okay, das sieht gut aus. Fast geschafft. Wir wollen an der Legende arbeiten. Wie bekommen wir diese Farben da rein? Nun, die Gesundheitsrolle haben wir ja schon. |
| |
Und das können Sie direkt hierher in die Ecke ziehen, fügen Sie einfach eine zweite Farbrolle hinzu. Das bringt Ihr Diagramm anfangs etwas durcheinander. |
| |
Das können wir beheben. Das Problem ist, dass die Kontur die Gesundheitsrolle eigentlich nicht benötigt. Wenn wir diese deaktivieren, haben wir wieder das gewünschte Ergebnis. |
| |
Als Nächstes fügen wir der Legende hier die Farbe hinzu. Und das können wir genauso anpassen wie zuvor. |
| |
Diesmal werden wir etwas mehr machen. Ich möchte vier Labels haben. |
| |
Ich möchte, dass es um fünf Uhr beginnt und bis zu ... geht. |
| |
20. |
| |
Oh, ich wollte die Farben auch umkehren. |
| |
So, sieht im Prinzip schon so aus, also fast fertig. Ich möchte es nur noch ein bisschen verschönern. Es gibt ein paar Dinge in der Legende, die ich gerne korrigieren würde. |
| |
Gehe also zu den Legendeneinstellungen und entferne die Elemente, die nicht viel beitragen, und verschiebe die Gesundheitslegende nach oben. |
| |
Da haben wir's. Ich denke, ich habe das, was ich erreichen wollte, so gut wie möglich getroffen. |
| |
Dann kann ich das loswerden. Ich glaube nicht, dass das noch jeder braucht. |
| |
Aber ich möchte noch ein bisschen mehr hinzufügen. |
| |
Wie wäre es, diese Legende hinzuzufügen? Denn bisher war nicht wirklich ersichtlich, welcher Bereich dieser Grafik welche Funktion hat, also Hunger, Geschwindigkeit, Kraft und Gesundheit. Zum Glück haben wir das jetzt. |
| |
Mapping-Datei. Sie ordnet Spaltennamen Spaltenformen zu. |
| |
Und ich werde das jetzt mal kurz ansprechen. |
| |
Hier sehen Sie, dass ich alle Zeilen und auch die Spalte mit den Datenbezeichnungen beschriftet habe. Das bedeutet, dass beim Erstellen eines Diagramms |
| |
Alles wird beschriftet. Das ist also ganz einfach. Man nimmt einfach den Namen der Form, zieht sie in die Kartenrolle und schon ist die Grafik fertig. |
| |
Wenn ich das also in meine Szene einfügen möchte, ist der beste Weg, es einfach auszuwählen, das Pluszeichen anzuklicken und es dann zu kopieren. |
| |
Dann öffnet man ein Bildbearbeitungsprogramm und speichert das Bild auf der Festplatte. Und das habe ich natürlich schon getan. Also werde ich jetzt |
| |
Sobald du das hast, zeig es mir, und ich muss meine Grafik wieder hochladen. |
| |
Wow, das kann ich einfach so reinziehen. |
| |
Und da ist es ja. Oh, es ist nicht da. Nun ja, es gibt einen Weg, es zu finden. Gehen Sie zu „Anpassen“. Es wurde im Hintergrund abgelegt, da man normalerweise beim Hinzufügen eines Bildes auch ein Hintergrundbild hinzufügt. |
| |
Also, jetzt müssen wir nur noch... räumen wir das mal beiseite, damit ihr sehen könnt, was passiert... nach vorne gehen. Da kommt es. |
| |
Und da haben wir's. Es ist vorne. Und ich würde es gerne etwas transparenter machen, weil es mir etwas zu hell ist. |
| |
Setzen wir also 0,8 ein. |
| |
Jetzt müssen wir es nur noch in die Ecke ziehen, und dann sind wir so gut wie fertig. |
| |
Okay, es war also eine Menge Arbeit und es waren viele Dateien involviert. Fassen wir also alle verwendeten Dateien zusammen. Ich habe meinen komplexen Pie Maker benutzt, um die beiden benötigten Kartendateien, Shapefiles, zu generieren. Ich habe kleine Schuldateien genommen und sie gestapelt. |
| |
Ich habe diese Spalte erstellt, um eine Formzuordnungsdatei zu erstellen, die auf die Namensdatei mit der Kartenrolle verweisen musste. Ich habe eine Linkreferenz verwendet, um eine virtuelle Verknüpfung mit der gestapelten kleinen Schule herzustellen. |
| |
Dann erstellte ich eine Grafik, die ich in eine Datentabelle umwandeln und in meiner Datei healthimages.jmp speichern wollte. |
| |
Natürlich musste das virtuell wieder mit der ursprünglichen kleinen Schule verbunden werden, damit ich die Grafik damit erstellen konnte. |
| |
Und dann habe ich das Gleiche mit kleinen Schul-Ozeantemperaturen gemacht, mein Link verweist auf Gesundheitsbilder. |
| |
Ich habe einfach meine Spalte in eine Shapefile umgewandelt und die Legende für die Grafik, die ich mit den Ozeantemperaturen erstellen wollte, gezeichnet und... ich habe sie einfach per Drag & Drop hineingezogen. |
| |
Das war’s also mit den 2D-Demonstrationen, die ich zeigen wollte. Machen wir jetzt eine kurze Pause und tauchen wir anschließend in die Welt von 3D und sogar ins Web ein. |
| |
Anwendung. |
| |
Okay. |
| |
Dies ist also meine Webanwendung für 3D-Streudiagramme. |
| |
Und ich werde Ihnen zeigen, wie ich Daten von JMP hineinbekommen habe. |
| |
Meine Anwendung basierte auf dem Streudiagramm-3D-Funktion von JMP. Dies soll Ihnen nur noch einmal verdeutlichen, wie das aussieht. |
| |
Und jetzt habe ich eine kleine Demo davon. |
| |
Also, es hatte... Ich zeige Ihnen jetzt einige Funktionen, angefangen mit der Möglichkeit, verschiedene Datensätze auszuwählen. Hier ist der Datensatz mit den Diamanten. |
| |
Und natürlich diese Zeichnungspunkte. Das ist die ganze Idee. Und sie werden mit dieser kleinen Kugelform gezeichnet, ich erkläre gleich, wie das geht. |
| |
Aber man kann es auch drehen, genau wie in JMP, man kann zoomen und es vor- und zurückbewegen. |
| |
Und es hat auch Hover-Beschriftungen. Unten rechts zeichne ich Achsen und ein Raster ein und füge ein paar Anpassungen hinzu. Nicht zu viele. |
| |
Man kann den Hintergrund ändern, die Wandfarbe einstellen. Mal sehen, ob wir dem Ganzen einen Hauch von Blau verleihen können. |
| |
Ja, vielleicht gefällt dir das nicht. Aber das ist nur eine Demo. Und du kannst die Größe der Markierungen ändern. |
| |
Das steht im Internet. |
| |
Okay, als ich diese Anwendung startete, wollte ich als Erstes wissen, ob sie im Web funktioniert. Würde sie auf meinem iPhone oder iPad gut laufen? |
| |
Weil diese Rechner nicht so leistungsstark sind wie mein Desktop-PC. Deshalb habe ich entweder ein integriertes 3D-Modell erstellt oder drei zufällige Datensätze mit jeweils steigender Punktanzahl. Ich habe dann... |
| |
25.000 hielt ich für einen Wert, den man bei Geräten mit geringerer Leistung ausprobieren sollte, aber bei Geräten mit hoher Leistung sind tatsächlich deutlich höhere Werte möglich. |
| |
Dann dachte ich mir, ich sollte versuchen, echte Daten einzubeziehen, und ich fand den berühmten Iris-Datensatz, der im CSV-Format (Comma Separated Variable) vorlag. |
| |
Und ich habe es importiert. Aber ich musste erst etwas Code schreiben, um es in meine internen Strukturen zu konvertieren. |
| |
Und ich dachte, JMP hat ja viele Datensätze. Die würde ich einfach importieren. Also habe ich Autos, Diamanten und Zytometrie importiert. Der einzige Unterschied war, dass die Zytometrie nicht wirklich gut funktionierte. |
| |
Es gab eine Kategorie für die Verwendung von Farben, und sie mussten meine Anwendung tatsächlich so ändern, dass sie auch Diagramme ohne Farben akzeptierte. |
| |
Die Anwendung ist recht einfach. Es gibt nur eine einzige Seite – eine einseitige Webanwendung. Sie besteht also aus einer HTML-Datei. Ich verwende einige JavaScript-Dateien, ein paar Drittanbieterbibliotheken, eine Schriftart und eine Textur. Die Textur ist die Kugel, die für die Formen verwendet wird. |
| |
Die Technik, die ich aus der Spieleindustrie verwende, sind Partikel bzw. Partikelsysteme. Sie werden häufig für Simulationsspiele und 3D-Visualisierungen eingesetzt. Man kann damit coole Effekte wie Feuer, Rauch, Feuerwerk und Wolken erzeugen. |
| |
Ich hatte zuvor einige Zeit an einer kommerziellen Game-Engine gearbeitet, und meine Aufgabe war es, das Partikelsystem zu verbessern. |
| |
Ich hatte also schon etwas Erfahrung damit. Ähm, das war in der C++-Welt, nicht in JavaScript. Aber da ich schon eine Weile mit interaktivem HTML5 und JMP gearbeitet habe, dachte ich, es wäre an der Zeit zu sehen, ob ich es auch kann. |
| |
Ich habe zwei meiner Leidenschaften miteinander verbunden und eine webbasierte Version zur Nutzung von Partikelsystemen entwickelt. Ich hatte Glück und bin auf die Bibliothek Three.js gestoßen. |
| |
Es bietet hardwarebeschleunigtes 3D-Zeichnen, verfügt über eine hervorragende Dokumentation und enthält zahlreiche Codebeispiele, darunter auch Partikelsysteme, was den Aufbau meiner Anwendung erheblich erleichterte. |
| |
Und die größte Schwierigkeit für mich bestand tatsächlich darin, herauszufinden, wie ich Daten aus JMP hineinbekomme. |
| |
Aber ich werde das Skript dafür teilen. Ich habe vor allem darauf geachtet, dass die Objekte einfach zu verwenden sind. |
| |
In meiner Anwendung habe ich ein Array von JavaScript-Objekten erstellt und für die numerischen Spalten jeweils ein Minimum und ein Maximum hinzugefügt, sodass ich diese Werte nicht in JavaScript berechnen muss. JMP eignet sich hervorragend für solche Berechnungen. |
| |
Für die Kategoriespalte (Farbe) musste ich so etwas wie ein Kategorienwörterbuch verwenden. Das bedeutet im Grunde, dass die Namen der Kategorien in einer Liste stehen und die Werte dann über einen nullbasierten Index referenziert werden. So funktioniert diese Struktur. |
| |
Ich dachte, eine Benutzeroberfläche wäre praktisch. Und das war tatsächlich ganz einfach. Ich zeige sie Ihnen gleich. Im Grunde muss ich die Spalten für x, y und z nur auf Zahlen beschränken. |
| |
Beschränken Sie es dann auf eine kategorische Spalte für die Farbrolle. |
| |
Schauen wir uns also den Code an. |
| |
Okay, ich gebe zunächst ein Beispiel für einen sehr einfachen Datensatz. |
| |
Und dann war der Dialog wirklich einfach. Ich habe den Spaltendialog verwendet und angegeben, was ich für die numerischen Spalten und die Farbspalte haben wollte, und sichergestellt, dass der Modelltyp kategorisch ist, also ordinal und nominal. |
| |
Als Nächstes nehme ich die Spaltendaten und erstelle daraus die benötigten JavaScript-Objekte. Hier sind die Zeichenketten für Minimum und Maximum. Und hier wird einfach eine Zeichenkette aus diesen Objekten erstellt. |
| |
Und falls es eine Farbspalte gibt, gehe ich genauso vor. Das ist etwas komplizierter, da ich die Zeichenketten extrahieren und in das JavaScript-Objekt einfügen muss. |
| |
Und schließlich muss es das Ganze nur noch in einer Textdatei speichern. |
| |
Na dann, versuchen wir es mal. |
| |
Natürlich werde ich Big Class verwenden, damit es eine schöne kleine Datei wird. |
| |
Und |
| |
Also führe ich das Skript aus. |
| |
Und es fragte mich: Was möchte ich für meine XYZ-Werte? Ich habe bereits Größe und Gewicht ausgewählt, und das Alter ist eine numerische Spalte, also werde ich diese auch verwenden. Das Geschlecht eignet sich gut für die Farbauswahl. |
| |
Und dann sind wir fertig. Die Ausgabe hier zeigt mir übrigens an, wo sich die Datei befindet. |
| |
Ich habe das zufällig auf der nächsten Folie. Gehen wir also dorthin. |
| |
Bestimmt hast du dich schon immer gefragt, wie eine große Klasse in JavaScript aussieht. Und hier ist sie. So kannst du die drei sehen. |
| |
Die Spalten enthalten numerische Werte für Minimum und Maximum, und die Farbspalte enthält ein Wörterbuch mit den Kategorien F und M, wobei die Null für weiblich und die Eins für männlich steht. So, das war der spannende Abschluss meines Vortrags. Ich hoffe, er hat Ihnen gefallen. |
| |
Vielen Dank fürs Zuschauen, und falls Sie Fragen haben, stellen Sie diese bitte. |
