The avatar for @karpatic
Charles Karpati
Public
Edited
Jan 15, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = JSON.parse( await d3.text(`https://raw.githubusercontent.com/benbalter/dc-maps/master/maps/ward-2012.geojson`) )
Insert cell
Insert cell
hull = {
// Start by adding a baselayer by using Turf.JS to create a convex hull of our geometry
var hull = turf.convex( data );
hull.properties[object.label] = object.convex
return hull
// return initSVGObject(turf.featureCollection( [hull] ), object.label, object.convex, 600, width)
}
Insert cell
hulldata = { return { type: 'FeatureCollection', features: [hull] } }
Insert cell
Insert cell
// initSVGObject(turf.featureCollection( data.features ), object.label, object.convex, 600, width)
Insert cell
Insert cell
Insert cell
// 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
Insert cell
topojson = require("topojson-client", "topojson-simplify", "topojson-server")
Insert cell
Insert cell
function createTopoJSON(data){
let t = data
if (data.type === "Topology") {
return t;
} else {
// Here we convert the file to geoJSON
return topojson.topology({ name: t });
}
}
Insert cell
topoJSONboundaries = createTopoJSON(data)
Insert cell
topoJSONhull = createTopoJSON(hulldata)
Insert cell
Insert cell
Insert cell
simplify = (geo, val) => {
let simplified = topojson.presimplify(geo);
let min_weight = topojson.quantile(simplified, val);
return topojson.simplify(simplified, min_weight);
}
Insert cell
Insert cell
topoJSONboundariesSimplified = simplify(topoJSONboundaries, quantile_value2)
Insert cell
Insert cell
Insert cell
Insert cell
viewof quantile_value2 = slider({ title: "TopoJson Quantization", min: 0, max: 1, value: 0.0168, precision: 4, format: ".4f", description: "Set the value between 0 and 0.05"})
Insert cell
Insert cell
display = (topoobj) => {
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(topoobj, topoobj.objects[feature]) )

// Function to draw the path
let path = d3.geoPath().projection(proj)
let merged = topojson.mesh( topoobj) // 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
}
Insert cell
topoJSONboundariesSimplifiedSVG = display(topoJSONboundariesSimplified)
Insert cell
topoJSONboundariesSVG = display(topoJSONboundaries)
Insert cell
topoJSONhullSVG = display(topoJSONhull)
Insert cell
Insert cell
// data2 = topojson.feature(topodata, topodata.objects[feature])
Insert cell
Insert cell
Insert cell
topoJSONboundariesSimplified
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more