Published
Edited
Dec 19, 2019
Importers
Insert cell
md`# Map fill component second attempt`
Insert cell
projection = d3.geoAlbers()
.rotate([4.4, 0])
.parallels([50, 60])
.fitExtent([[20, 0], [width, height]], {"type": "FeatureCollection", "features":uk.features});

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
perc_to_lat_scale = {
let domain = table.map(d => d["proportion"])
let range = table.map(d => d["lat"])
return d3.scaleLinear().domain(domain).range(range)
}
Insert cell
md`## Geographies`
Insert cell
Insert cell
Insert cell

table = {

let extent = turf.bbox(uk)
let min_lat = extent[1]
let max_lat = extent[3]

let delta = 0.3
let scale_values = d3.range(min_lat, max_lat + delta, delta).map(function(d) {
let area = turf.area(uk)
let area_sq_miles = turf.convertArea(area, "meters", "miles")

// minX, minY, maxX, maxY
var bbox = [-20, 50, 10, d];
var bbox_rest = [-20, d, 10, 70];

var bottom = turf.bboxClip(uk.features["0"], bbox)

let area_bottom = turf.area(bottom)

let area_sq_miles_bottom = turf.convertArea(area_bottom, "meters", "miles")
if (d >= max_lat) {
area_sq_miles_bottom = area_sq_miles
}

return {
"area_sq_miles": area_sq_miles,
"area_sq_miles_bottom": area_sq_miles_bottom,
"proportion": area_sq_miles_bottom/area_sq_miles,
"lat": d,
"pix":projection([ 0, d])
}
})
return scale_values
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more