Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Country elevationVoronoi Stippling on Elevation (DEM)Fill a country shape with symbolsDownload the shape of a countryRoads network in three.js3D base mapGeographic map texture in Three.jsCanvas map around a pointFind a destination point along a rhumbWhen Mercator leaves Null IslandRotate Mercator to reduce deformationInput: Draw an arrow on a mapMap size and areaStudy on pesticides in BrazilStudy on pesticides in BrazilTutorial: show a map of BoliviaMap Rubik Cube
Countries by Area of the SVG Element
html`${countries.map((country, i) => {
const [cx, cy] = d3.geoCentroid(country);
const projection = d3.geoAzimuthalEqualArea().rotate([-cx, -cy]).scale(width / 2.5);
const path = d3.geoPath(projection);
const [[x0, y0], [x1, y1]] = path.bounds(country);
return html`<svg class="country" width="${x1 - x0}" height="${y1 - y0}" viewBox="${x0} ${y0} ${x1 - x0} ${y1 - y0}" fill="currentColor"><path d="${path(country)}"></path><title>${country.properties.name}
${(+(country.properties.area * 6371 * 6371).toPrecision(3)).toLocaleString("en")} km²
Rank ${(i + 1)}</title></svg>`;
}).sort((a,b) =>b.width.baseVal.value*b.height.baseVal.value-a.width.baseVal.value*a.height.baseVal.value)}<style>
.country { vertical-align: middle; padding: 4px; border: solid 1px transparent; }
.country:hover { fill: red; border-color: #ccc; }
</style>`
countries = topojson
.feature(await FileAttachment("countries-50m.json").json(), "countries")
.features
.map(d => (d.properties.area = d3.geoArea(d), d))
.sort((a, b) => d3.descending(a.properties.area, b.properties.area))
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
