-
Notifications
You must be signed in to change notification settings - Fork 9
/
isofence.html
61 lines (53 loc) · 2.17 KB
/
isofence.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
<div>
Orientation<br>
<input type="range" min="-180" max="180" value="50" class="slider" id="orientation" style="width: 250px" /><br />
Height<br>
<input type="range" min="0" max="5" step="0.05" value="1.5" class="slider" id="exa" style="width: 250px" />
</div>
<div id="map" style="height: 500px; width: 800px"></div>
<script src="../../dist/gridviz.js"></script>
<script>
//define map with initial view
const map = new gridviz.Map(document.getElementById('map'), { x: 3700000, y: 2400000, z: 400 })
.addZoomButtons()
//define multi resolution dataset
const dataset = new gridviz.MultiResolutionDataset(
[200, 400, 600, 1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) => new gridviz.TiledGrid(map, 'https://raw.githubusercontent.com/jgaffuri/tiled-grid-france-filosofi/main/out/csv/met/ind/2019/' + resolution + 'm/'),
{
preprocess: (c) => {
//aggregate to 3 age groups only
c.ind_0_24 = +c.ind_0_3 + +c.ind_4_5 + +c.ind_6_10 + +c.ind_11_17 + +c.ind_18_24
c.ind_25_64 = +c.ind_25_39 + +c.ind_40_54 + +c.ind_55_64
c.ind_65p = +c.ind_65_79 + +c.ind_80p
}
}
)
//define style
const style = new gridviz.IsoFenceStyle({
color: {
ind_0_24: "rgb(240, 112, 74)",
ind_25_64: "rgb(254, 221, 141)",
ind_65p: "rgb(66, 136, 181)"
},
angle: 50,
viewScale: gridviz.viewScale({ valueFunction: (c) => +c.ind, stretching: gridviz.logarithmicScale(-7) }),
height: (c, r, z, viewScale) => 1.5 * viewScale(c.ind)
})
//add layer to map
map.layers = [new gridviz.GridLayer(dataset, [style], { minPixelsPerCell: 25 })]
//orientation selection
document.getElementById('orientation').oninput = function () {
//set orientation
style.angle = this.value
//redraw
map.redraw()
}
//height exageration selection
document.getElementById('exa').oninput = function () {
//set exageration
style.height = (c, r, z, viewScale) => this.value * viewScale(c.ind)
//redraw
map.redraw()
}
</script>