Wikizone - Benutzerbeiträge [de]

D3.js - Tipps und Tricks

2019-09-03T16:42:42Z

84.136.110.214:

== Aktionen abhängig von den Daten ausführen ==

Will man beim Daten abarbeiten bestimmte Aktionen abhängig von den Daten Ausführen kann man in vielen Fällen eine anonyme Funktion einsetze oder man nutzt eine Filterfunktion:

Anonyme Funktion für ein HTML-Attribut.
<syntaxhighlight lang="javascript">
g.selectAll('g')
.data(root.descendants())
.enter().append('g')
.attr("class", "node")
.append('path')
.attr("display", function (d) { return d.depth ? null : "none"; }); // do not show root element
</syntaxhighlight>

Filterfunktion
<syntaxhighlight lang="javascript">
newSlice.filter(d => (d.depth > 2))
.on('click', d => {
d3.event.stopPropagation();
focusOn(d);
});
</syntaxhighlight>

== Text Label ausrichten ==
=== In Pie Chart Segmenten ===
Beispiel 1 - Als Speichen oder waagrecht oder tangential
<syntaxhighlight lang="javascript">
...
// Populate the <text> elements with our data-driven titles.
g.selectAll(".node")
.append("text")
.attr("fill","#FFF")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
.attr("dx", "-25")
.attr("dy", ".5em")
.text(function(d) { return d.parent ? d.data.name : "" });

...

function computeTextRotation(d) {
var angle = (d.x0 + d.x1) / Math.PI * 90;
// Avoid upside-down labels
//return (angle < 120 || angle > 270) ? angle : angle + 180; // labels as rims
return (angle < 180) ? angle - 90 : angle + 90; // labels as spokes
//return 0 // labels always horizontal
}
</syntaxhighlight>
Beispiel 2 - gebogener Text entlang des Kreisbogens

<syntaxhighlight lang="javascript">
const middleArcLine = d => {
const halfPi = Math.PI/2;
const angles = [x(d.x0) - halfPi, x(d.x1) - halfPi];
const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);
const middleAngle = (angles[1] + angles[0]) / 2;
const invertDirection = middleAngle > 0 && middleAngle < Math.PI; // On lower quadrants write text ccw
if (invertDirection) {
angles.reverse();
}
const path = d3.path();
path.arc(0, 0, r, angles[0], angles[1], invertDirection);
return path.toString();
};

...

newSlice.append('path')
.attr('class', 'hidden-arc')
.attr('id', (_, i) => `hiddenArc${i}`)
.attr('d', middleArcLine);

const text = newSlice.append('text')
.attr('display', d => textFits(d) ? null : 'none');

text.append('textPath')
.attr('startOffset','50%')
.attr('xlink:href', (_, i) => `#hiddenArc${i}` )
.style('stroke', '#fff')
.text(d => d.data.name);
</syntaxhighlight>

== Element anhängen statt einfügen ==
Standardmäßig verkettet man Elemente so dass das nächste immer ein Kind Element des vorigen ist.
Manchmal (z.B. bei Labels) möche man aber ein Element als Nachfolger nicht als Kind anlegen.

Dazu nutzt man ein selectAll um auf die vorher angelegten Elemente erneut zuzugreifen.

Beispiel
<pre>
g.selectAll('g')
.data(root.descendants())
.enter().append('g')
.attr("class", "node")
.append('path')
.attr("display", function (d) { return d.depth ? null : "none"; }) // do not show root element
.attr("d", arc)
.attr('id',function(d){return 'path_' + d.data.id})
.style('stroke', '#fff')
.style("fill", function (d) { return color((d.children ? d : d.parent).data.name)})
.on("click",toggleActive);

// Populate the <text> elements with our data-driven titles.
g.selectAll(".node")
.append("text")
.attr("fill","#FFF")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
.attr("dx", "-25")
.attr("dy", ".5em")
.text(function(d) { return d.parent ? d.data.name : "" });
</pre>

D3.js - Data Handling Basics

2019-09-03T10:08:34Z

84.136.110.214: /* Data Patterns */

== Data Joins ==
https://www.d3indepth.com/datajoins/
D3.js kann Daten mit Knoten im Dom verbinden (join). Durch diese enge Verbindung von grafischen HTML Elementen und den Daten wird die Darstellung sehr effizient.

Hat man 3 Daten, kann man diese z.B. mit 3 Divs verarbeiten.

Dazu gibt es die Funktionen Enter und Exit, die fehlende oder überschüssige Knoten hinzufügen / entfernen.

== Datenformate ==

== Enter / Exit Funktion ==
https://www.d3indepth.com/enterexit/

== Data Patterns ==
Beispiele für Data Handling
=== Beispiel - Verständnis für Generatoren ===
Die Generatoren für Basis Shapes funktionieren alle auf ähnlich. Hier einfache Beispiele.

Linie (einzelnes Segment)
<pre>
var lineData = [
{'x': -5, 'y': 5},
{'x': 5, 'y': -5},
];
var lineGenerator = d3.line(
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var linePath = lineGenerator(lineData);
console.log("lineGenerator ",linePath); // svg path string für die Linie
</pre>

LInie mit radialen Angaben (Radius und Winkel)
<pre>
var lineData = [
[0, 80],
[Math.PI * 0.25, 80],
[Math.PI * 0.5, 30],
[Math.PI * 0.75, 80],
[Math.PI, 80],
[Math.PI * 1.25, 80],
[Math.PI * 1.5, 80],
[Math.PI * 1.75, 80],
[Math.PI * 2, 80]
];
var lineGenerator = d3.radialLine();

var linePath = lineGenerator(lineData);
console.log("lineGenerator ",linePath);

</pre>
Beispiel für Mittelspeiche bei Bogensegmenten (Gradangaben im Bogrenmaß)
<pre>
// function to calculate middle Spike for textpositioning (spike direction)
const middleSpikeLine = d => {
const pi = Math.PI;
const halfPi = pi/2;
const angles = [x(d.x0), x(d.x1)]; // remember x is circular scale...
const r = Math.max(0, (y(d.y0) + y(d.y1))); // ...y is radial scale
const middleAngle = (angles[1] + angles[0]) / 2; // this is rad not grad
innerRadius = Math.max(0, y(d.y0));
outerRadius = Math.max(0, y(d.y1));

var lineData = [
[middleAngle, innerRadius],
[middleAngle, outerRadius]
];
var lineGenerator = d3.radialLine();
var linePath = lineGenerator(lineData);
return linePath;
}
</pre>

D3.js - Data Handling Basics

2019-09-03T09:26:37Z

84.136.110.214: /* Data Patterns */

D3.js - Data Handling Basics

2019-09-03T09:26:11Z

84.136.110.214: /* Data Patterns */

D3.js - Data Handling Basics

2019-09-03T09:12:28Z

84.136.110.214:

D3.js

2019-09-03T06:37:51Z

84.136.110.214:

Datenvisualisierung interaktiv, Karten, Charts etc.
== Links ==
https://d3-wiki.readthedocs.io
https://leanpub.com/D3-Tips-and-Tricks/read
http://techslides.com/over-1000-d3-js-examples-and-demos
https://christopheviau.com/d3list/gallery.html
https://github.com/d3/d3/blob/master/API.md#paths-d3-path API
https://www.dashingd3js.com/svg-paths-and-d3js Gute Einführungen mit SVG Grundlagen allerdings z.T. veraltet
https://www.dashingd3js.com/

== Basics ==
[[D3.js - Tipps und Tricks]]
=== Daten ===
[[D3.js - Data Handling Basics]]

=== Pie Charts & Doughnuts ===
https://bl.ocks.org/markarios/6b8b91e0c4ce77b4942659aace8d2d6c

== Hierarchische Daten ==
Hierarchische Daten sind Daten die sich als Baumstruktur darstellen lassen. Für die Darstellung bieten sich Sunburst, Icicle, Treemaps, Tidy Tree, Radial Tidy Tree, Force Directed Tree... an
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/
https://observablehq.com/collection/@d3/d3-hierarchy

=== Sunburst ===
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Sunburst Tutorial
https://codepen.io/kholja/pen/xxKgZVb Sunburst mit Tooltips (JSON Data)
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - zoomable sunburst v4
http://bl.ocks.org/hdngr/bb548a2b55e8a53f06ec - color zoomable sunburst

== Tutorials ==
[[Interaktive Karten mit d3.js]]
https://www.tutorialsteacher.com/d3js/
=== Partition Sunburst ===
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/ - allgemeine Infos / Einstieg
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - v4
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Davies Sunburst Tutorial v4
https://www.thegreatcodeadventure.com/d3-sunburst-diagram-tutorial/
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 Zoomable Sunburst v4

=== classed vs. attr("class","foo") ===
https://benclinkinbeard.com/d3tips/attrclass-vs-classed/

D3.js

2019-09-03T06:15:34Z

84.136.110.214:

Datenvisualisierung interaktiv, Karten, Charts etc.
== Links ==
https://d3-wiki.readthedocs.io
https://leanpub.com/D3-Tips-and-Tricks/read
http://techslides.com/over-1000-d3-js-examples-and-demos
https://christopheviau.com/d3list/gallery.html
https://www.dashingd3js.com/svg-paths-and-d3js Gute Einführungen mit SVG Grundlagen
https://www.dashingd3js.com/

== Basics ==
[[D3.js - Tipps und Tricks]]
=== Daten ===
[[D3.js - Data Handling Basics]]

=== Pie Charts & Doughnuts ===
https://bl.ocks.org/markarios/6b8b91e0c4ce77b4942659aace8d2d6c

== Hierarchische Daten ==
Hierarchische Daten sind Daten die sich als Baumstruktur darstellen lassen. Für die Darstellung bieten sich Sunburst, Icicle, Treemaps, Tidy Tree, Radial Tidy Tree, Force Directed Tree... an
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/
https://observablehq.com/collection/@d3/d3-hierarchy

=== Sunburst ===
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Sunburst Tutorial
https://codepen.io/kholja/pen/xxKgZVb Sunburst mit Tooltips (JSON Data)
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - zoomable sunburst v4
http://bl.ocks.org/hdngr/bb548a2b55e8a53f06ec - color zoomable sunburst

== Tutorials ==
[[Interaktive Karten mit d3.js]]
https://www.tutorialsteacher.com/d3js/
=== Partition Sunburst ===
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/ - allgemeine Infos / Einstieg
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - v4
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Davies Sunburst Tutorial v4
https://www.thegreatcodeadventure.com/d3-sunburst-diagram-tutorial/
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 Zoomable Sunburst v4

=== classed vs. attr("class","foo") ===
https://benclinkinbeard.com/d3tips/attrclass-vs-classed/

D3.js - Tipps und Tricks

2019-09-02T16:49:16Z

84.136.110.214:

D3.js - Tipps und Tricks

2019-09-02T16:26:22Z

84.136.110.214: Die Seite wurde neu angelegt: „== Aktionen abhängig von den Daten ausführen == Will man beim Daten abarbeiten bestimmte Aktionen abhängig von den Daten Ausführen kann man in vielen Fäl…“

D3.js

2019-09-02T16:19:29Z

84.136.110.214:

Datenvisualisierung interaktiv, Karten, Charts etc.
== Links ==
https://d3-wiki.readthedocs.io
https://leanpub.com/D3-Tips-and-Tricks/read
http://techslides.com/over-1000-d3-js-examples-and-demos
https://christopheviau.com/d3list/gallery.html

== Basics ==
[[D3.js - Tipps und Tricks]]
=== Daten ===
[[D3.js - Data Handling Basics]]

=== Pie Charts & Doughnuts ===
https://bl.ocks.org/markarios/6b8b91e0c4ce77b4942659aace8d2d6c

== Hierarchische Daten ==
Hierarchische Daten sind Daten die sich als Baumstruktur darstellen lassen. Für die Darstellung bieten sich Sunburst, Icicle, Treemaps, Tidy Tree, Radial Tidy Tree, Force Directed Tree... an
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/
https://observablehq.com/collection/@d3/d3-hierarchy

=== Sunburst ===
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Sunburst Tutorial
https://codepen.io/kholja/pen/xxKgZVb Sunburst mit Tooltips (JSON Data)
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - zoomable sunburst v4
http://bl.ocks.org/hdngr/bb548a2b55e8a53f06ec - color zoomable sunburst

== Tutorials ==
[[Interaktive Karten mit d3.js]]
https://www.tutorialsteacher.com/d3js/
=== Partition Sunburst ===
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/ - allgemeine Infos / Einstieg
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - v4
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Davies Sunburst Tutorial v4
https://www.thegreatcodeadventure.com/d3-sunburst-diagram-tutorial/
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 Zoomable Sunburst v4

=== classed vs. attr("class","foo") ===
https://benclinkinbeard.com/d3tips/attrclass-vs-classed/

Three JS

2019-09-02T16:18:05Z

84.136.110.214:

https://threejs.org/
https://threejsfundamentals.org/
https://threejs.org/editor/ (Szenen und Objekte erstellen und expportieren)

Three JS

2019-09-02T10:33:37Z

84.136.110.214: Die Seite wurde neu angelegt: „ https://threejs.org/ https://threejsfundamentals.org/“

https://threejs.org/
https://threejsfundamentals.org/

3D im Web

2019-09-02T10:33:13Z

84.136.110.214: /* Three JS */

== Formate ==
=== GLB / glTF ===
GLB ist die Binary Version von glTF 2.0. Das Format wird z.B. von Facebook für 3D Bilder verwendet. glTF ist quasi Standard Format für Web 3D (Stand 2019).

[[GLB / glTF]]
https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials/ - Facebook Manual

== Libraries ==
=== Three JS ===
[[Three JS]]
Aktuell beste Library für anspruchsvolle Aufgaben und interaktives 3D im Web (Stand 2019). Unterstützt unter anderem glTF
https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM Einführung in Three JS
https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2

== Fake 3D / 360 Grad ==
Oft reicht auch ein 360 Grad Skript das mehrere Bilder in unterschiedlichen Winkeln der Reihe nach oder interaktiv zeigt.
https://scaleflex.github.io/js-cloudimage-360-view/

Blender Animation Tipps

2019-08-26T16:20:27Z

84.136.110.214: /* Orbit / Camera Tracking / Camera Rig */

== Output Settings Film Einstellungen ==
Properties Editor > Output

== Keyframes ==
Objekt auswählen > i -> insert Keyframe
Spacebar -> Play Animation

== Kamera ==
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/camera_view.html
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/walk_fly.html#dview-fly-walk
=== Kamera Navigation ===

'''Move Active Camera to View'''
Object Mode > Ctrl-Alt-Numpad0
'''Roll'''
R - Rotation mode. Default rollt die Kamera (z-Achse) = camera “roll”.
'''Pan / Pitch / Yaw'''
R X X - Vertical Pitch: Enter object rotation mode / Wähle globale Achse X / Wähle lokale Achse X. Funktioniert auch mit anderen Achsen
R Y Y - Horizontal Pitch (Yaw)
'''Dolly'''
G MMB oder G Z Z
'''Sideways Tracking'''
G (X X / Y Y) -> you can use X twice or Y to get pure-horizontal or pure-vertical sideways tracking.

=== Walk / Fly ===

'''Walk Mode''' (WASD Steuerung)
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Walk Navigation

'''Fly Mode'''
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Fly Navigation

=== Orbit / Camera Tracking / Camera Rig ===
https://blender.stackexchange.com/questions/3476/how-can-i-animate-the-camera-in-a-perfect-circular-rotation-around-a-fixed-posit
https://www.youtube.com/watch?v=K02hlKyoWNI (Camera Rig)

Du kannst die Kamera einem Pfad folgen lassen, so dass sie dabei immer auf ein bestimmtes Objekt zeigt.

Shift A > Add Bezier Circle -> Dies ist der Pfad für die Kamera. Skaliere passend.
Shift A > Add Empty > Cube -> Dies ist das Objekt das die Kamera fixieren soll.
Select Camera
Alt + G / Alt + R -> setze Location und Rotation der Kamera auf 0
Select Camera und Empty (zuerst Camera)
Cmd p oder RM > Parent to Object > Häkchen bei keep transform

Mit Pfad verknüpfen über Constraint
Select Empty
Properties Contraint > Follow Path
Target = BezierCircle, Check Follow Curve, Fixed Position (Offset steuert Position)

Kamera Position über Constraint
Select Camera
Properties Constraint > Track to
Target = Objekt
Camera View
Objekt > Set Origin > Whatever is best -> Feinjustierung der Kamera

Die Kamera kann separat vom Empty Objekt, z.B. auf der z-Achse animiert werden. So sind coole Kranfahrten möglich.

== Tutorials ==
https://www.youtube.com/watch?v=zp6kCe5Kmf4&t=21s Grant Abbitt Animation Tutorial

Blender Animation Tipps

2019-08-26T15:32:07Z

84.136.110.214: /* Orbit / Camera Tracking / Camera Rig */

== Output Settings Film Einstellungen ==
Properties Editor > Output

== Keyframes ==
Objekt auswählen > i -> insert Keyframe
Spacebar -> Play Animation

== Kamera ==
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/camera_view.html
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/walk_fly.html#dview-fly-walk
=== Kamera Navigation ===

'''Move Active Camera to View'''
Object Mode > Ctrl-Alt-Numpad0
'''Roll'''
R - Rotation mode. Default rollt die Kamera (z-Achse) = camera “roll”.
'''Pan / Pitch / Yaw'''
R X X - Vertical Pitch: Enter object rotation mode / Wähle globale Achse X / Wähle lokale Achse X. Funktioniert auch mit anderen Achsen
R Y Y - Horizontal Pitch (Yaw)
'''Dolly'''
G MMB oder G Z Z
'''Sideways Tracking'''
G (X X / Y Y) -> you can use X twice or Y to get pure-horizontal or pure-vertical sideways tracking.

=== Walk / Fly ===

'''Walk Mode''' (WASD Steuerung)
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Walk Navigation

'''Fly Mode'''
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Fly Navigation

=== Orbit / Camera Tracking / Camera Rig ===
https://blender.stackexchange.com/questions/3476/how-can-i-animate-the-camera-in-a-perfect-circular-rotation-around-a-fixed-posit
https://www.youtube.com/watch?v=K02hlKyoWNI (Camera Rig)

Du kannst die Kamera einem Pfad folgen lassen, so dass sie dabei immer auf ein bestimmtes Objekt zeigt.

Shift A > Add Bezier Circle -> Dies ist der Pfad für die Kamera. Skaliere passend.
Shift A > Add Empty > Cube -> Dies ist das Objekt das die Kamera fixieren soll.
Select Camera
Alt + G / Alt + R -> setze Location und Rotation der Kamera auf 0
Select Camera und Empty (zuerst Camera)
Cmd p oder RM > Parent to Object > Häkchen bei keep transform

Mit Pfad verknüpfen über Constraint

== Tutorials ==
https://www.youtube.com/watch?v=zp6kCe5Kmf4&t=21s Grant Abbitt Animation Tutorial

Blender Animation Tipps

2019-08-26T15:28:52Z

84.136.110.214: /* Orbit / Camera Track */

== Output Settings Film Einstellungen ==
Properties Editor > Output

== Keyframes ==
Objekt auswählen > i -> insert Keyframe
Spacebar -> Play Animation

== Kamera ==
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/camera_view.html
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/walk_fly.html#dview-fly-walk
=== Kamera Navigation ===

'''Move Active Camera to View'''
Object Mode > Ctrl-Alt-Numpad0
'''Roll'''
R - Rotation mode. Default rollt die Kamera (z-Achse) = camera “roll”.
'''Pan / Pitch / Yaw'''
R X X - Vertical Pitch: Enter object rotation mode / Wähle globale Achse X / Wähle lokale Achse X. Funktioniert auch mit anderen Achsen
R Y Y - Horizontal Pitch (Yaw)
'''Dolly'''
G MMB oder G Z Z
'''Sideways Tracking'''
G (X X / Y Y) -> you can use X twice or Y to get pure-horizontal or pure-vertical sideways tracking.

=== Walk / Fly ===

'''Walk Mode''' (WASD Steuerung)
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Walk Navigation

'''Fly Mode'''
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Fly Navigation

=== Orbit / Camera Tracking / Camera Rig ===
https://blender.stackexchange.com/questions/3476/how-can-i-animate-the-camera-in-a-perfect-circular-rotation-around-a-fixed-posit
https://www.youtube.com/watch?v=K02hlKyoWNI (Camera Rig)

Du kannst die Kamera einem Pfad folgen lassen, so dass sie dabei immer auf ein bestimmtes Objekt zeigt.

Shift A > Add Circle -> Dies ist der Pfad für die Kamera. Skaliere passend.
Shift A > Add Empty > Cube -> Dies ist das Objekt das die Kamera fixieren soll.
Select Camera
Alt + G / Alt + R -> setze Location und Rotation der Kamera auf 0
Select Camera und Empty (zuerst Camera)
Cmd p oder RM > Parent to Object > Häkchen bei keep transform

Mit Pfad verknüpfen über Constraint

== Tutorials ==
https://www.youtube.com/watch?v=zp6kCe5Kmf4&t=21s Grant Abbitt Animation Tutorial

Blender Animation Tipps

2019-08-26T15:08:16Z

84.136.110.214: /* Kamera */

== Output Settings Film Einstellungen ==
Properties Editor > Output

== Keyframes ==
Objekt auswählen > i -> insert Keyframe
Spacebar -> Play Animation

== Kamera ==
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/camera_view.html
https://docs.blender.org/manual/en/latest/editors/3dview/navigate/walk_fly.html#dview-fly-walk
=== Kamera Navigation ===

'''Move Active Camera to View'''
Object Mode > Ctrl-Alt-Numpad0
'''Roll'''
R - Rotation mode. Default rollt die Kamera (z-Achse) = camera “roll”.
'''Pan / Pitch / Yaw'''
R X X - Vertical Pitch: Enter object rotation mode / Wähle globale Achse X / Wähle lokale Achse X. Funktioniert auch mit anderen Achsen
R Y Y - Horizontal Pitch (Yaw)
'''Dolly'''
G MMB oder G Z Z
'''Sideways Tracking'''
G (X X / Y Y) -> you can use X twice or Y to get pure-horizontal or pure-vertical sideways tracking.

=== Walk / Fly ===

'''Walk Mode''' (WASD Steuerung)
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Walk Navigation

'''Fly Mode'''
Mode: All modes
Hotkey: Shift-AccentGrave
Menu: View ‣ Navigation ‣ Fly Navigation

=== Orbit / Camera Track ===
https://blender.stackexchange.com/questions/3476/how-can-i-animate-the-camera-in-a-perfect-circular-rotation-around-a-fixed-posit
https://www.youtube.com/watch?v=K02hlKyoWNI (Camera Rig)

Du kannst die Kamera einem Pfad folgen lassen, so dass sie dabei immer auf ein bestimmtes Objekt zeigt.
Shift A > Add Circle
Select Camera > Shift Select Circle -> in dieser Reihenfolge
cmd p > Set Parent to Object
Es erscheinte ein gestrichelte Verbindungslinie von Kamera zu Kreis

== Tutorials ==
https://www.youtube.com/watch?v=zp6kCe5Kmf4&t=21s Grant Abbitt Animation Tutorial

Blender Animation Tipps

2019-08-26T14:49:15Z

84.136.110.214: /* Walk / Fly */

Blender Animation Tipps

2019-08-26T14:48:55Z

84.136.110.214:

Blender Texturing Tipps

2019-08-26T12:30:32Z

84.136.110.214:

Siehe auch
[[Blender Material Tipps]]
https://blender.stackexchange.com/questions/56610/how-to-tile-textures-in-cycles - Tile Sizing

Gute Texturen für 3D bieten außer dem Texturbild Normalmaps, Gloss etc.

== Quickstart ==
Ein Material mit Textur basiert zunächst auf einem normalen Material. Im Beispiel starten wir mit einer sehr üblichen Kombi aus Diffuse Shader und Glossy Shader, die mit einem Mix Shader zusammengefasst werden.
=== Basis Textur ===
Im Shade Editor hängt man dann an den '''Color Eingang des Diffuse Shader''' die Textur:
Add > Texture > Image Texture

=== Normalen ===
Gute Texturen liefern eine '''Normalen Textur'''. Die Farbwerte dieser stellt man auf
Color Space > Non Color
und leitet diese dann in einen Konverter
Add > Vector > Normal Map
Den Ausgang dieser hängt man an den Normals Eingang der Diffuse und Glossy Shader

=== Roughness ===
Die Roughness oder Glossy Textur stellt man ebenfalls auf Non Color und leitet sie in den Roughness Eingang des Glossy Shaders.
Roughness Image -> Glossy Textur
Dazwischen kann man auch noch einen '''Color Ramp Converter''' schalten. Mit diesem kann man den Effekt der Textur sehr differenziert steuern.

=== Bump Map / Normal Map===
In der Regel reicht eines davon. Daumenregel: Texturen wie Holzböden, Metalle, feine Strukturen mit Normal Map. Grobe Unebenheiten, Erde, Matsch mit Displacement Map (Bump Map)

=== Ambient Oclusion ===
=== Reflections ===

== UV Mapping ==
Für 3D Objekte macht man i.d.R. ein Unwrapping. D.h. man erzeugt eine 2D Projektion der Oberfläche auf die man dann die 2D Textur aufbringen kann. Die erzeugte 2D Oberfläche sieht man im UV - Editor Mode:
* Zusätzliches Fenster mit uv Editor öffnen
Edit Mode
u > Unwrap

== Seams ==
Bei komplexen Objekten muss man selbst die Kanten festlegen, an denen das Objekt aufgeschnitten wird um es flach zu machen. Stelle dir vor, du möchtest das Objekt mit einer Schere so zerschneiden, dass du es flach machen kannst.
ctrl i > Mark Seam, RM > Mark Seam

Blender Animation Tipps

2019-08-25T16:02:44Z

84.136.110.214:

== Output Settings Film Einstellungen ==
Properties Editor > Output

== Keyframes ==
Objekt auswählen > i -> insert Keyframe
Spacebar -> Play Animation

== Tutorials ==
https://www.youtube.com/watch?v=zp6kCe5Kmf4&t=21s Grant Abbitt Animation Tutorial

D3.js

2019-08-21T18:13:33Z

84.136.110.214: /* Partition Sunburst */

Datenvisualisierung interaktiv, Karten, Charts etc.
== Links ==
https://d3-wiki.readthedocs.io
https://leanpub.com/D3-Tips-and-Tricks/read
http://techslides.com/over-1000-d3-js-examples-and-demos

== Tutorials ==
[[Interaktive Karten mit d3.js]]
=== Partition Sunburst ===
https://d3-wiki.readthedocs.io/zh_CN/master/Partition-Layout/ - allgemeine Infos / Einstieg
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 - v4
https://bl.ocks.org/denjn5/e1cdbbe586ac31747b4a304f8f86efa5 - Davies Sunburst Tutorial v4
https://www.thegreatcodeadventure.com/d3-sunburst-diagram-tutorial/
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 Zoomable Sunburst v4

=== classed vs. attr("class","foo") ===
https://benclinkinbeard.com/d3tips/attrclass-vs-classed/