41:null 42:["$","title",null,{"children":"Dec graticules | Decalendar | Observable"}] 48:T778,# Dec graticules The [solar terminator](https://en.wikipedia.org/wiki/Terminator_%28solar%29#:~:text=a%20moving%20line%20that%20divides%20the%20daylit%20side%20and%20the%20dark%20night%20side%20of%20a%20planetary%20body) map below shows how Dec divides the world up with 10 [lines of longitude](https://en.wikipedia.org/wiki/Meridian_%28geography%29#:~:text=the%20locus%20connecting%20points%20of%20equal%20longitude) and 5 [circles of latitude](https://en.wikipedia.org/wiki/Circle_of_latitude#:~:text=an%20abstract%20east%E2%80%93west%20small%20circle%20connecting%20all%20locations%20around%20Earth%20%28ignoring%20elevation%29%20at%20a%20given%20latitude%20coordinate%20line), each spaced 1 deciturn (10% of a turn) apart. Dec is a [measurement system](https://en.wikipedia.org/wiki/System_of_units_of_measurement#:~:text=a%20collection%20of%20units%20of%20measurement%20and%20rules%20relating%20them%20to%20each%20other) that [I](https://maptv.github.io) created to measure⏳time,📍position,🧭orientation,📐angles, and🔄cycles in [turns](https://en.wikipedia.org/wiki/Turn_%28angle%29#:~:text=a%20unit%20of%20plane%20angle%20measurement%20equal%20to%202%CF%80%C2%A0radians%2C%20360%C2%A0degrees) ([${tex`\tau`}](https://en.wikipedia.org/wiki/Turn_%28angle%29#:~:text=the%20Greek%20letter,to%20one%20turn)) instead of months, weeks, hours, minutes, seconds, and degrees. For time measurement, Dec uses days and years, which are turns of a [celestial body](https://en.wikipedia.org/wiki/Astronomical_object#:~:text=a%20single%2C%20tightly%20bound%2C%20contiguous%20entity) on [its axis](https://en.wikipedia.org/wiki/Axial_tilt#:~:text=the%20imaginary%20line%20that%20passes%20through%20both%20the%20north%20pole%20and%20south%20pole) and around [the point it orbits](https://en.wikipedia.org/wiki/Barycenter_%28astronomy%29#:~:text=the%20point%20about%20which%20the%20bodies%20orbit), respectively.49:T584,map = html``4a:T5e1,The map above shows how [Longitude 0](https://en.wikipedia.org/wiki/18th_meridian_west#:~:text=a%20line%20of%20longitude[1]%20that%20extends%20from%20the%20North%20Pole%20across%20the%20Arctic%20Ocean%2C%20Greenland%2C%20Iceland%2C%20the%20Atlantic%20Ocean%2C%20the%20Canary%20Islands%2C%20the%20Southern%20Ocean%2C%20and%20Antarctica%20to%20the%20South%20Pole), the Dec [International Date Line](https://en.wikipedia.org/wiki/International_Date_Line#:~:text=the%20line%20between%20the%20South%20and%20North%20Poles%20that%20is%20the%20boundary%20between%20one%20calendar%20day%20and%20the%20next) and [prime meridian](https://en.wikipedia.org/wiki/Prime_meridian#:~:text=an%20arbitrarily%2Dchosen%20meridian%20%28a%20line%20of%20longitude%29%20in%20a%20geographic%20coordinate%20system%20at%20which%20longitude%20is%20defined%20to%20be%200%C2%B0), cuts across the Atlantic Ocean just West of Africa and marks the start of Zone 0, the leftmost Dec time zone on the map. Dec has 10 time zones which are each 1 deciturn (10% of a turn) wide and are numbered 0 through 9, like the [lines of longitude](https://en.wikipedia.org/wiki/Meridian_%28geography%29#:~:text=words%2C%20it%20is-,a%20line%20of%20longitude,-.%20The%20position%20of) that separate them. For more Dec maps, check out these notebooks: - [Decalendar](/@dec/al) - [Decalc](/@dec/alc) - [Decaliper](/@dec/ali) - [Declock](/@dec/loc) - [Solar terminator](/@dec/solar-terminator) - [The Sun's view of the Earth](/@dec/the-suns-view-of-the-earth)4b:T4f1,projections = [ {name: "CylindricalEqualArea", value: d3.geoCylindricalEqualArea}, {name: "CylindricalStereographic", value: d3.geoCylindricalStereographic}, {name: "Eckert1", value: d3.geoEckert1}, {name: "Eckert2", value: d3.geoEckert2}, {name: "Eckert3", value: d3.geoEckert3}, {name: "Eckert4", value: d3.geoEckert4}, {name: "Eckert5", value: d3.geoEckert5}, {name: "Eckert6", value: d3.geoEckert6}, {name: "Equirectangular", value: d3.geoEquirectangular}, {name: "Hufnagel", value: d3.geoHufnagel}, {name: "Kavrayskiy7", value: d3.geoKavrayskiy7}, {name: "Miller", value: d3.geoMiller}, {name: "MtFlatPolarParabolic", value: d3.geoMtFlatPolarParabolic}, {name: "MtFlatPolarQuartic", value: d3.geoMtFlatPolarQuartic}, {name: "MtFlatPolarSinusodial", value: d3.geoMtFlatPolarSinusoidal}, {name: "NaturalEarth1", value: d3.geoNaturalEarth1}, {name: "NaturalEarth2", value: d3.geoNaturalEarth2}, {name: "NellHammer", value: d3.geoNellHammer}, {name: "Patterson", value: d3.geoPatterson}, {name: "Robinson", value: d3.geoRobinson}, {name: "Times", value: d3.geoTimes}, {name: "Wagner4", value: d3.geoWagner4}, {name: "Wagner6", value: d3.geoWagner6}, {name: "Winkel3", value: d3.geoWinkel3}, ]4c:T57e,// https://observablehq.com/@bayre/svg-swatches function swatches({ colour, swatchRadius = 7.25, swatchPadding = swatchRadius * (2/3), labelFont = "12px sans-serif", labelFormat = x => x, labelPadding = swatchRadius * 1.5, marginLeft = 0 } = {}) { const spacing = colour .domain() .map(d => labelFormat(d)) .map(d => getLabelLength(d, labelFont) + (swatchRadius * 2) + swatchPadding + labelPadding) .map((_, i, g) => d3.cumsum(g)[i] + marginLeft) const width = d3.max(spacing) const height = swatchRadius * 2 + swatchPadding * 2 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); const g = svg .append("g") .attr("transform", `translate(0, ${height / 2})`) .selectAll("g") .data(colour.domain()) .join("g") .attr("transform", (d, i) => `translate(${spacing[i - 1] || marginLeft}, 0)`); g.append("circle") .attr("fill", colour) .attr("stroke", "black") .attr("r", swatchRadius) .attr("cx", swatchRadius) .attr("cy", 0); g.append("text") .attr("x", swatchRadius * 2 + swatchPadding) .attr("y", 0) .attr("dominant-baseline", "central") .style("font", labelFont) .text(d => labelFormat(d)); return svg.node() }4d:[{"id":"efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","href":"https://static.observableusercontent.com/files/efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","name":"land-50m.json","type":"application/octet-stream","lastModified":1707357899720.457,"size":545534}] 46:{"id":"7e330fb1172264ae","slug":"irc","title":"Dec graticules","thumbnail":"94d9b69d4070059f88c5c2845ac0da06bb549d79f5eebecd1f2795e53b9f9db6","access_level":"public","create_time":"$D2024-02-08T02:04:59.720Z","update_time":"$D2026-07-26T11:58:53.983Z","view_time":null,"first_public_time":"$D2024-02-08T02:04:59.720Z","has_unpublished_edits":null,"fork":{"id":"f19b633c57a36f56","slug":"graticule-labels","title":"Graticule Labels","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4d2c79bb5e10ae73","login":"dec","name":"Decalendar","avatar_url":"https://avatars-next.observableusercontent.com/3c5aab661f4412ebb09266240b4c149ecdc2623ea7af89b8a12d28de877dcd08","tier":"starter_2024","bio":"","following":false},"version":906,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cad5899c8da00e88","login":"maptv","name":"Martin Laptev","avatar_url":"https://avatars-next.observableusercontent.com/151417083a7dd128b16c6956be7439a7a308f776c93e74d9ef2e0ef922bee777","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cad5899c8da00e88","login":"maptv","name":"Martin Laptev","avatar_url":"https://avatars-next.observableusercontent.com/151417083a7dd128b16c6956be7439a7a308f776c93e74d9ef2e0ef922bee777","tier":null,"role":"editor"},{"type":"team","id":"4d2c79bb5e10ae73","login":"dec","name":"Decalendar","avatar_url":"https://avatars-next.observableusercontent.com/3c5aab661f4412ebb09266240b4c149ecdc2623ea7af89b8a12d28de877dcd08","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"154e0b19067c61a3","slug":"dec","title":"Dec","owner":{"id":"4d2c79bb5e10ae73","login":"dec","name":"Decalendar"}},"type":"notebook","body":{"titling":"auto","title":"Dec graticules","cells":[{"id":1,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"viewof choice = Inputs.select(\n projections, {label: \"Projection:\", format: x => x.name, value: projections.find(t => t.name === \"Equirectangular\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"swatches({\n colour: d3.scaleOrdinal([...Array(10).keys()], hsla10)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":800,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"projection = choice.value().rotate([-148, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"coor = [[[-18, -90], [-18, 90], [18, 90], [18, -90], [-18, -90], ]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"viewof s = Inputs.range([0, 1000], {label: \"satur\", value: 1000, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"viewof l = Inputs.range([0, 1000], {label: \"light\", value: 800, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"viewof a = Inputs.range([0, 1000], {label: \"alpha\", value: 1000, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"hsla10 = [\n `hsla(0, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // red\n // `hsla(340, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // magentared\n `hsla(300, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // magenta\n `hsla(280, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // violet\n `hsla(240, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // blue\n `hsla(200, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // azure\n `hsla(180, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // cyan\n // `hsla(160, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // cyangreen\n `hsla(120, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // green\n `hsla(80, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // lime\n `hsla(60, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // yellow\n `hsla(40, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // orange\n `hsla(0, ${s / 10}%, ${l / 10}%, ${a / 10}%)`, // red\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"deczones = [...Array(10).keys()].map(\n i => ({\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [coor[0].map(t => [t[0]+36*i, t[1]])]},\n \"properties\": []\n})\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"// adapted from https://observablehq.com/@mbostock/autosize-svg\ngetLabelLength = (label, labelFont = \"12px sans-serif\") => {\n const id = DOM.uid(\"label\").id;\n const svg = html``;\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n\n // Compute the bounding box of the content.\n const width = svg.getElementById(id).getBBox().width;\n\n // Remove the SVG element from the DOM.\n document.body.removeChild(svg);\n\n return width;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"sun = {\n const now = new Date;\n const day = new Date(+now).setUTCHours(0, 0, 0, 0);\n const t = solar.century(now);\n const longitude = (day - now) / 864e5 * 360 - 180;\n return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"night = d3.geoCircle()\n .radius(90)\n .center(antipode(sun))\n ()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"antipode = ([longitude, latitude]) => [longitude + 180, -latitude]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"solar = require(\"solar-calculator@0.3/dist/solar-calculator.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"countries = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\").then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"borders = topojson.mesh(countries, countries.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"formatLatitude = y => `${y / 36}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"// formatLongitude = x => `${Math.abs(x)}°${x < 0 ? \"W\" : \"E\"}`\nformatLongitude = x => `${(x+18) / 36}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"margin = ({top: 10, right: 10, bottom: 10, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dx = x1 - x0;\n const k = (dx - margin.left - margin.right) / dx;\n const dy = (y1 - y0) * k + margin.bottom + margin.top;\n projection.scale(projection.scale() * k);\n projection.translate([(dx + margin.left - margin.right) / 2, (dy + margin.top - margin.bottom) / 2]);\n projection.precision(0.2);\n return Math.round(dy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"Need to provide my own coordinates to graticule: [\n [\n [-180, -89.999999],\n [-180, 9.999999974752427e-7],\n [-180, 89.999999]\n ],\n …\n]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"graticule = d3.geoGraticule().stepMinor([36,36]).stepMajor([36,36])()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"graticule.coordinates = graticule.coordinates.map(\n i => i.map(j => j.map((k, index, arr) => i.length === 3 && index === 0 ? k - 18 : k))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"graticule.coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@6\", \"d3-array@2\", \"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 47:"$46:body"