Published
Edited
Jan 28, 2022
4 stars
tile()[0]
w2 = width * 4
projection = d3
.geoMercator()
.center([-68.4, -23.6])
.scale(800000 / (2 * Math.PI))
.translate([width / 2, height / 2])
splitZmap = svg`<svg viewBox="0 0 ${width} ${height}">
<g id ='hillshade'>
${classedSplitZ.map(
(h) =>
`<path d ='M${[h.a.x, h.a.y]}L${[
h.b.x,
h.b.y
]}' stroke="gray" stroke-opacity="0.5"/>`
)}
</g>
<g id ='water'>
${segment_water.map((s) => {
let color = viridish[Math.floor(Math.random() * viridish.length)];
return s.map(
(w) =>
` <path d ='M${[w.a.x, w.a.y]}L${[
w.b.x,
w.b.y
]}' stroke="${color}" stroke-opacity="0.5"/>`
);
})}
</g>
<g id = 'water_outlines'>
${poly_water
.flat()
.map((p) => `<path d="${path(p)}" stroke="teal" fill="none"/>`)}
</g>
</svg>`
poly.flat()
classedSplitZ = diss
.map((h) =>
h.features
.map((m) =>
path(m)
.split("Z")
.map((s) => Polygon.fromPath(s))
)
.flat()
)
.flat()
.map((m) => m.getHatches(PI / 3, 2, 0))
.flat()
hillshade = tiles
.filter((t) => t.data.hillshade)
.map((h) => h.data.hillshade)
.map((m) => m.features)
.flat()
diss = poly.map((p) => turf.dissolve(turf.featureCollection(p))).flat()
poly = hs_nest
.map((e) =>
e.values.map((v) =>
v.values
.map((h) => {
if (h.geometry.type != "Polygon") {
return turf.flatten(h).features.flat();
} else {
return h;
}
})
.flat()
)
)
.flat()
waterSplitZ = poly_water
.map((h) =>
h.features
.map(
(m) => Polygon.fromPath(path(m))
// .split("Z")
// .map((s) => Polygon.fromPath(s))
)
.flat()
)
.flat()
.map((m) => m.getHatches(-PI / 3, 1, 0))
.flat()
segment_water = poly_water
.map((h) =>
h.features
.map((m) => Polygon.fromPath(path(m)))
.map((m) => m.getHatches(-PI / 3, 1.5, 0))
)
.flat()
poly_water = water_nest
.map((e) =>
e.values
.map((v) => {
if (v.geometry.type != "Polygon") {
return turf.flatten(v).features.flat();
} else {
return v;
}
})
.flat()
)
.map((m) => turf.dissolve(turf.featureCollection(m)))
hs_nest = d3
.nest()
.key(function (d) {
return d.properties.class;
})
.key(function (d) {
return d.properties.level;
})
.entries(hillshade)
water_nest = d3
.nest()
.key(function (d) {
return d.properties.kind;
})
.entries(geom_water)
geom_water = water
.filter((m) => m.features.length > 0)
.map((m) => m.features)
.flat()
.filter((f) => f.geometry.type != "MultiLineString")
.filter((f) => f.geometry.type != "LineString")
.filter((f) => f.geometry.type != "Point")
// .filter((f) => f.properties.boundary == true)
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;
})
)
tile().map(
(t) =>
`https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`
)[0]
water = Promise.all(
tile().map(async (d) => {
d.data = await d3.json(
`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=ztkh_UPOQRyakWKMjH_Bzg`
);
return d.data.water;
})
)
tile().map(
(d) =>
`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=ztkh_UPOQRyakWKMjH_Bzg`
)[0]
Protobuf = require("pbf@3/dist/pbf.js")
d3 = require("d3-geo@1", "d3-selection@1", "d3-fetch@1", "d3-tile@0.0", "d3-collection@latest")
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@latest")
vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')
xyz = require("https://bundle.run/xyz-affair@0.9.1")
bounds = [
[-69.04083251953125, -23.96617587126503],
[-67.379150390625, -22.92804166565175]
]
xyz(bounds, 11)
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.
