Designing and Engineering a Better Tomorrow
Public
Edited
Dec 18, 2023
Importers
4 stars
{
const helloDataVisual = new dataVisual({data, visual});
const height = width / 2;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(-5, 4, 0);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = option.rotate;
const visualDiv = document.createElement("div");
visualDiv.appendChild(renderer.domElement);
helloDataVisual
.addToolTip(renderer, camera,
option.customToolTip ? getToolTipText : undefined // Custom or Default tooltip
);
invalidation.then( () => renderer.dispose() );
while (true) {
renderer.render(helloDataVisual.visual.scene, camera);
if (option.rotate) controls.update();
yield visualDiv;
}
}
// The 'Data' for the DataVisual
data = [
{"name": "Cesium_Milk_Truck_0", "measure": 10, "dimension" : "Truck Body" },
{"name": "Cesium_Milk_Truck_1", "measure": 100, "dimension" : "Window" },
{"name": "Cesium_Milk_Truck_2", "measure": 40, "dimension" : "Truck Body" },
{"name": "Wheels001", "measure": 80, "dimension" : "Wheel Assembly" }
];
// The 'Visual' that the 'Data' will be joined to; to make a DataVisual
visual = {
let gltfURL = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
gltfURL += "CesiumMilkTruck/glTF-Embedded/CesiumMilkTruck.gltf";
const loadedGLTF = await new Promise((resolve, reject) => {
new THREE.GLTFLoader().load(gltfURL, gltf => {
if (gltf) (gltf.scene.add(new THREE.HemisphereLight(0xffffff,0xffffff,1)), resolve(gltf));
else reject(new Error("Loading " + gltfURL + " failed"));
});
});
loadedGLTF.scene.background = new THREE.Color("#1c4a63") ;
return loadedGLTF;
}
// Custom Tooltip callback function
getToolTipText = (join, dataVisual) => {
const total = dataVisual.join.reduce((acc,join) => acc + join.dataRow.measure, 0);
return Object.keys(join.dataRow)
.map(field => field + ": " + join.dataRow[field])
.join("<br/>") + "<br/>" +
"total measure: " + total + "<br/>" +
"measure/total measure: " +
(join.dataRow["measure"] / total * 100).toFixed(2) + "%";
};
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.
