31:T463,viewof timeValues = { const s = select({ title: 'What is the earliest reasonable sunset time?', options: [ { label: '4:30 PM', value: 16.5 }, { label: '5:00 PM', value: 17 }, { label: '5:30 PM', value: 17.5 }, { label: '6:00 PM', value: 18 }, { label: '6:30 PM', value: 18.5 }, { label: '7:00 PM', value: 19 }, { label: '7:30 PM', value: 19.5 }, { label: '8:00 PM', value: 20 }, { label: '8:30 PM', value: 20.5 } ], value: 18 }); s.input.style.fontSize = "18px"; const r = select({ title: 'What is the latest reasonable sunrise time?', options: [ { label: '5:00 AM', value: 5 }, { label: '5:30 AM', value: 5.5 }, { label: '6:00 AM', value: 6 }, { label: '6:30 AM', value: 6.5 }, { label: '7:00 AM', value: 7 }, { label: '7:30 AM', value: 7.5 }, { label: '8:00 AM', value: 8 }, { label: '8:30 AM', value: 8.5 }, { label: '9:00 AM', value: 9 } ], value: 7 }); r.input.style.fontSize = "18px"; return inputsGroup([[r,`

`,s]]) }32:T2959,map = { const svg = DOM.svg(mapWidth, height); const g = d3.select(svg).append('g').attr('class', 'grid'); const features = topojson.feature(grid, grid.objects.grid_clipped).features; // some static map layers d3.select(svg) .append('g') .append('path') .datum(states) .attr('d',path) .attr('fill','none') .attr('stroke','#999') .attr('stroke-width',0.5) .attr('pointer-events','none'); d3.select(svg) .append('g') .append('path') .datum(timezoneBoundaries) .attr('d',path) .attr('fill','none') .attr('stroke-linejoin', 'round') .attr('stroke','#666') .attr('stroke-width',3) .attr('pointer-events','none'); d3.select(svg) .append('g') .attr('pointer-events','none') .selectAll('text') .data(timezonePolys.features) .enter() .append('text') .each(function (d){ const c = path.centroid(d); d3.select(this) .attr('x', c[0]) .attr('y', c[1]) .attr('text-anchor', 'middle') .style('fill', '#333') .style('font', `${mapWidth * .014}px sans-serif`) .style('text-shadow', '0 0 5px white, 0 0 2px white') .text(d.properties.TIMEZONE.toUpperCase()) }); d3.select(svg) .append('g') .attr('pointer-events','none') .selectAll('g') .data(cities.features) .enter() .append('g') .each(function (d){ const c = projection(d.geometry.coordinates); d3.select(this) .attr('transform', `translate(${c[0]},${c[1]})`); d3.select(this) .append('circle') .attr('r', 3) .style('fill', '#666') d3.select(this) .append('text') .attr('x', 5) .attr('y', -3) .attr('dominant-baseline', 'middle') .style('fill', '#333') .style('font', `${mapWidth * .01}px sans-serif`) .style('text-shadow', '-1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white, 1px 1px 2px white') .text(d.properties.NAME) }) // color scheme and legend const abolish = d3.schemeBrBG[3][0]; const statusQuo = d3.schemeBrBG[3][1]; const permanent = d3.schemeBrBG[3][2]; d3.select(svg) .append('text') .attr('text-anchor', 'middle') .attr('x', mapWidth/2) .attr('y', 20) .style('font', `bold ${mapWidth * .024}px sans-serif`) .text('To best satisfy your preferences, we should...') const legend = d3.select(svg) .append('g') .attr('transform', `translate(${mapWidth/3},${height * .068})`); legend.append('rect') .attr('x', 0) .attr('y',0) .attr('width', mapWidth/9) .attr('height', height * .068) .style('fill', d3.schemeBrBG[3][0]); legend.append('text') .style('font', `${mapWidth * .012}px sans-serif`) .style('fill', 'white') .attr('x', mapWidth / 18) .attr('y', height * .034) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text('abolish DST'); legend.append('rect') .attr('x', mapWidth / 9) .attr('y',0) .attr('width', mapWidth/9) .attr('height', height * .068) .style('fill', d3.schemeBrBG[3][1]); legend.append('text') .style('font', `${mapWidth * .012}px sans-serif`) .style('fill', '#666') .attr('x', mapWidth / 9 + mapWidth / 18) .attr('y', height * .034) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text('make no change'); legend.append('rect') .attr('x', 2 * mapWidth / 9) .attr('y',0) .attr('width', mapWidth/9) .attr('height', height * .068) .style('fill', d3.schemeBrBG[3][2]); legend.append('text') .style('font', `${mapWidth * .012}px sans-serif`) .style('fill', 'white') .attr('x', 2 * mapWidth / 9 + mapWidth / 18) .attr('y', height * .034) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text('always use DST'); // set up the floating tooltip const tooltip = d3.select(svg) .append('g') .style('display', 'none'); tooltip.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 350) .attr('height', 100) .style('fill', 'white') .style('stroke', '#ccc'); tooltip.append('text') .text('Days with both reasonable sunrise and sunset') .style('font', `bold ${mapWidth * .01}px sans-serif`) .style('text-decoration', 'underline') .attr('y', 15) .attr('x', 5); const totalRow = tooltip.append('text') .attr('x', 5) .attr('y', 28) .style('font', `${mapWidth * .01}px sans-serif`) .style('fill', '#666') totalRow.append('tspan') .style('font-weight', 'bold') .text('No DST: ') const totalSpanNoDST = totalRow.append('tspan') totalRow.append('tspan') .style('font-weight', 'bold') .text(' • Stauts quo: ') const totalSpanNormal = totalRow.append('tspan') totalRow.append('tspan') .style('font-weight', 'bold') .text(' • Always DST: ') const totalSpanAllDST = totalRow.append('tspan') tooltip.append('text') .text('Penalty for late sunrises and early sunsets') .style('font', `bold ${mapWidth * .01}px sans-serif`) .style('text-decoration', 'underline') .attr('y', 45) .attr('x', 5); const penaltyRow = tooltip.append('text') .attr('x', 5) .attr('y', 58) .style('font', `${mapWidth * .01}px sans-serif`) .style('fill', '#666') penaltyRow.append('tspan') .style('font-weight', 'bold') .text('No DST: ') const penaltySpanNoDST = penaltyRow.append('tspan') penaltyRow.append('tspan') .style('font-weight', 'bold') .text(' • Stauts quo: ') const penaltySpanNormal = penaltyRow.append('tspan') penaltyRow.append('tspan') .style('font-weight', 'bold') .text(' • Always DST: ') const penaltySpanAllDST = penaltyRow.append('tspan') tooltip.append('text') .text('Overall score') .style('font', `bold ${mapWidth * .01}px sans-serif`) .style('text-decoration', 'underline') .attr('y', 75) .attr('x', 5); const scoreRow = tooltip.append('text') .attr('x', 5) .attr('y', 88) .style('font', `${mapWidth * .01}px sans-serif`) .style('fill', '#666') scoreRow.append('tspan') .style('font-weight', 'bold') .text('No DST: ') const scoreSpanNoDST = scoreRow.append('tspan') scoreRow.append('tspan') .style('font-weight', 'bold') .text(' • Stauts quo: ') const scoreSpanNormal = scoreRow.append('tspan') scoreRow.append('tspan') .style('font-weight', 'bold') .text(' • Always DST: ') const scoreSpanAllDST = scoreRow.append('tspan') const fmt = d3.format('.2f'); /* HERE WE DO THE SCORE CALCULATIONS! */ g.selectAll('path') .data(features) .enter() .append('path') .attr('d',path) .each( function(d){ d.centroid = d3.geoCentroid(d); // pre-calculated sun times near this latitude d.times = times[ Math.round( (d.centroid[1] - startLat) / .25 ) ]; // offset from those times based on time zone and longitude distance from time zone center d.offset = (d.centroid[0] - 15 * d.properties.zone) / 15; d.normal = {rise:0,set:0,both:0,penalty:0}; d.noDST = {rise:0,set:0,both:0,penalty:0}; d.allDST = {rise:0,set:0,both:0,penalty:0}; for (var i in d.times){ var rise = d.times[i][0] - d.offset, set = d.times[i][1] - d.offset, riseDST = rise + 1, setDST = set + 1, risePenalty = Math.max(0, rise - riseTime), setPenalty = Math.max(0, setTime - set), riseDSTPenalty = Math.max(0, riseDST - riseTime), setDSTPenalty = Math.max(0, setTime - setDST); // check sunrise and sunset times for all the scenarios... if ( i >= 66 && i < 311 && d.properties.DST == 1 ){ // these are DST days, so "normal" = DST if ( riseDST <= riseTime ) d.normal.rise ++; else d.normal.penalty += riseWeight * riseDSTPenalty; if ( setDST >= setTime ) d.normal.set ++; else d.normal.penalty += setWeight * setDSTPenalty; if ( riseDST <= riseTime && setDST >= setTime ) { d.normal.both ++; } } else { if ( rise <= riseTime ){ d.normal.rise++; } else d.normal.penalty += riseWeight * risePenalty; if ( set >= setTime ){ d.normal.set++; } else d.normal.penalty += setWeight * setPenalty; if ( rise <= riseTime && set >= setTime ) d.normal.both ++; } if ( riseDST <= riseTime ) d.allDST.rise ++; else d.allDST.penalty += riseWeight * riseDSTPenalty; if ( setDST >= setTime ) d.allDST.set ++; else d.allDST.penalty += setWeight * setDSTPenalty; if ( riseDST <= riseTime && setDST >= setTime ) d.allDST.both ++; if ( rise <= riseTime ){ d.noDST.rise++; } else d.noDST.penalty += riseWeight * risePenalty; if ( set >= setTime ){ d.noDST.set++; } else d.noDST.penalty += setWeight * setPenalty; if ( rise <= riseTime && set >= setTime ) d.noDST.both ++; } d.noDST.score = d.noDST.both - d.noDST.penalty; d.allDST.score = d.allDST.both - d.allDST.penalty; d.normal.score = d.normal.both - d.normal.penalty; if (d.noDST.score >= d.normal.score && d.noDST.score >= d.allDST.score && d.properties.DST == 1) d.fill = abolish; else if (d.allDST.score >= d.normal.score && d.allDST.score > d.noDST.score) d.fill = permanent; else d.fill = statusQuo; }) .attr('fill', d => d.fill) .attr('stroke', d => d.fill) .attr('stroke-width', .5) .on('mouseover', d => { totalSpanNoDST.text(d.noDST.both); totalSpanNormal.text(d.normal.both); totalSpanAllDST.text(d.allDST.both); penaltySpanNoDST.text(fmt(d.noDST.penalty)); penaltySpanNormal.text(fmt(d.normal.penalty)); penaltySpanAllDST.text(fmt(d.allDST.penalty)); scoreSpanNoDST.text(fmt(d.noDST.score)); scoreSpanNormal.text(fmt(d.normal.score)); scoreSpanAllDST.text(fmt(d.allDST.score)); tooltip.style('display', 'block'); }) .on('mousemove', () => { const pos = d3.mouse(svg); const px = pos[0] > mapWidth - 360 ? (pos[0] - 355) : (pos[0] + 5); const py = pos[1] > 110 ? (pos[1] - 105) : (pos[1] + 5); tooltip.attr('transform', `translate(${px},${py})`); }) .on('mouseout', () => { tooltip.style('display', 'none'); }); return svg; }33:Ta02,md`## Measuring if—and how much—DST sucks for you While my earlier map was interesting to explore, it leaves too much room for interpretation. You don't have time for that. Your life is too awful because of a lost hour, or a gained one. You need fast FACTS. So for this map I made up a score to prove that you're right (or wrong) about Daylight Saving Time ruining everything. It's the **total number of days with both sunrise and sunset times that satisfy your preferences, minus a penalty for sunrise and sunset times that are too late or early**, respectively. The basic penalty subtracts one point per hour later/earlier an actual sunrise/set time is than your preferred time. For example, if you want sunrises no later than 7:00, a day with a 7:30 sunrise subtracts half a point from the score. The penalty can further be weighted by your relative importance of sunrise and sunset. If you say sunrise time is more important, late sunrises incur greater penalties than early sunsets. The score is added up for three scenarios: no DST, keeping the status quo (partial year DST in most places), and always using DST. The map then shows the winning scenario with the highest score. ### This map still insists my area should change the clocks twice a year. Is it stupid and wrong? Maybe. This is, after all, a totally made up scoring system. Depending on your settings, you may be surprised at the map's recommendation to maintain the status quo, or even make DST permanent. That's probably my totally made-up penalty calculation at work. Remember the penalty is higher the farther actual sunrise/set time is from the ideal. If I want a 7 AM sunrise but sunrise in my area only gets as late as 7:15, the penalty is relatively small and not much is saved by dropping DST. Meanwhile sunsets may be so early for so many days that even with a strong preference for sunrise time, the score still favors keeping DST in the end. (This is basically the case in the Boston area, where I live.) But I think most of you complainers will find that the map confirms your opinion that you'd be better off without DST. So you're welcome. ### New time zones? One way to interpret some maps is that time zones should be reconfigured. In the default view that loads with this notebook, you'll see "permanent DST" zones on the eastern side of each time zone, a gray "status quo" middle, and large "no DST" areas on the west. One fix to satisfy most people is to shift those "permanent DST" areas into the next time zone east, and drop DST everywhere. Everyone wins! `34:T415,/* get sun times for a bunch of latitudes along the prime meridian. then, for any given location, we can get correct-ish times just by subtracting hours from these times for longitude */ times = { const times = []; for ( let lat = startLat; lat < endLat; lat += .25 ){ let date = new Date(2014,11,31); const dateArr = []; for ( var i=0; i < 365; i++ ){ date.setDate( date.getDate() + 1 ); const sun = suncalc.getTimes(date,lat,0); let set = sun.sunset.getUTCHours() + sun.sunset.getMinutes()/60; if ( set < 3 ) set += 24; // sunset is occasionally after midnight let rise = sun.sunrise.getUTCHours() + sun.sunrise.getMinutes()/60; if ( isNaN( sun.sunset.getDate() ) ){ // flag the days of eternal sun or darkness at high latitudes if ( date.getMonth() >= 2 && date.getMonth() <= 8 ){ set = 28; rise = -1; } else { set = 12; rise = 12; } } dateArr.push([rise,set]); } times.push(dateArr); } return times; }35:[] 2f:{"title":"Daylight Saving Time Gripe Assistant Tool","cells":[{"id":0,"value":"md`# Daylight Saving Time Gripe Assistant Tool\n\nA handy tool to help make your case when whining about a biannual time change, following earlier explorations of [the geography of DST effects](http://andywoodruff.com/blog/where-to-hate-daylight-saving-time-and-where-to-love-it/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof weight = {\n const w = select({\n title: 'Is sunrise or sunset more important?',\n options: [\n { label: 'Sunrise time is much more important', value: 2 },\n { label: 'Sunrise time is more important', value: 1.5 },\n { label: 'Sunrise time is slightly more important', value: 1.25 },\n { label: 'Sunrise and sunset time are equally important', value: 1 },\n { label: 'Sunset time is slightly more important', value: .75 },\n { label: 'Sunset time is more important', value: .5 },\n { label: 'Sunset time is much more important', value: 0 },\n ],\n value: 1\n });\n w.input.style.fontSize = \"18px\";\n return w;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`Tip: rotate to landscape mode if you're looking at this on a mobile device.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`### Code miscellanea`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"riseTime = +timeValues[0][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"setTime = +timeValues[0][2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"riseWeight = +weight","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"setWeight = 2 - riseWeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"startLat = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"endLat = 72","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoAlbersUsa()\n .fitSize([mapWidth, height - 125], states)\n .translate([mapWidth/2, height/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = mapWidth * .6","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"mapWidth = Math.min(width, window.innerWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"cities = d3.json('https://gist.githubusercontent.com/awoodruff/2844d64b21785fb0a7715afabadedcbf/raw/62f934bb254ea40f340c13d03bf1871bb059442c/citylabels.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"timezonePolys = topojson.feature(timezones, timezones.objects.us_timezones)","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"timezoneBoundaries = topojson.mesh(timezones, timezones.objects.us_timezones, function(a, b) { return a !== b; });","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"timezones = d3.json('https://gist.githubusercontent.com/awoodruff/832451482dea5868ed05c54225468e50/raw/b4a73c52c748f954f7e3e1f7343f62eff0156c5c/us_timezones.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"states = d3.json('https://raw.githubusercontent.com/awoodruff/dst-sunrise-sunset-map/gh-pages/states.json').then(json => topojson.mesh(json, json.objects.us_states_50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"grid = d3.json('https://raw.githubusercontent.com/awoodruff/dst-sunrise-sunset-map/gh-pages/grid.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"suncalc = require(\"suncalc@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}