Public
Edited
Apr 18, 2023
1 star
// It was determined that TopoJSON conversion is the best simplifications method for preserving the 'look'
// https://observablehq.com/@coachman/week-11-intro-to-d3-js-mapping-data-with-d3
// https://observablehq.com/@mbostock/lets-make-a-map-part-1
/*
viewof file = fileInput({
initialValue: FileAttachment(
"example.geojson"
).blob(),
accept: ".json,.geojson"
})
*/
// geo = uploaded_file === false ? await d3.json(geo_url) : uploaded_file
v0 = initSVGObject(data, object.label, object.convex, 600, width)
v1 = initSVGObject(data1, object.label, object.convex, 600, width)
// https://observablehq.com/@john-guerra/topojson-simplify-and-filter-attributes
// https://observablehq.com/@mkfreeman/topojson-simplifier
// https://observablehq.com/@lemonnish/minify-topojson-in-the-browser
topojson = require("topojson-client", "topojson-simplify", "topojson-server")
topoJSON = {
let t = data
if (data.type === "Topology") { return t; }
else {
// Here we convert the file to geoJSON
return topojson.topology({ name: t });
}
}
topodata = simplify(topoJSON, quantile_value2)
v2 = {
let projection = projectionInput({
value: "Patterson cylindrical",
name: "projection"
}).value
// Create projection that fits to the screen
let proj = d3.geoProjection(projection).fitExtent( [[10, 10], [width, 600]],
topojson.feature(topodata, topodata.objects[feature]) )
// Function to draw the path
let path = d3.geoPath().projection(proj)
let merged = topojson.mesh( topodata ) // Merge into a single path (faster to draw // no overlapping borders)
// Display the (merged) path
let prepped_map = html`<svg height = ${600} width = ${width}>
<path id="path" style="fill:none; stroke:black" d = ${path(merged)}></path>
</svg>`
return prepped_map
}
data2 = '' // topojson.feature(topodata, topodata.objects[feature])
v3 = '' //initSVGObject(data2, object.label, object.convex, 600, width)
DOM.download(
new Blob([simplifiedAsStr], { type: "text/json" }), "topojson.json"
)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
const loader = new THREE.SVGLoader();
let paths = loader.parse( v2.outerHTML ).paths
return paths
}
simplifiedPaths = {
let clone = v0.cloneNode(true);
let v2children = Array.from(clone.children)
for (let i=0; i < v2children.length; i++) {
let bbox = Array.from(v0.children)[i].getBBox()
let path1 = v2children[i].getAttribute('d')
let path2 = await simplifyPath(path1)
v2children[i].setAttribute("d", path2 )
v2children[i].setAttribute('transform',`translate(${bbox.x}, ${bbox.y})`)
}
clone.innerHTML = '';
return clone
}
v0.children
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.
