Published
Edited
Jan 10, 2021
1 fork
md`# EEZ Shapes`
circleMap("Spain")
viewof mapColor = DOM.input('color')
str = "United Kingdom"
whiteSpace = function(str){
return str.replace(/\s+/g, '');
}
d3.selectAll("#Spain")
// .select("#Spain")
.style("fill","blue")
circleMap = function() {
const width = 180, height = width, rotate = 0, radius = width/2, basescale = width/2/Math.PI;
const svg = d3.select(DOM.svg(width, height)).style("background", "transparent")
// const svg = d3.select("#map").append("svg")
.attr("width", width).attr("height", height)
.style("background", "transparent")
var projection = d3.geoMercator()
// .fitExtent([width, height], EEZshapes);
.fitExtent([[0,0], [width/1.1, height/1.1]], EEZshapes);
var path = d3.geoPath()
.projection(projection);
var defs = svg.append("defs");
defs.append("clipPath")
.attr("id", "clip-inset")
.attr('transform', `translate(${width/2},${height/2})`)
.append("circle")
.attr("r", radius);
var g = svg.append('g')
.classed('insetmap', true)
.attr('clip-path', "url(#clip-inset)");
// let element = svg.append("g").selectAll("path")
g.selectAll("path")
.data(EEZshapes.features)
.enter().append("path")
.attr("class", "countryFeature")
.attr("id",d => `${whiteSpace(d.properties.SOVEREIGN1)}`)
// element
.attr("d", path)
.style('fill', "white")
.style('stroke', '#ccc')
// .style('fill', d => d.properties.SOVEREIGN1 == country ? "#B53471": "white")
// .style('stroke', d => d.properties.SOVEREIGN1 == country ? null : '#ccc')
.style("stroke-width",0.5)
g.append("circle")
.attr("r",radius)
.attr('transform', `translate(${width/2},${height/2})`)
.style("fill","none")
.style("stroke","black")
return svg.node()
}
EEZshapes = FileAttachment("EU_EEZ_Min.geojson").json()
EEZshapes
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.
