//if you want to use a different file use the file upload thing and change this to file.json()
boundsfile = lebanon
viewof file = Inputs.file({ label: "Upload geoJSON" })
//get tiles needed at specific zoom (this kind of affects detail of your resulting image? but mostly it affects how slowly it loads lol)
xyz_tiles = xyz(bounds, 9)
california = FileAttachment("california.geojson").json()
levels = 18
canvasMap = {
// generic water color: "rgb(1, 134,160)"
let ctx = DOM.context2d(width, height);
// const path = d3.geoPath(projection, ctx);
// ctx.fillStyle = "rgb(1, 134,160)";
// ctx.fillRect(0, 0, width, height);
// ctx.save();
// ctx.beginPath(), path(boundsfile), ctx.clip();
xyz_tiles.map((t, i) => {
let tile = new Image();
tile.src = base64[i];
ctx.drawImage(
tile,
projection(tile_bbox[i].coordinates[0][0])[0],
projection(tile_bbox[i].coordinates[0][0])[1],
tileScale,
tileScale
);
});
ctx.save();
ctx.strokeStyle = "rgb(0,0,0)";
ctx.beginPath(),
path(turf.rewind(langata_cemetery_outline, { reverse: true })),
ctx.stroke();
return ctx.canvas;
}
langata01 = FileAttachment("langata01.geojson").json()
diamantina = FileAttachment("diamantina.geojson").json()
langata_cemetery_outline = FileAttachment("langata_cemetery_outline.geojson").json()
tileScale = projected[3][0] - projected[0][0] + 1
width = 600
selected = canvasMap
tileSize = selected.width
gridSize = tileSize
size = Math.sqrt(terrain.length)
heightExtent = d3.extent(terrain)
xScale = d3.scaleLinear().domain([0, size]).range([-10, 10])
yScale = d3.scaleLinear().domain([0, size]).range([-10, 10])
zScale = d3.scaleLinear().domain(heightExtent).range([0, terrainExaggeration])
edges = Object.assign({
top: terrainMatrix[0],
bottom: terrainMatrix[terrainMatrix.length - 1],
left: terrainMatrix.map((r) => r[0]),
right: terrainMatrix.map((r) => r[terrainMatrix.length - 1])
})
parameters = Object.assign({ ...worldParameters, ...perspectiveParameters })
projectedIsobands = {
const shapes = [];
isolines.forEach((lvl, i) => {
//lvl.lines.forEach((isoline) => {
//const lvl = isolines[levelIndex]
lvl.lines.forEach((isoline) => {
let entity = simplify(
isoline.map((d) => {
return { x: d[0], y: d[1] };
}),
lineSimplification
).map((c) => {
let copy = [xScale(c.x), yScale(c.y), zScale(lvl.threshold), 1];
return copy;
});
entity.closed = true;
entity.fillColor = "none";
entity.strokeWidth = 0.5;
entity.level = i;
entity.elevation = lvl.threshold;
shapes.push(entity);
});
});
return processScene(shapes, parameters);
}
scene = {
let scene = [];
let scale = 0.075;
//const allRings = []
isolines.forEach((lvl, i) => {
//lvl.lines.forEach((isoline) => {
//const lvl = isolines[levelIndex]
lvl.lines.forEach((isoline) => {
let entity = simplify(
isoline.map((d) => {
return { x: d[0], y: d[1] };
}),
lineSimplification
).map((c) => {
let copy = [xScale(c.x), yScale(c.y), zScale(lvl.threshold), 1];
return copy;
});
entity.closed = true;
entity.fillColor = "#fff";
entity.strokeWidth = 0.5;
entity.groupname = `group${lvl.threshold}`;
scene.push(entity);
});
});
// scene.push(label);
// const east = [[14, 0, terrainExaggeration / 2, 1]];
// east.text = "E";
// east.textAnchor = "middle";
// const west = [[-14, 0, terrainExaggeration / 2, 1]];
// west.text = "W";
// west.textAnchor = "middle";
// const south = [[0, 14, terrainExaggeration / 2, 1]];
// south.text = "S";
// south.textAnchor = "middle";
// const north = [[0, -14, terrainExaggeration / 2, 1]];
// north.text = "N";
// north.textAnchor = "middle";
// scene.push(north);
// scene.push(south);
// scene.push(east);
// scene.push(west);
return scene;
}
processedScene = {
var t0 = performance.now();
const result = processScene(scene, parameters);
var t1 = performance.now();
console.log(`processor: ${t1 - t0}`);
return result;
}
processedscene_layer = d3
.nest()
.key((d) => d.groupname)
.entries(processedScene)
.map((m) => {
m.values.flat();
return m;
})
anaglyphRenderer = (processedScene) => {
var t0 = performance.now();
const leftLayer = [];
const rightLayer = [];
const behindProjectionPlane = (item) => {
return item.map((points) => {
points.map((d) => d[0][2]).find((d) => d <= 0) === undefined &&
points.map((d) => d[1][2]).find((d) => d <= 0) === undefined;
});
return true;
};
let allLeftPath = "";
let allRightPath = "";
const svgStuff = processedscene_layer.map((m) => {
leftLayer.push(
svg`<g id=${m.key}>${m.values
.filter(behindProjectionPlane)
.map((item) => {
const leftPath =
"M " +
item.map((p) => `${p[0][0]} ${p[0][1]}`).join(" L ") +
(item.closed ? " Z" : "");
const rightPath =
"M " +
item.map((p) => `${p[1][0]} ${p[1][1]}`).join(" L ") +
(item.closed ? " Z" : "");
// allLeftPath += ' ' + leftPath
// allRightPath += ' ' + rightPath
return svg`<path d="${leftPath}" fill="${
item.fillColor ? item.fillColor : "none"
}" stroke="black" stroke-width="${
item.strokeWidth ? item.strokeWidth : 1
}"/>`;
})}</g>`
);
});
// if (allLeftPath !== '') {
// leftLayer.push(svg`<path d="${allLeftPath}" fill="white" stroke="${colors.left}" stroke-width="1" style="mix-blend-mode: multiply;" />`)
// }
// if (allRightPath !== '') {
// rightLayer.push(svg`<path d="${allRightPath}" fill="white" stroke="${colors.right}" stroke-width="1" style="mix-blend-mode: multiply;" />`)
// }
var t1 = performance.now();
console.log(`renderer: ${t1 - t0}`);
return svg`<g>
<g transform="translate(${tileSize / 2},${
tileSize / 2
})" style="mix-blend-mode: multiply;">
${rightLayer}
</g>
<g transform="translate(${tileSize / 2},${
tileSize / 2
})" style="mix-blend-mode: multiply;">
${leftLayer}
</g>
</g>`;
}
import {
renderer,
processScene
} with { height } from "@tonyhschu/anaglyph-pipeline-in-gpujs"
import { rasterize } from "@mbostock/saving-svg"
height = 600
zoomed_bbox = turf.bboxPolygon(
turf.bbox(
turf.buffer(turf.bboxPolygon(turf.bbox(boundsfile)), 0, {
unit: "miles"
})
)
)
site = zoomed_bbox
bounds = [
site.geometry.coordinates[0][0],
site.geometry.coordinates[0][2]
]
rewind = turf.rewind(site, { reverse: true })
ctr = turf.center(site)
projection = d3
.geoMercator()
.center(ctr.geometry.coordinates)
.translate([0, 0])
//.scale(Math.pow(2, 21) / (2 * Math.PI))
.fitSize([width, height], rewind)
projected = tile_bbox[0].coordinates[0].map((t) => projection(t))
xyz_tiles
tile_bbox = xyz_tiles.map((t) => tilebelt.tileToGeoJSON([t.x, t.y, t.z]))
base64 = Promise.all(
xyz_tiles.map(async (t) => {
let image = await canvas(t);
return await image.toDataURL();
})
)
canvas = async (t) => {
let img = new Image();
img.crossOrigin = "anonymous";
img.src = url(t);
await new Promise((resolve) => img.addEventListener("load", resolve));
let ctx = DOM.canvas(img.width, img.height).getContext("2d");
ctx.drawImage(img, 0, 0);
return ctx.canvas;
}
canvas(xyz_tiles[0])
url = (t) =>
`https://api.mapbox.com/v4/mapbox.terrain-rgb/${t.z}/${t.x}/${t.y}.png?access_token=${mapbox}`
sfbay = FileAttachment("sfbay.geojson").json()
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", "d3-array@3", "d3")
path = d3.geoPath(projection)
turf = require("@turf/turf@latest")
vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')
import { Polygon, PI } from "@makio135/utilities"
xyz = require("https://bundle.run/xyz-affair@0.9.1")
map7 = FileAttachment("map(7).geojson").json()
map1 = FileAttachment("map (1).geojson").json()
tilebelt = import("https://cdn.skypack.dev/@mapbox/tilebelt@1.0.2?min")
mapbox = "pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiY2t6bXA2dWZlMmtzbTJ2bjJ0ZTdwYnoyNyJ9.cF_Xt3B9htHIUD0lAKXaRg"
MarchingSquares = import(
"https://unpkg.com/marchingsquares@1.3.3/dist/marchingsquares-esm.js?module"
)
simplify = require("simplify-js")
import { view } from "@tomlarkworthy/view"
bingham = FileAttachment("bingham.geojson").json()
af = FileAttachment("af.geojson").json()
langata02 = FileAttachment("langata02.geojson").json()
lebanon = FileAttachment("lebanon.json").json()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.