Public
Edited
Jan 15, 2024
function initSVGObject(geojson, groupOn, bll, h, w){
//Define map and path projection then update the bounding box
var projection = d3.geoMercator().translate([0, 0]).scale(1);
const path = d3.geoPath().projection(projection);
var b = path.bounds( geojson );
var s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h);
var t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2];
projection.scale(s).translate(t)
//Create SVG element points
var svg = d3.select(DOM.svg()).attr("width", w).attr("height", h).attr("id", 'line')
.attr("fill", 'none').attr("stroke", 'gray') // fill="none"
//Bind data and create one path per GeoJSON feature
svg.selectAll("path").data(geojson.features).enter().append("path").attr("d", path)
.attr('groupOn', function(e){ return JSON.stringify(e.properties[groupOn]) } )
return svg.node()
}
// Create projection that fits to the screen
proj = {
let projection = projectionInput({
value: "Patterson cylindrical",
name: "projection"
}).value
return d3.geoProjection( projection ).fitExtent(
[ [10, 10], [width, height]],
topojson.feature(geo_simplified, geo_simplified.objects[object.feature])
)
}
// Function to draw the path
path = d3.geoPath().projection(proj)
geomBounds = html`<svg height = ${height} width = ${width}>
<path id="path" style="fill:none; stroke:black" d = ${path(
merged
)}></path>
</svg>`
geomBounds3D = create3dFromSvgV8(geomBounds, 'extrude') //create3dFromSvgV2(geomBounds, 'lines')
hull3D = create3dFromSvgV8(hull, 'geoms')
hull3D.children[0]
meshRes = {
// const material = new THREE.MeshNormalMaterial();
// new THREE.MeshBasicMaterial( { side: THREE.DoubleSide } ); material.color = new THREE.Color().setStyle( 'orange' )
const material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
let meshA = hull3D.children[0]
let meshB = geomBounds3D.children[0]
meshA.updateMatrix()
meshB.updateMatrix()
let bspA = CSG.fromMesh( meshA )
let bspB = CSG.fromMesh( meshB )
let bspResult = bspA.subtract(bspB)
let meshRes = CSG.toMesh( bspResult, meshA.matrix, meshA.material )
meshRes.material = material
meshRes.position.set(5, 5, 5)
return meshRes
}
{
const renderer = new THREE.WebGLRenderer({ antialias: true });
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, 600);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
return renderer.domElement;
}
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.
