wake-up-neo.net

Dreidimensionales Diagramm (X, Y und Z) mit D3.js

Ich suche nach einem Graphen, der 3 Dimensionen (x, y und z) hat und D3.js verwendet. Bitte lassen Sie mich wissen, ob es eine Datenvisualisierungsseite gibt, auf der ich eine solche Grafik finden kann, oder ob es eine Datei auf d3js.org gibt, die ich irgendwie übersehen habe.

45
Kish

Das 3D-Scatterplot, auf das VividD und Lars Kotthoff verweisen, ist wahrscheinlich das beste Beispiel für das, wonach Sie fragen, aber ich werde im Gegenteil sein und behaupten, dass Sie vielleicht die falsche Frage stellen.

Der Versuch, drei räumliche-Dimensionen auf einem Flachbildschirm zu simulieren, ist immer unvollständig und erschwert das Lesen der Daten. Es ist jedoch sehr einfach, drei verschiedene Daten-Dimensionen in D3 darzustellen. Sie verwenden das horizontale und das vertikale Layout für zwei Ihrer Datenvariablen und anschließend Größe, Form, Farbe oder Schattierung für die dritte Variable.

Wenn alle drei Datenvariablen am besten durch fortlaufende Zahlen dargestellt werden, verwenden Sie am besten ein Blasenstreuungsdiagramm, bei dem Ihre drei Anzeigeabmessungen horizontale Positionen, vertikale Positionen und Blasengröße sind. 

Hier ein Beispiel, in dem auch die interaktive Online-Komponente verwendet wird, um eine vierte, durch Bewegung dargestellte Dimension hinzuzufügen:
 Bubble ScatterplotBubble Scatterplot - Klick für Original

Sie sagten, dass Ihre drei Dimensionen Customer, Product und content sind. Ich weiß nicht, welchen Wert "Inhalt" (Anzahl oder Kategorie) hat, aber ich bin mir ziemlich sicher, dass "Kunde" und "Produkt" Kategorien sind.

Hier ist ein Beispiel, in dem zwei kategoriale Dimensionen zum Anordnen einer Tabelle verwendet werden. Jede Zelle der Tabelle enthält einen Kreis, der die dritte numerische Dimension hat. Wenn Ihre dritte Variable eine Kategorie ist, können Sie eine Form verwenden, um anzugeben, welcher "Inhaltstyp" (falls vorhanden) zu jeder Paarung von "Kunde" und "Produkt" gehört:
 Bubble Matrix
Bubble Matrix - Klick für Original

Hier ist eine andere, bei der die dritte Dimension nach Farbe und nicht nach Größe angezeigt wird. Die Farben stellen eine fortlaufende Variable dar, Sie können jedoch leicht einen Satz kontrastreicher Farben auswählen, um Kategorien darzustellen:
 Colour MatrixFarbmatrix - Klick für Original

Natürlich ist ein einfaches altes gestapeltes Balkendiagramm eine andere Möglichkeit, zwei Kategorien und eine numerische Menge anzuzeigen:
 Stacked Bar Graphs Gestapelte Balkendiagramme - Klicken für Original

Und Sie müssen nicht bei drei Datenvariablen stehen bleiben. Wenn zwei der Datenvariablen Kategorien oder Zahlen sind, bei denen es Ihnen nichts ausmacht, in Kategorien zu gruppieren, können Sie vier Variablen mit einem "kleinen Vielfachen" -Ansatz grafisch darstellen. Dabei erstellen Sie eine Tabelle, die die kategorialen Variablen darstellt, und wiederholen dann eine Grafik der andere zwei Variablen in jeder Tabellenzelle. 

So was:
 Scatterplot MatrixScatterplot Matrix - Klick für Original

Oder dies (wobei Woche und Wochentag zwei Dimensionen der Daten sind und Kategorie/Menge die anderen beiden):
 Pie Chart Small Multiples
Kreisdiagramm Kleine Vielfache - für Original klicken

Ich hoffe das hat dir viele Ideen gebracht ...

61
AmeliaBR

Ein Beispiel, dass eine Art ähnelt, was Sie suchen, ist:

3D-Streudiagramm

enter image description here

Beachten Sie, dass dieses Beispiel X3DOM verwendet, ein recht neuer Versuch, das 3D-Rendering in HTML zu standardisieren, das nicht von allen Browsern unterstützt wird.


Einige zusätzliche Testbeispiele zur Verwendung von D3.js mit X3DOM:

X3DOM im Rückruftest

D3 X3DOM-Ereignistest

Suchen Sie auch nach X3DOM in der D3-Google-Gruppe.


Ein anderer möglicherweise interessanter Ansatz wäre die Verwendung von D3.js und Three.js wie hier:

Anzeigen von GPS-Tracks in 3D mit three.js und d3.js


Im Allgemeinen ist D3.js eher auf Datenvisualisierung als auf wissenschaftliche Visualisierung ausgerichtet. Dies bedeutet, dass es keine umfassende Unterstützung für die Anzeige von 3D-Räumen gibt (mit Ausnahme der Anzeige geografischer 3D-Daten, die D3.js hervorragend unterstützt, aber.) das ist nicht was brauchen).

Zum Beispiel (dieses Beispiel bezieht sich nicht direkt auf Ihre Beispiele, es dient nur der Erläuterung): D3 bietet einen Algorithmus für das 2D-Zeichnen von Bäumen, jedoch keine Apparatur für die 3D-Platzierung von Bäumen und das anschließende Rendern dieser Anordnung auf einem 2D-Bildschirm.


Wenn Sie nicht auf D3.js beschränkt sind, können Sie mit anderen Bibliotheken, die speziell für ähnliche Zwecke geschrieben wurden, dieselben Ziele leichter und schneller erreichen. Sie können beispielsweise Pre3D verwenden. Schauen Sie sich dieses Beispiel an. Pre3D verwendet kein X3DOM, sondern nur einfaches HTML-Rendering auf der 2D-Leinwand. Ich denke, dass die Animation (Rotation) seiner 3D-Grafiken glatter ist als die im ersten D3/X3DOM-Beispiel.


Hoffe, diese Antwort würde dir helfen.

38
VividD

Die besten Beispiele, die ich finden konnte (die beide unglaublich einfach waren), waren:

Highcharts (3D-Streuung)

http://www.highcharts.com/demo/3d-scatter-draggable

Vis.js (verschiedene 3D-Optionen wie Balken und Punkte)

http://visjs.org/examples/graph3d/playground/index.html

Geben Sie einfach x-, y- und z-Koordinaten an, stellen Sie die Konfiguration nach Ihren Wünschen ein und lachen Sie.

8
David Spence

Es sieht so aus, als sei ein neues Beispiel für etwas richtigeres "3D" herausgekommen . http://bl.ocks.org/supereggbert/aff58196188816576af0

Und hier ist eine Anpassung, die ich gemacht habe:

http://bl.ocks.org/adrianturcato/cf665b7cca9f6057691a

6
aturc

Ich habe d3-3d erstellt, ein d3-Plugin, mit dem Sie Ihre 3D-Daten visualisieren können. Hoffentlich hilft das dabei, dein Ziel zu erreichen.

 enter image description here

4
Niekes

Hier ist reine Javascript + Svg Lösung

enter image description here

let f = (x, z) => Math.cos(z/20)*20 + Math.sin(x/10)*10 + x/3*Math.atan2(z,x);

let cos = Math.cos, sin = Math.sin, xyz = 'xyz'.split(''),
    k = 500, a1 = 0, a2 = 0, far = 300, p, w, h, a,
    points = [], lines = [], s = 100;
    
for (var x = -s; x < s; x += 5) 
for (var z = -s; z < s; z += 5) 
  points.Push({x, z, r:2});

for (var i = 0; i < 6; i++) lines.Push([
  {x:-s, y:-s, z:-s, color:`hsl(${i*120},55%,55%)`, state:{}},
  {x:i%3==0?s:-s, y:i%3==1?s:-s, z:i%3==2?s:-s, state:{}}
]);

points.forEach(d=>d.state={fill:`rgb(${d.x+s},${(d.y=f(d.x,d.z))+s},${d.z+s})`});
pointsGroup.innerHTML=points.map((d,i)=>`<circle ind="${i}"></circle>`).join('');
linesGroup.innerHTML=lines.map(d=>`<path stroke="${d[0].color}"></path>`).join('');
let circles = pointsGroup.querySelectorAll('circle');
let paths = linesGroup.querySelectorAll('path');

function project(p) {
  let x = p.x*cos(a1) + p.z*sin(a1);
  let z = p.z*cos(a1) - p.x*sin(a1);
  let y = p.y*cos(a2) +   z*sin(a2);
  let d =   z*cos(a2) - p.y*sin(a2) + far;
  p.state.cx = (k/d)*x + w/2;
  p.state.cy = (k/d)*y + h/2;
  p.state.r = far/d*p.r;
}

function render() {
  if (a) for (var i=0; i<3; i++) 
    xyz.forEach((c, j) => lines[i][0][c] = i==j ? -s : (lines[i][1]=a)[c]);
  points.forEach(project);      
  points.sort((a, b) => a.state.r - b.state.r);
  lines.forEach(line => line.forEach(project));      
  points.forEach((d, i) => Object.entries(d.state)
      .forEach(e => circles[i].setAttribute(...e)));
  lines.forEach((l, i) => paths[i].setAttribute('d', 
     `M${l[0].state.cx} ${l[0].state.cy} L${l[1].state.cx} ${l[1].state.cy}`));
}

let evt = (t, f) => addEventListener(t, e => render(f(e)));
evt('click', e => a = points[e.target.getAttribute('ind')])
evt('wheel', e => k *= 1 - Math.sign(e.deltaY)*0.1);
evt('mouseup', e => p = null);
evt('mousedown', e => p = {x: e.x, y: e.y, a1, a2});
evt('mousemove', e => p && (a1 = p.a1-(e.x-p.x)/100) + (a2 = p.a2-(e.y-p.y)/100));
evt('resize', e=>svg.setAttribute('viewBox',`0 0 ${w=innerWidth} ${h=innerHeight}`));
dispatchEvent(new Event('resize'));
<svg id="svg" stroke-width="2"><g id="pointsGroup"></g><g id="linesGroup"></g></svg>
1

In letzter Zeit hat Stefan Nieke mit seinem d3-3d-Plugin auch einige coole Sachen gemacht: https://bl.ocks.org/Niekes

1
Cliff Coulter