height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
width = 975
path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
projection = d3.geoEqualEarth()
format = d3.format(".2s")
//proportional symbols
//radius = d3.scaleSqrt([0, d3.max(attribute)], [0, 10])
radius = d3.scaleThreshold()
.domain(naturalbreaks)
.range(radiusArray)
sizeArrayForLegend = Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2))
radiusArray = [1, 3.3, 7, 11]
circleLabels = Array.from(naturalbreaks, d=> format(Math.pow(d, 2)))
colors = d3.scaleThreshold()
.domain(naturalbreaks)
.range(GnBlu)
GnBlu = ["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8"]
naturalbreaks = simple.ckmeans(attribute, 4).map(v => v.pop())
d3.max(attribute)
attribute = Array.from(points.features, d=>Math.sqrt(Number(d.properties[attributeName])))
attributeName = "globalDemocracyData_democracy_duration"
idName = "name"
//import the point data (geojson)
points = FileAttachment("countries_points.geojson").json()
//import the polygon base map data
basepolygons = FileAttachment("countries-50m.json").json()
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.
