Published
Edited
Dec 16, 2021
1 fork
groupedmap = svg`<svg viewBox="0 0 ${width} ${height}">${entries.map(
(d) => `<g id = ele${d.key}>
${d.values.map(
(e) =>
`<path fill="none" stroke=${
color[set.indexOf(e.properties.ele)]
} stroke-width="0.75" d="${path(e)}"></path>`
)}
</g>
`
)}
</svg>`
clipmap = svg`<svg viewBox="0 0 ${width} ${height}">
${nestedclipped.map(
(n) =>
`<g id = 'ele${n.key}'>
${n.values.map(
(v) =>
`<path d=${path(turf.rewind(v))} fill="none" stroke=${
color[set.indexOf(v.properties.ele)]
}></path>`
)}
</g>`
)}
</svg>`
polygons = turf.featureCollection(
entries
.map((e) =>
e.values
.map((v) => {
if (v.geometry.type != "Polygon") {
return turf.flatten(v).features.flat();
} else {
return v;
}
})
.flat()
)
.map(
(p) =>
clip
.union(p.map((m) => m.geometry.coordinates))
.map((e) =>
turf.polygon(e, { ele: p.map((m) => m.properties.ele)[0] })
)
// }))
)
.flat()
)
nestedclipped = d3
.nest()
.key(function (d) {
return d.properties.ele;
})
.entries(polygons.features)
entries = d3
.nest()
.key(function (d) {
return d.properties.ele;
})
.entries(ele)
ele = contour.map(c => c.features.filter(f => f.id > 1)).flat()
set = Array.from(new Set(ele.map(e => e.properties.ele).sort()))
contour = tiles.map((t) => t.data.contour)
tiles = Promise.all(tile().map(async t => {
let data = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`))).layers
t.data = Object.keys(data).reduce((initialData, key) => {
initialData[key] = {
type: "FeatureCollection",
features: [...Array(data[key].length).keys()].map((item, i) => {
let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)
return feature
})
}
return initialData
}, {})
return t;
}))
Protobuf = require('pbf')
d3 = require("d3-geo@1", "d3-selection@1", "d3-fetch@1", "d3-tile@0.0", "d3-scale@2.1.2", "d3-collection@latest")
projection = d3
.geoMercator()
.center([-65.995, -18.927])
.scale(100000 / (2 * Math.PI))
.translate([width / 2, height / 2])
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0,0]))
height = 800
path = d3.geoPath(projection)
clip = require("polygon-clipping@0.15.3")
turf = require("@turf/turf@5")
vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')
merge = require("https://bundle.run/@mapbox/geojson-merge@1.1.1")
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.
