# d3 + threejs graph test (paid)

**URL:** <https://talk.observablehq.com/t/d3-threejs-graph-test-paid/9877>\
**Category:** Marketplace\
**Created:** [October 3, 2024, 9:45am UTC](https://talk.observablehq.com/t/d3-threejs-graph-test-paid/9877 "2024-10-03T09:45:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![f1-outsourcing](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/f1-outsourcing/32/9280_2.png) [@f1-outsourcing](https://talk.observablehq.com/u/f1-outsourcing)\
**Post date:** [October 3, 2024, 9:45am UTC](https://talk.observablehq.com/t/d3-threejs-graph-test-paid/9877/1 "2024-10-03T09:45:19Z")

</div>

I need some help to combine this chart[1] with three.js:

What I want to change is make it 3d as in

1. 

add a grid so it is easier to see the xy plane

```auto
// Add grid helper
var gridHelper = new THREE.GridHelper( 90, 9 );
gridHelper.colorGrid = 0xE8E8E8;
scene.add(gridHelper);

```

1. 

every black filled circle I want it to be a rotating cube.

```auto
//2nd one
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: "red" } );
var cube2 = new THREE.Mesh( geometry, material );

cube2.rotation.x += 0.01;
cube2.rotation.y -= 0.01;

```

the cubes can be put all on the same elevation height.

1. 

Add these orbit controls.

[1]

> **[Temporal force-directed graph](https://observablehq.com/@d3/temporal-force-directed-graph)**
>
> This notebook visualizes a temporal network which changes over time. Each node and link has a start and end specifying its existence. The data here represents face-to-face interactions at a two-day conference. Data: SocioPatterns