fullscreen(graph)
scene = {
const scene = new THREE.Scene()
scene.background = new THREE.Color('#fff')
const pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), 80, 160 );
// pcBuffer.scale.set( 5, 10, 10 );
// pcBuffer.position.set( 5, 5, 10 );
scene.add(pcBuffer)
const axesHelper = new THREE.AxesHelper( 50 );
scene.add( axesHelper );
scene.background = new THREE.Color( 0x000000 );
return scene
}
function generatePointcloud( color, width, length ) {
const geometry = generatePointCloudGeometry_Job();
// const geometry = generatePointCloudGeometry( color, width, length );
const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
return new THREE.Points( geometry, material );
}
function generatePointCloudGeometry_Job() {
const geometry = new THREE.BufferGeometry();
const numPoints = job_data_coordinate.length;
const positions = new Float32Array( numPoints * 3 );
const colors = new Float32Array( numPoints * 3 );
let k = 0;
for(let i = 0; i < numPoints; i++){
positions[ 3 * k ] = job_data_coordinate[i].x;
positions[ 3 * k + 1 ] = job_data_coordinate[i].y;
positions[ 3 * k + 2 ] = job_data_coordinate[i].z;
let scale;
if( `${value_type.value}` == "Thermal" ){
const thermal = job_data_coordinate[i].thermal
scale = d3.interpolatePuRd(scaleThermal(thermal))
}else{
const power = job_data_coordinate[i].power
scale = new THREE.Color(d3.interpolatePuRd(scalePower(power)))
}
const color = new THREE.Color(scale)
colors[ 3 * k ] = color.r;
colors[ 3 * k + 1 ] = color.g;
colors[ 3 * k + 2 ] = color.b;
k++;
}
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.computeBoundingBox();
return geometry;
}
job_data_coordinate = {
return job_data.map(d => {
const mean_power = group_data.find(g => g.hostname == d.hostname).mean_power
const mean_thermal = group_data.find(g => g.hostname == d.hostname).mean_thermal
return {'x': scaleX(mean_power), 'y': scaleY(mean_thermal), 'z': scaleZ(d.timestamp), 'power': d.power, 'thermal': d.thermal}
})
}
scalePower = {
const scale = d3.scaleLinear()
scale.domain(d3.extent(job_data, d => d.power))
scale.range([0,1])
return scale
}
scaleThermal = {
const scale = d3.scaleLinear()
scale.domain(d3.extent(job_data, d => d.thermal))
scale.range([0,1])
return scale
}
scaleX = {
const scale = d3.scaleLinear()
scale.domain(d3.extent(group_data, d => d.mean_power))
scale.range([-50, 50])
return scale
}
scaleY = {
const scale = d3.scaleLinear()
scale.domain(d3.extent(group_data, d => d.mean_thermal))
scale.range([-15, 15])
return scale
}
scaleZ = {
const scale = d3.scaleTime()
scale.domain(d3.extent(job_data, d => d.timestamp))
scale.range([-100, 100])
return scale
}
g_data = d3.group(job_data, d => d.hostname)
group_data = {
let temp = []
for(const element of g_data){
let obj = {hostname: element[0]}
obj["mean_power"] = d3.mean(element[1], d => d.power)
obj["mean_thermal"] = d3.mean(element[1], d => d.thermal)
temp.push(obj)
}
return temp
}
pointSize = 1;
function project3D(coord, t = minDate) {
const proj = projection(coord);
const time = timeScale(t)
return new Float32Array([
proj[1],
time,
-proj[0]
]);
}
height = 1900
width = height * 1.5
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(() => renderer.dispose());
return renderer;
}
camera = {
const camera = new THREE.PerspectiveCamera(45, (width/height), 1, 10000);
camera.position.set(100, 100, 100);
return camera;
}
controls = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 300;
const redraw = () => renderer.render(scene, camera);
controls.addEventListener("change", redraw);
invalidation.then(() => {
controls.removeEventListener("change", redraw);
controls.dispose();
});
return controls;
}
job_data = FileAttachment("summit_job_power.csv").csv({typed: true})
import {form} from "@mbostock/form-input"
import { fullscreen } from "@fil/fullscreen"
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.
