Entwerfen von Datenvisualisierungen: Erste Schritte mit Processing

1. Einführung: Hi, mein Name ist Nicholas Felton. Ich bin ein Informationsdesigner mit Sitz in New York City. Der Großteil meiner Arbeit besteht darin, Datenvisualisierung basierend auf persönlichen Daten oder auf anderen Datensätzen durchzuführen, die ich in der Welt finde. Ich begann vor etwa 10 Jahren mit Daten zu arbeiten. Als Grafikdesigner, auf der Suche nach Geschichten, stellte ich fest, dass die, auf die ich den besten Zugang hatte, mein eigenes war, und es war am einfachsten, dies in Form von Daten zu sammeln. Die Datenvisualisierungen kommen daraus heraus, um diese Geschichten kompakt und interessant darzustellen. Meine Untersuchung personenbezogener Daten wurde größtenteils von Neugier getrieben. Ich habe diesen Wunsch, das Unerkennbare zu kennen, es ist fast wie ein Entdecker zu sein. Ich bin beeinflusst von Wissenschaft, Mathematik und Geometrie, Minimalismus. Diese Klasse wird eines der Dinge angehen, die ich am interessantesten finde, nämlich einen wirklich enormen Datensatz zu nehmen, man nie von Hand verwalten könnte, und all diese Punkte auf einer Karte platzieren kann. In diesem Fall werden wir uns Meteoritenschläge auf der ganzen Welt ansehen. Wir haben einen Datensatz von etwa 34.000 Punkten, und wir werden diese alle auf eine Karte kleben und die oberste Seite beschriften. Ich denke, das ist grundsätzlich eine Designklasse, aber es sollte auch eine wirklich gute Einführung in die Verarbeitung sein. Ich hoffe, es wird den Vorhang ein wenig herunterziehen und den Leuten zeigen, wie einfach es ist, loszulegen und wie viel Kraft Sie haben, um Ihre Entwürfe mithilfe der Verarbeitung zu manipulieren. Wir werden heute in drei verschiedenen Bereichen arbeiten. Man geht darum, die Daten zu betrachten, ein wenig in einer Tabellenkalkulation zu untersuchen und dann in die Verarbeitung zu wechseln. Hier werden wir den Großteil der Arbeit erledigen, wo wir ein Programm einrichten, das die Daten analysieren und auf eine Karte projizieren kann . Schließlich werden wir es in Illustrator ein wenig bereinigen und einige der Möglichkeiten zeigen, wie wir es aufräumen und einige der Probleme beheben können. Sie müssen kein Designer sein, um diese Klasse zu nehmen, Sie müssen nur einige Neugier oder Interesse daran haben, eine Tabelle von Zahlen in etwas zu verwandeln, das wirklich Verbrauchsmaterial ist. Ich habe den Datensatz ausgewählt und die App geschrieben, durch die ich Sie führen werde. Dies wird sicherstellen, dass jeder es bis zum Ende schaffen und die gleichen Ergebnisse haben kann, und wir haben auch eine Vorlage für Arbeit an anderen Daten, die Sie in der Zukunft finden könnten. In den Dokumenten für diese Klasse gibt es ein paar andere Quellen, in denen Sie zusätzliche Datensätze finden können , wenn Sie mit diesen spielen möchten. Historisch gesehen haben Designer mit Text und Bild gearbeitet, und ich denke, dass, weil wir überall in dieser Welt der Daten leben, es zu diesem neuen grundlegenden Element des Designs geworden ist , mit dem Designer so viel zu tun haben. 2. Deine Aufgabe: Ihre Aufgabe besteht darin, einen großen Satz von Meteoritendaten als Karte zu visualisieren. Ich habe den Datensatz hier aufgenommen, so dass Sie ihn sofort herunterladen und loslegen können. Was ich gerne sehen würde, wenn Leute Skillshare am Ende des Kurses hochladen, ist ein PNG oder ein JPEG aus Illustrator Ihrer endgültigen angeordneten Karte dieser Meteoriten-Streiks. Es gibt ein bisschen mehr Daten in einem Meteoritenangriff, die Sie verwenden könnten, um dies weiter zu schieben. Ich kann mir vorstellen, dass die Meteoritenschläge in dem Jahr, in dem sie vom ältesten bis zum neuesten passieren, farblich kodiert werden. Es gibt auch zusätzliche Datasets, die Sie betrachten und beginnen können andere Karten aus verschiedenen Quellen zu untersuchen. Der Weg, um den größten Erfolg mit dieser Klasse zu erreichen, wird sein Lektionen in der Verarbeitung wieder auszuführen, wie ich sie demonstriert habe. Sie haben die abgeschlossene Anwendung und Sie können sicherstellen, dass Sie einen funktionierenden Endzustand haben, aber tatsächlich arbeiten bis zu dem, und verstehen die verschiedenen Abschnitte, die wir durchgemacht haben, um es richtig funktionieren zu lassen wird Ihnen am meisten beibringen und Sie in den besten Zustand versetzen, um andere Daten zu erkunden oder diese auf neue Weise anzuwenden. 3. So funktioniert Processing: Bevor wir anfangen, diese Karte zu erstellen, möchte ich einige Schlüsselkonzepte teilen, die nützlich sein werden, wenn wir durch die Lektionen gehen. Der erste geht es um Datenformate. Also, wir werden mit einer Tabelle beginnen. Eine Tabellenkalkulation ist eine Möglichkeit, Daten in Zeilen und Spalten anzuzeigen. Was wir tun müssen, um dies in die Verarbeitung zu bringen , wird in ein anderes Format umgewandelt, das als CSV bezeichnet wird. CSV steht für kommagetrennte Werte, und im Grunde alles, was wir tun, ist, anstatt explizite Teiler in der App zu haben, die diese Zeilen trennen, wir werden diese durch ein Komma in einem Leerzeichen ersetzen, und dann ist es wird nur eine Textdatei sein, eine, die Sie in TextEdit öffnen können. Wir müssen die Daten in ein CSV-Format einfügen, da dies die Verarbeitung erwartet. Es entfernt alle zusätzlichen Formatierungen, die eine Tabellenkalkulation angehängt haben kann, und entfernt sie einfach in ein Nur-Text-Format. Sobald wir die Verarbeitung öffnen, werden Sie sehen, dass es drei Hauptkomponenten gibt. Es gibt einen Editor, eine Konsole und die Arbeitsfläche. Wir fangen im Editor an. Hier wird der gesamte Code getippt. Die Konsole kann dann verwendet werden, um kleine Bits von Daten auszudrucken , um sicherzustellen, dass alles reibungslos läuft, oder um Probleme in unserem Code zu finden. Schließlich ist die Leinwand der Bereich, in dem wir Dinge zeichnen werden. Dies ist es, was wir letztendlich in einer PDF-Datei speichern. Wir werden den Code und die Verarbeitung im Editor schreiben. Wie HTML gibt es eine Hierarchie für die Art und Weise, wie Code geschrieben wird, und es gibt drei Hauptbereiche, mit denen wir es zu tun haben. Über alles ist, wo wir Variablen definieren können , die wir in der gesamten Anwendung verwenden werden. Wir können auch verschiedene Bibliotheken importieren, wenn wir die Werkzeuge eines anderen verwenden würden, die sie für die Verarbeitung erstellt haben. Darunter befindet sich ein kleiner Bereich namens eingerichtet. Hier stecken wir den ganzen Code ein, der nur einmal ausgeführt werden muss , um Dinge zu definieren, die wir in der App verwenden werden. Hier werden wir zum Beispiel die Größe der Leinwand einrichten. Darunter befindet sich ein Bereich namens Draw. Dies ist ein Bereich, der immer wieder Schleifen wird, es sei denn, wir sagen es anders. In diesem Fall möchten wir, dass unsere Skizze nur einmal ausgeführt wird, und so werden wir einen Code dort einfügen, um sie zu sagen endet, sobald sie bis zum Ende des Zeichnungsabschnitts kommt. Da wir mit Daten und Verarbeitung arbeiten werden, benötigen wir mehrere Variablen, in denen sie gespeichert werden können. Variablen sind nur Container. Dies ist, was wir definieren werden, um entweder Namen oder Zahlen zu halten. Bei der Verarbeitung müssen wir explizit darüber sein, was eine Variable halten wird. Wir müssen also sagen, dass dieser Container nur diese Art von Informationen enthalten kann, sonst haben wir Probleme bei der Ausführung des Codes. Einige der grundlegenden Typen von Variablen, die Sie in dieser App begegnen werden, sind eine ganze Zahl, und dies wird definiert, indem Sie sagen, int, und dann den Namen der ganzen Zahl, und dann setzen Sie seinen Wert. Mit diesen Basisvariablen. Sie können sie auch ihre Werte in der Konsole ausdrucken lassen , indem Sie diesen Code, die println-Funktion, einführen. Also, für dieses erste Beispiel einer Ganzzahl i mit dem Wert Null, wenn Sie diese println Zeile darunter legen und Sie diese beiden Bindestriche entfernen möchten, die diese beiden Schrägstriche auskommentieren. Also, jeder Code, den Sie nicht ausführen möchten, können Sie diese beiden Schrägstriche davor setzen. Dadurch wird der Wert von i in der Konsole gedruckt. Für detailliertere Zahlen sind dies Dezimalzahlen, wir müssen einen Float verwenden. Also, dies hat einen anderen Namen, weil es mehr Speicher benötigt. Also, wenn wir 0,0 oder 2.895 sparen wollten, würden wir einen Float verwenden. Dann schließlich wird String zum Halten von Wörtern verwendet. Also, in diesem Fall, für die Willkommensvariable, die wir auf Hallo Welt setzen, müssen wir dies als eine Zeichenfolge definieren. Für größere Mengen von Daten können wir eine Struktur namens Array verwenden. Nun ist ein Array im Grunde eine Liste von Daten. Diese haben auch Typen. Dies können ganze Zahlen oder Gleitkommazahlen oder Zeichenfolgen sein, aber sie sind mit dieser Racket-Syntax eingerichtet. Ein Array namens Zahlen, in dem ich Null, eins, zwei und drei speichern möchte , wird auf diese Weise mit den Klammern vorne und dann die Klammern zu wichtigen Zahlen definiert . Im Grunde, was wir mit einem mehrteiligen Container abschließen. Dieses Array enthält jetzt Null, eins und zwei, und dann können wir entweder alle drucken, indem wir PrintIn i sagen, das nur die gesamte Liste ausdruckt, oder wir können dieses Klammerformat verwenden, um es eine der Positionen in unserem Array. Also, Leute Klammer Null wäre die erste, dies wäre Mark in diesem Fall, oder Leute Klammer eins, wäre jeder und so weiter. Die endgültige Datenstruktur, auf die wir stoßen werden, ist ein 2D-Array. Dies ist eine Liste von Listen oder einer Matrix. Also, wenn Sie über das Array nachdenken, das wir gerade besprochen haben, wird dies jetzt eines sein, das mehrere andere Arrays enthält. Anstatt also eine Klammer nach dem Typ der Daten zu haben , die es wie Integer-Klammer hält, die ist, wie ein Array definiert ist, benötigt diese zwei. Jetzt kommen wir zurück zu dieser Tabellenkalkulationsidee. Wir sprechen über Spalten und Zeilen. Wie Sie in dieser Matrix sehen können, haben wir unsere erste Zeile, die mit Null bezeichnet wird, weil so Computer von Null nach oben zählen. Wir haben die Reihe eins und die zweite Reihe. Wir haben auch die Spalten Null eins und zwei. Nun, wenn Sie sich ansehen, wie wir diese Matrix von Daten definieren, mit drei Array-Funktionen, können Sie dann diesen println Code verwenden, um auf verschiedene Teile davon zuzugreifen. Ich habe in der Matrix hervorgehoben, was hervorgehoben wird oder welche von jeder dieser Codezeilen ausgewählt wird. Also, wenn wir versuchen und println Zahlen Matrix Null, Null, werden wir die erste Position bekommen. Während, wenn wir println Zahlen Matrix zwei, zwei tun , werden wir die letzte Position bekommen. Nun, wir wenden all diese Daten in der Verarbeitung an, wir brauchen etwas, das in der Lage sein wird, es zu durchlaufen und all diese verschiedenen Bits von Daten aus dem Speicher aufzurufen. Also werden wir die Namen dieser Meteoriten und deren Breiten- und Längengrad einbringen , und so verwenden wir eine for-Schleife, um all diese Daten zu durchlaufen. Eine for-Schleife ist etwas, das im Voraus etwas einschüchternd aussehen kann, aber es ist einfach eine Struktur, die immer wieder verwendet wird , wenn Sie etwas in der Verarbeitung tun. Es sieht ein wenig einschüchternd aus, weil es ein wirklich verdichtetes Stück Code ist. Was hier passiert, ist, wir sagen, dass wir eine ganze Zahl i wollen, und wir werden sie auf Null setzen. Solange diese Integer kleiner als drei ist, möchten wir 1 hinzufügen. Dieses i plus plus, ist das gleiche wie i gleich i plus eins. Also, während diese Bedingungen wahr sind, dann machen Sie alles in diesen Klammern. Also, wir können das manuell ausspielen. Also, das erste Mal, wenn dies ausgeführt wird, werde ich gleich Null sein. Also, für jede dieser Drucklinien können wir uns vorstellen, das i durch eine Null zu ersetzen. Also, das erste Mal, wenn wir durchlaufen, werden wir Null Null, Null eins und Null zwei drucken . Wenn wir bis zum Ende kommen, werden wir eins zu i hinzufügen. Also, jetzt wird es mit i gleich eins durchlaufen. Also, wir werden für eine Null, eins und eins zwei drucken . Schließlich werden wir noch einen hinzufügen, und jetzt werde ich gleich zwei sein. Wir werden es nochmal durchlaufen und zwei Null, zwei eins und zwei zwei ausdrucken . Dann fügen wir eins hinzu, und es wird drei sein, aber es wird diese Bedingung nicht erfüllen, weniger als drei zu sein. Also, dann wird die for-Schleife enden. Dies ist nur eine Struktur, die Sie überall in der Verarbeitung sehen werden, und wir werden sie heute verwenden. 4. Geometrie von Karten: Eines der anderen Konzepte, die wir brauchen, um in den Griff zu bekommen, ist, wie man die Erde misst. Erde ist eine Kugel, und die einzige wirklich genaue Art, dies zu zeigen, ist mit dem Globus. Aber wir müssen es auf eine 2D-Oberfläche abflachen, um es auf unseren Bildschirm zu bringen. Also, die Erde wird in zwei Dimensionen gemessen, Breitengrad, die die horizontalen Bänder um die Erde sind, und Längengrad, die die vertikalen Bänder sind. Sie sind ein bisschen knifflig, weil die Waage nicht bei Null angefangen hat. Breitengrad beträgt 90 Grad am Nordpol und 90 Grad am Südpol mit einem Äquator von Null. So überspannt es 180 Grad. Während, Längengrad, die um die ganze Welt wickeln muss , muss eine Skala von 360 abdecken. Also geht es dafür von minus 180 auf 180 mit Null in Greenwich in England definiert. Nun, um dies zu glätten, gibt es viele verschiedene Möglichkeiten, eine Kugel auf eine ebene Fläche zu projizieren. Wenn Sie zur Google-Bildsuche gehen und sich Kartenprojektionen ansehen, sehen Sie eine beliebige Anzahl verschiedener Möglichkeiten, dies zu tun. Heute werden wir die sogenannte „equirechteckige Projektion“ verwenden. Dies ist bei weitem die einfachste Möglichkeit, eine Kugel in ein flaches Rechteck zu verwandeln. Sie können auch einige der Probleme bei der Verwendung dieses Ansatzes sehen. In diesem Diagramm habe ich gezeigt, wie Sie, wenn Sie Kreise aus verschiedenen Teilen des Globus haben, wenn Sie es abflachen, mit dieser Projektion unterschiedliche Grade der Verzerrung erhalten. Also, Bereiche rund um die Ober- und Unterseite unseres Globus werden wirklich deformiert sein. Antarktis wird also viel, viel größer erscheinen , als sie in Wirklichkeit ist. Aber die Mathematik, um dies auf dem Bildschirm zu bekommen, ist viel einfacher als jede andere Methode, und das wird wirklich nützlich für uns sein. Schließlich gibt es eine weitere Funktion in der Verarbeitung, die entscheidend für die Übersetzung dieser Datenmenge in unsere glorreiche Karte sein wird . Dies ist die Kartenfunktion, und was dies tut, ist es, dass angesichts des Wertes, der auf einem Maßstab vorhanden ist, diesen in den Wert auf einem anderen Maßstab übersetzen. So können Sie sehen, dass diese Funktion fünf verschiedene Eingaben benötigt. Der erste ist der Wert, den wir übersetzen wollen. In diesem Fall 127,55, und dies ist von der Breitenskala, die von negativ 180 bis 180 geht. Was wir tun wollen, ist das auf unsere Bildschirmskala zu übersetzen, die bei Null beginnen wird und in diesem Fall auf 400 gehen wird. Sobald wir das alles tun, die Kartenfunktion einen Wert entlang dieser Skala aus. In diesem Fall 341.7. Also, wir werden dies verwenden, um sowohl unseren Breitengrad als auch den Längengrad in die Bildschirmwerte zu übersetzen , die wir brauchen. Diese Kartenfunktion wird für uns von unschätzbarem Wert sein, wenn wir versuchen den Breiten- und Längengrad der Erde in die Leinwand umzuwandeln, die wir verwenden. Eine Leinwand für dieses Projekt könnte also 400 Pixel breit sein. Also, wir nehmen diese Breitenskala und konvertieren sie von 127,55 auf der Skala von negativem 180 zu 180, 341,7 auf der Skala von Null bis 400, die Breite unserer Leinwand. Wir werden auch Marker benötigen, um die Größe dieser Meteoriten relativ zueinander zu zeigen. Eines der entscheidenden Stücke in dieser Klasse ist es, diese Idee zu teilen, dass man, wenn man Menge in Fläche ein wenig Math machen muss. Es wäre also sehr schön, wenn wir Rechtecke zeichnen könnten, für die wir repräsentieren wollen, indem wir nur beide Seiten sagen, die Breite und die Höhe sind vier. Leider bedeutet dies einen Bereich, der falsch repräsentativ für das ist, was wir zeigen wollen. Also, die richtige Art, etwas mit einer Fläche von vier zu zeigen, ist, die Quadratwurzel dieses Bereichs zu nehmen, und das gibt uns die Dimensionen des Quadrats. Also, um vier zu zeigen, brauchen wir Seiten, die zwei und zwei sind, nicht in diesem Fall die vier und vier Seiten. Die Regel zum Generieren eines Rechtecks, das Fläche anzeigen wird, besteht darin, die Quadratwurzel dieses Bereichs zu nehmen und diese für die Abmessungen der Form zu verwenden. Bei Kreisen ist die Mathematik etwas komplexer. Wenn Sie sich an die Geometrieklasse erinnern, ist die Methode, die Kreise Fläche zu berechnen, pi R quadriert. Weil wir wollen, dass der Bereich unsere Menge repräsentiert, müssen wir davon zurückverfolgen. Also, um den Radius unseres Kreises zu erhalten, nehmen wir den Betrag, den wir darstellen wollen, wir bekommen seine Quadratwurzel und teilen ihn dann durch pi, um den Radius zu erhalten. 5. Datenexport in CSV: Jetzt werden wir mit diesem Projekt beginnen. Willkommen in Ihrem Datensatz, das heißt Meteore. Sobald Sie es geöffnet haben, können Sie beginnen, ein wenig nach unten zu scrollen , um ein Gefühl für die Größe hier zu bekommen, das ist etwas, das keine rationale Person würde wollen, um eine Karte von Hand auf eine Karte zu legen. Wenn wir nach unten scrollen, sehen Sie, dass wir 34.066 Zeilen zu diesem Dataset haben. Ich beginne immer gerne in einer Tabellenkalkulation wie bei einem neuen Satz von Daten, denn hier können wir anfangen, die Grenzen dessen zu spüren, was uns gegeben wurde. Sie können sehen, dass es hier sechs verschiedene Spalten gibt, jede sagt uns etwas etwas anderes über unseren Datensatz. Also, wir haben einen Namen oder einen Ort für jeden Meteoritenschlag, wir haben das Jahr, wir haben seine Masse in Gramm, den Längengrad, Breitengrad, und ob es ich denke, gesehen fallen oder ob es gefunden wurde. Das Tolle an Tabellenkalkulationen ist, dass wir einige echte einfache Analyse der Daten durchführen können , um ein Gefühl dafür zu bekommen. Also, eines der ersten Dinge, die ich tun möchte, ist nur zu sehen, wie viele Jahre diese Datensatzspanne? Also, in dem Moment, in dem ich denke, es ist so eingestellt, dass es absteigend ist, werde ich das ändern. Also, schon kann ich sehen, dass einige davon unten kein Jahr haben und dieser Datensatz geht bis 2012. Wenn ich nach oben scrolle, kann ich sehen, dass dies auf minus 600 zurückgeht. Daher gibt es hier einige negative Werte, die Sie beachten müssen, und es gibt Ihnen auch ein Gefühl für die Dauer dieses Datensatzes. Indem ich erneut hier klicke, kann ich diese Masse in aufsteigende oder absteigende Form ändern. Also, ich möchte ein Gefühl davon bekommen, was die Größen dieser verschiedenen Meteoriten sind und ob sie alle Werte haben. Also, am größten, wir haben diese Hoba mit 60 Millionen Gramm, und am kleineren Ende haben wir diejenigen, die bis zu 0,01 Gramm sind. Der Breiten- und Längengrad wird nur innerhalb der Grenzen der Erde variieren und fell_found scheint ziemlich einfach zu sein, das könnte etwas sein, das es sich lohnt, für später zu codieren, aber ich denke, wir haben einen Sinn für den Datensatz und es lohnt sich, es jetzt in ein Format zu exportieren, das die Verarbeitung verwenden kann. Ich denke, ich werde diese Daten durch ihre Masse einbringen wollen. Also werde ich die größten Meteoriten an der Spitze meiner CSV haben wollen. Um das zu tun, werde ich hier oben klicken und diese Massen in absteigender Reihenfolge sortieren, so groß oben. Ich scrolle einfach nach oben und stelle sicher, dass das der Fall ist. Ja, der Hoba-Meteorit taucht oben auf. Also, ich habe keine zusätzlichen Zeilen oder Spalten, die hier im Weg stehen, wenn ich es exportiere, das würde nur zu leeren Dingen führen, die ich nicht brauche. Also, ich fühle mich gut über den Zustand, in dem sich dieser befindet. Unter Exportieren werde ich dies in eine CSV exportieren. Ich kann die Textkodierung so belassen, wie sie ist, drücken Sie einfach Weiter und ich werde dies auf dem Desktop als Meteors.csv speichern. Werfen wir nun einen Blick darauf, öffnen Sie es in Textbearbeitung und sehen, was sich daraus ergibt. Hier haben wir es, es sollte eine 34.000 Zeilen lange Textdatei sein. Sie können sehen, dass alle diese Spalten jetzt in kommagetrennte Werte übersetzt wurden , wobei unsere erste als Schlüssel erscheint, der uns den Ort, das Jahr, die Masse, den Längengrad, den Breitengrad und den Fell-gefunden angibt. Ich werde nur diese oberste Zeile löschen, weil dies keine Daten sind, es ist nur ein Schlüssel, und ich werde ihn speichern und wir werden bereit sein, es in die Verarbeitung zu bringen. Ich habe die Meteoriten nach Masse sortiert, weil ich die größten Meteore beschriften will. Dies wird am einfachsten sein, indem ich nur sage, ich möchte die ersten 10 oder 20 beschriften, anstatt alle Werte zu analysieren und sie zu testen, ob sie über einen bestimmten Maßstab liegen. Diese Daten können auch in Google zugegriffen werden, es gibt einen Link auf der Skillshare Website für diese Menge von Meteoritengröße und Daten. Dies ist eine Google-Tabelle und hier können Sie einige der gleichen Informationen sehen, diese Koordinaten, es gibt sogar Links zu einem Datenbankeintrag für die Meteore. Aber wenn Sie es hier herunterladen oder erkunden möchten, können Sie die Dinge erneut sortieren, indem Sie oben in der Spalte Label klicken oder unter Datei, indem Sie Download auswählen, können Sie es auch als CSV herunterladen. 6. Neue Dateisyntax und Datenordner: Wenn Sie keine Verarbeitung auf Ihrem Computer haben, können Sie diese kostenlos erhalten, indem Sie processing.org besuchen. Hier oben gibt es einen großen Download-Processing-Button. Fühlen Sie sich frei, eine Spende zu machen, wenn Sie wollen, denn dies ist Open-Source-Software. Dann laden Sie die richtige Version herunter, die Sie benötigen. Also, ich habe die Mac-Version bereits installiert. Aber wenn Sie es nicht haben, laden Sie es einfach hier herunter. Sobald Sie es installiert haben, öffnen Sie Processing und wir werden eine neue Skizze erstellen. Hier sollten Sie einige der Teile der App sehen, die ich zuvor besprochen habe. Wir haben das leere Editor-Feld und die Konsole unten. Speichern wir das einfach auf dem Desktop. Nennen wir es MeteorSketch, und Sie werden sehen, dass dies auf dem Desktop angezeigt wird. Was wir zu dieser Skizze hinzufügen müssen, ist ein Ordner namens Daten. Nun, nicht alle Verarbeitungsskizzen haben dies, aber wenn wir externe Dateien einbringen wollen, wie wir es sein werden, muss es hier leben. Also, erstellen Sie einfach einen neuen Ordner in diesem Verzeichnis und nennen Sie es Daten mit einem Kleinbuchstaben d. Wenn Sie auch das Arbeitsbeispiel dieser App heruntergeladen haben , die wir bauen werden, Sie sehen, dass es einen Datenordner gibt, und es hat die zwei Teile, die wir brauchen. Es hat die meteorite.csv und eine Datei namens WorldMap.spg. Sie können diese Dateien einfach in Ihren Datenordner kopieren oder Sie können die Datei meteors.csv verwenden, die wir zuvor erstellt haben. Also, in Ihrer MeteorSketch, können Sie bereits auf Ausführen klicken und Sie werden sehen, dass die Leinwand angezeigt wird. Wir müssen damit beginnen, die Auslosung und die Setup-Abschnitte unserer Out einzurichten. Sie können diese entweder indirekt eingeben oder die Referenzskizze öffnen , die in der Skillshare e-Datei enthalten ist. Hier sehen Sie das kleine kommentierte Label, das ich verwende, um den Anfang des Setup-Abschnitts anzuzeigen, und darunter müssen wir nur Void Setup mit einigen Klammern und einer offenen Klammer und einer engen Klammer sagen . Dann haben wir auch dieses kommentierte Label, um den Anfang des Zeichnungsabschnitts anzuzeigen. Hier können wir sagen, leere Zeichnung, dann öffnen Sie die Klammer und schließen Sie die Klammer. Oben oben werde ich nur noch einen Hinweis darauf machen, was da sein wird. Dies ist, wo wir sowohl die Bibliothek, die wir brauchen, als auch die globalen Variablen setzen. Also, das ist das Skelett unserer App. Hier werden die Stücke leben, die wir brauchen werden. Sie können wieder auf Run drücken, und Sie werden sehen, dass das gleiche kleine Quadrat passiert. Jedes Mal, wenn Sie auf Ausführen klicken, wird es Ihren Code überprüfen und sicherstellen, dass es keine Fehler gibt. Also, wir sind in guter Form. Lassen Sie uns das speichern und beginnen, einige der grundlegenden Elemente, die wir brauchen, einzubringen. Im Setup-Abschnitt werden wir Dinge wie die Größe unseres Projekts finden, wir werden die Karte importieren, die wir verwenden werden, und das sind Dinge, die wir nur einmal unten im Abschnitt void draw passieren wollen. Hier können Sie Code haben, der immer und immer wieder läuft. Wenn wir also eine Animation oder eine interaktive Animation machen, wollen wir, dass wir Bilderrahmen auf dem Bildschirm halten. Die Hauptsache, die wir in unserem Ziehbereich passieren wollen, ist dass es beginnt, ein PDF am Anfang zu speichern und es am Ende zu speichern. Also, wir wollen nur, dass ein oder sonst laufen wir mit einem PDF, das immer und immer wieder gespeichert wird. 7. SVG (skalierbare Vektorgrafik) importieren: In diesem Abschnitt werden wir in die Basiskarte bringen. Dies werden die Umrisse des Globus sein, die einen Kontext bilden werden, um zu verstehen, wo diese Meteorenschläge auf der ganzen Welt geschehen sind. Eines der Elemente im Datenordner ist eine Grafik namens WorldMap.svg, und dies ist eine rechteckige Aqua Projektion der Welt. Sie können unsere riesige Antarktis unten sehen und wie die Spitze der Vereinigten Staaten, Sibirien, Kanada und Grönland wirklich verzerrt sind. Aber das ist einfach zu importieren und einfach unsere Marker zu platzieren. Dies kam von Wikipedia, Sie können immer nach Aqua rechteckige Vektorkarte auf Google suchen und andere Quellen finden. Also, was wir tun müssen, ist unsere Leinwand groß genug, um diese Karte zu halten, und verwenden Sie ein wenig Code, um sie im Hintergrund zu platzieren. Also, das erste, was wir tun werden, ist die Größe unserer Leinwand auf eine setzen , die den Proportionen dieser Karte entspricht. Aqua rechteckige Kartenprojektion wird immer doppelt so breit wie hoch sein. Also, wenn wir uns entscheiden, dass das 900 Pixel hoch ist, machen wir es 1.800 Pixel breit. Sie legen die Größe des Canvas in der Verarbeitung durch mit der Größenfunktion fest. Also, sagen Sie 1.800 für die Breite und 900 für die Höhe. Diese Funktionen werden immer mit einer offenen Klammer begonnen und mit einer geschlossenen Klammer geschlossen, und am Ende jeder Zeile benötigen Sie ein Semikolon. Wenn wir jetzt den Play-Button drücken, werden Sie plötzlich sehen, dass unsere Skizze 900 mal 1.800 ist, was viel entgegenkommender ist. Das nächste, was wir tun werden, ist, dieses bisschen Code zu bringen, um die Grundkarte zu laden. Wir müssen unsere erste Variable definieren. Dies ist ein spezieller Typ, der als pShape bezeichnet wird, und das ist, was eine SVG enthält. Also definieren wir zuerst seinen Typ, und dann geben wir ihm einen Namen. Ich werde es als Grundkarte nennen. Sie können immer sehen, ob Sie Code korrekt in der Verarbeitung eingeben Wenn Sie diese Funktionen verwenden, werden sie hervorgehoben. PShape weiß also, dass es sich um einen variablen Typ handelt und orange ist, während diese Funktionen wissen, dass sie grün oder blau sind. In diesen einrichten, den Code, den wir gerade einmal ausführen werden, werden wir in dieser Basiskarte definieren. Also, wir geben den Namen unserer Variablen ein, und dann brauchen wir eine andere Funktion, loadshape, die Sie sehen werden, wenn ich alles in Kleinbuchstaben austippe, es wird nicht hervorgehoben, wenn ich das Großbuchstaben S dort verwende, es wird richtig hervorgehoben. Jetzt möchte ich ihm nur den Namen unseres SVG geben, also kopiere ich das aus dem Datenordner, und ich muss das hier in Anführungszeichen setzen, WorldMap.svg. Das ist nicht genug, aber lassen Sie uns es einfach ausführen, um sicher zu sein. Okay, wir haben ein Problem mit der Basiskarte. Das liegt daran, dass ich kein Großbuchstabe M in den Variablennamen eingefügt habe. Also, es sagte mir in der Konsole, es kann nichts mit dem Namen BaseMap finden. Sobald ich den Namen der pShape-Variablen geändert habe, sollte dies korrekt ausgeführt werden. Jetzt, im Zeichnungsmodus, werde ich noch ein Stück Code hinzufügen und das ist, was wir es der Leinwand hinzufügen. Dies wird eine Funktion namens shape sein, und ich werde ihr sagen, dass sie meine Grundkarte auf Position Null, Null setzen soll, was der allererste Punkt in der Leinwand ist, und dass ich möchte, dass sie so breit und so groß wie die Leinwand ist. Jetzt könnte ich entweder die Dimensionen neu eingeben, die ich in die Größe einfüge, oder ich kann diese kleinen Komfort-Methoden verwenden, um die Leinwand einfach zu fragen, welche Größe es ist. Hierbei handelt es sich um reservierte Wörter wie Breite und Höhe, die diese Mengen repräsentieren. Also, in dieser Codezeile sage ich, ich möchte eine Form, die mit der Grundkarte gefüllt ist, die unser SVG ist, und es beginnt bei Null Null, und es geht zu Breite und Höhe. Ich habe das mit einem Semikolon geschlossen, und wenn ich es anlege, haben wir die Karte. Wir sind also in guter Verfassung, um unsere Daten einzubringen und diese auf unsere Karte zu setzen. Für diese Klasse habe ich Ihnen eine richtig formatierte Aqua rechteckige Karte zur Verfügung gestellt , die ich von Wikipedia bezogen habe. Aber ich habe auch festgestellt, dass es andere Orte gibt, um Karten zu bekommen. Diese Methode wird nur funktionieren, wenn wir eine rechteckige Aqua-Kartenprojektion verwenden, aber Sie können diesen rechteckigen Vektor in Google eingeben und ich gehe normalerweise zum Bildbereich, um andere Quellen zu finden. Sie können hier sehen, es gibt viele verschiedene Beispiele von Aqua rechteckigen Karten mit unterschiedlichen Details, oder mit Länderteilen auf ihnen. Sie können also immer versuchen, eine davon auch in Ihre Datei zu legen. 8. Markierungen einzeichnen: Der nächste Schritt darin besteht darin, einige Marker auf unserer Karte zu zeichnen. Wir werden die Daten ein wenig später anschließen, aber schauen wir uns einfach an, wie die Verarbeitung diese Shapes zeichnen kann, die wir benötigen. Es gibt ein paar verschiedene Arten von Formen, mit denen die Verarbeitung uns bieten kann. Wir können rechteckige, Rechtecke oder Ellipsen verwenden. Lassen Sie uns einfach beginnen, indem wir uns diese beiden und einige der Schritte ansehen, die wir brauchen, um diese auf eine Weise zu zeichnen, über die wir aufgeregt sind. Die erste Funktion ist also ein rect. Sie werden sehen, dass nur durch Eingabe von rect und das Einfügen in unsere Klammern Verarbeitung dieses Stück Code erkennt. Ein Rechteck nimmt vier Parameter an. Wir wollen die X- und Y-Position und dann die Breite und die Höhe. Also, wenn ich 100, 100 für die Position sage und ich möchte, dass sie 200 Pixel breit, 100 Pixel hoch ist, wenn ich das renne, werden Sie sehen, dass wir dieses Rechteck hier bekommen. Standardmäßig verfügt es über einen schwarzen Umriss und eine weiße Füllung. Ich will nicht wirklich, dass es diesen schwarzen Umriss hat. Also, in der obigen Zeile werde ich dieses kleine Stück Code verwenden, keinen Strich, und dies wird den Umriss ausschalten, wenn ich ihn erneut ausführe. Jetzt habe ich nur ein weißes Rechteck, aber das ist ziemlich unsichtbar. Also, was ich jetzt tun werde, ist, ihm eine Füllung zu geben. Sie können dies auf verschiedene Arten in der Verarbeitung tun. Es wird Schwarz-Weiß erkennen. Sie können es als Schwarz-Weiß mit Alpha oder RGB oder RGB mit Alpha (Alpha) angeben , was Transparenz bedeutet. Also, zuerst, sagen wir einfach, ich will es mit Schwarz füllen. Die schwarze Skala reicht von 0 bis 100. Also, wenn ich sage füllen 0, wird es mir ein schwarzes Rechteck geben. Es geht von 0 bis 255. Also, ein Wert von 255 wird mir ein weißes Rechteck geben. Wenn ich zurück zu sagen, füllen Sie es mit 0 oder schwarz, kann ich einen anderen Parameter hinzufügen, der eine Transparenz sein wird. Also hier kann ich 50 einlegen, und jetzt können Sie sehen, dass ich ein halbtransparentes Rechteck habe. Ich möchte etwas Farbe verwenden. Also, ich gehe zu der Farbskala, die drei Parameter alle von 0 bis 255 nimmt. Diese sind in der Reihenfolge von Rot, Grün und Blau. Wenn ich also 255, 0, 0 sage , bekomme ich ein rotes Rechteck. Nun, wenn ich ihm einen weiteren Parameter gebe, wie 50, bekomme ich ein halbtransparentes rotes Rechteck. Wir haben die No-Loop-Funktion noch nicht eingefügt, also ist diese Draw-Schleife nur Zeichnen, Zeichnen, Zeichnen ständig. Eines der interessanten Dinge, die Sie in der Verarbeitung tun können, ist das Spielen mit Farbe. Es gibt eine Funktion namens „Zufall“. Dies wird nur einen zufälligen Wert festlegen. Dies kann wirklich nützlich sein, um zu experimentieren und zu erforschen. In diesem Fall sagen wir, dass wir einen Wert zwischen 0 und 255 anstelle von 255 wollen. Jetzt sehen Sie, wie diese Animation voranschreitet. Sie können sehen, dass wir jetzt eine flackernde Form haben und Sie können diesen zufälligen Code hineinwerfen, wo immer Sie wollen. Aber wir wollen das nur einmal laufen lassen. Um diesen Code in unserem Setup einfacher zu halten, fügen wir einfach eine Zeile hinzu, die keine Schleife sagt, und das bedeutet, sobald er ausgeführt wird, sobald wir fertig sind. Wir können testen, dass dies funktioniert, weil jetzt das Zufallsprinzip nur einen Wert auswählt und danach statisch sein wird . Ich werde das auf 255 zurücksetzen. Lassen Sie es uns nochmal laufen. Wir haben ein rotes Rechteck. Schließlich werden wir uns nur ansehen, wie Ellipsen in der Verarbeitung gezeichnet werden. Wie Sie sich vorstellen können, nimmt dies eine Funktion namens Ellipse. Ich gebe ihm eine andere Position wie 500, 500 und eine Breite von 100, und eine Höhe von 100, schließen Sie diese Klammern und setzen Sie einen Semikolon. Sobald ich das ausgeführt habe, bekomme ich eine neue Ellipse und der nächste Schritt wird sein, einige unserer Daten zu importieren und in der Lage zu sein, diese Marker programmgesteuert zu zeichnen , so dass sie uns zeigen, wo all diese Meteoritenschläge auf der ganzen Welt passiert sind. 9. Daten importieren und parsen: Für diesen nächsten Abschnitt werden wir die CSV-Daten in ein 2D-Array einbringen, damit wir es verarbeiten und unsere Marker an der richtigen Position auf der Karte platzieren können. Jetzt werden wir ein wenig repetitiven Code verwenden, um diese CSV in unsere Arrays zu analysieren. Ich werde ein wenig Setup machen, aber dieses Stück Code, den wir kopieren, es ist nur etwas, das Sie jedes Mal wiederverwenden werden, wenn Sie Daten aus einer Textdatei in die Verarbeitung importieren möchten . Das erste, was wir einrichten werden, ist eine Variable, um den Inhalt unserer Textdatei zu speichern. Das wird eine Zeichenkette sein. Wir werden es CSV nennen, weil es das ist, was es ist, und es wird automatisch ein Array sein. Dies liegt daran, dass, wenn wir es einbringen, es wird jede der Rückgaben in dieser Textdatei als eine neue Zeile von Daten zu interpretieren. Also, die Zeichenfolge CSV wird eine Liste aller Meteoriten sein. Um diese CSV mit den Daten aus der Textdatei zu füllen, müssen wir eine Zeile in unserem Setup haben, in der wir definieren, was CSV ist. Also, CSV wird jetzt den Inhalt dieser Funktion entsprechen, die LoadStrings genannt wird. Dies ist, was Sie verwenden, um Daten aus einer Textdatei einzufügen. Also, ich habe die Funktion dort, und ich werde nur diesen MeteorStrikes Namen kopieren. Auch hier muss dies in Anführungszeichen leben. Lassen Sie uns dies einfach ausführen, um sicherzustellen, dass alles richtig funktioniert. Okay, also sind die Saiten geladen. Ich werde dieses Rechteck loswerden, das wir in der vorherigen Instanz hatten, und ich werde die Konsole zum ersten Mal verwenden. Ich möchte nur sicherstellen, dass alles zugänglich ist, also werde ich diese Zeile println eingeben. Das bedeutet, etwas auf die Konsole zu drucken, und ich werde es sagen, CSV zu drucken, unsere Variable, die den Inhalt unserer Textdatei enthält. Ich führe das nochmal. Dort haben wir 34.000 Zeilen saftiger Meteoritendaten in unserer Konsole. Also, alles funktioniert bisher gut. Ich werde das löschen. Ich werde das 2D-Array einrichten. Dies ist die Liste der Listen, in denen anstatt alles in Zeilen zu haben, wir jetzt alles in Zeilen und Spalten aufteilen , so dass wir auf alle Daten zugreifen können, die wir wollen. In der CSV könnten wir auf eine Zeile von Daten zugreifen, indem wir println CSV sagen, und dann in einer der Klammern, nur eine Zahl wie 23 geben, weil ich weiß, dass dies eine überaus lange Textdatei ist. Ich weiß, dass 23 in Grenzen sein werden. Ich werde das erneut ausführen, Sie werden nur die 24. Zeile der Textdatei sehen. Was wir jetzt tun wollen, ist es bei all diesen Kommas aufzuteilen, so dass ich auf jedes Stück davon zugreifen kann. Um dies zu tun, müssen wir das 2D-Array definieren, das wir verwenden werden. Dies wird wieder eine Zeichenfolge sein. Für diesen werde ich MyData aufrufen, und wir sagen, dass es ein 2D-Array sein soll, indem wir zwei Klammern haben. Also, ich habe diese Variable definiert. Jetzt werde ich die Verarbeitung erklären, wie groß ich will, dass dieser Container sein soll. Ich möchte, dass es die Daten richtig passt, um effizient zu sein, also was ich tun werde, ist zu sagen: „Die Größe meiner Daten ist eine neue Zeichenfolge, und ich möchte, dass sie so viele Zeilen wie die Datei MeteorStrike.csv hat. Also, wir wissen, dass dies wie 34.000 etwas ist, aber wir können es tatsächlich direkt bekommen, indem wir diese kleine bequeme Methode verwenden , csv.length zu sagen. Also, das wird es einfach automatisch mit der Länge der CSV-Datei füllen. Ich denke, wir haben, hier können wir die Anzahl der Spalten zählen, die wir haben, eins, zwei, drei, vier, fünf, sechs. Es gibt sechs Spalten, also gebe ich an, dass als sechs, und drücke einfach Ausführen, um es erneut zu überprüfen, alles läuft in Ordnung. Der nächste Schritt wird dieses bisschen wiederverwendbaren Code sein, um diese CSV-Zeilen in unser 2D-Array aufzuteilen . Also, ich werde das aus der Referenzdatei kopieren. Eigentlich tippe ich es noch mal aus. Wir werden unsere erste vier Schleife verwenden, also werde ich einfach das grundlegende Skelett der for-Schleife einrichten, die mit für open paren und close paren beginnt, und dann eine offene Klammer und eine enge Klammer. Jetzt werde ich die Bedingungen für die for-Schleife einrichten. Dies wird für eine Integer i sein, das ist Null, während es kleiner als die Länge des CSV ist, also csv.length inkrementiert es, das ist i plus, plus oder i gleich i plus eins. Dann, was wir sagen werden, ist, dass dieses 2D-Array MyData für jede der Positionen i in diesem Container, wir wollen, dass CSV auf der Zeichenfolge, die Zeichen eines Kommas ist, aufteilen. Also, csv i.split, dies ist eine String-Funktion, die ihm das Zeichen sagt, auf dem Sie es teilen möchten, und ich habe hier alles richtig gemacht und Run gedrückt. Das ist alles im Hintergrund erledigt. Nun, lassen Sie uns einfach ein zufälliges Bit von MyData drucken , um sicherzustellen, dass es korrekt funktioniert. Also, ich werde einen weiteren println hinzufügen. Ich möchte wieder auf MyData an Position 23 zugreifen, aber dieses Mal möchte ich die vierte Zeile oder die vierte Spalte in Zeile 23, schließen Sie das und führen Sie es aus, und da gehen wir. Ich habe ein bisschen Standortdaten verteilt. Also, ich denke, alles ist jetzt im System, wo wir in der Lage sein sollten, durch es zu fahren, und beginnen, unsere Marker zu machen. Fühlen Sie sich frei, über diese for-Schleife oder sogar den abgeschlossenen Setup-Abschnitt zu kopieren. Jetzt, da wir fertig sind, ist diese Aufteilung des Codes des Kommas etwas, das ich normalerweise nur von einem Projekt in ein anderes kopiere, und ich mache mir keine Sorgen darüber, es auswendig zu lernen. 10. Umrechnung von Breiten-/Längengraden in Bildschirmkoordinaten: Also, an diesem Punkt haben Sie diese CSV in die Verarbeitung importiert, und Sie haben diesen Code kopiert. Also haben wir ein Parsing in ein 2D-Array und jetzt können wir in unseren Zeichenabschnitt gehen und anfangen, es in Bildschirmkoordinaten zu konvertieren, so dass wir es auf unserer Karte platzieren können. Lassen Sie uns in den Ziehbereich gehen, und was wir tun werden, ist, dass wir hier eine weitere for-Schleife einrichten, um durch alle unsere Daten zu durchlaufen. Hoffentlich wird Ihnen das ein bisschen vertrauter. Wie ich bereits sagte, ist dies die gleiche Struktur, die wir während der gesamten Verarbeitung immer und immer wieder verwenden. Wir beginnen mit der Eingabe für, öffnen und schließen diese Klammern, geben ihm eine Klammer für das, was wir wollen, dass es während der for-Schleife tun und schließen diese Klammer. Auch hier können wir diese int i Struktur verwenden. Es wird nicht in Konflikt mit dem i, das wir oben verwendet haben weil diese in verschiedenen Kontexten sind. Wenn Sie möchten, dass eine Variable im gesamten Projekt zugänglich ist, müssen wir sie hier im globalen Variablenabschnitt festlegen. Also, ich werde i wieder verwenden, ich werde sagen, für int i gleich Null ist, ich ist kleiner als die Länge meiner Daten, also ist das meine data.length. Füge eins zu i hinzu, i plus. Also, ich werde das laufen, stellen Sie sicher, dass alles gut ist. Sieht immer noch gut aus. Ich werde diese Ellipse, die ich früher in die for-Schleife gezogen habe, verschieben. Aber lassen Sie es einfach so und ich führe es, ich werde 34.000 Ellipsen übereinander gestapelt bekommen. Man kann schon sehen, dass sich der Code etwas verlangsamt hat, aber jetzt ist das Rot der Ellipse völlig undurchsichtig, weil all diese transparenten Ellipsen übereinander nun zu einer festen Masse geworden sind. Wir werden uns daran halten, diese Ellipse zu zeichnen. Lassen Sie uns einfach zwei Schrägstriche geben, um es für eine Minute auszukommentieren. Nun müssen wir den Breiten- und Längengrad berechnen. Wir können die Map-Funktion verwenden, um dies zu tun. Lassen Sie uns zunächst Teile unseres Datensatzes ausdrucken , um sicherzustellen, dass wir sie an den richtigen Stellen haben. Um dies zu tun, werde ich die PrintIn verwenden, und was ich tun möchte, ist Zugriff auf meine Daten für jede Zeile, die ich sein wird, und ich denke, dass wir hier mit der CSV-Datei arbeiten werden. Wir werden eins, zwei, drei, die vierte und fünfte Position verwenden , weil wir mit einem Computer sprechen, den wir einen subtrahieren müssen, weil sie von Null zählen. Also, das wird drei und vier sein. Wir können dies tatsächlich alles in einer Zeile tun, indem wir hier ein Plus setzen und Anführungszeichen öffnen, und einfach ein weiteres Plus machen, und ein Plus und dann das andere Bit meiner Daten. Also, was hier passiert, ist, ich sage, ich will einen Druck zwei Variablen, und ich möchte nur ein wenig Text dazwischen halten, um es lesbar zu machen. Dies wird ein Raum, ein Plus und ein Raum sein. Also, wenn ich das durchführe, sollte ich sehen, dass alle Daten hier durchkommen. Wie Sie in der Konsole sehen können, habe ich den Breitengrad und dann den Längengrad durch ein Plus getrennt. Ich kann dies zu einem Komma oder einem Schrägstrich machen, wenn ich möchte. Also, ich habe die Daten in einer Schleife, in der ich jetzt auf alles zugreifen kann. Ich werde die Kartenfunktion verwenden, um dies alles in Bildschirmkoordinaten zu konvertieren. Also, um dies zu tun, werde ich eine neue Variable einrichten. Also, ich werde GraphLong anrufen. Dies wird ein Schwimmer sein, weil ich viel Präzision darauf haben möchte. Es wird eine Dezimalzahl statt eine ganze Zahl sein, und der Wert davon wird die Ausgabe einer Kartenfunktion sein. Ich werde auch einen Graphen davon brauchen. Also, ich werde das auch mit einer neuen Variablen und der Ausgabe dieser Kartenfunktion einrichten. Also, wenn Sie sich von vorher erinnern, wird eine Kartenfunktion fünf Eingaben annehmen. Wir nehmen zuerst die Nummer, die wir eine Karte wollen, und dann die beiden Maßstäbe, die wir verwenden. Also, lasst uns aufstellen. Lassen Sie uns auf die Daten zugreifen, die wir anfangs wollen. Der erste wird diese MyData [i] [3] sein. Also, wir können das kopieren und in die erste Karte einfügen, und dann werden diese Daten auf der Skala von minus 180 bis 180 sein. Also, erste Zahl hier minus 180, 180, und wir wollen, dass dies auf die Breite unserer Leinwand abgebildet wird. Wir wissen, dass die Leinwand mit Null beginnt und auf eine Breite geht , auf die zugegriffen werden kann, indem nur das Wort Breite eingegeben wird. Also, wir beginnen mit Null und dann geben wir Breite ein. Der Prozess für den Breitengrad ist sehr ähnlich, aber wir müssen die Werte ein wenig optimieren. Dazu verwenden wir MyData [i] [4], und dies wird auf der Skala von minus 90 bis 90 liegen, und für die Erddaten, und dann wird es auf der Skala von Null bis Höhe vier für unsere Bildschirmposition sein. Lassen Sie uns dieses PrintIn ein wenig ändern, schneiden wir es und fügen Sie es unter diesen Gleichungen ein, und anstatt myData [i] [3] einzustecken, lassen Sie uns die Ausgabe dieser Kartenfunktionen anschließen. So können wir darauf zugreifen, indem wir über einen GraphLong kopieren und ihn in die Druckfunktion einfügen, GraphLat kopieren und in die Druckfunktion einfügen. Also, jetzt, wenn alles richtig funktioniert, können wir erwarten, dass diese for-Schleife alle Werte für Breiten- und Längengrad in unserer CSV durchläuft und sie in den Variablen GraphLong und GraphLat speichert. Jedes Mal, wenn es in die for-Schleife geht, wird es die Variable neu initialisieren und den nächsten Wert verwenden. Also, was wir in der Konsole erwarten sollten, ist, dass diese GraphLong und GraphLat alle Bildschirmwerte ausdrucken, die wir brauchen werden. Aber ich habe etwas falsch gemacht. Ja. Dies ist der einzige Schritt, der fehlt. Unsere Daten liegen in String-Formaten vor. Also denkt, dass alles, was ihm begegnet, ein Wort ist. Leider wissen wir, dass es sich um eine Zahl handelt, und wir müssen sie in ein Format einfügen, das diese Kartenfunktion verwenden kann. Es kann nur mit Zahlen wie Ganzzahlen oder Gleitkommazahlen arbeiten. Also, die Art und Weise, die Verarbeitung zu sagen, diese MyData zu verwenden, dass sie denkt, ist ein Wort, weil es aus einer Reihe von String-Variablen kommt. Wir müssen es auf eine Nummer werfen. Das bedeutet, es einfach zu übersetzen, und die Art und Weise, wie wir das tun, ist mit einer kleinen Funktion namens float. Also, wenn wir MyData in einen Float und in der Zeile darunter einbinden, werden wir das umschließen. In einem Float sollte dies nun durch die Funktion möglich sein, und unsere Konsole sollte alle Bildschirmwerte ausspucken, die wir brauchen. Sie können sehen, jetzt ist dieser Satz von Zahlen auf der Skala unserer Leinwand. Sie sollten alle in weniger als 1800 in der ersten Zahl und weniger als 900 in der zweiten Zahl sein. Nun, wenn Sie diesen Code funktioniert haben, können Sie ihn entweder aus der anderen Datei kopieren oder hoffentlich optimieren, bis er für Sie erfolgreich ist. Lasst uns zu unserer Ellipse kommen, um all diese Marker auf dem Bildschirm zu zeichnen. Anstatt ihm explizite Dimensionen wie 500 und 500 zu geben, können wir es jetzt sagen, dass wir eigentlich nur alle unsere Punkte auf GraphLong und GraphLat setzen wollen und 100-100 wird es ziemlich groß sein, lassen Sie uns sie 10 mal 10 machen. Wenn wir dies ausführen, sollten wir unseren ersten Blick auf all diese Daten sehen, die auf der Karte erscheinen. Irgendwo haben wir einen Fehler gemacht. Wie Sie sehen können, steht diese Karte auf dem Kopf. Diese Meteoriten landen nicht auf unseren Kontinenten. Also, ich denke, was ich tun muss, muss ich diese Zuordnung der Skalierung ändern. Anstatt von minus 90 zu 90 zu gehen, möchte ich, dass es von 90 auf minus 90 geht. Hoffentlich werden wir die Richtige sein. Da gehen wir. Das sieht viel besser aus. Wir haben jetzt alle Meteoriten, die auf der Erde landen, und im nächsten Schritt können wir die Skala der Größe des Meteoriten auf die Größe des Markers, den wir auf dem Bildschirm sehen, anschließen . 11. Markierungen mit Daten verbinden: Ok. In diesem letzten Abschnitt hatten Sie hoffentlich den Nervenkitzel, alle Meteoritenmarkierungen auf die Karte zu bringen. Wir werden ein bisschen Mathematik machen, um sie richtig zu skalieren und auf die Masse des Meteoriten zuzugreifen. Wir werden ein wenig Cleanup auf dieser For Loop machen, den Raum hier loswerden, und ich bin ziemlich zufrieden mit dem Rest dieses Codes. Also, ich lasse es an Ort und Stelle. Was ich tun möchte, ist eine Variable für den Durchmesser jedes dieser Meteoriten zu definieren. Also muss ich meine korrekte Flächenberechnung verwenden und auf die richtigen Daten aus unserem CSV zugreifen, um es in diese Gleichung zu stecken. Wieder werde ich einen Float wollen, und nennen wir diesen MarkerSize. Dies wird der Behälter für den Durchmesser unserer MeteorMarker sein. Also, lassen Sie uns noch einmal überprüfen, wo die Skala unseres Meteoriten gehalten wird. Also, es wird in der dritten Spalte unserer Textdatei gehalten. Also, wir greifen darauf mit dem my data 2D Array zu. Wir können weiterhin (i) verwenden, um alle von ihnen zu durchlaufen, aber wir verwenden jetzt die zweite Position. Also, jetzt muss ich die MarkerSize in die Größe der Ellipse stecken. Also, anstatt eine statische zu verwenden, werde ich einfach sagen, fügen Sie MarkerSize, wo ich zuvor 10 sagte. Wir können es versuchen, aber ich denke, dass zwei Dinge. Erstens, diese Marker werden enorm sein. Wir werden unsere Karte nicht sehen können, und wir müssen auch die Zeichenfolge, die meine Daten zurückgeben, in einen Float verwandeln. Wir müssen es etwas machen, das der Ellipsenzeichnungscode erkennen kann. Also, jetzt sagen wir: „Nimm das Wort, das eine Zahl definiert, und behandle es wie eine Zahl.“ Sie sollten den println ausschalten, jetzt funktionieren, ich denke, es wird zu lange dauern und diesen Prozess verlangsamen. Also, löschen wir das und führen Sie es erneut aus. Also, ein Haufen Rot, weil einige dieser Marker 60 Millionen Gramm waren. Also werden wir wirklich diese Marker herunterskalieren müssen. Leider, eines der Dinge, die wir tun werden, ist, dass wir diese Flächenberechnung implementieren. Also, wie ich Ihnen in den ersten Konzepten gezeigt habe, müssen wir eine Quadratwurzel von der Größe des Meteoriten nehmen und es durch Pi teilen und das wird uns den Radius geben. Also, lass uns sehen. Wir haben eine Funktion, um Quadratwurzel in der Verarbeitung von SQRT zu tun, und vielleicht hat es Kleinbuchstaben. sqrt, öffne eine parenth, und schließe parenth. So wird die Größe des Markers ein Haufen senken, wir müssen es auch durch Pi teilen. Also, wir verwenden einen Schrägstrich und Pi als eine bequeme Methode in der Verarbeitung sowie nur PI, und ich werde es nur mit 0,5 multiplizieren. Lasst uns sehen. Also, was auch immer es ist, ich werde es einfach aufteilen, um es ein wenig zu skalieren. Versuchen wir es noch einmal. Alles klar, es wird ein bisschen rational, aber es ist immer noch außerhalb der Grenzen der Akzeptanz. Lassen Sie uns also eine weitere Dezimalzahl zum Skalierungsfaktor hinzufügen. Also, jetzt multiplizieren Sie es mit 0,05, und das sieht ziemlich gut aus. Ich kann Bereiche der Dichte ausmachen, und Gebiete, in denen es nicht so viele Meteoriten gibt. Ich werde sogar versuchen, das ein bisschen zu steigern. Sagen Sie, 0.1, und führen Sie es erneut aus. Ich überlasse diese Skalierung dir. Ich denke, ich gehe zurück zu 0.05. Das schien mir hier eine gute Menge an Details zu zeigen, während ich auch einen Haufen der Dichte dieser Meteoritenschläge kommunizierte. Also, ich glaube nicht, dass es eine richtige oder falsche Antwort gibt, um die richtige Skala hier zu finden, aber wir können ziemlich leicht zu klein gehen, wenn wir zu 0.01 gehen, ich denke, wir werden einfach anfangen, diese Dichte zu verpassen, viele der kleineren Meteoriten sind jetzt unsichtbar, während wenn wir zu 0.1 gehen, denke ich, dass viele dieser Bereiche einfach zu vollgestopft werden. Also fange ich an, Details im Mittleren Westen der Vereinigten Staaten zu verlieren und ich denke, ich möchte es ein wenig runterbringen, damit ich noch mehr davon sehen kann. Also, ich werde die Hälfte davon versuchen, 0,05. Was für meine Augen scheint die richtige Menge an Details in den kleineren Bereichen mit einem Teil der Dichte auszugleichen , die ich denke kommuniziert die Intensität der mexikanischen Meteoritenschläge. Dies ist Unleserlichkeit Entscheidung , um sicherzustellen, dass Sie den vollständigen Datensatz in Ihrer Visualisierung sehen können. 12. Markierungen benennen: Okay, wir haben alle Meteoriten, die auf unserer Karte zeichnen, sie sind alle richtig skaliert, wir haben unsere Mengen mit der richtigen Methodik in eine Fläche umgewandelt, und jetzt möchte ich nur einige davon beschriften. Und das Schlüsselwort hier ist, einige von ihnen, denn mit 34.000 Meteoriten auf unserer Karte würde es sowohl Verarbeitung als auch Illustrator wirklich verdrängen, um sie alle zu beschriften. Also, ich möchte eine Teilmenge beschriften, und wenn Sie sich erinnern, geben wir die CSV mit den größten Meteoriten an der Spitze aus. Also, wir können einfach sagen: „Für die ersten 20, lasst uns ein Etikett darauf setzen, oder sogar die ersten 10.“ Und wir werden wissen, dass dies die Top 10 Meteoriten in unserer Auswahl sind. Also, um das zu tun, werden wir hier eine weitere kleine Funktion verwenden, die eine if-Funktion ist, dies wird im Grunde nur eine Ausgabe testen und sehen, ob wir etwas tun sollten. Dies ist ähnlich wie eine Vorwärtsschleife, wir werden sagen, wenn, und öffne parens schließen parens und öffne Klammer schließen Klammer, und ich möchte einfach nur sagen, wenn ich weniger als 11 ist, das gibt mir die, tatsächlich, wenn ich weniger als 10 ist, das mir die Top 10 Meteoriten-Größen geben sollte, und hier werde ich den Kennzeichnungscode setzen. Also, zuerst werde ich nur wollen, um den Text auf den Bildschirm zu setzen. Und es ist nicht so schwer, Text in die Verarbeitung hinzuzufügen, vorhersehbar verwenden wir eine Funktion namens Text, die definiert, was wir auf den Bildschirm stellen wollen, und wir müssen ihm nur sagen, was zu schreiben und wo es zu setzen. Wir haben diese Informationen bereits in unserem System. Also hat die CSV einen Namen, also und das ist in unserem mydata two D Array, und das ist in der ersten Position. Also, es wird mydata i in Position Null sein, und dann wird der nächste Parameter nur unser GraphLong sein, und der nächste wird GraphLat sein. Nun, ich werde das ausführen, aber es wird nur den Text direkt über unseren Marker setzen, also werden wir ihn wahrscheinlich versetzen wollen. Sie können auch sehen, dass es es in der gleichen Farbe wie der Meteorit zeichnet, also möchten wir das ändern. Ich werde diese in Schwarz zeichnen wollen. Also, wie wir das tun, ist, dass Sie nur eine weitere Zeile für die Füllung hinzufügen müssen, und ich werde sagen, füllen Sie es mit Null. Das Problem ist, dass diese Füllung jetzt innerhalb der vier Schleife ist, also bekomme ich einen Meteoriten in rot gezeichnet, wenn ich das mache, und alle anderen werden schwarz gezeichnet. Vielleicht können wir das sehen. Nein, ich kann den roten nicht sehen. Aber jetzt ist alles schwarz gezeichnet. Also, was ich tun muss, ist diese Füllbeschreibung in die vier Schleife zu verschieben, so dass jedes Mal, wenn es von vorn beginnt , meine Meteoriten auf das halbtransparente Rot gesetzt werden, und wenn es dann zum Textbereich kommt, es setzt es auf schwarz gefüllt. Wenn ich das noch einmal durchführe, werden hoffentlich die Ergebnisse durchkommen, großartig. Wir haben schwarze Etiketten auf unseren halbtransparenten roten Meteoriten. Jetzt möchte ich all diese Etiketten von den Kreisen entfernen, damit ich sie mit einer Linie an den richtigen Meteoritenschlag anbringen kann. Wir können das einfach tun, indem wir einen Offset angeben, und eines der netten Dinge ist, dass wir bereits die Größe jedes dieser Kreise in dieser Iteration kennen. Also, ich werde sagen, ich möchte es durch GraphLong plus die Markierungsgröße plus 100 versetzen, sehen Sie, ob das genug ist. Okay, das sieht aus wie zu viel, also, vielleicht mache ich es einfach um 30, wir werden das für die Größe ausprobieren. Wirklich Mikro-Größe. In Ordnung. Es scheint vernünftig zu sein. Zeichnen wir nun eine Linie, die das Textstück mit dem Meteoriten verbindet. Ich möchte meine Linie nicht mit Null füllen, ich möchte ihr tatsächlich einen Strich geben, also werde ich sagen, keine Füllung, und ich möchte, dass mein Strich schwarz ist. Also, dies wird ein Schlaganfall von Null sein. Und wenn ich diese Schleife wieder anfange, möchte ich diesen Schlaganfall nicht verwenden. Also, oben oben werde ich keinen Schlaganfall sagen müssen. Zeichnen einer Linie ist ungefähr so einfach wie das Zeichnen einiger dieser anderen Formen. Wir werden nur sagen, dass ich eine Linie will, und dies wird zwei Messungen, die Startposition x und y und die Endposition x und y nehmen die Startposition x und y . In diesem Fall wissen wir, dass wir es bei GraphLong plus der Markierungsgröße und GraphLat starten möchten . Also fügen wir hier die Markierungsgröße hinzu, so dass sie am Rand des Kreises beginnt, ich kann es vorerst ausziehen, damit wir sehen können, wie das auf die Mitte des Kreises zeigt, wenn wir es nicht benutzen. Dann wird der Endpunkt wieder GraphLong sein, plus die Markergröße und GraphLat. Mal sehen, was das bewirkt und wie wir es anpassen müssen. Das werde ich sicher. Es läuft also ein wenig in unseren Text, und er läuft in die Mitte des Markers. Also, ich möchte diese Linie dazu bringen, sich einfach mit dem Rand unseres Markers zu verbinden, so können Sie in einigen dieser dichteren Bereiche sehen, welcher Kreis beschrieben wird. das zu tun, werde ich die Markergröße über zwei hinzufügen, um das zum Laufen zu bringen. Also muss ich es durch zwei teilen, sonst wird es der Durchmesser des Kreises sein. Das ist großartig, wir haben jetzt eine Verbindung zum Rand. Und ich möchte den Text einfach etwas nach rechts bewegen, und ein bisschen nach unten, das sollte unsere Verbindung komplett machen. Also, der Text, den ich ihm ein wenig Polsterung geben werde, wie fünf Pixel, und den Graphenbreitengrad, und geben Sie ihm ein weiteres sagen fünf Pixel, und Sie können diese Werte optimieren, um es dorthin zu bringen, wo es bequem aufsteht, Es sieht ein wenig niedrig aus für meine Augen, also werde ich diese fünf zu vier ändern, und jetzt sieht das ziemlich gut aus. Die Zeile und der Text verbinden sich alle mit unseren Meteoriten, und lassen Sie uns ein wenig Code hinzufügen, damit wir das als PDF herausbekommen können. 13. Erstellen einer PDF-Datei: Ok. Wir sind alle bereit. Wir haben alle unsere Kreise im richtigen Maßstab in der Verarbeitung gezeichnet, wir haben Textbeschriftungen, die mit unseren Markern in einer großartigen Weise verbunden sind. Der nächste Schritt ist, wie wir das in eine PDF-Datei bekommen, damit wir es in Illustrator bringen und ein paar letzte Verbesserungen vornehmenkönnen und ein paar letzte Verbesserungen vornehmen oder es weiter in InDesign oder Photoshop bringen können. Wir werden eine Bibliothek benötigen, um dies zu tun, und dies kommt automatisch mit der Verarbeitung. Sie müssen nur ein kleines bisschen Code unter Bibliotheken hinzufügen. In der Tat können Sie es einfach unter dem Skizzenmenü in der Verarbeitung tun. Wenn Sie die Import-Bibliothek sagen, gibt es hier eine PDF-Datei, und es wird in den richtigen Code plop. Oder Sie können es einfach aus der Referenzdatei kopieren. Wir sagen, importieren, processing.pdf, und jetzt haben wir Zugriff auf die Tools erforderlich, um uns ein PDF zu speichern. Der Rest des Codes dafür, wird rund um unseren Ziehbereich gehen. Also, alles, was wir tun müssen, ist zu sagen, beginnen Sie die Aufnahme am Anfang der Ziehung und dann die Aufnahme am Ende. Im Start-Aufnahme-Code sagen wir ihm einfach, was wir wollen, dass unsere PDF benannt wird. Also, sagen wir beginnen Aufnahme oder Aufnahme beginnen, und schließen Klammern, setzen Sie in diesem Semikolon und wir wollten dies als PDF speichern, so, das ist der erste Parameter, und der zweite ist genau das, was Sie es nennen möchten. Ich werde es meteorStrikes.pdf nennen. Stellen Sie sicher, dass das in Anführungszeichen steht, und am Ende unserer Zeichenschleife werden wir nur sagen, End-Record, es ist so einfach wie diese Funktion, und ich werde nur eine kleine Konsolenausgabe hier hinzufügen, so dass Ich weiß, dass das PDF mit dem Speichern fertig ist, und das wird nur etwas sein, das PDF gespeichert sagt. So, Printlin und PDFs gespeichert. Dies ist nur eine kleine hilfreiche Sache für mich zu wissen, dass ich überprüfen kann, und es ist sicher, das PDF zu öffnen. Also, es ist gelaufen. Ich sehe in der Konsole, es sagt PDF gespeichert. Ich werde diese Skizze schließen, und wenn ich zu seinem übergeordneten Ordner gehe, werden Sie jetzt sehen, dass ich dort ein 1,1 Megabyte PDF namens Meteorschläge habe. Ich kann es in der Vorschau öffnen, und es sieht ziemlich gut aus. Ich werde versuchen, dies jetzt in Illustrator zu öffnen und sehen, was ich ändern muss, wenn überhaupt, und wie ich das einfach ein bisschen besser aussehen lassen kann. Ich würde gerne ein paar schönere Schriften geben als die Standardschriftarten, die ich in der Verarbeitung bekomme, und ich könnte einen Titel hinzufügen oder die Farben ändern. Ich habe es jetzt in der Verarbeitung geöffnet. Es wird eine kleine Sache geben, die ich glaube, ich werde mich ändern wollen. Standardmäßig werden bei der Verarbeitung alle Texte umrissen, wenn sie sie eingebracht werden. Wenn Sie also in Illustrator in den Gliederungsmodus wechseln, indem Sie Befehl Y drücken, können Sie sehen, dass dies kein Live-Text mehr ist, es war alles Umriss. Also, wenn ich einen Aspekt davon ändern möchte, muss ich ein paar weitere Codezeilen in der Verarbeitung hinzufügen, um es Live-Text zu machen. Hoffentlich können Sie einige der Details sehen, die wir in diesem PDF haben, es ist einfach ziemlich phänomenal, die Dichte, die erstellt werden kann. Hier in Saudi-Arabien haben wir gerade eine Menge Meteoriten-Streiks. Was das bedeutet, liegt an, dass Sie sich entscheiden, tiefer zu erkunden. Sind sie gut darin, sie dort zu finden, oder neigen sie dazu, eine Menge Meteoriten zu bekommen? Verarbeitung kann Dinge als PDF oder JPEG mit verschiedenen Code-Bits speichern, aber weil wir daran interessiert sind, dies in Illustrator zu bringen und ein wenig zu bereinigen, haben wir diesen PDF-Code importiert und so eingestellt, dass er Art und Weise. Dies ist eines der Dinge, die ich an der Verarbeitung wirklich mag, ist, dass ich für einen Grafikdesigner, der in der Arbeit im Druck durchdrungen , Vektoren will, ich will keine JPEGs oder PNGs. Um diesen Typ live zu bekommen, gibt es noch ein paar Bits, die wir hinzufügen müssen. Wir müssen einen neuen Container hinzufügen, der als P-Schriftart bezeichnet wird. Ich werde es nur F nennen, und hier wird die Schrift, die wir definieren, leben und in der Lage sein, Live-Typ in unserem PDF auszugeben. In unserem Setup, dem Code, den wir gerade einmal ausführen, werde ich jetzt F definieren. Dies wird eine Funktion namens CreateFont sein, und Sie können jede Schriftart verwenden, die auf Ihrem Computer geladen ist. Ich werde Avenir verwenden, weil ich denke, dass Mac es standardmäßig bekommen. Also, das sollte für alle funktionieren und sieht ein bisschen besser aus als die Standardschriftart, die wir zuvor verwendet haben. Also, der Weg zu referenzieren ist in diesem Fall, indem man dann den Namen der Schriftart und das Gewicht sagt, das wir wollen. Ich will Avenir Medium, und ich will, dass es Größe 12 hat. Also, ich sollte diese Schriftart einrichten. Jetzt muss ich nur angeben, dass ich es in meiner Grafik verwenden möchte. Ich muss einen anderen Textmodus verwenden, damit er nicht alles umreißt. Dies ist diese eine Zeile namens Textmodus, und der Code für die Art und Weise, wie wir es behandeln wollen, als Modell. Ich denke, das sollte es tun. Eine weitere Zeile darüber, wo wir den Text angeben, der geschrieben wird, wir sagen, wir wollen diese Schriftart verwenden, die ich definiert habe. Also, nur eine ziemlich einfache Zeile hier, Textschriftart F. Hoffentlich, das wird es tun. Lass es uns rennen. Dies wird also die Skizze erneut ausführen, die PDF-Datei erneut über unsere alte speichern, und dann bringen wir sie in Illustrator und stellen sicher, dass alles richtig funktioniert. Ich sehe jetzt meine Skizze, dass die Avenir-Schrift verwendet wird. Also, die Dinge sehen ein bisschen mehr designy aus, und ich werde dieses PDF öffnen, das es mir in Illustrator gegeben hat. Wechseln Sie dann erneut in den Vorschaumodus. Ich kann jetzt sehen, dass der Typ gefüllt ist, und wenn ich zum Textwerkzeug wechseln, kann ich es auswählen und ich kann Dinge ändern. Also, das sieht gut aus. Ok. Jetzt haben wir alles in Illustrator, unser Text ist editierbar, und wir können weitergehen und spielen, um einige dieser Typen zu optimieren, einige Probleme zu beseitigen, die in unserer Skizze auftreten könnten , und einige der Farben zu optimieren. 14. Bereinigen: In Ordnung. Wir sind jetzt hier in Illustrator. Wir haben dieses schöne PDF, das wir mit all unseren Meteoritenschlägen gespeichert haben. Wir haben ein paar Etiketten. es jetzt betrachten, könnten wir wahrscheinlich noch ein paar weitere hinzufügen. Also, wenn Sie einfach zu Verarbeitung gehen möchten, können Sie die Anzahl der Etiketten von 10 hier auf 20 ändern. Ich denke, wir werden etwas bekommen, das ein bisschen mehr Reichtum hat , das einfach wieder in Illustrator einfallen wird. Ja. - Großartig. Öffnen Sie unser PDF in Illustrator erneut. Also, ich habe 20 Etiketten auf dieser Karte. Das erste, was Sie in Illustrator bemerken, wenn Sie diese PDF-Datei betrachten, ist, wenn Sie auf diese Grafik klicken, erhalten Sie nur die Grenzen dieses äußeren Rechtecks, und eines der Dinge, die Verarbeitung tut, ist, dass es eine Kartenmaske über die gesamte Ausgabe. Das erste, was ich mache, wenn ich in Illustrator gehe, ist dass ich diese Maske nur entfernen muss. Also, unter Clipping Mask, unter Objekt, werde ich nur sagen, die Maske loslassen, und jetzt, wenn ich meine Grenzen wieder auswähle und sie lösche. Mal sehen. Es sieht so aus, als hätte ich eine Maske freigegeben, aber das war nur auf der Karte. Jetzt werde ich nur alle auswählen und wieder Clipping Mask sagen, Release. Also, dies sollte mir erlauben, jetzt alles auszuwählen. Ja, ich habe meine SMS. Ich habe meine Etiketten. Also, indem ich alle auswähle und unter dem Objekt-Menü besagt Clipping Mask Release, kann ich auf alle verschiedenen Teile dieser Karte zugreifen, die ich erreichen möchte. Also, alles ist jetzt bequem eine andere Farbe in Illustrator, und ich finde das wirklich nützlich, weil wir jetzt die Dinge wieder zusammenfassen können. Wir haben unseren Hintergrund in einer grauen Farbe. Wir haben die Karte, die weiß ist, aber sie ist fragmentiert. Wählen wir also ein Stück der Karte und wählen Sie im Menü Auswählen einfach die gleiche Farbe aus. Jetzt werden wir diese gruppieren, indem wir auf Befehl G drücken. Also, ich habe meinen Hintergrund, es ist zugänglich. Die Karte ist zugänglich. Ich werde den gleichen Prozess für die Meteoriten, die Etiketten und die Linien machen. Also, ich wähle einen Meteoriten aus. Sagen Sie „Auswählen“, „Gleiche“, „Füllung“ und „Kontur “, und ich kann sie gruppieren. Ich nehme mir ein Stück Text. Wählen Sie, Gleiche, Füllen und Kontur, gruppieren Sie sie und greifen Sie die Linien und tun Sie das Gleiche. Großartig. sind meine fünf verschiedenen Komponenten wirklich einfach auswählbar und editierbar. Das nächste, was Sie vielleicht bemerken, ist, dass diese Datei ein RGB ist. Dies wird in Ordnung sein, wenn Sie zur Bildschirmausgabe gehen, aber ich denke im Allgemeinen über Farben in einem CMYK oder einem gesendeten Druck nach. Also werde ich jetzt alles in CMYK ändern , um die Dinge ein bisschen einfacher zu machen. Sie können sehen, dass es sofort eine kleine Farbverschiebung vom RGB-Rot zu einem CMYK-Rot gibt. Aber ich will eigentlich nicht einmal, dass diese Meteoriten eine rote Farbe haben. Ich würde ihnen lieber etwas machen, das eher nach meiner Ästhetik aussieht. Ich mag einen Bluegreen. Also, ich werde für Cyan gehen, sagen 80 und fügen Sie 30 gelb und da gehen wir. Wir sind an einem netteren Ort. Wir könnten sogar die Transparenz bearbeiten, wenn wir es wollten. Wenn wir mit dem, was die Verarbeitung uns gegeben hatte, nicht zufrieden wären. Wenn Sie zu Fenster, Transparenz in Illustrator gehen , sehen Sie, dass im Moment alles auf 100 eingestellt ist. Das ist für die ganze Gruppe. Wenn wir die Gruppierung aufheben, erhalten wir Zugriff auf die einzelnen Komponenten, und sie sind alle auf eine Deckkraft von 20 Prozent festgelegt. Also, vielleicht ändere ich das auf 30. Sie könnten es sogar bei 100 Prozent Deckkraft betrachten, aber ich denke, was Sie feststellen werden, ist, dass ein Großteil der Details , die wir zuvor genossen haben, jetzt verschwindet. Wir erhalten diese solide Karte, auf der Sie einige der zugrunde liegenden Aspekte nicht sehen können. Also, wahrscheinlich, ist irgendetwas unter 50 Prozent am besten für diese Aufgabe. Ja, 50 ist etwas dunkel für meinen Geschmack. Ich werde es runtertreten und diese jetzt wieder in eine große Auswahl gruppieren. Der Text ist jetzt in Avenir. Ich kann sehen, dass es tatsächlich ein bisschen hinter ein paar dieser Meteorangriffe fällt. Wenn Sie hier hineinzoomen, sehen Sie, dass einige von ihnen oben fallen. Also möchte ich diese Auswahl in den Vordergrund verschieben. Mal sehen, Objekt anordnen, nach vorne bringen. Ok. Also, jetzt ist unser Text auf der Vorderseite. Ich habe auch ein paar Kollisionen im Text passiert, also werde ich beide die Schrift in etwas ändern wollen, das mir ein bisschen mehr als Avenir gefällt, und ich werde einige der Etiketten bewegen wollen , die kollidieren miteinander. Also, zuerst, wählen wir diese Typgruppe. Ich war vor kurzem ein Fan dieser neuen Schrift namens Input. Es ist eine kostenlose Schrift, die von Font Bureau angeboten wird. Es ist wirklich gut für die Textbearbeitung und hat eine informative Neigung, die ich mag. Da diese schmalen Gewichtungen, die auch besser in der Datenvisualisierung funktionieren, weil Sie mehr Höhe aus Ihren Schriften erhalten können , wenn sie ein bisschen komprimiert sind. Also, ich werde dies zu Input Sans Compressed wechseln, in der regulären Gewichtung. Es ist gerade ein ziemlich schwarzes Schwarz. Wenn man sich den CMYK anschaut, ist er ziemlich schwer. Also, das ist von der Konvertierung von RGB, also werde ich es einfach auf 100 Prozent K oder 100 Prozent Schwarz setzen , ohne dass irgendwelche der anderen CM und Y Komponenten dazu sind. Das sieht gut aus. Diese Linien sind auch ein bisschen dick und sind auf dieses wirklich, wirklich sattes Schwarz gesetzt, das für unsere Bedürfnisse zu dicht ist, also setzen Sie das auf ein richtiges Schwarz und ändern Sie den Strich von 1,2 auf einen halben Punkt, und ich werde es ein wenig mehr geben Leichtigkeit und es wird nicht so ablenken von einigen der Informationen, die wir hier zu repräsentieren versuchen. 15. Typografie: Das letzte Problem, das ich hier habe, sind zwei Orte, an denen diese Etiketten miteinander kollidieren. Also, was ich tun will, ist, einfach die ganze Sache umzudrehen. Da alle diese Linien gruppiert sind, muss ich zum geöffneten Pfeilwähler gehen, dem Gruppenauswahlwerkzeug, ich eine dieser Linien greifen kann, auch sehen, dass diese Linien hinter den Meteoriten sitzen. Also, ich möchte dasselbe tun, was ich mit dem Text gemacht habe, und diese ganze Gruppe den ganzen Weg nach vorne bringen. Also, ich werde das mit dem Objekt tun, arrangieren und nach vorne bringen. Also, wenn ich zurück zum Gruppenauswahlwerkzeug gehe, werde ich diese eine Zeile greifen, und indem ich Shift gedrückt halte , werde ich ein Stück Typ greifen, und ich werde das an den rechten Rand des Meteorit, mit dem ich es zu tun habe. Dann muss ich nur die Ausrichtung dieses Typs von links nach rechts ausgerichtet mit dem Absatzwerkzeugändern von links nach rechts ausgerichtet mit dem Absatzwerkzeug und bis zum Rand der Linie schleudern. Eines der netten Dinge an der Verarbeitung ist, dass die Messungen gleich bleiben, wenn Sie in Illustrator kommen. Während es sich also um Pixel in unseren Messungen handelt, werden sie tatsächlich in Punkte in Illustrator übersetzt. Also, ich denke, der Abstand, den ich für den Versatz von der Linie zum Typ hatte , war fünf Punkte, und Sie können sehen, dass, wenn ich über eine der Beschriftungen zu den Linien gehe, sein Versatz fünf beträgt. Also, wenn ich nur mein Label, fünf Punkte nach links, wird es in genau der richtigen Position sein wie alle anderen, und ich werde nur über dieses andere Etikett hier bewegen. Eigentlich habe ich, sieht so aus, als wäre ich zwei gegangen, um hierher zu ziehen. Sie kollidieren alle miteinander. Mit dem Gruppenauswahlwerkzeug wähle ich diesen Text und die damit verknüpfte Linie und verschiebe ihn an den rechten Rand des Meteors. Es ist diese äußerste, mal sehen, ob wir es richtig haben, denn die Linie verbindet sich mit dem äußersten linken Rand des Kreises und ändert den Text nach rechts, verschiebt ihn an den Rand der Linie und schleudert ihn dann über fünf Pixel, 1-2-3-4-5. Jetzt können wir sehen, dass unsere Optionen zum Anpassen einer Beschriftung die linken und rechten Iterationen nicht mehr haben, also brauchen wir noch eine kleine Optimierung, damit es für den Morito-Meteoritenschlag richtig funktioniert . Also, wenn ich die Linie und das Etikett packe, werde ich es nach unten verschieben. Es muss zusammen mit diesem kleineren Kreis hier drinnen gehen. Also werde ich nur eine weitere Iteration zu unseren Beschriftungsoptionen hinzufügen, wo ich diese Linie drehe und das Etikett direkt daneben lege. Also, das geht hier, und das Morito-Label kann entweder daneben oder darunter gehen. Ich denke, ich ändere es, um zentriert ausgerichtet und schieße es fünf Pixel unterhalb dieser Linie. Ich denke, das hat alle unsere Ausgaben von der Verarbeitung bereinigt, und das letzte, was ich tun möchte, ist, meiner Grafik einfach einen Titel zu geben. Ich denke, eines der beeindruckendsten Dinge an diesem Datensatz ist die schiere Größe des Datensatzes. Also, das ist ein guter Ort, um es zu nennen, um über die gesamte Breite dieser Grafik zu sprechen, und das ist, dass sie 34.000 Meteoritenschläge enthält. Also, ich werde einfach wieder dorthin gehen, wo wir diesen Originaldatensatz angefangen haben , um genau zu zählen, wie viele wir vertreten haben. Ich kann sehen, dass es 34.066 Reihen hat, was bedeutet, dass 34.065 Meteoriten vertreten sind, und ich brauche nur ein neues Stück Typ, um das auszulegen, 34.065 Meteoritenschläge. Ich lege das in eine Ecke, wo es nicht viel gibt, was es verdunkeln wird, und gebe ihm eine größere Größe, so dass es sofort sichtbar ist und hoffentlich Sie in diese sehr detaillierte Karte des Globus ziehen wird . 40 Punkte sollten es tun. - Ja. Geben Sie ihm ein wenig Polsterung, und ich denke, wir sind in guter Form. Sie können diese nun als Illustrator-Datei speichern, Sie können sie in Photoshop bringen, Sie können sie als PDF, PNG oder JPEG exportieren und sie dort posten, wo immer Sie wollen, und hoffentlich teilen Sie die endgültige Ausgabe auf die Skillshare Seite. 16. Schlussbemerkung: Also, in diesem Beispiel denke ich, es wäre schwer, mit der Farbe falsch zu gehen. Sie wollen etwas, das sicherlich Sichtbarkeit haben wird, aber wir codieren nur für eine Art von Ereignis hier. Wahrscheinlich wird die Verwendung von Gelb nicht genug Kontrast oder Auswirkung haben, und wir möchten uns von der Verwendung von Grauen fernhalten , weil wir das verwenden, um die Basiskarte zu definieren. Also, ich denke, etwas, das hell ist und gut mit Transparenz funktioniert, so dass es sich zu etwas Solidem und Wirkungsvollem aufbaut, ist gut. Dann, wenn wir Typ verwenden, müssen Sie über die Skala nachdenken, bei der dies gesehen werden wird und wie ablenkend es von den Informationen sein wird, die Sie wirklich kommunizieren möchten. Das Herz und die Seele dieser Seite sind alle Meteoritenschläge. Also, wenn der Typ zu groß oder zu pingelig ist, wird er wirklich die Daten überwältigen, die wir ausdrücken wollen. Also, ich verwende gerne etwas, das eine gleichmäßige Textur hat, die kondensiert werden kann, weil dies uns viel mehr Wirkung in einem kleinen Raum geben kann . Ja, und im Allgemeinen bleiben Sie mit dem Ziel, Lesbarkeit zu erreichen. Also, es sei denn, ich kodiere für etwas, so wahrscheinlich nur schwarzer Text. Wenn ich versuche, auszudrücken, was für ein Etikett oder einen Schlüssel, dann könnte ich die Farben ändern. Dies ist ein Ansatz, der wirklich den Daten entspricht. Wenn Sie sich diese Tabelle ansehen und sich diese Karte ansehen, haben wir sicherlich die meisten der dort gezeigten Informationen dargestellt. Wir haben den Breiten- und Längengrad jedes einzelnen dieser Meteoritenschläge und stellen auch ihre relativen Skalen dar. Darüber hinaus haben wir sogar einige von ihnen etikettiert und Sie können weiter gehen und Sie könnten diese durch gefunden oder gefallen codieren. Das ist etwas, das man wirklich die Ästhetik zurückkoppeln muss, um diese Informationsdichte vermitteln zu können, weshalb es hier keine dekorativen Elemente gibt. Ich denke, ich würde nur vom Kern dessen ablenken , was wir hier kommunizieren wollen. Das ist etwas, was jemand viel Zeit damit verbringen könnte , die Nuancen zu analysieren, wo diese Ereignisse passieren. Ich denke, dass dieser Datensatz wirklich überzeugend ist, als Karte zu erkunden , weil Sie diese wirklich großen Ereignisse sehen, einige von ihnen in der Nähe, wo wir leben, andere, die wirklich, wirklich weit entfernt sein könnten und ich denke, was hier interessant ist ist es auch etwas von einer Karte für die Bevölkerungsdichte wird. Es fängt an zu zeigen, wo Menschen leben. Wenn man Sibirien anschaut oder den Regenwald anschaut, sieht man dort keinen Meteoriten. Aber ich denke, es ist wahrscheinlich offensichtlich, dass dies nicht, weil sie dort nicht passieren, sondern nur weil sie nicht wiederhergestellt wurden oder sie dort nicht gesehen wurden. Also, für mich ist es fast so, als wäre es ein Vorgeschmack auf das, was tatsächlich passiert. Wir haben 34.000 bekannte Meteoritenschläge, aber denken Sie an all die, die im Ozean passieren oder in Sibirien passieren, von denen wir nicht einmal wissen. Das ist es, was für mich ziemlich überzeugend ist, diese Karte zu sehen.