splitZmap = svg`<svg viewBox="0 0 ${width} ${height}">
${classedSplitZ.map(
(h) =>
`<path d ='M${[h.a.x, h.a.y]}L${[
h.b.x,
h.b.y
]}' stroke="#27b5e7" stroke-opacity="0.5"/>`
)}
</svg>`
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) => Object.keys(t.data).includes("hillshade"))
.map((h) => h.data.hillshade)
.map((h) => h.features)
.flat()
Object.keys(tiles[0].data).includes("hillshade")
diss = poly.map((p) => turf.dissolve(turf.featureCollection(p)))
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()
hs_nest = d3
.nest()
.key(function (d) {
return d.properties.class;
})
.key(function (d) {
return d.properties.level;
})
.entries(hillshade)
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()
Protobuf = require("pbf@3/dist/pbf.js")
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([-82.15850830078125, 37.62021427322739])
.scale(1500000 / (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@latest")
vt = require('https://bundle.run/@mapbox/vector-tile@1.3.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.
