map(d3.geoAirocean(),{color: color,width:2400,heightratio:(width) => width * 2.5})
color = function (d) {
return d3.scaleSequential(d3.interpolateViridis)(Math.log(d.properties.adu20pop_m)/7)
}
//d3.scaleQuantize()
// .range(d3.schemeBuGn[9])
land = ({
type: "FeatureCollection",
features: [].concat(d3.merge(tiles.map(d => !d.layers['a21ed780-cc45-4f19-acae-7d04ad3d597c'] ? [] : geojson(d, d.layers['a21ed780-cc45-4f19-acae-7d04ad3d597c']).features)),d3.merge(tiles.map(d => !d.layers['952714d9-c7c2-4a20-bb9b-5b68962dbbce'] ? [] : geojson(d, d.layers['952714d9-c7c2-4a20-bb9b-5b68962dbbce']).features)))
})
import { map } with { land } from "@thadk/population-mvt-base-map"
/* svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
.append("title")
.text(d => format(data.get(d.id)));*/
srcprojection = d3.geoMercator()
.scale(1024 / (2 * Math.PI))
.translate([width / 2, height / 2])
//https://cartocdn-gusc-a.global.ssl.fastly.net/thadk/api/v1/map/thadk@2977080f@08e291c927d7a816e66447b047c9b4f6:1531554984387/3/6/2.mvt
tiles = Promise.all(tile().map(async d => {
d.layers = new VectorTile(new Protobuf(
await d3.buffer(`${cartoWorldMap}/${d.z}/${d.x}/${d.y}.mvt?api_key=${carto_api_key.value||"default_public"}`)
.catch(_ => ({}))
)).layers;
return d;
}))
tile = d3.tile()
.size([width, height])
.scale(srcprojection.scale() * 2 * Math.PI)
.translate(srcprojection([0, 0]))
function geojson({x, y, z}, layer) {
if (!layer) return;
const features = new Array(layer.length);
for (let i = 0; i < layer.length; ++i) features[i] = layer.feature(i).toGeoJSON(x, y, z);
return resample({type: "FeatureCollection", features});
}
//import { resample } from "@fil/wgs84resample"
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.
