2d:null 2e:["$","title",null,{"children":"TIMEZONZ | Bryan C Guner | Observable"}] 33:T75c,chart = { const width = 960; const height = 675; //const projection = d3.geoNaturalEarth1().scale(width / 2 / Math.PI).translate([width, height]).precision(.1); const path = d3.geoPath()//.projection(projection); //draw the timezones const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg.insert('g', '.graticule') .attr('style', 'cursor:pointer;') .selectAll('path') .data(tzList) .enter().append('path') .attr('d', path) .on('click', (d) => { if(selected===d.id){//toggle mutable selected = null }else{ mutable selected = d.id } }) .attr('opacity',(d)=>{ if(selected && d.id!==selected){ return 1 } return 1 }) .attr('fill', (d) => { let color= tzColor(d.id) return color }) .attr('stroke-width', 2) .attr('stroke', (d) => { if(d.id===selected){ return 'lightgrey' } return 'none' }) .append('title') .text(function(d) { return d.id; }); //make the outlines svg.append("path") .datum(topojson.mesh(tzData, tzData.objects.timezones, (a, b) => a !== b)) .attr("fill", "none") .attr('stroke',(d)=>{ if(d.id===selected){ return 'steelblue' } return 'lightgrey' }) .attr("stroke-linejoin", "round") .attr("d", path) //draw selected tz legend svg.append("text").attr('x',width/2).attr('y',30).attr('fill','slategrey').text(selected) svg.append("text").attr('x',width/2).attr('y',50).attr('fill','lightgrey').text(()=>{ if(selected){ return spacetime(epoch,selected).format('time') } }) return svg.node(); }34:T5eb,{ let s=spacetime(date) return html`

week-day:

${s.format('day')}

quarter:

${s.format('quarter')}

season:

${s.format('season')}

day of year:

${s.dayOfYear()}

hemisphere:

${s.timezone().hemisphere}

timezone:

${s.timezone().name} (${s.timezone().current.offset}h)

abbreviation:

${s.timezone().display}

has DST:

${s.timezone().hasDst}

is DST:

${s.timezone().current.isDST}

time:

${s.format('time')}

valid:

${s.isValid()}

ISO:

${s.format('iso')}

` }35:[] 31:{"id":"5ea7ba1bd5323be6","slug":"timezonz","title":"TIMEZONZ","thumbnail":"c60b63a6dc1aeb9a92389e6e76deb87fef16842ad07c8eead19030a1859f8245","access_level":"public","create_time":"$D2021-04-06T03:56:42.736Z","update_time":"$D2021-04-06T03:57:45.841Z","view_time":null,"first_public_time":"$D2021-04-06T03:58:11.982Z","fork":{"id":"5ad011c0b5f61e51","slug":"spacetime","title":"Spacetime","owner":{"id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6a34e59eb4b161de","login":"bgoonz","name":"Bryan C Guner","avatar_url":"https://avatars-next.observableusercontent.com/b179f781b22742b3904a258c65f5130af4f9cfa0c2309c1dad625f673db67bde","tier":"starter_2024"},"version":474,"publish_version":474,"role":null,"authored":false,"authors":[{"type":"individual","id":"45bf1933fe0b97c1","login":"bgoonz","name":"Bryan C Guner","avatar_url":"https://avatars-next.observableusercontent.com/b179f781b22742b3904a258c65f5130af4f9cfa0c2309c1dad625f673db67bde","tier":null}],"members":[{"type":"individual","id":"45bf1933fe0b97c1","login":"bgoonz","name":"Bryan C Guner","avatar_url":"https://avatars-next.observableusercontent.com/b179f781b22742b3904a258c65f5130af4f9cfa0c2309c1dad625f673db67bde","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TIMEZONZ","cells":[{"id":0,"value":"md`# TIMEZONZ\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof progress = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n let s=spacetime(epoch, referenceTz)\n let time= s.format('nice') + ' - '+referenceTz\n return html`

\n ${s.time()}\n (${s.timezone().name})\n

\n ${s.format('month')} \n ${s.format('date-ordinal')},\n ${s.format('year')} \n

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"html`

try it out:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof date = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"version = spacetime.version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"referenceTz=spacetime.now().timezone().name","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"mutable selected=null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"currentDayProgress=spacetime.now().progress().day*100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"epoch={\n let s= spacetime.now()\n let start=s.startOf('day').epoch\n let end=s.endOf('day').epoch\n let dayScale=d3.scaleLinear().domain([0,100]).range([start, end])\n return dayScale(progress)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"function tzColor(tz) {\n let percent = spacetime(epoch, tz, {silent:true}).hour24()//.progress().day\n return colorScale(percent)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"spacetime=require('spacetime@latest')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function fixData(data){\n //fixup our timezone data\n let tzs=topojson.feature(data, data.objects.timezones).features\n tzs.forEach((o)=>{\n let places=o.id.split('/')\n if(places.length>2){\n places.pop()\n o.id=places.join('/')\n }\n if(o.id==='uninhabited'){\n o.id='UTC'\n }\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"tzList= { //fixup our timezone data\n let tzs=topojson.feature(tzData, tzData.objects.timezones).features\n tzs.forEach((o)=>{\n let places=o.id.split('/')\n if(places.length>2){\n places.pop()\n o.id=places.join('/')\n }\n if(o.id==='uninhabited'){\n o.id='UTC'\n }\n })\n return tzs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"tzData = d3.json(\"https://raw.githubusercontent.com/smallwins/spacetime/gh-pages/lib/timezones.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"import {colorScale} from \"@spencermountain/daylight-color-gradient\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"