-
Notifications
You must be signed in to change notification settings - Fork 3
/
budget.html
104 lines (96 loc) · 2.87 KB
/
budget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Embedding.js Federal Budget by Department</title>
<style>
/* Ensures that the canvas fills the entire window, and that there are no scrollbars */
body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
margin: 0px;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/embedding.js"></script>
<script>
const { scene, camera, manager, effect, cameraControls } = EMBED.initScene(
{ room: { boxSize: 2000 } });
var dataset, embedding;
var THREE = EMBED.THREE;
scene.fog = new THREE.Fog( 0xc1c1c1, 1, 600 )
let dataFile = 'data/2015_expenditures_by_agency.csv'
let aggregateAttribute = 'Amount_B'
lightPositions = [
[1000, 500, 500],
[-500, 500, 0],
[ 0, 500, 1000]
];
lightPositions.forEach((p) => {
let light = new THREE.PointLight(0xffffff, 0.5);
light.position.set(p[0], p[1], p[2]);
scene.add(light);
scene.add(new THREE.PointLightHelper(light, 0.1));
})
EMBED.Dataset.createFromCSV(dataFile,
function(dataset) {
embedding = new EMBED.Histogram(aggregateAttribute, scene, dataset,
{
groupBy: EMBED.AggregateEmbedding.IndividualGrouping,
aggregate: EMBED.AggregateEmbedding.Aggregates.identity,
filter: (dp) => typeof(dp.get(aggregateAttribute)) == 'number' && dp.get(aggregateAttribute) > 0,
layout: {
shape: 'octahedron',
thetaCenter: Math.PI / 2,
thetaWidth: Math.PI * .4,
align: 'center'
},
color: (val) => {
if (val.name == 'National Endowment for the Arts')
return 0xff1654
else if (val.name == 'Department of Defense--Military Programs')
return 0x3538ff
else
return 0x759179
},
// emissive: 0x222222,
roughness: 0.5,
metalness: 0.2,
baseSize: 1,
texture: 'assets/brickwork-bump-map.jpg',
position: { y: 0, z: -500 }
});
EMBED.register(embedding);
let status = new EMBED.ConsoleEmbedding(scene, null,
{
width: 10,
font: "Bold 24px Arial",
fillStyle: "rgba(15,15,15,0.90)"
})
EMBED.input.on('raydown', function(mesh) {
if (mesh) {
let v = new THREE.Vector3()
v.setFromMatrixPosition(mesh.matrixWorld)
status.setText(mesh.userData.description)
status.options.x = v.x
status.options.y = 20
status.options.z = v.z
status.obj3D.lookAt(camera.position)
}
});
EMBED.startAnimation();
},
'Department'
);
</script>
</body>
</html>