31:T624,RenderAxis(function CustomAxis(g, scale, height, m) { g.selectAll('.x-axis-bottom') .data(['x-axis-bottom'], d => d) .join('g') .attr('class', d => d) .attr("transform", `translate(${0}, ${height - m})`) .call( d3 .axisBottom() .scale(scale) .tickSize(10) .tickPadding(4) .tickSizeOuter(0) .tickFormat(d => { // GO THROUGH EACH TICK (DATE) let it = null; //LOWEST TICK IS $hour $am/pm if (+d3.timeHour(d) === +d) { it = d3.timeFormat('%-I %p')(d); } // 3RD TICK TIER - DAYS if (+d3.timeDay(d) === +d) { //eg: 03/09, 03/11, 03/13 it = d3.timeFormat('%m/%d')(d); } // // 2ND TICK TIER - WEEKS // if (+d3.timeWeek(d) === +d) { // //eg: Sun 08, Sun 15 // it = d3.timeFormat('%a %d')(d); // } //LARGEST TICKS - MONTHS if (+d3.timeMonth(d) === +d) { it = d3.timeFormat('%b')(d); } return it; }) ) .call(g => { g.selectAll('text') .filter(function(d, i) { if (d3.select(this).text() === '12AM') { d3.select(d3.select(this).node().parentNode).remove(); } }) .remove(); // g.selectAll('line').attr('stroke-dasharray', [2, 10]); // g.selectAll('.domain') // .attr('stroke-width', 2 * (height - 2 * m)) // .attr('opacity', 1); // .attr('stroke', '#f5f5f5'); }); })32:Tcb6,RenderAxis(function CustomAxis2(g, scale, height, m) { //this code is messy and can be simplified a lot let axisGroup = g .selectAll('.x-axis-bottom') .data(['x-axis-bottom'], d => d) .join('g') .attr('class', d => d) .attr("transform", `translate(${0}, ${height - m})`); //CALCUALTE TIME @start let startTime = scale.invert(scale.range()[0]); //@end let endTime = +scale.invert(scale.range()[1]); let months = d3.timeMonths(d3.timeMonth(startTime), endTime); let days = d3.timeDays(d3.timeDay(startTime), endTime); let hours = d3.timeHours(d3.timeHour(startTime), endTime); let movement = d3.transition(); mutable temp = { months: months, days: days, hours: hours }; if (days.length > 30 * 4) { // mutable temp = months; axisGroup .selectAll('.week-ticks') .transition(movement) .attr('opacity', 10e-6) .remove(); axisGroup .selectAll('.month-ticks') .data(['month-ticks'], d => d) .join('g') .attr('class', d => d) .call( d3 .axisBottom() .scale(scale) .tickSize(20) .tickPadding(4) .tickSizeOuter(0) .ticks(d3.timeMonth.every(4)) .tickFormat(d3.timeFormat('%b')) ) .call(g => g.attr('font-size', 14).call(styleAxis)); } else if (days.length < 30 * 4 && days.length > 14) { axisGroup .selectAll('.month-ticks, .day-ticks') .transition(movement) .attr('opacity', 10e-6) .remove(); axisGroup .selectAll('.week-ticks') .data(['week-ticks'], d => d) .join('g') .attr('class', d => d) .call( d3 .axisBottom() .scale(scale) .tickSize(15) .tickPadding(4) .tickSizeOuter(0) .ticks(d3.timeWeek.every(1)) .tickFormat(d3.timeFormat('%b-%d')) ) .call(g => g.attr('font-size', 12).call(styleAxis)); } if (days.length < 14) { if (days.length > 7) { axisGroup .selectAll('.hour-ticks, .week-ticks') .transition(movement) .attr('opacity', 10e-6) .remove(); } axisGroup .selectAll('.day-ticks') .data(['day-ticks'], d => d) .join('g') .attr('class', d => d) .call( d3 .axisBottom() .scale(scale) .tickSize(15) .tickPadding(4) .tickSizeOuter(0) .ticks(d3.timeDay.every(1)) .tickFormat(d3.timeFormat('%-m/%d')) ) .call(g => g.attr('font-size', 14).call(styleAxis)); } if (hours.length < 24 * 7) { axisGroup .selectAll('.hour-ticks') .data(['hour-ticks'], d => d) .join('g') .attr('class', d => d) .call( d3 .axisBottom() .scale(scale) .tickSize(5) .tickPadding(4) .tickSizeOuter(0) .ticks(d3.timeHour.every(6)) .tickFormat(d3.timeFormat('%-I%p')) ) .call(g => g.call(styleAxis)) .call(g => g.selectAll('text').filter(function(d, i) { if (d3.select(this).text() === '12AM') { d3.select(d3.select(this).node().parentNode).remove(); } }) ); } })33:[{"id":"992d73b7cc93398a5ccc24551e8f21b6e8b744faf44da885042eae772d58c9d45dc8dea64ab174b6035867aed6da3b623866f15ce0ee210e2d10c7e83cfc0ddd","href":"https://static.observableusercontent.com/files/992d73b7cc93398a5ccc24551e8f21b6e8b744faf44da885042eae772d58c9d45dc8dea64ab174b6035867aed6da3b623866f15ce0ee210e2d10c7e83cfc0ddd","name":"Annotation 2020-06-20 233119.png","type":"image/png","lastModified":1592721065533.636,"size":8383},{"id":"9f6235b491385d5c19e19ba86adf41b88f54e1a49378974e5b6f27736c97993816c74c094b1f436c9d13cef76c524ae7578e40b829051397d05b65a49b27ca6f","href":"https://static.observableusercontent.com/files/9f6235b491385d5c19e19ba86adf41b88f54e1a49378974e5b6f27736c97993816c74c094b1f436c9d13cef76c524ae7578e40b829051397d05b65a49b27ca6f","name":"Annotation 2020-06-20 233405.png","type":"image/png","lastModified":1592721065533.802,"size":6376},{"id":"9aa0b0b8775b00b2496cf4595dde15baf5cf0a48413aea27ff996099bf35a6347398891c0eb9d0cee2bc118d096bc604c3307f5bb9d17a2440143a6ad4e1559b","href":"https://static.observableusercontent.com/files/9aa0b0b8775b00b2496cf4595dde15baf5cf0a48413aea27ff996099bf35a6347398891c0eb9d0cee2bc118d096bc604c3307f5bb9d17a2440143a6ad4e1559b","name":"Screen Shot 2021-02-07 at 5.19.32 PM.png","type":"image/png","lastModified":1612736743334.633,"size":22565},{"id":"ea7d9686e927410551527e1190f52a14c22f5ba7d2aca55d721d3e4add2a3e7ec0a03c57cfb34ea6ccb3a7f6d426f5f6df55d11b59bd571c5aa34ef95ff7e39c","href":"https://static.observableusercontent.com/files/ea7d9686e927410551527e1190f52a14c22f5ba7d2aca55d721d3e4add2a3e7ec0a03c57cfb34ea6ccb3a7f6d426f5f6df55d11b59bd571c5aa34ef95ff7e39c","name":"Annotation 2020-06-20 233016.png","type":"image/png","lastModified":1592721065531.827,"size":6440}] 2f:{"title":"TimeScale Axis Ticks","cells":[{"id":0,"value":"md`# TimeScale Axis Ticks\n\n**Instructions**: *Perform Zoom over the SVG*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"timeScale = d3\n .scaleTime()\n //from start of this year to end of this year\n .domain([d3.timeYear.floor(new Date()), d3.timeYear.ceil(new Date())])\n .range([m, width - m])\n// .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`## Default`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"timeMultiFormatter = (date) => {\n // formatMillisecond: .000\n const formatMillisecond = d3.timeFormat(\".%L\"),\n // formatSecond: :00\n formatSecond = d3.timeFormat(\":%S\"),\n // formatMinute: 07:00\n formatMinute = d3.timeFormat(\"%I:%M\"),\n // formatHour: 07 PM\n formatHour = d3.timeFormat(\"%I %p\"),\n // formatDay: Tue 26\n formatDay = d3.timeFormat(\"%a %d\"),\n // formatWeek: Feb 26\n formatWeek = d3.timeFormat(\"%a, %b %d\"),\n // formatMonth: February\n formatMonth = d3.timeFormat(\"%B\"),\n // formatYear: 2019\n formatYear = d3.timeFormat(\"%Y\");\n\n return (d3.timeSecond(date) < date\n ? formatMillisecond\n : d3.timeMinute(date) < date\n ? formatSecond\n : d3.timeHour(date) < date\n ? formatMinute\n : d3.timeDay(date) < date\n ? formatHour\n : d3.timeMonth(date) < date\n ? d3.timeWeek(date) < date\n ? formatDay\n : formatWeek\n : d3.timeYear(date) < date\n ? formatMonth\n : formatYear)(date);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"RenderAxis(function (g, scale) {\n g.selectAll(\".x-axis-bottom\")\n .data([\"x-axis-bottom\"], (d) => d)\n .join(\"g\")\n .attr(\"class\", (d) => d)\n .attr(\"transform\", `translate(${0}, ${height - m})`)\n .call(d3.axisBottom(scale).tickFormat(timeMultiFormatter));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`## Custom\n\n### Approach 1: \n\nPlace logic inside \\`tickFormat\\` method on axis definition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`*While all of these are features of the d3-axis, how can we take control of such situations?*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"FileAttachment('Annotation 2020-06-20 233016.png').image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"FileAttachment('Annotation 2020-06-20 233119.png').image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"FileAttachment('Annotation 2020-06-20 233405.png').image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`### Approach 2\n\nRender multiple overlapping axes by counting the numbers of months, days, hours individually before conditionally rendering them.\n(it's *an* appraoch, I wouldn't say it's a good approach)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"mutable temp = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"md`But with this approach the styling can make more impact. On the downside, it took a lot of code to make it happen. *Trade-Offs*...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"await FileAttachment('Screen Shot 2021-02-07 at 5.19.32 PM.png').image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"m = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"RenderAxis = axis => {\n let svg = d3\n .create('svg')\n .attr('height', height)\n .attr('width', width);\n\n let zoom = d3.zoom().scaleExtent([1, 365]);\n\n // let axisGroup = svg\n // .append('g')\n // .attr('transform', `translate(0,${m})`)\n\n svg.call(axis, timeScale, height, m);\n\n svg.call(\n zoom.on('zoom', function() {\n let newScale = d3.event.transform.rescaleX(timeScale);\n svg.call(axis, newScale, height, m);\n })\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"function styleAxis(g) {\n g.select('.domain').remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`----\n### SCRATCH`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"withoutTime = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"withTimeAdjusted = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-19 18:30:00'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"withTime = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20 00:00:00'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20')) //","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"d3.timeParse('%Y-%m-%d')('2020-05-20')","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"d3.timeParse('%Y-%m-%dT%H:%M:%S')('2020-05-20T00:00:00')","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"withTime === withoutTime","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"new Date('2020-01-01')","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}