3e:null 3f:["$","title",null,{"children":"Der SVG-Pfad | CAS Datenvisualisierung | Observable"}] 45:T571,Für gerade Linien haben wir folgende Eigenschaften: - `M`: Starte die Linie bei den absoluten Koordinaten x,y (move to) - `m`: Verschiebe den Startpunkt nach rechts um x oder nach unten um x - `L`: Zeichne eine gerade Linie zu den absoluten Koordinaten x,y (line) - `l`: Zeichene eine Linie zu einem Punkt, der x Pixel rechts und y Pixel weiter unten (oder bei negativen Werte) weiter oben steht - `H`: Zeichne eine horizontale Linie zu exakte x-Koordinate (horizontal) - `h`: Zeichne eine Linie x-Pixel nach rechts - `V`: Zeichne eine vertikale Linie zu exakte y-Koordinate (vertical) - `v`: Zeichne eine Linie y-Pixel nach unten - `Z`: Zeichne eine Linie zurück zum Anfang ### Aufgabe - Spielt mit den verschiedenen Buchstaben und Zahlenwerten herum - Ihr könnt dafür auch das Notebook forken und weitere Inputfelder erstellen- - Zu zweit: Schaut euch den Datensatz im Anhang an und erstellt daraus eine Liniengrafik, verwendet dafür die Befehle M, H und V. Fügt noch eine x und y-Achse hinzu, beschriftet die Achsen Wir können natürlich mit Pfaden auch Kurven zeichnen, aber dann wird es schon ziemlich kompliziert. Im Normalfall berechenen wir Kurven mit der `d3.line()`-Funktion. ## Links - [Pfade bei Mozilla Foundation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) - [SVG Path: Ilustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/)46:[] 43:{"id":"449372dfeaeed8a5","slug":"der-svg-pfad","title":"Der SVG-Pfad","thumbnail":"00fa75daa1522c177cb753cc9c35451f76eaf781b43e2d4f4dfa33175711c905","access_level":"public","create_time":"$D2022-03-05T15:44:57.548Z","update_time":"$D2022-03-09T12:57:18.095Z","view_time":null,"first_public_time":"$D2022-03-09T12:18:45.939Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","bio":""},"version":840,"publish_version":840,"role":null,"authored":false,"authors":[{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null,"bio":"words, data and code"}],"members":[{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"editor"},{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"d9f31df1c36b96ef","slug":"webprogrammierung-basics","title":"2 Webprogrammierung Basics","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"titling":"auto","title":"Der SVG-Pfad","cells":[{"id":0,"value":"# Der SVG-Pfad","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"Ein SVG-Pfad kann so ziemlich alles. Alles, was nicht eine einfache Form wie ein Kreis oder Rechteck ist, kann mit einem Pfad gezeichnet werden. Das klingt grossartig, das Problem: Die Pfad-Syntax ist eher kryptisch. So sieht ein Pfad aus:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":830,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"

Lernziel

Appendix