Public
Edited
Jul 25, 2023
{
const width = 900
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const group2 = svg.append("g")
const projection = d3.geoMercator()
.center([-64.857, 32.318])
.scale(800000)
.rotate([0, 0, 0]);
const path = d3.geoPath()
.projection(projection)
.pointRadius(3.5);
// const graticule = d3.geoGraticule();
const pathLine = d3.line()
// .interpolate("cardinal")
.x(function (d) { return projection([d.lon, d.lat])[0]; })
.y(function (d) { return projection([d.lon, d.lat])[1]; });
group.selectAll("path")
.data(topojson.feature(boundaries2010, boundaries2010.objects.boundaries)
.features)
.enter()
.append("path")
.attr("d", path)
.style('fill', '#bbb')
.style('stroke','none')
d3.json(nzl_4)
.then(function(data){
group
// .selectAll("path")
// .data(data)
// .enter()
.append("path")
// .attr("class", "line")
.style("stroke-width", "10px")
.style("opacity", 1)
.style("stroke", function () { return "orange"; })
.attr("d", pathLine(data))
});
// d3.json(nzl_4, function (error, data) {
// var pathNZL = svg.append("path")
// // .attr("class", "line")
// .style("stroke-width", "1px")
// .style("opacity", 1)
// .style("stroke", function () { return "orange"; })
// .attr("d", pathLine(data))
// })
// group.selectAll("path")
// .data(topojson.feature(world, world.objects.countries).features)
// .enter()
// .append("path")
// .attr("d", path)
// .style('fill', '#bbb')
// .style('stroke','none')
// group.append("path")
// .datum(graticule)
// .attr("class", "graticule")
// .attr("d", path)
// .style('fill', 'none')
// .style('stroke', 'grey')
return svg.node();
}
nzl_4 = FileAttachment("NZL_4.json").json()
boundaries2010 = FileAttachment("boundaries-2010.json").json()
topojson = require("topojson-client@3")
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.
