31:Tb35,function buildDateSelector(config) { let { firstDay, lastDay, initialSelection, margins, padding, width: visWidth, // Avoid conflict with Observable global variable height: visHeight, // Avoid conflict with a likely user-defined variable initTranslate, minZoom, maxZoom, initZoom } = config; if (!lastDay) lastDay = d3.timeDay(new Date()); if (!firstDay) firstDay = d3.timeDay.offset(lastDay, -1000); let date = initialSelection || d3.timeDay.offset(lastDay, -60); if (!margins) margins = Object({ top: 0, right: 5, bottom: 0, left: 0 }); if (!padding) padding = Object({ left: 200, right: 0 }); if (!visWidth) visWidth = width; // Default to Observable global variable if (!visHeight) visHeight = 70; if (!initTranslate) initTranslate = 0; let zoomWidth = visWidth - margins.right - margins.left; if (!minZoom) minZoom = zoomWidth / (zoomWidth + padding.right + padding.left); if (!maxZoom) maxZoom = 10; if (!initZoom) initZoom = 1; const scale = d3 .scaleTime() .domain([firstDay, lastDay]) .range([ margins.left - padding.left, visWidth - margins.right + padding.right ]); let zoomedScale = scale.copy(); const display = [ [margins.left, margins.top], [visWidth - margins.right, visHeight - margins.top] ]; // We render an area larger than the visible SVG, to make sure axis labels // don't suddenly appear or disappear as they scroll past the edge of the display. const rendering = [ [display[0][0] - padding.left, display[0][1]], [display[1][0] + padding.right, display[1][1]] ]; const minScale = (display[1][0] - display[0][0]) / (rendering[1][0] - rendering[0][0]); let transform = d3.zoomIdentity.translate(initTranslate, 0).scale(initZoom); const svg = d3 .create("svg") .attr("viewBox", [0, 0, visWidth, visHeight]) .style("overflow", "hidden"); const node = svg.node(); node.value = { date, increment }; // Add listeners const zoomer = d3 .zoom() .scaleExtent([minZoom, maxZoom]) .translateExtent(rendering) .extent(display) .on("zoom", rescale); svg .call(zoomer) .call(zoomer.transform, transform) .on("click", chooseTime); function draw() { drawScale(svg, zoomedScale, visHeight, margins); drawDial(svg, zoomedScale(date)); } function rescale() { transform = d3.event.transform; zoomedScale = transform.rescaleX(scale); draw(); } function chooseTime() { date = zoomedScale.invert(d3.mouse(node)[0]); date = d3.timeDay.round(date); node.value.date = date; node.dispatchEvent(new CustomEvent("input")); draw(); } function increment(dt) { date = d3.timeDay.offset(date, dt); node.value.date = date; node.dispatchEvent(new CustomEvent("input")); draw(); } return node; }32:[] 2f:{"title":"Sliding Timeline Selector","cells":[{"id":0,"value":"md`# Sliding Timeline Selector`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Inspired by NASA's [Worldview](https://worldview.earthdata.nasa.gov/) interface.\n\nIncrement the date using the buttons, or simply click on the timeline to jump to that date. The timeline can be panned and zoomed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"{\n const dashFormat = d3.timeFormat(\"%Y-%m-%d\");\n const form = html``;\n form.minus.onclick = () => selectedDate.increment(-1);\n form.plus.onclick = () => selectedDate.increment(1);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"viewof selectedDate = buildDateSelector({\n firstDay: new Date(2015, 10, 24), // Note: This is November! (January is 0)\n margins: margin,\n padding: { left: 200, right: 0 },\n initZoom: 10,\n initTranslate: (margin.left + margin.right - width) * 9 // Start at right end of scale\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1361,"value":"md`## Constructor function\nSee additional options listed in the config object at the start of the code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Rendering functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`### Axis and ticks\n\nWe use [d3-axis](https://github.com/d3/d3-axis) to draw the coarsest scale, then add ticks at two finer scales using selection joins. These joins only add ticks for data points that are not already in the selection--so we don't get ugly double-drawn ticks. See the [d3-selection documentation](https://github.com/d3/d3-selection#joining-data) and a sample [implementation on StackOverflow](https://stackoverflow.com/questions/19242674/major-and-minor-ticks-with-v3-of-d3).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"function drawScale(svg, scale, visHeight, margins) {\n svg.selectAll(\"g\").remove();\n let axisGroup = svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${margins.top})`)\n .attr(\"class\", \"axisSegment\");\n\n const monthYearFormat = d =>\n d3\n .timeFormat(\"%b %Y\")(d)\n .toUpperCase();\n let axisGenerator = d3\n .axisBottom(scale)\n .ticks(4)\n .tickFormat(monthYearFormat)\n .tickSizeInner(visHeight - margins.top - margins.bottom)\n .tickSizeOuter(0);\n axisGenerator(axisGroup);\n\n function addTicks(tickArg, length) {\n axisGroup\n .selectAll(\".tick\")\n .data(scale.ticks(tickArg), d => d)\n .enter()\n .append(\"line\")\n .attr(\"class\", \"tick\")\n .attr(\"stroke\", \"currentColor\")\n .attr(\"y1\", 0)\n .attr(\"y2\", length || 8)\n .attr(\"x1\", scale)\n .attr(\"x2\", scale);\n }\n\n addTicks(12, 20);\n addTicks(100, 8);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`### Pointer at selected time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"function drawDial(svg, x) {\n if (x === undefined) x = -200; // Start with the dial out of view\n svg.select(\".dial\").remove();\n let dial = svg\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + x + \", 0)\")\n .attr(\"class\", \"dial\");\n\n // Draw the main shape\n let dialShape =\n \"M0 0 l 15 20 v 18 q 0 5 -5 5 h -20 q -5 0 -5 -5 v -18 l 15 -20\";\n dial\n .append(\"path\")\n .attr(\"fill\", \"#ccc\")\n .attr(\"fill-opacity\", \"0.85\")\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-width\", \"1px\")\n .attr(\"d\", dialShape);\n\n // Add stripes for texture\n function addStripe(x) {\n dial\n .append(\"rect\")\n .attr(\"fill\", \"#515151\")\n .attr(\"width\", \"3\")\n .attr(\"height\", \"16\")\n .attr(\"x\", x)\n .attr(\"y\", \"21\");\n }\n\n addStripe(-7.5);\n addStripe(-1.5);\n addStripe(4.5);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"md`Quick check to make sure it works:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"sampleDial = {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", \"40\")\n .attr(\"height\", \"50\")\n .call(drawDial, 20);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Appendix: Imports and constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"axisStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"margin = Object({ top: 0, right: 5, bottom: 10, left: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}