2b:null 2c:["$","title",null,{"children":"Performance Chart | Eric Lo | Observable"}] 31:T742,viewof options = form(html``)32:T47f,chart = { const isDark = options.theme === "dark"; const svg = d3.create("svg") .style("cursor", "default") .style("background", isDark ? "black" : "white") .attr("viewBox", [0,0,width,500]); document.body.append(svg.node()); const {pp, np} = getPalettes(options.scheme), tc = isDark ? "white" : "black", s = +options.year * 12 + 1, e = s + +options.frame * 12; const pchart = new PerformanceChart(svg) .size([width, 500]) .data(data.slice(s, e)) .tick({ name: "Month", interval: 12, extractor: d => { const ss = d.split(" "); return ss.length === 2 ? ss[1] : d; }, color: tc }) .options({ number: options.number, shape: options.shape, posPalette: pp, negPalette: np, isolateUnchanged: options.isounc, showSlider: true }) .color({ legend: tc, hover: isDark ? "white" : "#999", highlighter: isDark ? "#999" : "#eee" }) .tooltip({boxOpacity: isDark ? 0.9 : 0.8}) .render(); svg.node().remove(); return svg.node(); }33:T453,viewof options2 = form(html``)34:T9ec,md`## API Reference and Source Code * **PerformanceChart(container)** - Constructs a new instance of PerformanceChart with default settings. The container can be an svg or g element. * **size(_)** - Sets the dimensions of the chart to specified width, height and returns this chart. * **options(options)** - Overrides the default settings and returns this chart. * options.**number** - sets the measure to *"value"*, *"growth"* or *"growth rate"*. Default if growth. * options.**isolateUnchanged** - specifies whether the unchanged dots should be isolated into the unchanged section. * options.**posPalette** - sets the color palette of positive (rising) section to the specified continous interpolator. * options.**negPalette** - sets the color palette of negative (falling) section to the specified continous interpolator. * options.**shape** - sets the shape of dots to *"circle"* or *"square"*. Default is circle. * options.**clickAction** - specifies the click action to *"none"* or *"highlight"*. Default is highlight. * options.**showSlider** - specifies whether the slider is enabled. * options.**fontFamily** - sets the font. Default is sans-serif. * options.**fontSize** - sets the font size. Default is 10px. * **tick(tick)** - Overrides the tick settings and returns this chart. * tick.**name** - sets the column name of ticks * tick.**fontSize** - sets the tick's font size * tick.**color** - sets the tick's text color * tick.**interval** - sets the interval of x-axis to "auto" or a number. Default is auto. * tick.**extractor** - sets the function for extracting tick string. See the first demo for usage. * tick.**color** - sets the color of tick texts and lines. * **tooltip(tooltip)** - Overrides the tooltip settings and returns this chart. * tooltip.**color** - sets the text color of tooltip. * tooltip.**boxColor** - sets the background color of the tooltip box. * toolyip.**boxOpacity** - sets the opacity of the tooltip box. Default is 0.8. * **color(color)** - Overrides the color settings and returns this chart. * color.**legend** - sets the text color of legend. * color.**highlighter** - sets the color of highlighter. * color.**unchanged** - sets the color of unchanged dots. * **data(_)** - Sets the data and returns this chart. * **render()** - Renders the chart and returns it's instance. * **onhover(d)** - Occurs when user hover over a dot. * **onclick(d)** - Occurs when user click on a dot. * **oncancel(d)** - Occurs when cancelling the locked highlight.`35:T8ab3,// https://github.com/analyzer2004/performancechart // Copyright 2021 Eric Lo class PerformanceChart { constructor(container) { this._container = container; // Groups this._cg = null; this._g = null; this._og = null; this._ig = null; // Visual elements and selections this._dots = null; this._highlighter = null; this._rankAxis = null; this._zeroLine = null; this._uncLabel = null; this._textBox = null; this._charBox = null; this._infoBox = null; this._legendBox = null; // Extents this._pMin = 0; this._pMax = 0; this._nMin = 0; this._nMax = 0; this._rMin = 0; this._rMax = 0; // Base variables and constants this._width = 0; this._height = 0; this._shift = null; this._maxY = 0; this._leftMargin = 0; this._innerMargin = 0; this._legendHeight = 0; this._dotRadius = 0; this._dotDiameter = 0; this._maxUnchangedCount = 0; this._level = 0; this._defaultLevel = 0; // Shortcuts this._isNumber = false; this._isGrowth = true; this._isRate = false; this._isCircle = true; // Scales this._rk = null; this._x = null; this._y = null; this._yu = null; this._cp = null; this._cn = null; // Data and options this._options = { number: "growth", isolateUnchanged: true, posPalette: d3.interpolateYlGnBu, negPalette: d3.interpolateYlOrRd, shape: "circle", clickAction: "highlight", showSlider: true, fontFamily: "sans-serif", fontSize: "10px", debug: false }; this._tick = { name: "", isDate: false, format: "", interval: "auto", extractor: null, color: "black" }; this._tooltip = { color: "black", boxColor: "white", boxOpacity: 0.8 }; this._color = { legend: "black", hover: "#999", highlighter: "#eee", unchanged: "#aaa" }; this._data = null; this._chartData = null; this._keys = null; this._focusedKey = null; this._focusedRange = null; this._uniqueId = new String(Date.now() * Math.random()).replace(".", ""); // events this._onhover = null; this._onclick = null; this._oncancel = null; } size(_) { return arguments.length ? (this._width = _[0], this._height = _[1], this) : [this._width, this._height]; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } tick(_) { return arguments.length ? (this._tick = Object.assign(this._tick, _), this) : this._tick; } color(_) { return arguments.length ? (this._color = Object.assign(this._color, _), this) : this._color; } tooltip(_) { return arguments.length ? (this._tooltip = Object.assign(this._tooltip, _), this) : this._tooltip; } data(_) { return arguments.length ? (this._data = _, this) : this._data; } onhover(_) { return arguments.length ? (this._onhover = _, this) : this._onhover; } onclick(_) { return arguments.length ? (this._onclick = _, this) : this._onclick; } oncancel(_) { return arguments.length ? (this._oncancel = _, this) : this._oncancel; } render() { this._init(); this._process(); this._calcShift(); this._calcLeftMargin(); this._calcConstants(); this._initScales(); this._render(); return this; } _init() { const options = this._options; this._textBox = this._container .append("text") .attr("font-family", this._options.fontFamily) .attr("font-size", this._options.fontSize) .style("visibility", "hidden"); this._getCharBox(); this._legendHeight = this._charBox.height * 3; this._innerMargin = this._charBox.height * 2; this._isNumber = options.number === "value"; this._isGrowth = options.number === "growth"; this._isRate = !this._isNumber && !this._isGrowth; this._isCircle = options.shape === "circle"; } _process(update) { this._processKeys(); const start = this._isNumber ? 0 : 1, cd = Array(this._data.length - start); // Set level to average if number is value if (!update && this._isNumber) { const total = this._data .flatMap(d => this._keys.map(k => +d[k])) .reduce((a, b) => a + b); this._defaultLevel = this._level = total / (this._data.length * this._keys.length); } for (let i = start; i < this._data.length; i++) { let unc = 0; const tick = this._data[i][this._tick.name]; // Extract values by key, calculate growth and rate const values = this._keys.map(key => { const number = +this._data[i][key], prevValue = i === 0 ? 0 : +this._data[i - 1][key], growth = number - prevValue; let rate = 0; if (growth === 0) { unc++; if (prevValue === 0) rate = 0; // avoid NaN and it is unchanged else rate = growth / prevValue; } else rate = growth / prevValue; return { index: i, tick, key, number, growth, rate }; }); if (unc > this._maxUnchangedCount) this._maxUnchangedCount = unc; this._rankValues(values); cd[i - start] = { tick, values }; } this._chartData = cd; } _processKeys() { const keys = Object.keys(this._data[0]); if (this._tick.name === "") { this._tick.name = keys[0]; this._keys = keys.slice(1); } else { const index = keys.indexOf(this._tick.name); if (index > -1) { keys.splice(index, 1); this._keys = keys; } else throw "Invalid tick field."; } } _rankValues(values) { const level = this._level, isounc = this._options.isolateUnchanged; let pos = 0; values.sort((a, b) => this._getValue(b) - this._getValue(a)); // Rank positive section values .filter(d => { const v = this._getValue(d), g = this._isNumber ? d.growth : v; if (isounc ? g !== 0 && v >= level : v >= level) { if (v !== Number.POSITIVE_INFINITY && v > this._pMax) this._pMax = v; else if (v < this._pMin) this._pMin = v; return true; } else return false; }) .forEach((d, i) => { d.rank = i + 1; d.pos = pos++; if (d.rank > this._rMax) this._rMax = d.rank; else if (d.rank < this._rMin) this._rMin = d.rank; }); // Rank negative section values .filter(d => { const v = this._getValue(d), g = this._isNumber ? d.growth : v; if (isounc ? g !== 0 && v < level : v < level) { if (v > this._nMax) this._nMax = v; else if (v < this._nMin) this._nMin = v; return true; } else return false; }) .forEach((d, i) => { d.rank = -(i + 1); d.pos = pos++; if (d.rank > this._rMax) this._rMax = d.rank; else if (d.rank < this._rMin) this._rMin = d.rank; }); } _calcShift() { var a = 0, b = this._keys.length; var da = null, db = null; this._chartData.forEach(d => { let c = d.values.filter(v => this._getValue(v) < this._level).length; //if (this._options.isolateUnchanged) //c -= d.values.filter(v => v.growth === 0).length; if (c > a) { a = c; da = d; } if (c < b) { b = c; db = d; } }); this._shift = { min: { offset: b, data: db }, max: { offset: a, data: da } }; } _calcLeftMargin() { const max = this._calcTextLength("-999"); const margin = this._options.showSlider ? 40 + this._charBox.height : 0; // slider + value text height this._leftMargin = margin + max + 6; // max rank tick width + tick line } _calcConstants() { this._calcDotRadius(); this._calcMaxY(); } _calcDotRadius() { const availHeight = this._height - this._innerMargin - this._legendHeight; let n = this._keys.length * 2; if (this._maxUnchangedCount > 0) n += this._maxUnchangedCount + 2; const r1 = availHeight / n / 2, r2 = (this._width - this._leftMargin) / this._chartData.length / 2; if (r1 < r2) this._dotRadius = r1; else { // radius is based on width and data.length. adjust to fit the available height let total = n * r2; if (r2 > availHeight) this._dotRadius = r2 - (total - availHeight) / 2; else this._dotRadius = r2; } this._dotDiameter = this._dotRadius * 2; } _calcMaxY() { var dots = this._shift.max.offset + this._keys.length; if (this._options.isolateUnchanged && this._maxUnchangedCount > 0) dots += this._maxUnchangedCount + 2; this._maxY = dots * this._dotDiameter; } _initScales() { this._x = d3.scalePoint() .domain(this._seq(0, this._chartData.length)) .range([0, this._width - this._leftMargin]); this._y = n => n * this._dotDiameter; this._cp = d3.scaleSequential(this._options.posPalette).domain([this._pMin, this._pMax]).nice().clamp(true); this._cn = d3.scaleSequential(this._options.negPalette).domain([this._nMax, this._nMin]).nice().clamp(true); this._initRankScale(); this._initUnchangedScale(); } _initRankScale() { /* * // Buggy dynamic scale var a = this._rMax, b = this._rMin, s = 0, l = 0; // the rank is never going to be zero: // 1 ~ n for pos // -1 ~ -n for neg // the series only contains postive ranks if (a > 0 && b > 0) { s = 0; l = a - b + 1; } // the series only contains negative ranks else if (a < 0 && b < 0) { s = b; l = Math.abs(b) - Math.abs(a) + 1; } // from positive to negative else { s = b; l = a - b; } // Max offset should always equal to |_rMin| // This check avoids the difference caused by unchanged dots var sm = this._shift.max.offset; if (this._options.isolateUnchanged && sm != Math.abs(this._rMin)) sm = Math.abs(this._rMin); this._rk = d3.scalePoint() .domain(this._seq(s, l).reverse()) .range([this._y(this._shift.min.offset), this._y(sm + this._keys.length)]); */ const len = this._keys.length; this._rk = d3.scalePoint() .domain(this._seq(-len, len * 2 + 1).reverse()) .range([this._y(0), this._y(len* 2)]); } _initUnchangedScale() { const maxDataLen = this._shift.max.data ? this._keys.length : 0; var bottom = 0; if (this._shift.max.offset === 0) bottom = (this._keys.length + 2) * this._dotDiameter; else bottom = this._y(this._shift.max.offset) + (maxDataLen + 2) * this._dotDiameter; this._yu = d3.scalePoint() .domain(this._seq(0, this._maxUnchangedCount)) .range([bottom + (this._maxUnchangedCount - 1) * this._dotDiameter, bottom]); } _render() { if (this._options.debug) { //Boundry for debugging this._container .append("rect") .attr("width", this._width).attr("height", this._height) .attr("stroke-width", 0.1) .attr("fill", "none") .attr("stroke", "black"); } this._renderGroups(); this._renderDots(); this._renderRankAxis(); this._renderUnchangedLabel(); this._renderXAxis(); this._renderLegend(); if (this._options.showSlider) this._renderSlider(); } _renderGroups() { const that = this; this._container .on("click.eric.trendchart." + this._uniqueId, () => { if (this._options.clickAction === "none") return; this._focusedKey = this._focusedRange = null; this._cancel(); this._cancelRange(); }); // Container group // Contains main chart group, slider group and legend group this._cg = this._container .append("g") .attr("font-family", this._options.fontFamily) .attr("font-size", this._options.fontSize); // Main chart group this._g = this._cg.append("g") .attr("transform", `translate(${this._leftMargin - this._dotRadius},${this._legendHeight})`) .on("mouseleave", (e, d) => { this._highlighter.attr("opacity", 0); }); // Period groups this._og = this._g .selectAll("g") .data(this._chartData) .enter().append("g") .attr("transform", (d, i) => `translate(${this._x(i)},${this._innerMargin})`) .on("mouseenter", function(e, d) { const i = that._og.nodes().indexOf(this); that._highlighter.attr("opacity", (_, j) => i === j ? 1 : 0); }); this._highlighter = this._og .append("rect") .attr("class", "highlighter") .attr("opacity", 0) .attr("fill", this._color.highlighter) .attr("rx", 4).attr("ry", 4) .attr("x", -this._dotRadius).attr("y", -this._dotRadius) .attr("width", this._dotRadius * 2) .attr("height", this._maxY); this._ig = this._og.append("g").attr("class", "ig"); this._shiftColumn(this._ig); } _shiftColumn(selection, transition) { const s = transition ? selection.transition().ease(d3.easeElastic).duration(1000) : selection; s.attr( "transform", d => { var unchanged = 0, under = 0; if (this._options.isolateUnchanged) { for (var i = 0; i < d.values.length; i++) { const n = this._getValue(d.values[i]), g = this._isNumber ? d.values[i].growth : n; if (g === 0) unchanged++; else if (n < this._level) under++; } } else { under = d.values.filter(v => this._getValue(v) <= this._level).length; } return `translate(0,${this._y(under + unchanged)})`; } ); } _updateDots() { this._og.data(this._chartData); this._shiftColumn(this._og.select(".ig"), true); this._renderDots(true); } _renderDots(transition) { const options = this._options, level = this._level; // Positive dots this._renderSection(this._ig, "pos", v => { const n = this._getValue(v), g = this._isNumber ? v.growth : n; return options.isolateUnchanged ? g !== 0 && n >= level : n >= level; }, this._y, this._cp, transition); // Negative dots this._renderSection( this._ig, "neg", v => { const n = this._getValue(v), g = this._isNumber ? v.growth : n; return options.isolateUnchanged ? g !== 0 && n < level : n < level; }, this._y, this._cn, transition); // Unchanged dots if (options.isolateUnchanged) { this._renderSection( this._og, "zero", v => v.growth === 0, this._yu, this._color.unchanged, transition); } this._dots = this._og.selectAll(".pos,.neg"); } _renderSection(g, className, filter, y, color, transition) { let shape = "circle"; if (this._options.shape === "square") shape = "rect"; return g .selectAll("." + className) .data(d => d.values.filter(filter)) .join( enter => this._drawShape( this._attachEvents( this._updateShape( enter.append("g").attr("class", className), y, color ) ).append(shape), transition ), update => this._updateShape(update, y, color), exit => exit.remove() ); } _updateShape(selection, y, c) { if (typeof c === "function") selection.attr("fill", d => c(this._getValue(d))); else selection.attr("fill", c); if (this._isCircle) selection.attr("transform", (d, i) => `translate(0,${y(d.pos || i)})`); else selection.attr("transform", (d, i) => `translate(0,${y(d.pos || i) - this._dotRadius})`); return selection; } _drawShape(selection, transition) { if (this._isCircle) (transition ? selection.attr("r", 0).transition().duration(500) : selection).attr("r", this._dotRadius); else { selection .attr("width", this._dotDiameter).attr("height", 0) .attr("x", -this._dotRadius) .attr("rx", 4).attr("ry", 4); (transition ? selection.transition().duration(500) : selection).attr("height", this._dotDiameter); } return selection; } _attachEvents(selection) { selection .on("mouseenter", (e, d) => { if (!this._focusedKey) this._highlight(d); this._showTooltip(e, d); if (this._onhover) this._onhover(d); }) .on("mouseleave", (e, d) => { if (!this._focusedKey) this._cancel(d) this._hideTooltip(); }) .on("click", (e, d) => { if (this._options.clickAction === "none") return; if (this._focusedKey === d) { this._focusedKey = null; this._cancel(); if (this._oncancel) this._oncancel(d); } else { this._focusedKey = d; this._cancel(); this._highlight(d); if (this._onclick) this._onclick(d); } e.stopPropagation(); }); return selection; } _highlight(d) { const hc = this._og .selectAll("g") .filter(_ => _ && _.key === d.key) .append("circle") .attr("class", "hc") .attr("stroke", "white") .attr("fill", "black"); if (!this._isCircle) hc.attr("cy", this._dotRadius); hc.transition().duration(250) .attr("r", this._dotRadius / 2); } _cancel() { this._og.selectAll(".hc").remove(); } _showTooltip(e, d) { const info = [ d.tick, d.key, `Number: ${d.number}`, `Growth: ${d.index === 0 ? "-" : d.growth || "-"}`, "Growth Rate: " + (d.index !== 0 && d.rate ? `${(d.rate * 100).toFixed(2)}%` : "-") ]; var max = 0; info.forEach(s => { const l = this._calcTextLength(s); if (l > max) max = l; }) if (!this._infoBox) this._infoBox = this._g .append("g") .attr("fill", this._tooltip.color) .call(g => g.append("rect") .attr("class", "ibbg") .attr("opacity", this._tooltip.boxOpacity) .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("rx", 4).attr("ry", 4) .attr("x", -5).attr("y", -5) .attr("fill", this._tooltip.boxColor)); const spacing = 1.1; this._infoBox .style("visibility", "visible") .select(".ibbg") .attr("width", max + 15).attr("height", spacing * this._charBox.height * info.length + 5); this._infoBox .selectAll("text") .data(info) .join( enter => enter.append("text").attr("dy", (d, i) => `${spacing * i + 1}em`).text(d => d), update => update.text(d => d), exit => exit.remove() ); const svg = this._getSVG(); if (svg) { // convert to SVG coordinates const p = svg.createSVGPoint(), box = this._infoBox.node().getBBox(), gr = this._g.node().getBoundingClientRect(), dr = e.currentTarget.getBoundingClientRect(); p.x = dr.left + dr.width + this._dotRadius; p.y = dr.top + dr.width + this._dotRadius; const converted = p.matrixTransform(this._g.node().getScreenCTM().inverse()); const left = converted.x + box.width + gr.left + this._dotRadius > this._width ? converted.x - box.width - this._dotDiameter : converted.x, top = converted.y + box.height + gr.top + this._dotRadius > this._height ? converted.y - box.height - this._dotDiameter : converted.y; this._infoBox.attr("transform", `translate(${left},${top})`); } } _getSVG() { let curr = this._container.node(); while (curr && curr.tagName !== "svg") curr = curr.parentElement; return curr; } _hideTooltip(d) { if (this._infoBox) this._infoBox.style("visibility", "hidden"); } _renderRankAxis() { const ticks = d3 .axisLeft(this._rk) .tickValues(this._rk.domain().filter(d => d % 3 === 0)); if (this._rankAxis) this._rankAxis.remove(); this._rankAxis = this._g .append("g") .attr("transform", `translate(${-this._dotRadius}, ${this._innerMargin - this._dotRadius})`) .call(ticks) .call(g => { g.attr("font-family", this._options.font).attr("font-size", this._tick.fontSize); g.select(".domain").remove(); g.selectAll(".tick").select("line").attr("stroke", this._tick.color); g.selectAll(".tick text").attr("fill", this._tick.color); }); const y = this._rk(0) + this._innerMargin - this._dotRadius; if (y && !this._zeroLine) { this._zeroLine = this._g .append("line") .attr("stroke-width", 0.5) .attr("stroke", this._tick.color) .attr("stroke-dasharray", "3") .attr("x1", -this._dotRadius).attr("x2", this._x.range()[1] + this._dotRadius); } if (this._zeroLine) this._zeroLine.attr("y1", y).attr("y2", y); } _renderUnchangedLabel() { if (this._options.isolateUnchanged && this._maxUnchangedCount > 0) { if (!this._uncLabel) this._uncLabel = this._g .append("text") .attr("fill", this._tick.color) .text("Unchanged"); const ty = this._maxY + this._innerMargin; if (ty + this._legendHeight + this._charBox.height > this._height) this._uncLabel .attr("dy", "-0.5em") .attr("text-anchor", "end") .attr("transform", `translate(${-this._dotRadius},${ty - this._dotRadius})`); else this._uncLabel .attr("dy", "0.25em") .attr("text-anchor", "start") .attr("transform", `translate(${-this._dotRadius},${ty})`); } } _processLegend() { const that = this, ticks = [], ts = this._cn.ticks() .concat(this._cp.ticks()) .sort((a, b) => a - b); for (let i = 0; i < ts.length - 1; i += 3) addTick(i); const last = ts[ts.length - 1]; if (ticks[ticks.length - 1].floor != last && last <= this._pMax) addTick(ts.length - 1); let legendWidth = 0; ticks.forEach(d => { let len = this._calcTextLength(d.label); if (len > legendWidth) legendWidth = len; }); legendWidth += 10; return { ticks, legendWidth }; function addTick(i) { const floor = ts[i]; ticks.push({ floor: floor, ceiling: i + 3 < ts.length ? ts[i + 3] : Number.POSITIVE_INFINITY, color: floor < that._level ? that._cn(floor) : that._cp(floor), label: formatLabel(floor) }); } function formatLabel(n) { return that._isRate ? d3.format(".1f")(n * 100) : d3.format(".2s")(n); } } _renderLegend() { const that = this, { ticks, legendWidth } = this._processLegend(); if (!this._legendBox) this._legendBox = this._cg.append("g"); this._legendBox .attr("transform", `translate(${this._width - ticks.length * legendWidth},0)`) .selectAll("g") .data(ticks) .join( enter => { const g = enter .append("g") .attr("transform", (d, i) => `translate(${i * legendWidth},0)`) .call(g => g .append("line") .attr("x1", 0.5).attr("x2", 0.5) .attr("y1", "1em").attr("y2", "1.3em") .attr("stroke-width", 0.5) .attr("stroke", this._color.legend) ) .on("mouseenter", (e, d) => { if (!this._focusedRange) this._highlightRange(d); }) .on("mouseleave", () => { if (!this._focusedRange) this._cancelRange(); }) .on("click", (e, d) => { if (this._options.clickAction === "none") return; if (this._focusedRange === d) { this._focusedRange = null; this._cancelRange(); } else { this._focusedRange = d; this._cancelRange(); this._highlightRange(d); } e.stopPropagation(); }); updateLegend( g.append("rect").attr("width", legendWidth).attr("height", "1em"), g.append("text").attr("fill", this._color.legend).attr("dy", "2.2em") ); }, update => updateLegend(update.select("rect"), update.select("text")), exit => exit.remove()); function updateLegend(rect, text) { rect.attr("fill", d => d.color); text.text((d, i) => { const last = i === ticks.length - 1; return (last ? ">" : "") + d.label + (last && that._isRate ? "%" : ""); }); } } _highlightRange(d) { this._dots.attr("opacity", _ => { const n = this._getValue(_); return n >= d.floor && n < d.ceiling ? 1 : 0.3; }); } _cancelRange() { this._dots.attr("opacity", 1); } _renderSlider() { const that = this, height = this._keys.length * 2 * this._dotDiameter, top = this._legendHeight + this._innerMargin - this._dotRadius; var inputGroup = this._cg .append("g"); // Doesn't work in Safari //.attr("transform", `translate(0,${top})`); const label = inputGroup .append("text") .attr("y", 0) .attr("fill", this._tick.color) .attr("text-anchor", "middle") .text(this._level); const vbox = label.node().getBBox(); label .attr("x", vbox.height) .attr("transform", `rotate(270,${vbox.height},0)`) .text(""); const min = this._nMin > 0 ? this._nMin / 1.01 : this._nMin * 1.01, max = this._pMax * 1.01, step = Math.abs(min) / 100; const fo = inputGroup .append("foreignObject") .attr("x", this._charBox.height).attr("y", top) .attr("width", 20).attr("height", height + 2); const slider = fo .append("xhtml:input") .attr("type", "range") .attr("min", min).attr("max", max) .attr("step", step) .style("width", `${height}px`).style("height", "20px") .style("transform-origin", "10px 10px") .style("transform", "rotate(90deg)") .on("click", e => e.stopPropagation()) .on("dblclick", e => { slider.node().value = this._defaultLevel; change(); e.stopPropagation(); }) .on("input", () => change()); // This fixes a weird behavior if both min and max are floating poing numbers slider.node().value = this._level; function change() { var tw = label.node().getBBox().width, hw = tw / 2; var v = parseFloat(slider.node().value); var p = Math.abs(max - v); var ty = height - p / (max - min) * height + top; if (ty + hw - top > height) ty = height - hw + top; else if (ty - hw - top <= 0) ty = hw + top; var vtext = "Number < "; if (that._isGrowth) vtext = "Growth < "; else if (that._isRate) vtext = "Growth Rate < " const dv = that._isRate ? v * 100 : v; vtext += !that._isRate ? dv.toFixed(0) : dv.toFixed(2) + (that._isRate ? "%" : ""); label .attr("y", ty) .attr("transform", `rotate(270,${vbox.height},${ty})`) .text(vtext); that._level = v; that._changeLevel(); } } _changeLevel() { this._pMin = 0; this._pMax = 0; this._nMin = 0; this._nMax = 0; this._rMin = 0; this._rMax = 0; this._process(true); this._calcShift(); this._calcMaxY(); this._initScales(); this._updateDots(); //this._renderRankAxis(); this._renderUnchangedLabel(); this._renderLegend(); this._highlighter.attr("height", this._maxY); if (this._focusedKey) { this._cancel(); this._highlight(this._focusedKey); } if (this._focusedRange) { this._cancelRange(); this._highlightRange(this._focusedRange); } } _renderXAxis() { var max = 0; const range = this._x.range(), scale = d3.scalePoint() .domain(this._chartData .map(d => { const len = this._calcTextLength(d.tick); if (len > max) max = len; return d.tick; })) .range(range); var intr; if (this._tick.interval === "auto") { const c = Math.floor((range[1] - range[0]) / max / 2); intr = Math.ceil(this._chartData.length / c); } else intr = +this._tick.interval; var ticks = d3 .axisTop(scale) .tickValues(scale.domain().filter((d, i) => i % intr === 0)); const ex = this._tick.extractor; this._g.append("g") .attr("fill", this._tick.color) .selectAll("g") .data(ticks.tickValues()) .enter().append("g") .attr("transform", d => `translate(${scale(d) - this._dotRadius},0)`) .call(g => { g .append("text") .attr("dy", "1em") .attr("dx", 3) .text(d => ex && typeof ex === "function" ? ex(d) : d); }) .call(g => { g .append("line") .attr("stroke-width", 0.5) .attr("stroke", this._tick.color) .attr("stroke-dasharray", "3") .attr("y1", 0).attr("y2", this._maxY); }); } _getValue(d) { return this._isNumber ? d.number : this._isGrowth ? d.growth : d.rate; } _getCharBox() { this._charBox = this._textBox.text("M").node().getBBox(); } _calcTextLength(text) { return this._textBox.text(text).node().getBBox().width; } _seq(start, length) { const a = new Array(length); for (let i = 0; i < length; i++) a[i] = i + start; return a; } }36:[{"id":"be528e79c4afb3256d23d4d9e2e98b09398a40d6f16ac6b691c3145c96f1f7045761636cffd15841197ff7afa37fd82976f67ddfa3f0a9c44331dde7930cae5f","href":"https://static.observableusercontent.com/files/be528e79c4afb3256d23d4d9e2e98b09398a40d6f16ac6b691c3145c96f1f7045761636cffd15841197ff7afa37fd82976f67ddfa3f0a9c44331dde7930cae5f","name":"unemp.csv","type":"text/csv","lastModified":1608447075246.189,"size":19334}] 2f:{"id":"40a35090dde9b8c8","slug":"performance-chart","title":"Performance Chart","thumbnail":"a18368055105329c5f6e68db2e3bc22aa6cdf4407f9281f0348a5d66893bfbcd","access_level":"public","create_time":"$D2020-12-20T06:50:16.429Z","update_time":"$D2021-11-06T20:04:47.691Z","view_time":null,"first_public_time":"$D2021-01-04T17:50:18.621Z","fork":false,"stars":138,"starred":false,"owner":{"type":"team","id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":"starter_2024"},"version":430,"publish_version":430,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}],"members":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"role":"editor"}],"comments":[{"id":"a99d0de9d884679a","reply_to_id":null,"content":"Man, even it is a recreation, your version is really awesome!! Keep up the excellent work!","create_time":"$D2021-01-05T20:45:20.946Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"af6e7f3cfacb9068","login":"markstevens","name":"Mark Stevens","avatar_url":"https://avatars-next.observableusercontent.com/dcbc5ceb276d6fc831a98edead7d3f9503c7e6d24a2c18feef26ccc6afd5c188","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":64,"collection":{"id":"b0fa06a3b7dc5033","slug":"business-data-storytelling","title":"2. Charts","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"type":"notebook","body":{"title":"Performance Chart","cells":[{"id":0,"value":"md`# Performance Chart\nThe **PerformanceChart** depicts the evolution of time-series categorical data by segmenting categories into two sections based on their performance. It is beneficial for tracking overall and individual changes over time. The chart sorts categories by the change from the previous period, then segments them into rising and falling sections. Dots in each section are shaded using individual color scheme to emphasize the visual aspect of interpretation.\n\nThe example below visualizes the US unemployment data from Jan-2001 to Nov-2020.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"md`The last 60 days COVID-19 new cases/deaths chart. (CA,TX,FL,OH,NY,PA,IL,TN,AZ,IN,NC)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"chart2 = {\n const isDark = options2.theme === \"dark\";\n const svg = d3.create(\"svg\")\n .style(\"cursor\", \"default\")\n .style(\"background\", isDark ? \"black\" : \"white\")\n .attr(\"viewBox\", [0,0,width,500]);\n \n document.body.append(svg.node());\n \n const {pp, np} = getPalettes(options2.scheme),\n tc = isDark ? \"white\" : \"black\";\n \n const pchart = new PerformanceChart(svg)\n .size([width, 500])\n .data(covid(options2.field, \"CA,TX,FL,OH,NY,PA,IL,TN,AZ,IN,NC\",61).reverse())\n .tick({\n name: \"date\",\n interval: 10,\n color: tc\n }) \n .options({\n number: \"growth\", \n shape: options2.shape,\n posPalette: np,\n negPalette: pp,\n isolateUnchanged: options2.isounc,\n showSlider: true\n })\n .color({\n legend: tc,\n hover: isDark ? \"white\" : \"#999\",\n highlighter: isDark ? \"#999\" : \"#eee\" \n })\n .tooltip({boxOpacity: isDark ? 0.9 : 0.8})\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"md`### Source Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"md`## Data and other stuff...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"md`Data Source: U.S. Bureau of Labor Statistics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"data = d3.csvParse(await FileAttachment(\"unemp.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"md`NYT Coronavirus (Covid-19) Data in the United States`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"covid = (field, filter, days) => {\n const src = getStatesLastNDays(field, days, false, true),\n dates = Object.keys(src[0]).slice(2),\n states = filter.split(\",\");\n \n const filtered = states.map(state => {\n const row = src.find(d => d.code === state);\n if (row) return dates.map(d => row[d]);\n })\n\n return dates.map((date, i) => {\n const row = {date};\n states.forEach((state, j) => row[state] = filtered[j][i]);\n return row;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"md`Origin - A recreation of the original: [Track National Unemployment, Job Gains and Job Losses](http://graphics.wsj.com/job-market-tracker/) by [Andrew Van Dam](https://twitter.com/andrewvandam) and [Renee Lightner](https://twitter.com/lightnerrenee).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"getPalettes = scheme => { \n let pp, np;\n if (scheme === \"rdylbu\") {\n pp = d3.interpolateYlGnBu;\n np = d3.interpolateYlOrRd;\n }\n else if (scheme === \"rdylgn\") {\n pp = d3.interpolateYlGn;\n np = d3.interpolateYlOrRd;\n }\n else if (scheme === \"rdpubu\") {\n pp = d3.interpolatePuBu;\n np = d3.interpolatePuRd;\n }\n else if (scheme === \"rdgn\") {\n pp = d3.interpolateGreens;\n np = d3.interpolateReds;\n }\n else if (scheme === \"orbu\") {\n pp = d3.interpolateBlues;\n np = d3.interpolateOranges;\n }\n return {pp, np};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"{\n const s = document.getElementById(\"time\"); \n if (s) s.innerText = `${2001 + options.year}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"import {src, getStatesLastNDays, map, getYesterdayNumbers} from \"@analyzer2004/covid-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"