30: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(); }31: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')}

` }32:[] 2e:{"title":"Spacetime","cells":[{"id":0,"value":"md`# Spacetime\n\n[spacetime](https://github.com/smallwins/spacetime) lets you figure-out what time it is, all-over the world:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof progress = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":441,"value":"html`

try it out:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"viewof date = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"version = spacetime.version","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"referenceTz=spacetime.now().timezone().name","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"mutable selected=null","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"currentDayProgress=spacetime.now().progress().day*100","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":51,"value":"spacetime=require('spacetime@latest')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":7,"value":"tzData = d3.json(\"https://raw.githubusercontent.com/smallwins/spacetime/gh-pages/lib/timezones.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"import {colorScale} from \"@spencermountain/daylight-color-gradient\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}