Iron-based life form descended from T-72
Published
Edited
Apr 24, 2019
1 fork
md`# Providence Assets
<img src="https://gchapyzh.github.io/providence/assets/Astrahus_B.png">
`
htmlElement = html`<div id="3d-graph" style="height: ${.75 * width}px;"></div>`
{
const Graph = ForceGraph3D()
(htmlElement)
.width(width)
.height(.75 * width)
.linkColor(link => link.type ? 'red' : 'green' )
.linkWidth(link => link.type ? 0 : 1)
.linkOpacity(1)
.nodeThreeObject(({ img }) => {
// use a sphere as a drag handle
const obj = new THREE.Mesh(
new THREE.SphereGeometry(10),
new THREE.MeshBasicMaterial({ depthWrite: false, transparent: true, opacity: 0.1 })
);
// add img sprite as child
const imgTexture = new THREE.TextureLoader()
.load(`https://gchapyzh.github.io/providence/assets/${img}.png`);
// .load(`https://raw.githubusercontent.com/vasturiano/3d-force-graph/master/example/img-nodes/imgs/${img}.jpg`);
const material = new THREE.SpriteMaterial({ map: imgTexture });
const sprite = new THREE.Sprite(material);
sprite.scale.set(10, 10, 1);
obj.add(sprite);
return obj;
})
.graphData(gData)
.linkCurvature('curvature')
.d3Force('link').distance(link => link.type ? 100 : 50);
return Graph
}
imgs = 'Astrahus_B Astrahus_R Fortizar_B Fortizar_R Keepstar_B Keepstar_R System_B System_R'.split(' ')
imgs2 = 'cat dog eagle'.split(' ')
gData = ({
nodes: [
{id: 0, img: 'Astrahus_B'},
{id: 1, img: 'Keepstar_B'},
{id: 2, img: 'System_R'},
{id: 3}
],
links: [
{source: 0, target: 1, type: true, curvature: .5},
{source: 1, target: 2},
{source: 2, target: 0},
{source: 0, target: 3}
]
})
THREE = require("three@0.103.0")
ForceGraph3D = require('3d-force-graph')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
