Software developer and power user
Published
Edited
Feb 22, 2021
2 stars
majorExtentDefaults = d3.geoGraticule().extentMajor();
majorExtentTargets = [
[horizontalExtent.major[0], verticalExtent.major[0] + EPSILON],
[horizontalExtent.major[1], verticalExtent.major[1] - EPSILON]
]
minorExtentDefaults = d3.geoGraticule().extentMinor();
minorExtentTargets = [
[horizontalExtent.minor[0], verticalExtent.minor[0] - EPSILON],
[horizontalExtent.minor[1], verticalExtent.minor[1] + EPSILON]
]
majorStepDefaults = d3.geoGraticule().stepMajor()
majorStepTargets = [horizontalStep.major, verticalStep.major]
minorStepDefaults = d3.geoGraticule().stepMinor()
minorStepTargets = [horizontalStep.minor, verticalStep.minor]
createGraticule = d3.geoGraticule()
.extentMajor(majorExtentTargets)
.extentMinor(minorExtentTargets)
.stepMajor(majorStepTargets)
.stepMinor(minorStepTargets);
graticule = createGraticule()
// based on: https://observablehq.com/@d3/tissots-indicatrix
circles = {
const coordinates = [];
const appendCircles = (extent, stepping) => {
const [[xMin, yMin], [xMax, yMax]] = extent;
const [stepX, stepY] = stepping;
const circle = d3.geoCircle()
.center(d => d)
.radius(2.5)
.precision(10);
// upper right quadrant
let yStart = 0;
while (yStart < yMin) {
yStart += stepY;
}
let xStart = 0;
while (xStart < xMin) {
xStart += stepX;
}
for (let y = yStart; y <= yMax; y += stepY) {
for (let x = xStart; x <= xMax; x += stepX) {
coordinates.push(circle([x, y]).coordinates);
}
}
// bottom right quadrant
yStart = 0 - stepY;
while (yStart > yMax) {
yStart -= stepY;
}
xStart = 0;
while (xStart < xMin) {
xStart += stepX;
}
for (let y = yStart; y >= yMin; y -= stepY) {
for (let x = xStart; x <= xMax; x += stepX) {
coordinates.push(circle([x, y]).coordinates);
}
}
// bottom left quadrant
yStart = 0;
while (yStart > yMax) {
yStart -= stepY;
}
xStart = 0 - stepX;
while (xStart > xMax) {
xStart -= stepX;
}
for (let y = yStart; y >= yMin; y -= stepY) {
for (let x = xStart; x >= xMin; x -= stepX) {
coordinates.push(circle([x, y]).coordinates);
}
}
// upper left quadrant
yStart = 0 + stepY;
while (yStart < yMin) {
yStart += stepY;
}
xStart = 0 - stepX;
while (xStart > xMax) {
xStart -= stepX;
}
for (let y = yStart; y <= yMax; y += stepY) {
for (let x = xStart; x >= xMin; x -= stepX) {
coordinates.push(circle([x, y]).coordinates);
}
}
}
if (localDistortions.minorCrossings) {
appendCircles(minorExtentTargets, minorStepTargets);
}
if (localDistortions.majorCrossings) {
appendCircles(majorExtentTargets, majorStepTargets);
}
return {type: "MultiPolygon", coordinates};
}
responsiveWidth = Math.min(640, width)
height = {
const projection = createProjection().fitWidth(planeWidth, outline)
const [[x0, y0], [x1, y1]] = d3.geoPath(projection).bounds(outline);
return Math.ceil(y1 - y0) + (margin * 2);
};
createProjection = {
const meta = projections.find(d => d.name === name);
return d3[meta.propertyName];
}
planeWidth = responsiveWidth - (margin * 2)
outline = ({type: "Sphere"})
path = d3.geoPath(projection)
projection = createProjection()
.fitWidth(planeWidth, outline)
.translate([responsiveWidth / 2, height / 2])
d3 = require("d3-array@2", "d3-geo@2", "d3-geo-projection@3")
html`<style>
label {
margin-right: 14px !important;
}
input {
margin-left: 1px;
}
#outline,
#graticule,
#indicatrices {
fill: none;
}
#outline {
stroke: #000;
}
#graticule {
stroke: #ccc;
}
#indicatrices {
stroke: #f00;
}
.inputs-group-cell {
width: 50%;
}
</style>`
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.
