md`# Island Map`
md`Simple example of a map coloured by regional properties`
{
const width = 800
const height = 600
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const projection = d3.geoMercator()
.center([98.99, 14.7])
.scale(60000)
.rotate([160.45, -1.9, 0])
.translate([420, 560])
const path = d3.geoPath()
.projection(projection);
const g = svg.append("g");
console.log(mapData)
const features = mapData[0].features;
group.selectAll('path')
.data(features)
.enter().append('path')
.attr('d', path)
.style('stroke', "none")
.style('fill', function (d, i) {
const tone = features[i].properties.POPULATION;
return d3.rgb(10,225-tone/400,255-tone/400)
})
return svg.node();
}
mapData = FileAttachment("Population2014@1.geojson").json()
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.
