I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
d3.geoPath + Canvas + Zoom + PanningHow to add a tooltip in D3d3.stack with d3.groupScatterplot OverplottingTreemap from tabled3.stack with d3.nestD3 data binding v3 to v5D3 Network Visualization PlaygroundReusable charts d3@4Intro to D3Marks and Channels in D3
TopoJSON Simplifier and Filter attributes
viewof file = fileInput({
initialValue: FileAttachment(
"Barrios_del_municipio_de_Pereira.geojson"
).blob()
})
topoJSON = {
if (originalJSON.type === "Topology") {
// the file is already a topoJSON
return originalJSON;
} else {
// Here we convert the file to geoJSON
return topojson.topology({ name: originalJSON });
}
}
simplified = topojson.simplify(
topojson.presimplify(topoJSON),
Math.pow(10, -1 * minWeightExp)
) // minWeight has a default value here of 0.002, you can change it later in the notebook
simplifiedAsStr = JSON.stringify(simplified)
viewof selected = {
const detectedAttributes = Object.keys(originalJSON?.features[0]?.properties);
return Inputs.checkbox(detectedAttributes || defaultProperties, {
label: "Attributes to keep",
value: detectedAttributes || defaultProperties
});
}
lessProperties = {
const lessProperties = { ...simplified };
const copyOnlySelected = (d) => {
const dCopy = { ...d };
dCopy.properties = Object.fromEntries(
selected
.map((a) => [a, d.properties[a]])
.filter((d) => d[1] !== undefined)
);
return dCopy;
};
lessProperties.objects = { ...simplified.objects };
for (let obj in lessProperties.objects) {
lessProperties.objects[obj] = { ...simplified.objects[obj] };
lessProperties.objects[obj].geometries = simplified.objects[
obj
].geometries.map(copyOnlySelected);
}
return lessProperties;
}
lessPropertiesAsStr = JSON.stringify(lessProperties)
DOM.download(
new Blob([lessPropertiesAsStr], { type: "text/json" }),
file.name ? file.name.split(".")[0] + ".json" : "topojson.json",
"Download With Less Properties"
)
height = 400
fmt = d3.format("0.2f")
map = geoJSON => {
const ctx = DOM.context2d(width, height);
const path = d3
.geoPath()
.projection(d3.geoMercator().fitSize([width, height], geoJSON))
.context(ctx);
ctx.beginPath();
path(geoJSON);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000";
ctx.stroke();
return ctx.canvas;
// SVG Version
// const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// svg
// .selectAll("path")
// .data(geoJSON.features)
// .join("path")
// .style("stroke", "black")
// .style("fill", "none")
// .attr("d", path);
// return svg.node();
}
d3 = require("d3@6", "d3-geo-projection@3")
topojson = require("topojson-server@3", "topojson-simplify@3", "topojson-client@3")
import { select, checkbox, number } from "@jashkenas/inputs"
import { fileInput } from "@mbostock/file-input-with-initial-value"
import { rewind } from "@john-guerra/d3-black-box-map"
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.
