2b:null 2c:["$","title",null,{"children":"X-axis | Micheal Slade | Observable"}] 31:T48e,### Character This is either for categorical variables, or just for data where there is always a character string. For academic, financial or combined years need to use this kind of axis. We also use this axis for categorical variables with long names that usually go on a horizontal chart (x_axis_charhoriz) #### Args - **width**: width of the chart (not including margins - see below) - **height**: height of chart, needed for the height of the gridlines - **xDomain**: domain of xd variable as all values of xd variable - **xType**: x-scale type, see d3 documentation for more detail (default: d3.scalePoint) - **fontsize**: font size for ticks - **marginLeft** margin to the left of the chart - the tick labels on the y axis go here - **marginRight**: margin the right, this is where the line labels (if needed) - **marginTop**: margin to the top, this is where the legend (if needed) goes - **xRange**: two item array to set the start and end of the axis in pixels (default: [marginLeft, (width - marginRight)]) - **showXgrid**: whether to show the gridlines (default: true) xRange = [marginLeft, (width - marginRight)], xDomain, showXgrid = true, 32:T2460,function x_axis_qtr(data, svg, { width, height, xDomain, fontSize, marginLeft, marginRight, marginTop = 40, marginBottom, xRange = [marginLeft, (width - marginRight)], add_silent = false, nolabels = false, silentRange = [marginLeft, (width - marginRight)] //sharedRange = } = {}, contg) { //let numvals = d3.map() console.log(`QTR: H: ${height} | W: ${width} | R0: ${xRange[0]} | R1: ${xRange[1]} | MR: ${marginRight} | ML ${marginLeft} | NL ${nolabels}`) //// Constructor //// let self = this; if(contg == undefined) contg = svg; self.xRange = xRange self.marginLeft = marginLeft self.height = height if (xDomain === undefined) this.xDomain = d3.extent(data, d => d.xd) const random_id = Math.floor(Math.random()*1000); const gname = `labelsg_${random_id}` self.xg = contg.append("g").classed("xaxis", true).attr("name", gname) //// Accessor functions //// self.setWidth = function(ww) { self.width = ww; self.xRange = [self.marginLeft, (width - marginRight)] } self.setSharedRange = function(rr) { self.xRange = rr self.draw() } self.getSharedRange = function() { return self.xRange } self.getDomain = function() { return xDomain; } self.setMargins = function(t, r, b, l) { if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; //if(b !== undefined) marginTop = b; if(l !== undefined) marginLeft = l; self.xRange = [marginLeft, ((width - marginRight))] } self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt } self.set_max_domain = function(newmax) { xDomain[1] = newmax; } //// Draw //// self.draw = function() { let ggql, ggq, tVal, lVal, qheight = 0; self.xg.selectAll("*").remove() self.xScale = d3.scaleUtc(self.xDomain, self.xRange); if(add_silent) { let silentdomain = data.map(d => d.dtid) self.silentScale = d3.scaleBand(silentdomain, self.xRange).align(0).paddingOuter(0) } let t1Y = +d3.timeFormat("%Y")(self.xDomain[0]) let wdth = self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-04-01`)) - self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-01-01`)) self.xg.append("g").attr("class", "gridxq") if(wdth > 30) { const tickVals = ["01-01", "04-01", "07-01", "09-30"] const labelVals = ["02-15", "05-17", "08-16", "11-16"] tVal = [] lVal = [] for(let y = +d3.timeFormat("%Y")(this.xDomain[0]); +y <= d3.timeFormat("%Y")(this.xDomain[1]); y++ ) { for(let i = 0; i < labelVals.length; i++) { let tckdate = d3.timeParse("%Y-%m-%d")(`${y}-${tickVals[i]}`); let labdate = d3.timeParse("%Y-%m-%d")(`${y}-${labelVals[i]}`); if(labdate >= this.xDomain[0] && tckdate <= this.xDomain[1]) { if(tckdate < this.xDomain[0]) this.xDomain[0] = tckdate if(labdate > this.xDomain[1]) this.xDomain[1] = labdate tVal.push(tckdate); lVal.push(labdate) } } } let xAxisQt; xAxisQt = d3.axisBottom(self.xScale) .tickValues(tVal) .tickSizeOuter(0) .tickSizeInner(10) .tickFormat("") ggq = this.xg.append("g") .attr("name", "ggq") .classed("qtrs", true) .call(xAxisQt); ggq.selectAll(".tick line") .attr("y2", (d, i) => { let md = +d3.timeFormat("%m-%d")(d) return (md == "01-01" ? 18 : 8) }) .style("stroke", "#BCBCBC") let xAxisQl if(nolabels) { xAxisQl = d3.axisBottom(self.xScale).tickValues([]) } else { xAxisQl = d3.axisBottom(self.xScale) .tickValues(lVal) .tickSize(0) .tickFormat((d) => { let mm = (+d3.timeFormat("%m")(d)+1)/3 return `Q${mm}` }) } ggql = self.xg.append("g") .attr("name", `ggql_${random_id}`) .classed("qtrsl", true) .call(xAxisQl); ggql.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", "11pt") .style("fill", "#ABABAB") ggq.selectAll(".qtrs>.tick line") .style("stroke", "#BCBCBC") ggq.select(".domain").style("stroke", "#888888") ggql.select(".domain").remove(); const qbox = get_bbox(svg, `ggql_${random_id}`) qheight = qbox.height } const lastyear = d3.timeFormat("%Y")(this.xDomain[1]) const lastmonth = d3.timeFormat("%m")(this.xDomain[1]) let xAxisY, xAxisY2, xAxisY3; if(nolabels) { xAxisY = d3.axisBottom(self.xScale).tickValues([]) } else { xAxisY = d3.axisBottom(self.xScale) .ticks(d3.timeMonth.every(1), "%Y") .tickSize(qheight * 2) .tickFormat((d) => { let yy = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) let labpos = (yy == lastyear ? (lastmonth > 2 & lastmonth < 6 ? `0${lastmonth}` : "06" ) : "06") return (mm == labpos ? d3.timeFormat("%Y")(d) : "") }) let t1 = data[0].xd let tlast = data[data.length-1].xd let m1 = +d3.timeFormat("%m")(t1) let mlast = +d3.timeFormat("%m")(tlast) let y1 = d3.timeFormat("%Y")(t1) let ylast = d3.timeFormat("%Y")(tlast) xAxisY2 = d3.axisBottom(self.xScale) .ticks(d3.timeYear.every(1), "%Y") .tickSizeInner(qheight * 2) .tickSizeOuter(0) .tickFormat((d) => { let yrstring = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) return (yrstring == ylast && mlast < 4 ? "" : yrstring) }) if(m1 < 10) { let xt1 = d3.timeParse("%Y-%m-%d")(`${y1}-${(m1 <= 7 ? "07" : m1)}-02`) xAxisY3 = d3.axisBottom(self.xScale) .tickValues([xt1]) .tickFormat(d => d3.timeFormat("%Y")(d)) .tickSize(qheight * 2) let ggy3 = self.xg.append("g") .attr("name", `ggxyrs3_${random_id}`) .classed("yrs", true) .call(xAxisY3); ggy3.selectAll(".tick line") .style("opacity", 0) ggy3.selectAll(".tick text") .attr("transform", (d) => { return `translate(0, ${qheight * -1})` }) .style("font-family", "Arial") .style("font-size", "14pt") .style("fill", "#ABABAB") .style("stroke-opacity", "0.4") .attr('text-anchor', "middle") ggy3.select(".domain").remove(); ggy3.attr("transform", `translate(0, ${height - self.lheight})`) } } let w6m = self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-07-02`)) - self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-01-01`)) let ggy2 = self.xg.append("g") .attr("name", `ggxyrs2_${random_id}`) .classed("yrs", true) .call(xAxisY2) ggy2.selectAll(".tick text") .attr("transform", (d) => { let pos1 = self.xScale(d) let rmax = self.xScale.range()[1] let mv = ((pos1 + w6m) < rmax ? w6m : rmax - pos1) return `translate(${mv }, ${qheight * -1})` }) .style("font-family", "Arial") .style("font-size", "14pt") .style("fill", "#ABABAB") .style("stroke-opacity", (d) => { return "0.4" }) .attr('text-anchor', (d) => { let pos1 = self.xScale(d) let rmax = self.xScale.range()[1] return ((pos1 + w6m) < rmax ? "middle": "end") }) ggy2.selectAll(".tick line") .style("stroke", "#BCBCBC") .style("stroke-width", d => (wdth > 30 ? 4 : 1) ) //ggy2.select(".domain").remove(); const ybox = get_bbox(svg, `ggxyrs2_${random_id}`) // const xaxbox = get_bbox(svg, gname) self.lheight = qheight + ybox.height //ggy.attr("transform", `translate(0, ${height - self.lheight})`) ggy2.attr("transform", `translate(0, ${height - self.lheight})`) if(wdth > 30) { ggql.attr("transform", `translate(0, ${height - self.lheight})`) ggq.attr("transform", `translate(0, ${height - self.lheight})`) let gridq = self.xg.selectAll(".gridxq") .call(d3.axisBottom(self.xScale) .tickValues(tVal) .tickSizeInner(height - self.lheight - marginTop) .tickSizeOuter(0) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`); } else { console.log(`WIDTH LESS THAN 30: ${wdth}`) let gridq = self.xg.selectAll(".gridxq") .call(d3.axisBottom(self.xScale) .ticks(d3.timeYear.every(1), "%Y") .tickSizeInner(height - self.lheight - marginTop) .tickSizeOuter(0) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`); } self.xg.select(".gridxq .domain").remove(); self.xg.selectAll(".gridxq line") .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", (d) => { let mm = d3.timeFormat("%m")(d) let ww; if(wdth < 30){ return 2; } else { return (mm == 1 && wdth > 30 ? 4 : 0.5) } }) .style("shape-rendering", "crispEdges") } }33:T1062,function x_axis_qtr_bar(data, svg, { width, height, xDomain, fontSize, marginLeft, marginRight, marginTop = 40, marginBottom, xRange = [marginLeft, (width - marginRight)], textCol = "#888888" } = {}, contg) { //// Constructor //// let self = this; if(contg == undefined) contg = svg; self.xRange = xRange self.marginLeft = marginLeft self.height = height if (xDomain === undefined) xDomain = d3.extent(data, d => d.dtid) self.xg = svg.append("g").classed("xaxis", true) //// Accessor functions //// self.setWidth = function(ww) { self.width = ww; self.xRange = [this.marginLeft, (width - marginRight)] } self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt } self.setMargins = function(t, r, b, l) { if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; if(l !== undefined) marginLeft = l; xRange = [marginLeft, ((width - marginRight))] } self.getDomain = function() { return xDomain; } //// Draw //// this.draw = function() { let ggql, ggq, qheight = 0; self.xg.selectAll("*").remove() let silentdomain = data.map(d => d.dtid) // let idcheck = d3.nest().key(d => d.dtid).entries(data) let gpd = d3.group(data, d => d.dtid) // let mappedData = new Map() self.xScale = d3.scaleBand(silentdomain, xRange).align(0).paddingOuter(0); self.silentScale = self.xScale let wdth = self.xScale(2) - self.xScale(1) if(wdth > 30) { let xAxisQt = d3.axisBottom(self.xScale) //.tickValues(tVal) .tickSizeOuter(0) .tickSizeInner(10) .tickFormat("") self.xg.append("g").attr("class", "gridxq") ggq = self.xg.append("g") .attr("name", "ggq") .classed("qtrs", true) .call(xAxisQt); //const xAxisQl = d3.axisBottom(self.xScale) //const xAxisQl = d3.axisBottom(self.silentScale) // .tickSize(0) ggq.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", "11pt") .style("fill", textCol) .text((d) => { let itm = gpd.get(d)[0].xd return `Q${+d3.timeFormat("%m")(itm)/3}` }) ggq.selectAll(".tick line") .style("opacity", 0) ggq.select(".domain").style("stroke", "#888888") // const qbox = get_bbox(svg, "ggq") qheight = qbox.height } //ggq.attr("transform", `translate(0, ${height - qheight})`) const xAxisQY = d3.axisBottom(self.xScale) .tickSizeInner(qheight) .tickSizeOuter(0) let ggy = self.xg.append("g") .attr("name", "ggy") .classed("yrs", true) .call(xAxisQY); ggy.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", "14pt") .style("fill", "#ABABAB") .text((d) => { let itm = gpd.get(d)[0].xd let mtext = `Q${+d3.timeFormat("%m")(itm)/3}` let ytext = `${+d3.timeFormat("%Y")(itm)}` return (mtext == "Q3" ? ytext : "") }) .attr("transform", `translate(${wdth / -2}, 0)`) this.xg.selectAll(".yrs line") .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", (d) => { let itm = gpd.get(d)[0].xd let mm = +d3.timeFormat("%m")(itm)/3 return (mm == 1 ? 4 : 0.5) }) .style("shape-rendering", "crispEdges") .attr("transform", `translate(${wdth / -2}, 0)`) .attr("y2", (d, i) => { let mm = +d3.timeFormat("%m")(data[d].xd)/3 //let mmv = (self.onlyyears ? mbox.height : mbox.height * 2) return (mm == 1 ? qheight + 10 : qheight) }) ggy.attr("transform", `translate(0, ${height - qheight})`) ggy.select(".domain").remove(); const ybox = get_bbox(svg, "ggy") self.lheight = qheight + ybox.height //ggql.attr("transform", `translate(0, ${height - this.lheight})`) if(wdth > 30) { ggq.attr("transform", `translate(0, ${height - self.lheight})`) } ggy.attr("transform", `translate(0, ${height - self.lheight})`) } }34:T14f3,function x_axis_dt_bar(data, svg, { width, height, xDomain, fontsize = "11pt", fontsize2 = "14pt", marginLeft, marginRight, marginTop = 40, marginBottom, xRange = [marginLeft, (width - marginRight)], textCol = "#888888" } = {}, contg) { console.log("IN X BAR DT!!") //// Constructor //// let self = this; let silentdom; if(contg == undefined) contg = svg; this.xRange = xRange this.marginLeft = marginLeft this.height = height if (xDomain === undefined) { console.log("no dom") silentdom = data.map(d => d.dtid) } else { console.log("is dom") silentdom = d3.range(xDomain[0], xDomain[1], 1) } this.xg = contg.append("g").classed("xaxis", true) //// Accessor functions //// this.setWidth = function(ww) { self.width = ww; self.xRange = [this.marginLeft, (width - marginRight)] } self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt } self.setMargins = function(t, r, b, l) { if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; //if(b !== undefined) marginTop = b; if(l !== undefined) marginLeft = l; xRange = [marginLeft, ((width - marginRight))] } self.getDomain = function() { return xDomain; } self.setSharedRange = function(rr) { self.xRange = rr self.draw() } //// Draw //// this.draw = function() { let ggql, ggq, qheight = 0; self.xg.selectAll("*").remove() let silentdomain = data.map(d => d.dtid) console.log("****************************************") console.log(silentdom) console.log(silentdomain) console.log("*****************************************") self.xScale = d3.scaleBand(silentdomain, xRange).align(0).paddingOuter(0); self.silentScale = self.xScale // this is the width of the difference between value 1 and value 2 // we can assume here that the data is for every month let wdth = self.xScale(2) - self.xScale(1) let xvals = [...new Set(data.map(d => d.xd))]; //let maxxval = xvals.at(-1) let day_milli = 86400000 let tmwdth = (xvals[1] - xvals[0]) / day_milli //let tmdiff = (wdth / tmwdth) * (365.25 * 0.5) let m6w = (wdth / tmwdth) * (365.25 * 0.5) // this is the width for every year. Could check that this works? let yrwdth = self.xScale(12) - self.xScale(12) if(wdth > 30) { let xAxisQt = d3.axisBottom(self.xScale) //.tickValues(tVal) .tickSizeOuter(0) .tickSizeInner(10) .tickFormat("") self.xg.append("g").attr("class", "gridxq") ggq = self.xg.append("g") .attr("name", "ggq") .classed("qtrs", true) .call(xAxisQt); const xAxisQl = d3.axisBottom(self.xScale) .tickSize(0) ggq.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", fontsize) .style("fill", textCol) .text(d => d3.timeFormat("%b")(data[d].xd)) ggq.selectAll(".tick line") .style("opacity", 0) ggq.select(".domain").style("stroke", "#888888") // const qbox = get_bbox(svg, "ggq") qheight = qbox.height // ggq.attr("transform", `translate(0, ${height - qheight})`) } self.lheight = qheight let tickvs = [0] let i = 0; let y1 = +d3.timeFormat("%Y")(xvals[0]) xvals.forEach((d) => { let ythis = +d3.timeFormat("%Y")(d) if(ythis > y1) { y1 = ythis; tickvs.push(i) } i++; }) const xAxisQY = d3.axisBottom(self.xScale) //.tickV .tickValues(tickvs) .tickSizeInner(qheight) //.tickSizeInner(30) .tickSizeOuter(0) let ggy = self.xg.append("g") .attr("name", "ggy") .classed("yrs", true) .call(xAxisQY); ggy.selectAll(".tick text") .attr("text-anchor", "end") .style("font-family", "Arial") .style("font-size", fontsize2) .style("fill", "#ABABAB") //.style("text-anchor", "middle") .text((d) => { if(d == 0) { let yr = +d3.timeFormat("%Y")(data[d].xd) return ((self.xScale(tickvs[1]) - self.xScale(tickvs[0])) > m6w ? yr : "") } else { return (self.xScale(d) + m6w > self.xRange[1] ? "" : `${+d3.timeFormat("%Y")(data[d].xd)}`) } }) .attr("transform", `translate(${m6w}, 0)`) ggy.selectAll(".tick line") .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", 4) .style("shape-rendering", "crispEdges") .attr("transform", `translate(${wdth / -2}, 0)`) .attr("y2", (d, i) => { /*let mm = +d3.timeFormat("%m")(data[d].xd) //let mmv = (self.onlyyears ? mbox.height : mbox.height * 2) return (mm == 1 ? qheight + 10 : qheight)*/ let mm = qheight + 10 return (d == 0 ? 0 : qheight + 20) }) // ggq.attr("transform", `translate(0, ${height - qheight})`) ggy.select(".domain").remove(); const ybox = get_bbox(svg, "ggy") self.lheight = qheight + ybox.height if(wdth > 30) { ggq.attr("transform", `translate(0, ${height - self.lheight})`) } ggy.attr("transform", `translate(0, ${height - self.lheight})`) } }35:T261e,// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment function x_axis_dt(data, svg, { width, height, xDomain, // [xmin, xmax] defined, // for gaps in data xType = d3.scaleUtc, // the x-scale type fontsize = "11pt", fontsize2 = "14pt", marginLeft = 0, marginRight = 0, marginTop = 40, marginBottom = 0, showXgrid = true, add_silent = false, xRange = [marginLeft, (width - marginRight)], numticks = Math.floor(width / 170), textCol = "#888888", nolabels = false, chart_id = 1, ticksOnValues = false } = {}, contg) { console.log(`DATE: X: ${fontsize} X2: ${fontsize2}`) //// Constructor //// if(contg == undefined) contg = svg; let self = this; let monthx = 0; let yearx = 0; self.onlyyears = false; let ss = new Set(data.map(d => d3.timeFormat("%Y-%m-%d")(d.xd))) let xvals = [...new Set(data.map(d => d3.timeFormat("%Y-%m-%d")(d.xd)))]; let numvals = xvals.length // marginLeft = marginLeft if (xDomain === undefined) xDomain = d3.extent(data, d => d.xd) self.xg = contg.append("g").classed("xaxis", true) //// Accessor functions //// self.xRange = xRange self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt } self.setWidth = function(ww) { width = ww; xRange = [marginLeft, ((width - marginRight))] } self.set_max_domain = function(newmax) { xDomain[1] = newmax; } self.set_numticks = function(n) { numticks = n } self.setSharedRange = function(rr) { self.xRange = rr self.draw() } self.getDomain = function() { return xDomain; } self.setMargins = function(t, r, b, l) { if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; //if(b !== undefined) marginTop = b; if(l !== undefined) marginLeft = l; xRange = [marginLeft, ((width - marginRight))] } //// Draw //// self.draw = function() { self.xg.selectAll("*").remove() // self.xScale = xType(xDomain, xRange).nice(); self.xScale = xType(xDomain, xRange); monthx = (self.xScale(d3.timeParse("%Y-%m-%d")("2022-01-02")) - self.xScale(d3.timeParse("%Y-%m-%d")("2022-01-01"))) * 15 yearx = self.xScale(d3.timeParse("%Y-%m-%d")("2022-01-01")) - self.xScale(d3.timeParse("%Y-%m-%d")("2021-07-02")) let xAxis; if(nolabels) { xAxis = d3.axisBottom(self.xScale).tickValues([]) } else if(ticksOnValues) { xAxis = d3.axisBottom(self.xScale) .tickValues(data.map(d => d.xd)) .tickSizeOuter(0) .tickSizeInner(5) .tickFormat(d => (d3.timeFormat("%m")(d) == "01" ? d3.timeFormat("%b")(d) : d3.timeFormat("%b")(d))) } else if(numvals > 4) { xAxis = d3.axisBottom(self.xScale) .ticks(numticks) .tickSizeOuter(0) .tickSizeInner(5) .tickFormat(d => (d3.timeFormat("%m")(d) == "01" ? d3.timeFormat("%b")(d) : d3.timeFormat("%b")(d))) } else { xAxis = d3.axisBottom(self.xScale) .tickValues(data.map(d => d.xd)) .tickSizeOuter(0) .tickSizeInner(5) .tickFormat(d => (d3.timeFormat("%m")(d) == "01" ? d3.timeFormat("%b")(d) : d3.timeFormat("%b")(d))) } self.num_actual_ticks = self.xScale.ticks().length; self.xg.append("g").attr("class", `gridxm_${chart_id}`) self.xg.append("g").attr("class", `gridxy_${chart_id}`) let ggm = self.xg.append("g") .attr("name", `ggm_${chart_id}`) .classed("mths", true) .call(xAxis); let prvtickyear = 1066; let onlyyears = true; ggm.selectAll(".tick text") .attr("name", (d) => { let yr = +d3.timeFormat("%Y")(d) let mth = +d3.timeFormat("%m")(d) if(mth > 1 | yr <= prvtickyear) { onlyyears = false } prvtickyear = yr; return "a" }) if(onlyyears) numticks = 5 let ticktext = ggm.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", fontsize) .style("fill", textCol) .text(d => (onlyyears == true ? d3.timeFormat("%Y")(d) : d3.timeFormat("%b")(d))) .attr("transform", d => (onlyyears ? `translate(${yearx}, 0)` : `translate(0,0)`)) ggm.selectAll(".mths>.tick line") .style("stroke", "#BCBCBC") ggm.select(".domain").style("stroke", "#888888") const mbox = get_bbox(svg, `ggm_${chart_id}`) const lastyear = d3.timeFormat("%Y")(xDomain[1]) const lastmonth = d3.timeFormat("%m")(xDomain[1]) let xAxisY; if(nolabels) { xAxisY = d3.axisBottom(self.xScale).tickValues([]) } else { xAxisY = d3.axisBottom(self.xScale) .ticks( d3.timeMonth.every(1), "%Y") .tickSize(mbox.height * 2) .tickFormat((d) => { let yy = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) let labpos = (yy == lastyear ? (lastmonth > 2 & lastmonth < 6 ? `0${lastmonth}` : "06" ) : "06") return (mm == labpos ? d3.timeFormat("%Y")(d) : "") }) } const xAxisYtick = d3.axisBottom(self.xScale) .ticks(d3.timeMonth.every(1), "%m") .tickSizeOuter(0) //.tickSizeInner(d => d3.timeFormat("%m")(d) == 1 ? (mbox.height * 2) : 0) .tickSizeInner( (mbox.height * 2)) .tickFormat((d) => { let yrstring = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) let yy = d3.timeFormat("%y")(d) let last = yy == lastyear && mm == lastmonth && mm > 2 let retval = (onlyyears ? "" : (mm == "06" || (last == true && mm < "06") ? yrstring : "")) return retval }) let ggyt = self.xg.append("g") .attr("name", "ggy") .classed("yrstick", true) //.classed("yrs", true) .call(xAxisYtick); ggyt.selectAll(".tick line") .style("stroke", "#BCBCBC") .style("opacity", (d) => { return (d3.timeFormat("%m")(d) == "01" ? 0.7 : 0) }) .attr("transform", `translate(${-monthx}, 0)`) .style("stroke-width", (onlyyears ? 2 : 4)) ggyt.selectAll(".tick text") .attr("transform", `translate(0, ${mbox.height * -1})`) .style("font-family", "Arial") .style("font-size", fontsize2) .style("fill", "#ABABAB") .style("fill", textCol) .style("stroke-opacity", "0.4") .attr('text-anchor', (d) => { let yy = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) return (yy == lastyear ? (lastmonth > 2 & lastmonth < 9 ? "end" : "start" ) : "start") }) ggyt.select(".domain").remove(); const ybox = get_bbox(svg, "ggy") self.lheight = (onlyyears ? mbox.height : mbox.height + ybox.height) self.lwidth = width ggm.attr("transform", `translate(0, ${height - self.lheight})`) // missing out margin top here? //ggy.attr("transform", `translate(0, ${height - self.lheight})`) ggyt.attr("transform", `translate(0, ${height - self.lheight})`) ggm.raise() if(showXgrid) { // Grid lines. console.log(`*************** show: ${showXgrid} | numticks: ${numticks} ****************`) let gridm = self.xg.selectAll(`.gridxm_${chart_id}`) .call(d3.axisBottom(self.xScale) .ticks(numticks) //.ticks(5) .tickSize(height - self.lheight - marginTop) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`) self.xg.select(`.gridxm_${chart_id} .domain`).remove(); self.xg.selectAll(`.gridxm_${chart_id} line`) .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", (d) => { let mm = d3.timeFormat("%m")(d) let thck = (onlyyears ? 2 : 4) return 0.5 }) .style("shape-rendering", "crispEdges") //if(!onlyyears) { let gridy = self.xg.selectAll(`.gridxy_${chart_id}`) .call(d3.axisBottom(self.xScale) .ticks(d3.timeYear.every(1), "%Y") .tickSize(height - self.lheight - marginTop) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`) self.xg.select(`.gridxy_${chart_id} .domain`).remove(); let mvgrid = (onlyyears ? 0 : -monthx) self.xg.selectAll(`.gridxy_${chart_id} line`) .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", d => (onlyyears ? 2 : 4)) .style("shape-rendering", "crispEdges") .attr("transform", `translate(${mvgrid}, 0)`) //} } if(onlyyears) { ggm.remove() //ggy.remove() ggyt.remove() let xAxis if(nolabels) { xAxis = d3.axisBottom(self.xScale) .tickValues([]) .tickSizeOuter(0) .tickSizeInner(5) } else { xAxis = d3.axisBottom(self.xScale) .ticks(numticks) //.ticks(5) .tickSizeOuter(0) .tickSizeInner(5) //.tickFormat(d => (d3.timeFormat("%Y")(d))) } let ggjy = this.xg.append("g") .attr("name", "ggjy") .classed("justyears", true) .call(xAxis); ggjy.attr("transform", `translate(0, ${height - mbox.height})`) ggjy.selectAll(".tick line") .style("stroke", "#BCBCBC") ggjy.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", fontsize) .style("fill", "#ABABAB") .style("fill", textCol) .style("stroke-opacity", "0.4") ggjy.select(".domain").style("stroke", "#888888") } } } 36:T14af,function x_axis_char(data, svg, { width, height, fontsize = "11pt", marginLeft = 0, marginRight = 0, marginTop = 0, xRange = [marginLeft, (width - marginRight)], xDomain, showXgrid = true, xType = d3.scalePoint, chart_id = 1 } = {}, contg) { //// Constructor //// console.log(`X: ${fontsize}`) let self = this; if(contg == undefined) contg = svg; xDomain = data.map(d => d.xd) // d3.extent(data, d => d.xd) self.xg = contg.append("g").classed("xaxis", true) // Utility/Accessor functions this.setHeight = function(h) { this.height = h; } self.setWidth = function(ww) { width = ww; xRange = [marginLeft, (width - marginRight)] } self.setMarginTop = function(mt) { marginTop = mt } self.setMargins = function(t, r, b, l) { marginTop = (t !== undefined ? t : marginTop) if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; //if(b !== undefined) marginTop = b; if(l !== undefined) marginLeft = l; xRange = [marginLeft, ((width - marginRight))] } self.setSharedRange = function(rr) { xRange = rr self.draw() } self.getSharedRange = function() { return xRange } //// DRAW //// self.draw = function() { self.xg.selectAll("*").remove() let xAxis, xAxis_l, cbox, ggc, ggc_lower; if(data[0].hasOwnProperty("upper_xd")) { // Construct scales and axes. let xDomain_upper = data.map(d => d.upper_xd) let xDomain_lower = data.map(d => d.lower_xd) self.xScale_u = xType(xDomain_upper, xRange).padding(0.1); self.xScale_l = xType(xDomain_lower, xRange).padding(0.1); self.xScale = xType(xDomain, xRange).padding(0.1); xAxis = d3.axisBottom(self.xScale_u) .tickSizeOuter(0) .tickSizeInner(5) xAxis_l = d3.axisBottom(self.xScale_l) .tickSizeOuter(0) .tickSizeInner(0) ggc = self.xg.append("g") .attr("name", "ggc") .classed("charx", true) .call(xAxis); self.xg.append("g").attr("class", `gridxc_${chart_id}`) ggc.selectAll(".tick text") .attr("transform", `translate(0, 10)`) .style("font-family", "Arial") .style("font-size", fontsize) //.style("fill", "#888888") .style("fill", "#665c54") //.text(d => d.upper_xd) ggc.select(".domain") .style("stroke", "#ABABAB") ggc.selectAll(".charx>.tick line") .style("stroke", "#ABABAB") cbox = get_bbox(svg, "ggc") ggc_lower = self.xg.append("g") .attr("name", "ggc_l") .classed("charx", true) .call(xAxis_l); var xax = self.xg.selectAll(".xaxis") .attr("transform", "translate(0," + this.chartheight + ")") .attr("class", "xaxis") .call(xAxis); //self.xg.append("g").attr("class", `gridxc_${chart_id}`) ggc_lower.selectAll(".tick text") .attr("transform", `translate(0, 10)`) .style("font-family", "Arial") .style("font-size", fontsize) //.style("fill", "#888888") .style("fill", "#665c54") //.text(d => d.upper_xd) ggc_lower.select(".domain").remove() //ggc_lower.selectAll(".charx>.tick line").remove() let cbox_l = get_bbox(svg, "ggc_l") self.lheight = cbox.height + cbox_l.height ggc.attr("transform", `translate(0, ${height - this.lheight})`) ggc_lower.attr("transform", `translate(0, ${height - cbox.height - 3})`) } else { self.xScale = xType(xDomain, xRange).padding(0.1); xAxis = d3.axisBottom(self.xScale) .tickSizeOuter(0) .tickSizeInner(5) ggc = self.xg.append("g") .attr("name", "ggc") .classed("charx", true) .call(xAxis); var xax = self.xg.selectAll(".xaxis") .attr("transform", "translate(0," + this.chartheight + ")") .attr("class", "xaxis") .call(xAxis); self.xg.append("g").attr("class", `gridxc_${chart_id}`) ggc.selectAll(".tick text") .attr("transform", `translate(0, 10)`) .style("font-family", "Arial") .style("font-size", fontsize) //.style("fill", "#888888") .style("fill", "#515a5e") ggc.select(".domain") .style("stroke", "#ABABAB") ggc.selectAll(".charx>.tick line") .style("stroke", "#ABABAB") cbox = get_bbox(svg, "ggc") self.lheight = cbox.height ggc.attr("transform", `translate(0, ${height - this.lheight})`) } //self.lheight = cbox.height // this.lwidth = width if(showXgrid) { let gridc = self.xg.selectAll(`.gridxc_${chart_id}`) .call(d3.axisBottom(self.xScale) .ticks(width / 80) // not numticks? .tickSize(height - self.lheight - marginTop) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`) self.xg.selectAll(`.gridxc_${chart_id} line`) .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", d => (d == 0 ? 3 : 1)) .style("shape-rendering", "crispEdges") self.xg.select(`.gridxc_${chart_id} .domain`).remove(); } // ggc.attr("transform", `translate(0, ${height})`) } } 37:T85b,function x_axis_charhoriz(data, svg, { width, height, fontsize = "14pt", marginLeft = 10, marginRight = 0, marginTop = 0, marginBottom = 0, xRange = [(height - marginBottom), marginTop], // [left, right] xDomain, showXgrid = true, xType = d3.scalePoint, nolabels = false, chart_id = 1 } = {}, contg) { //// Constructor //// let self = this; if(contg == undefined) contg = svg; //console.log(data) xDomain = data.map(d => d.xd) // d3.extent(data, d => d.xd) //console.log(xDomain) self.xg = contg.append("g").classed("xaxis", true) // Utility/Accessor functions //self.removeLabels() self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt // console.log(`SETTING MARGIN TOP: ${marginTop} | B: ${marginBottom} | H: ${height} `) xRange = [(height - marginBottom), marginTop] } self.setMarginBottom = function(mb) { marginBottom = mb xRange = [(height - marginBottom), marginTop] } //// DRAW //// self.draw = function() { self.xg.selectAll("*").remove() // Construct scales and axes. // console.log(xRange) self.xScale = xType(xDomain, xRange).padding(0.1); let xAxis; if(nolabels) { xAxis = d3.axisLeft(self.xScale).tickValues([]) } else { xAxis = d3.axisLeft(self.xScale) } let ggc = self.xg.append("g") .attr("name", `ggc_${chart_id}`) .classed("charx", true) .call(xAxis); self.xg.append("g").attr("class", "gridxc") ggc.selectAll(".tick text") //.attr("transform", `translate(100, 0)`) .style("font-family", "Arial") .style("font-size", fontsize) .style("text-anchor", "end") .style("fill", "#665c54") ggc.select(".domain") .style("stroke", "#ABABAB") ggc.selectAll(".charx>.tick line") .style("stroke", "#ABABAB") self.xg.select(".xaxis .domain").remove(); const cbox = get_bbox(svg, `ggc_${chart_id}`) self.lwidth = cbox.width + 10 ggc.selectAll(".tick text") .attr("transform", `translate(${cbox.width +10}, 0)`) } }38:[] 2f:{"id":"865a8106cb0cb578","slug":null,"title":"X-axis","thumbnail":"60c9136157b7fe9a6b6ae965f1a92046bc51138bcdc3f56cc159cadade517831","access_level":"public","create_time":"$D2023-09-06T09:06:34.446Z","update_time":"$D2023-09-06T09:06:34.446Z","view_time":null,"first_public_time":"$D2023-09-06T09:06:34.446Z","has_unpublished_edits":null,"fork":{"id":"3ef351df5a30e305","slug":"x-axis","title":"X-axis","owner":{"id":"f25282bfd4a326d0","login":"joe-heywood-gla","name":"Joe Heywood"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a35c5fa3a8e9ea7","login":"micheal-slade","name":"Micheal Slade","avatar_url":"https://avatars-next.observableusercontent.com/a6b84fda5a8608e56e12f66919ebc84955718ad0756ae73e510ff77e9b2f3e7a","tier":"starter_2024"},"version":1851,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd85d5dcfe000cfa","login":"micheal-slade","name":"Micheal Slade","avatar_url":"https://avatars-next.observableusercontent.com/a6b84fda5a8608e56e12f66919ebc84955718ad0756ae73e510ff77e9b2f3e7a","tier":null}],"members":[{"type":"individual","id":"cd85d5dcfe000cfa","login":"micheal-slade","name":"Micheal Slade","avatar_url":"https://avatars-next.observableusercontent.com/a6b84fda5a8608e56e12f66919ebc84955718ad0756ae73e510ff77e9b2f3e7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"X-axis","cells":[{"id":0,"value":"# X-axis\n\n## Background\n\nIn the reports we do, we use charts that are generally in the following formats:\n\n- **Date** - updated daily, monthly or yearly. Format expected is \"YYYY-MM-DD\" (eg 2020-10-14)\n- **Quarterly** - using format \"YYYYQN\" (eg 2020Q3)\n- **Character strings** - we use this for things like combined or academic/financial years (2020/21) or for categories used in bar charts\n\nThe example below is a Date version of the x-axis. We weren't quite happy with the default D3, where the tick label for January is replace with the year. For this one, we add a second axis for the year that drops down and centres. The lines that come down are \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"### Date axis\n\nEach of the grid lines and ticks is a month or year. The year is separated from the month, if wide enough and sits underneath in the middle.\n\n#### Args\n\n- **width**: width of the chart (not including margins - see below)\n- **height**: height of chart, needed for the height of the gridlines\n- **xDomain**: domain of xd variable in the data in two item array [xmin, xmax]\n- **xType**: x-scale type, see d3 documentation for more detail (default: d3.scaleUtc)\n- **fontsize**: font size for ticks\n- **marginLeft** margin to the left of the chart - the tick labels on the y axis go here\n- **marginRight**: margin the right, this is where the line labels (if needed)\n- **marginTop**: margin to the top, this is where the legend (if needed) goes\n- **xRange**: two item array to set the start and end of the axis in pixels (default: [marginLeft, (width - marginRight)])\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"{\n let asvg = d3.create(\"svg\")\n .attr(\"width\", 1200)\n .attr(\"height\", 600)\n .attr(\"viewBox\", [0, 0, 1200, 600])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n let dc = new data_control(unempl) \n\n let x1 = new x_axis(dc.data, asvg, {\n type: \"date\",\n width: 1200,\n height: 600,\n marginLeft: 45,\n marginRight: 60,\n showXgrid: true,\n bar: false,\n //numticks : 7\n });\n\n\n x1.draw()\n\n\n\n return asvg.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"### Quarterly\n\nThis is the same as the date axis, but it focuses more on quarterly data. Instead of months, there are Q1, Q2, Q3 and Q4. Also the points line up between the lines, rather than at points.\n\n#### Args\n\n- **width**: width of the chart (not including margins - see below)\n- **height**: height of chart, needed for the height of the gridlines\n- **xDomain**: domain of xd variable in the data in two item array [xmin, xmax]\n- **xType**: x-scale type, see d3 documentation for more detail (default: d3.scaleUtc)\n- **fontsize**: font size for ticks\n- **marginLeft** margin to the left of the chart - the tick labels on the y axis go here\n- **marginRight**: margin the right, this is where the line labels (if needed)\n- **marginTop**: margin to the top, this is where the legend (if needed) goes\n- **xRange**: two item array to set the start and end of the axis in pixels (default: [marginLeft, (width - marginRight)])","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"{\n let asvg = d3.create(\"svg\")\n .attr(\"width\", 1200)\n .attr(\"height\", 600)\n .attr(\"viewBox\", [0, 0, 1200, 600])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n let dc = new data_control(dark)\n\n let x1 = new x_axis_qtr(dc.data, asvg, {\n width: 1200,\n height: 600,\n marginLeft: 45,\n marginRight: 60\n });\n\n x1.setWidth(1200)\n\n x1.draw()\n\n\n return asvg.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"\n{\n let asvg = d3.create(\"svg\")\n .attr(\"width\", 1400)\n .attr(\"height\", 600)\n .attr(\"viewBox\", [0, 0, 1400, 600])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n let dc = new data_control(socact, {\n convert_b : true,\n xtype: \"character\",\n yvlkp : [\"yvlkp\", \"aa\"]\n })\n\n\n\n\n let x1 = new x_axis_char(dc.data, asvg, {\n width: 1200,\n height: 600,\n marginLeft: 45,\n marginRight: 60,\n showXgrid : true,\n xType : d3.scaleBand\n });\n\n //x1.setWidth(900)\n x1.draw()\n\n\n\n return asvg.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"function x_axis(data, svg, {\n type = \"date\",\n width,\n height,\n xDomain, // [xmin, xmax]\n defined, // for gaps in data\n xType = d3.scaleUtc, // the x-scale type\n fontsize = 25,\n marginLeft = 0,\n marginRight = 0,\n marginTop = 10,\n marginBottom = 0,\n xRange = [marginLeft, (width - marginRight)],\n horiz = false,\n add_silent = false,\n bar = false,\n ticksOnValues = false\n} = {}, contg) {\n \n if(horiz) {\n xRange = [(height - marginTop - marginBottom), marginTop], // [left, right]\n x_axis_charhoriz.apply(this, arguments)\n } else if(type == \"date\"){\n if(bar) {\n x_axis_dt_bar.apply(this, arguments)\n } else {\n x_axis_dt.apply(this, arguments)\n }\n \n } else if(type == \"character\") {\n x_axis_char.apply(this, arguments)\n } else if(type == \"quarter\") {\n if(bar) {\n x_axis_qtr_bar.apply(this, arguments)\n } else {\n x_axis_qtr.apply(this, arguments)\n }\n \n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"//import {unempl, wkfc, data_control, pop, dark, qtrtest, o2, spending, ucws, socact, pensmeans} from \"@joeheywood/data-controller\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"import {get_bbox} from \"@joe-heywood-gla/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"