News and graphics at @ClimateLab, a project of @PostGraphics.
scaleBarTop = d3.geoScaleBar()
.orient(d3.geoScaleTop) // The other orientation is d3.geoScaleBottom, which is the default
.top(.1)
.left(.5)
.distance(250)
.label(null)
.tickPadding(3) // How far the tick text labels are from the lines
.tickFormat((d, i, e) => i === e.length - 1 ? `${d} Kilometers` : d)
.tickValues([0, 250])
scaleBarBottom = d3.geoScaleBar()
.units(d3.geoScaleMiles) // Other options are d3.geoScaleFeet, d3.geoScaleKilometers, and d3.geoScaleMeters
.orient(d3.geoScaleBottom) // Redundant as this is the default
.top(.1)
.left(.5)
.distance(250)
.label(null)
.tickPadding(3) // How far the tick text labels are from the lines
.tickFormat((d, i, e) => i === e.length - 1 ? `${d} Miles` : d)
.tickValues([0, 250]);
mapWidth = Math.min(width, 640);
geoJsonIndia = FileAttachment("india.json").json()
d3 = require("d3@6", "d3-geo-scale-bar@1");
proj4 = require("proj4@2");
function proj4d3(proj4string) {
const degrees = 180 / Math.PI,
radians = 1 / degrees,
raw = proj4(proj4string),
p = function(lambda, phi) {
return raw.forward([lambda * degrees, phi * degrees]);
};
p.invert = function(x, y) {
return raw.inverse([x, y]).map(function(d) {
return d * radians;
});
};
const projection = d3.geoProjection(p).scale(1);
projection.raw = raw;
return projection;
}
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.
