25:["$","title",null,{"children":"Untitled | 浩张 | Observable"}] 4c:T7bf,viewof options = form(html``)4d:T498,dashboard = { const svg = d3.create("svg") .attr("font-size", `${options.fontsize}pt`) .attr("viewBox", [0, 0, 975, 610]); document.body.append(svg.node()); // for autoSizeCell const table = new SVGTable(svg) .extent([[25, 25], [900, 400]]) .fixedRows(+options.rows) .fixedColumns(+options.cols) .rowsPerPage(100) .autoSizeCell(true) .defaultColumnWidth(options.dataset === "covid" ? 100 : 140) .defaultNumberFormat(options.dataset === "covid" ? ",.0d" : "$,.2f") .style({ border: options.border, borderColor: options.borderColor, textColor: options.text, highlight: options.highlight, background: options.cell, headerBackground: options.header, fixedBackground: options.fixed, highlightBackground: options.highlightColor }) .heatmap(options.heatmap) .heatmapPalette(d3.interpolateReds) .data(data) .onhighlight((e, c) => { chart(c); map(c); }); table.render(); resetGrid(); const chart = miniChart(svg, 50, 435, 600, 125); const map = miniMap(svg, 700, 435, 200, 125); svg.node().remove(); return svg.node(); }4e:T653,md`* **SVGTable(svg, [container])** - 构造一个具有默认设置的新表。container可以是svg或任何g类型，如果没有指定，container将是svg本身 * **defaultColumnWidth(width)** - 设置默认列宽度 * **autoSizeCell(auto)** - 指定表是否应根据其内容自动计算单元格大小 * **fixedColumns(num)** - 设置固定列的数量 * **fixedRows(num)** - 设置固定行数，这个数字不包括标题行 * **extent(extent)** - 将表的范围设置为指定的范围。范围边界被指定为一个数组*[[x0, y0]， [x1, y1]]*，其中x0是范围左侧，y0是顶部，x1是右侧，y1是底部。 * **size(size)** - 将表的尺寸设置为指定的宽度和高度 * **rowsPerPage(num)** - 设置每页的行数。如果数据比这个数字长，就会显示分页器 * **style(style)** - 覆盖默认样式，包括以下多种样式设置 * style.**border** * style.**borderColor** * style.**textColor** * style.**background** * style.**headerBackground** * style.**fixedBackground** * style.**highlight** * style.**highlightBackground** * **heatmap(enabled)** - 启用或禁用heatmap * **heatmapPalette(palette)** - 设置heatmap的调色板。调色板可以是一个颜色数组或颜色插值器 * **data(data)** - 设置放入的数据 * **render()** - 使用data()指定的数据呈现表 * **onhighlight(e, context)** - **当鼠标指针进入单元格时发生** * context.**cell**: 当鼠标选择某个单元格时高亮此部分内容 * cell.**rowIndex**: 高亮选中单元格一行 * cell.**column**: 高亮选中单元格一列 `4f:Taa1,viewof currentState = { const mapWidth = 700, margin = (width - mapWidth) / 2; const gridMap = d3.select( Plot.plot({ width: 980, height: 650, padding: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, x: { axis: null }, y: { axis: null }, color: { type: "identity" }, marks: cells }) ); let timeout, focus = null; const rect = gridMap.selectAll("rect"); gridMap .on("pointerover", highlight) .on("pointerout", restore) .on("click", handleClick) .on("pointerdown", handlePointerDown) .on("pointerup", handlePointerUp) .style("cursor", "default"); const map = html`

${gridMap.node()}

${Legend(colors, { title: `${number} in ${thisMonth}`, tickFormat: "s", tickSize: 2 })}

`; updateState(); return map; function highlight(e) { if (focus !== null) return; const index = getTargetIndex(e); fill(index, true); if (timeout) clearTimeout(timeout); timeout = setTimeout( () => updateState(index >= 0 ? lookupState(index) : null), 25 ); } function restore(e) { if (focus !== null) return; const index = getTargetIndex(e); fill(index); } function fill(index, highlight, darker) { if (index >= 0) { const color = highlight ? "#edc949" : colors(mapData[index].total); d3.select(rect.nodes()[index]) .attr("fill", darker ? d3.color(color).darker(darker) : color) .attr("stroke-width", highlight ? 1 : 0); } } function handleClick(e) { const index = getTargetIndex(e); if (focus === index) { focus = null; return; } if (focus !== null) fill(focus); if (index >= 0) { fill(index, true); focus = index; updateState(lookupState(index)); } else { focus = null; updateState(null); } } function handlePointerDown(e) { const index = getTargetIndex(e); if (index >= 0) fill(index, true, 0.25); } function handlePointerUp(e) { const index = getTargetIndex(e); if (index >= 0) fill(index, true); } function getTargetIndex(e) { const tar = e.target; return tar instanceof SVGTextElement || tar instanceof SVGRectElement ? [...tar.parentElement.children].indexOf(tar) : -1; } function lookupState(index) { return mapData[index].code; } function updateState(state) { map.value = state; map.dispatchEvent(new CustomEvent("input")); } }50:T734,function newtonRaphson(f, fp, x0, options) { var x1, y, yp, tol, maxIter, iter, yph, ymh, yp2h, ym2h, h, hr, verbose, eps; // Iterpret variadic forms: // fp is first derivative of - currently not using or tested with metalog if (typeof fp !== 'function') { console.log("fp is not a function"); options = x0; x0 = fp; fp = null; } options = options || {}; tol = options.tolerance === undefined ? 1e-7 : options.tolerance; eps = options.epsilon === undefined ? 2.220446049250313e-16 : options.epsilon; maxIter = options.maxIterations === undefined ? 20 : options.maxIterations; h = options.h === undefined ? 1e-4 : options.h; verbose = options.verbose === undefined ? false : options.verbose; hr = 1 / h; iter = 0; while (iter++ < maxIter) { // Compute the value of the function: y = f(x0); if (fp) { yp = fp(x0); } else { // Needs numerical derivatives: yph = f(x0 + h); ymh = f(x0 - h); yp2h = f(x0 + 2 * h); ym2h = f(x0 - 2 * h); yp = ((ym2h - yp2h) + 8 * (yph - ymh)) * hr / 12; } // Check for badly conditioned update (extremely small first deriv relative to function): if (Math.abs(yp) <= eps * Math.abs(y)) { if (verbose) { console.log('Newton-Raphson: failed to converged due to nearly zero first derivative'); } return false; } // Update the guess: x1 = x0 - y / yp; // Check for convergence: if (Math.abs(x1 - x0) <= tol * Math.abs(x1)) { if (verbose) { console.log('Newton-Raphson: converged to x = ' + x1 + ' after ' + iter + ' iterations'); } return x1; } // Transfer update to the new guess: x0 = x1; } if (verbose) { console.log('Newton-Raphson: Maximum iterations reached (' + maxIter + ')'); } return false; } 51:T87a,viewof chart = { // draw the svg box with our specified height and width const svg = d3.create("svg") .attr("viewBox", [0, 0, 1200,250]); // grab the svg and draw rectangles // format the dates nicely for the x axis // use the values for the y axis // each rectangle should be the height specified in the value column // each rectangle should be the width calculated based on how many there are (this will be done automatically!) svg.append("g") .attr("fill", "#682b82") .selectAll("rect") .data(ccc) .join("rect") .attr("x", d => x(dateFormat(dateParse(d.date)))) .attr("y", d => y(d.number)) .attr("height", d => y(0) - y(d.number)) .attr("width", x.bandwidth()); // draw the y axis svg.append("g") .call(yAxis) .attr("font-size", "5"); // draw the x axis // label it with rotated text svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("font-size", "5") .attr("dy", ".15em") .attr("transform", "rotate(60)") .style("text-anchor", "start"); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); svg.selectAll("rect") .on("mouseover", function(event,d) { // change the selection style d3.select(this) .attr('stroke-width', '2') .attr("stroke", "yellow"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") }) .on("click",function (event,d) { svg.property("value", d.date); svg.dispatch('input') }) .on("mousemove", function(event,d) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); // draw the chart! return svg.node(); }52:T4f5,lineChart = () => { const state = currentState ? stateNumbers.find(d => d.code === currentState) : totals, title = d => `${d.month}\n${formatNum(d.value)}`, tidyState = tidy(state), k = 3, windowLabel = (d, i) => i === tidyState.length - 1 ? `${k}mo moving avg` : "", text = bg => Plot.text(tidyState, { x: "month", y: "value", dy: "-1em", fontWeight: "bold", strokeWidth: bg ? 5 : null, stroke: bg ? "white" : null, fill: bg ? null : "#edc949", text: windowLabel}); return Plot.plot({ width: 700, height: 400, marginBottom: 30, x: { label: null, tickFormat: d => ticks.get(d), tickSize: 0 }, y: { grid: true, tickFormat: "s", label: null, label: `${currentState ?? "total"} monthly ${number}` }, marks: [ xRules, Plot.ruleY([0], {stroke: "#aaa", strokeWidth: 0.1}), currentState ? Plot.lineY(tidyAll, {x: "month", y: "value", stroke: "#ddd"}) : null, Plot.lineY(tidyState, {x: "month", y: "value", stroke: miniPlotColor, strokeWidth: 3}), Plot.line(tidyState, Plot.windowY({x: "month", y: "value", k: k, stroke: "#edc949", strokeWidth: 3, strokeOpacity: 0.5})), text(true), text() ] }) }53:T620,getStates1 = field => { const data = covid.filter(d => d.lastDay); const m_month = Math.max.apply(null, data.map(d => d.month)); const m_fips = Math.max.apply(null, data.map(d => d.fips)); const states = new Array(m_fips); for(let i = 0; i <= m_fips; i++) { const row = data.find(d => d.fips === i); if (row) states[i] = row.state; } const matrix = new Array(m_fips + 1).fill(null); for(let i = 0; i <= m_fips; i++) { matrix[i] = new Array(m_month + 1); } data.forEach(d => matrix[d.fips][d.month] = { cases: d.cases, deaths: d.deaths, newcases: d.cases, newdeaths: d.deaths }); const result = matrix.map((d, i) => { const row = new Object(); row.state = states[i]; for(let m = 0; m < d.length; m++) { const mdata = d[m]; if (mdata && m > 0) { const prev = d[m - 1]; if (prev) { mdata.newcases = mdata.cases - prev.cases; mdata.newdeaths = mdata.deaths - prev.deaths; } } const ycode = 20 + Math.floor(m / 12); const mcode = m - Math.floor(m / 12) * 12 + 1; row[`${ycode}-${String(mcode).padStart(2, "0")}`] = mdata ? mdata[field] : 0; } return row; }).filter(d => d.state); const total = {state: "Total"}; result.columns = Object.keys(result[0]); const months = result.columns.slice(1); for(let month of months) { let sum = 0; for(let row of result) sum += row[month]; total[month] = sum; } result.unshift(total) return result; }54:T894b,// https://github.com/analyzer2004/svgtable // Copyright 2020 Eric Lo class SVGTable { constructor(svg, container) { this._svg = svg; this._container = container || svg; this._g = null; this._charBox = { x: 0, y: 0, width: 0, height: 0 }; this._autoSizeCell = true; this._defaultColumnWidth = 100; this._cellHeight = 24; // user setting this._cellHeightA = 24; // actual cell height = cellHeight + cellPaddingV * 2 this._cellPaddingH = 10; this._cellPaddingV = 3; this._fixedColumns = 0; this._fixedRows = 0; this._left = 0; this._top = 0; this._width = 400; this._height = 300; this._widthA = 0; this._heightA = 0; this._sliderWidth = 13; this._sliderLength = 50; this._xf = 1; // horizontal content to scroll factor this._yf = 1; // vertical content to scroll factor this._minY = 0; // minimum y of the content can be scrolled this._fixedWidth = 0; this._fixedHeight = 0; this._data = null; this._fullData = null; this._dataIsArray = false; this._columns = null; this._defaultNumberFormat = "$,.2f"; this._heatmap = false; this._heatmapPalette = null; // interpolator or array of colors this._heatmapColor = null; this._paginator = null; this._paginatorPos = "top"; this._rowCount = 0; this._currPageNum = 0; this._rowsPerPage = 50; this._beginIndex = 0; this._endIndex = 49; this._rowsPerPageSelections = [25, 50, 75]; this._scrollbar = { horizontal: null, vertical: null, visible: [true, true] }; this._style = { border: true, borderColor: "#aaa", textColor: "black", background: "white", headerBackground: "#ddd", fixedBackground: "#eee", highlight: "cross", // none, cell, cross highlightBackground: "#fff3b0" }; this._table = null; this._header = null; this._body = null; this._dataArea = null; this._dataHeader = null; this._focus = null; this._onsort = null; this._onchangepage = null; this._onhighlight = null; this._onclick = null; this._oncontextmenu = null; this._uniqueId = new String(Date.now() * Math.random()).replace(".", ""); } defaultColumnWidth(_) { return arguments.length ? (this._defaultColumnWidth = +_, this) : this._defaultColumnWidth; } cellHeight(_) { return arguments.length ? (this._cellHeight = +_, this) : this._cellHeight; } cellPaddingH(_) { return arguments.length ? (this._cellPaddingH = +_, this) : this._cellPaddingH; } cellPaddingV(_) { return arguments.length ? (this._cellPaddingV = +_, this) : this._cellPaddingV; } autoSizeCell(_) { return arguments.length ? (this._autoSizeCell = _, this) : this._autoSizeCell; } fixedColumns(_) { return arguments.length ? (this._fixedColumns = +_, this) : this._fixedColumns; } fixedRows(_) { return arguments.length ? (this._fixedRows = +_, this) : this._fixedRows; } rowsPerPage(_) { return arguments.length ? (this._rowsPerPage = +_, this) : this._rowsPerPage; } rowsPerPageSelections(_) { return arguments.length ? (this._rowsPerPageSelections = _, this) : this._rowsPerPageSelections; } extent(_) { return arguments.length ? ( this._left = +_[0][0], this._top = +_[0][1], this._width = +_[1][0], this._height = +_[1][1], this) : [[this._left, this._top], [this._width, this._height]]; } size(_) { return arguments.length ? (this._width = +_[0], this._height = +_[1], this) : [this._width, this._height]; } style(_) { return arguments.length ? (this._style = Object.assign(this._style, _), this) : this._style; } heatmap(_) { if (arguments.length) { this._heatmap = _; if (this._table) this._updateHeatmap(); return this; } else return this._heatmap; } heatmapPalette(_) { if (arguments.length) { this._heatmapPalette = _; if (this._table) { this._processHeatmap(); if (this._heatmap) this._updateHeatmap(); } return this; } else return this._heatmapPalette; } data(_) { return arguments.length ? (this._data = _, this) : this._data; } columns(_) { if (arguments.length) { this._columns = _; return this; } else { if (!this._columns && this._data) this._processColumns(); return this._columns; } } defaultNumberFormat(_) { return arguments.length ? (this._defaultNumberFormat = _, this) : this._defaultNumberFormat; } onsort(_) { return arguments.length ? (this._onsort = _, this) : this._onsort; } onchangepage(_) { return arguments.length ? (this._onchangepage = _, this) : this._onchangepage; } onhighlight(_) { return arguments.length ? (this._onhighlight = _, this) : this._onhighlight; } onclick(_) { return arguments.length ? (this._onclick = _, this) : this._onclick; } oncontextmenu(_) { return arguments.length ? (this._oncontextmenu = _, this) : this._oncontextmenu; } render() { if (!this._validate()) { // error } else { this._init(); this._initPaginator(); this._processColumns(); this._prepare(); this._calcConstrains(); this._createClipPaths(); this._processHeatmap(); this._createTable(); this._renderBody(this._table); this._renderHeader(this._table); this._addScrollbars(); if (this._paginator) this._paginator.render(); } return this; } getRowData(index) { return this._data[index]; } getColumnData(index) { const c = this._columns[index]; return this._data.map(_ => _[c.name]); } get g() { return this._g; } get svg() { return this._svg; } _init() { this._g = this._container.append("g"); this._cellHeightA = this._cellHeight + this._cellPaddingV * 2; this._charBox = this._getBBox("Z"); this._widthA = this._width; this._heightA = this._height; } _initPaginator() { if (this._data.length > this._rowsPerPage) { this._fullData = this._data; this._rowCount = this._fullData.length; this._data = this._fullData.slice(0, this._rowsPerPage); this._calcPageRange(1, 0); const pr = new Paginator(this); const ptop = this._top, ph = this._charBox.height + pr.buttonPadding() / 2 + 3; //3: margin this._top += ph; this._height -= ph; // bottom // this._height -= ph - 5; // ptop = this._height + this._top + 5; pr.init(this._rowsPerPage, this._rowCount) .options({ position: "top", selector: "right", buttonColor: this._style.headerBackground }) .position([this._left, ptop]) .recordsPerPageSelections(this._rowsPerPageSelections) .onPageNumberChange((pnum, begin, end) => { this._currPageNum = pnum; this._calcPageRange(pnum, begin); this._pageData(); this._rerender(); if (this._onchangepage) this._onchangepage(this._beginIndex); }) .onRecordsPerPageChange((rpp, pnum, begin, end) => { this._rowsPerPage = rpp; this._currPageNum = pnum; this._calcPageRange(pnum, begin); this._pageData(); this._rerender(); if (this._onchangepage) this._onchangepage(this._beginIndex); }); this._paginator = pr; } } _calcPageRange(pnum, begin) { if (pnum === 1) this._beginIndex = this._fixedRows; else this._beginIndex = begin - (pnum - 2) * this._fixedRows; this._endIndex = this._beginIndex + this._rowsPerPage - this._fixedRows; } _pageData() { this._data = this._fullData.slice(0, this._fixedRows) .concat(this._fullData.slice(this._beginIndex, this._endIndex)); } _rerender() { this._g.selectAll("clipPath").remove(); if (this._table) this._table.remove(); if (this._scrollbar.horizontal) this._scrollbar.horizontal.dispose(); if (this._scrollbar.vertical) this._scrollbar.vertical.dispose(); this._focus = null; this._height = this._heightA; this._width = this._widthA; this._scrollbar.visible = [true, true]; const ph = this._charBox.height + this._paginator.buttonPadding() / 2; this._height -= ph; this._processColumns(); this._prepare(); this._calcConstrains(); this._createClipPaths(); this._createTable(); this._renderBody(this._table); this._renderHeader(this._table); this._addScrollbars(); } _validate() { return this._data && this._data.length > 0; } _prepare() { this._fixedHeight = this._cellHeightA * this._fixedRows + this._cellHeightA; const w = this._sumWidth(); const h = this._data.length * this._cellHeightA; if (w + this._sliderWidth < this._width) { this._width = w; this._scrollbar.visible[0] = false; } else { this._width -= this._sliderWidth; } if (h + this._sliderWidth + this._cellHeightA < this._height) { this._height = h + this._cellHeightA; // includes header this._scrollbar.visible[1] = false; } else { this._height -= this._sliderWidth; } } _sumWidth(n) { // n === 0 : do not calculate, usually it is _fixedColumns = 0 if (n === 0) return 0; else { // n === undefined : all columns const l = n || this._columns.length; var w = 0; for (let i = 0; i < l; i++) w += this._columns[i].width; return w; } } _processColumns() { if (this._data.length > 0 && this._data[0].length > 0) { this._dataIsArray = Array.isArray(this._data[0]); } if (!this._columns) { // CSV or JSON const keys = this._data.columns ? this._data.columns : Object.keys(this._data[0]); let x = 0; this._columns = keys.map((c, i) => { const isNumber = typeof this._data[0][c] === "number"; const column = { name: c, isNumber: isNumber, format: isNumber ? this._defaultNumberFormat : null, order: 0, // 0: none, 1: ascending, 2: descending x: x, tx: x, // x for translate index: i, width: this._defaultColumnWidth } x += column.width; return column; }); } else { let x = 0; this._columns.forEach((column, i) => { column.width = column.width || this._defaultColumnWidth; column.x = x; column.tx = x; // x for translate column.index = i; x += column.width; }); } if (this._autoSizeCell) this._calcSize(); this._fixedWidth = this._sumWidth(this._fixedColumns); for (let i = this._fixedColumns; i < this._columns.length; i++) { const c = this._columns[i]; c.tx = c.x - this._fixedWidth; // x for translate } this._columns.resetOrder = (except) => this._columns.forEach(c => { if (except && c !== except || !except) c.order = 0; }); } _calcSize() { // test if it is used in a generator if (this._charBox.width > 0 && this._charBox.height > 0) { // overrides cellHeight this._cellHeight = this._charBox.height; this._cellHeightA = this._charBox.height + this._cellPaddingV * 2; // prepare keys const keys = []; const longest = this._columns.map((column, i) => { if (this._dataIsArray) keys.push(i); else keys.push(column.name); return column.name; }); // find the longest string for each column for (let i = 0; i < this._data.length; i++) { const row = this._data[i]; for (let j = 0; j < keys.length; j++) { const key = keys[j], column = this._columns[j]; const val = row[key]; if (val) { const curr = column.isNumber && column.format ? d3.format(column.format)(row[key]) : row[key]; if (curr.length > longest[j].length) longest[j] = curr; } } } // re-calculate column width for each column based on longest[] var x = 0; for (let i = 0; i < longest.length; i++) { const column = this._columns[i]; column.x = column.tx = x; column.width = this._getBBox(longest[i]).width + this._cellPaddingH * 2 + 20; x += column.width; } } } _getBBox(str) { var t; try { t = this._svg.append("text").text(str); return t.node().getBBox(); } finally { t.remove(); } } _processHeatmap() { if (!this._heatmapPalette) return; const data = this._fullData || this._data; const all = data.slice(this._fixedRows).flatMap(d => { const r = this._dataIsArray ? d.slice(this._fixedColumns) : Object.keys(d).map(k => d[k]).slice(this._fixedColumns); const values = []; for (let i = 0; i < r.length; i++) { const col = this._columns[i + this._fixedColumns]; if (col.isNumber) values.push(this._dataIsArray ? r[i] : r[col.name]); } return r; }) const ext = d3.extent(all); const p = this._heatmapPalette; if (Array.isArray(p)) { // Palette is an array this._heatmapColor = d3.scaleSequential() .domain(this._series(ext[0], ext[1], p.length)) .range(p); } else if (typeof p === "function") { // Palette is a color interpolator this._heatmapColor = d3.scaleSequential(p) .domain(ext); } } _series(min, max, num) { const n = num - 1, s = [min], intrv = max / n; var i = min; while (i < max && s.length < num) { i += intrv; s.push(i); } if (s.length < num) s.push(max); else s[s.length - 1] = max; return s; } _createClipPaths() { const addClipPath = (id, width, height, x, y) => { const cp = this._g.append("clipPath") .attr("id", `${id}.${this._uniqueId}`) .append("rect") .attr("width", width) .attr("height", height); if (x) cp.attr("x", x); if (y) cp.attr("y", y); } addClipPath("bodyClip", this._width, this._height); addClipPath("headerRowClip", this._width - this._fixedWidth, this._fixedHeight + 1, null, -1); this._columns.forEach((column, i) => { addClipPath("headerClip" + i, column.width - this._cellPaddingH, this._cellHeightA); if (column.isNumber) addClipPath("cellClip" + i, column.width - this._cellPaddingH, this._cellHeightA, -(column.width - this._cellPaddingH)); else addClipPath("cellClip" + i, column.width - this._cellPaddingH, this._cellHeightA); }) } _clipPath(id) { return `url(#${id}.${this._uniqueId})`; } _createTable() { // table container this._table = this._g.append("g") .attr("transform", `translate(${this._left},${this._top})`) .on("wheel", e => this._scroll(e)) .on("mousewheel", e => this._scroll(e)) .on("DOMMouseScroll", e => this._scroll(e)); } _renderBody() { const that = this, style = this._style, highlight = style.highlight !== "none", cross = style.highlight === "cross"; // table body container const bodyBox = this._table.append("g").attr("clip-path", this._clipPath("bodyClip")); // inner container of the table body, y is controlled by vertical scrollbar and its content is clipped by bodyClip // it contains two parts: dataArea which is horizontally moveable and fixed columns on the left const body = bodyBox.append("g").attr("transform", `translate(0,${this._fixedHeight})`); // container of the moveable part of the body const dataArea = body.append("g") .attr("transform", `translate(${this._fixedWidth},0)`); const rows = this._data.slice(this._fixedRows); //if (this._dataIsArray) rows.forEach(r => r[0].origin = r); // moveable part of the body, x is controlled by horizontal scrollbar const cell = this._addRows( dataArea, "row", () => rows, (d, i) => this._columns.slice(this._fixedColumns).map((c, j) => { return { rowIndex: i + this._fixedRows, column: c, value: this._dataIsArray ? d[c.index] : d[c.name] } }), (d, i) => `translate(0,${i * this._cellHeightA})`, d => `translate(${d.column.tx},0)`, g => this._addCell(g, style.background, this._fixedColumns)) .on("click", click) .on("contextmenu", contextmenu) .on("mouseover", mouseover) .on("mouseleave", mouseleave); var fixedCell; if (this._fixedColumns) { // fixed columns on the left fixedCell = this._addRows( body.append("g"), "row", () => rows.map((r, i) => this._columns.slice(0, this._fixedColumns).map((c, j) => ({ origin: r, // for sort to get the index of data rowIndex: i + this._fixedRows, column: c, value: this._dataIsArray ? r[c.index] : r[c.name] }))), d => d, (d, i) => `translate(0,${i * this._cellHeightA})`, d => `translate(${d.column.tx},0)`, g => this._addCell(g, style.fixedBackground, 0, false, true)); } this._body = body; this._dataArea = dataArea; const test = cross ? (d, cell) => cell.rowIndex === d.rowIndex || cell.column.index === d.column.index : (d, cell) => cell.rowIndex === d.rowIndex && cell.column.index === d.column.index; d3.select("body").on(`keydown.eric.svgtable.${this._uniqueId}`, keypress); function keypress(e) { if (e.key === "Escape") that._focus = null; } function click(e, d) { if (that._focus !== d) { that._focus = null; mouseover(e, d); that._focus = d; } else that._focus = null; if (that._onclick) that._onclick(e, d); } function contextmenu(e, d) { if (that._oncontextmenu) { if (that._focus !== d) { that._focus = null; mouseover(e, d); that._focus = d; that._oncontextmenu(e, d); } return false; } } function mouseover(e, d) { if (!highlight || that._focus) return; const r = cell.select("rect") .datum(cell => test(d, cell) ? style.highlightBackground : that._cellColor(cell, style.background, false, false)) .attr("fill", d => d); if (!that._style.border) r.attr("stroke", d => d); if (fixedCell) fixedCell.select("text").attr("font-weight", cell => cell.rowIndex === d.rowIndex ? "bold" : ""); that._dataHeader.selectAll("text").attr("font-weight", cell => cell.column.index === d.column.index ? "bold" : ""); if (that._onhighlight) { that._onhighlight(e, { cell: d, column: d.column, getRow: () => that.getRowData(d.rowIndex), getColumn: () => that.getColumnData(d.column.index) }); } } function mouseleave() { if (!highlight || that._focus) return; const r = cell.select("rect").attr("fill", d => that._cellColor(d, style.background, false, false)); if (!that._style.border) r.attr("stroke", d => that._cellColor(d, style.background, false, false)); if (fixedCell) fixedCell.select("text").attr("font-weight", ""); that._dataHeader.selectAll("text").attr("font-weight", ""); } } _updateHeatmap() { const bg = this._style.background; const rects = this._dataArea.selectAll("rect"); if (this._heatmap) { rects.attr("fill", d => this._cellColor(d, bg, false, false)); if (!this._style.border) rects.attr("stroke", d => this._cellColor(d, bg, false, false)); } else { rects.attr("fill", d => bg); if (!this._style.border) rects.attr("stroke", bg); } } _renderHeader(g) { const style = this._style; // fixed rows sliced from this._data const rows = this._data.slice(0, this._fixedRows); // header container const header = g.append("g"); // top-left cells which are always fixed if fixedColumns is specified header.selectAll(".column") // Unify the the data structure make it compatible with addCell .data(this._columns.slice(0, this._fixedColumns).map((d, i) => ({ column: d }))) .join("g") .attr("class", "column") .attr("transform", d => `translate(${d.column.tx},0)`) .call(g => this._addCell(g, style.headerBackground, 0, true, true)) .on("click", (e, d) => this._sort(d)); // fixed data cells in the fixed columns section if (this._fixedColumns) { this._addRows( header, "fixedRow", () => rows.map((r, i) => this._columns.slice(0, this._fixedColumns).map((c, j) => ({ rowIndex: i, column: c, value: this._dataIsArray ? r[c.index] : r[c.name] }))), d => d, (d, i) => `translate(0,${(i + 1) * this._cellHeightA})`, d => `translate(${d.column.tx},0)`, g => this._addCell(g, style.fixedBackground, 0, false, true)); } // the container of the rest of the header cells, its content is clipped by headerClip const headerBox = header.append("g") .attr("clip-path", this._clipPath("headerRowClip")) .attr("transform", `translate(${this._fixedWidth},0)`); // horizontally moveable part of the header, x is controlled by and synchronized with horizontal scrollbar const dataHeader = headerBox.append("g"); dataHeader.selectAll(".column") // Unify the the data structure make it compatible with addCell .data(this._columns.slice(this._fixedColumns).map((d, i) => ({ column: d }))) .join("g") .attr("class", "column") .attr("transform", d => `translate(${d.column.tx},0)`) .call(g => this._addCell(g, style.headerBackground, this._fixedColumns, true, true)) .on("click", (e, d) => this._sort(d)); this._addRows( dataHeader, "fixedRow", () => rows, (d, i) => this._columns.slice(this._fixedColumns).map((c, j) => { return { rowIndex: i, column: c, value: this._dataIsArray ? d[c.index] : d[c.name] } }), (d, i) => `translate(0,${(i + 1) * this._cellHeightA})`, d => `translate(${d.column.tx},0)`, g => this._addCell(g, style.fixedBackground, this._fixedColumns, false, true) ); // a fixed line for seperating header and body g.append("line") .attr("stroke", style.borderColor) .attr("x1", 0) .attr("y1", this._cellHeightA) .attr("x2", this._width) .attr("y2", this._cellHeightA); this._header = header; this._dataHeader = dataHeader; } _sort(d) { const sorted = this._sortData(d.column); if (this._paginator && this._fullData.length > this._rowsPerPage) { const x = this._getX(), y = this._getY(); this._pageData(); this._rerender(); this._moveX(x); this._moveY(y); if (this._onsort) this._onsort(d.column, this._paginator !== null); } else { const f = 250 / sorted.length; this._table.selectAll(".row") .transition() .duration((d, i) => i * f) .ease(d3.easeBounce) .attr("transform", d => { const i = Array.isArray(d) && d[0].origin !== undefined ? sorted.indexOf(d[0].origin) : sorted.indexOf(d); return `translate(0,${i * this._cellHeightA})`; }); } const cg = this._header.selectAll(".column"); cg.select(".asc").attr("fill", _ => d.column === _.column && d.column.order === 1 ? "#777" : "#bbb"); cg.select(".desc").attr("fill", _ => d.column === _.column && d.column.order === 2 ? "#777" : "#bbb"); } _sortData(column) { //var sorted = [...this._data].slice(this._fixedRows); var fixed, sorted; if (this._paginator) { if (this._fixedRows > 0) { fixed = this._fullData.slice(0, this._fixedRows); sorted = this._fullData.slice(this._fixedRows); } else sorted = this._fullData; } else { sorted = [...this._data].slice(this._fixedRows); } this._columns.resetOrder(column); if (column.order === 0) column.order = 1; else if (column.order === 1) column.order = 2; else column.order = 1; const index = this._dataIsArray ? column.index : column.name; if (column.order === 0) { sorted.sort((a, b) => -1); } else if (column.isNumber) { if (column.order === 1) sorted.sort((a, b) => a[index] - b[index]); else sorted.sort((a, b) => b[index] - a[index]); } else { if (column.order === 1) sorted.sort((a, b) => a[index].localeCompare(b[index])); else sorted.sort((a, b) => b[index].localeCompare(a[index])); } if (fixed) this._fullData = fixed.concat(sorted); return sorted; } // rows: data function for rows // columns: data function for columns // rt: row translate function // ct: column translate function // cell: cell function _addRows(g, className, rows, columns, rt, ct, cell) { return g.selectAll("." + className) .data(rows) .join("g") .attr("class", className) .attr("transform", rt) .selectAll(".cell") .data(columns) .join("g") .attr("class", "cell") .attr("transform", ct) .call(cell) } // base: number of fixed cells on the same row _addCell(g, fill, base, isHeader, isFixed) { const style = this._style; const rect = g.append("rect") .attr("width", d => d.column.width) .attr("height", this._cellHeightA) .attr("fill", d => this._cellColor(d, fill, isHeader, isFixed)) .attr("stroke-width", 0.1) .attr("stroke", style.border ? style.borderColor : fill); if (this._heatmap && !(isHeader || isFixed)) rect.attr("opacity", 0.5); const t = g.append("text").attr("y", "1em").attr("dy", this._cellPaddingV).attr("fill", style.textColor); if (isHeader) { if (!style.border) g.append("line") .attr("x1", d => d.column.width - 1).attr("y1", 5) .attr("x2", d => d.column.width - 1).attr("y2", this._cellHeightA - 5) .attr("stroke", style.borderColor); this._arrow(g, base, "asc", "M 0 8 L 3 4 L 6 8"); this._arrow(g, base, "desc", "M 0 11 L 3 15 L 6 11"); // Header cell t.attr("dx", this._cellPaddingH) .attr("clip-path", d => this._clipPath(`headerClip${d.column.index}`)) .text(d => d.column.name); } else { t.attr("class", "value") .attr("dx", d => d.column.isNumber ? -this._cellPaddingH : this._cellPaddingH) .attr("clip-path", d => this._clipPath(`cellClip${d.column.index}`)) .attr("transform", d => `translate(${d.column.isNumber ? d.column.width : 0},0)`) .attr("text-anchor", d => d.column.isNumber ? "end" : "start") .text(d => { if (d.column.isNumber && d.column.format) return d3.format(d.column.format)(d.value); else return d.value; }); } } _cellColor(d, fill, isHeader, isFixed) { if (this._heatmap) { if (isHeader || isFixed || !d.column.isNumber) return fill; else return this._heatmapColor(d.value); } else return fill; } _arrow(g, base, name, path) { g.append("path") .attr("class", name) .attr("d", path) .attr("fill", "#bbb") .attr("transform", d => `translate(${d.column.width - this._cellPaddingH - 10},2)`); } _addScrollbars() { if (this._scrollbar.visible[1]) this._addVScroll(); if (this._scrollbar.visible[0]) this._addHScroll(); } _addVScroll() { const sb = this._scrollbar.vertical = new Scrollbar(this._svg); sb.position(this._left + this._width, this._top + this._fixedHeight, this._height - this._fixedHeight) .sliderWidth(this._sliderWidth) .sliderLength(this._sliderLength) .onscroll((y, sy, delta) => this._body.attr("transform", `translate(0,${-sy * this._yf + this._fixedHeight})`)) .attach(); } _addHScroll() { const sb = this._scrollbar.horizontal = new Scrollbar(this._svg); sb.vertical(false) .position(this._left + this._fixedWidth, this._top + this._height, this._width - this._fixedWidth) .sliderWidth(this._sliderWidth) .sliderLength(this._sliderLength) .onscroll((x, sx, delta) => { this._dataArea.attr("transform", `translate(${-sx * this._xf + this._fixedWidth},0)`); this._dataHeader.attr("transform", `translate(${-sx * this._xf},0)`); }) .attach(); } _calcConstrains() { // f for both scrollbars = (total - visible) / (visible - slider length) // Vertical scrollbar constrain const th = (this._data.length - this._fixedRows) * this._cellHeightA, sh = this._height - this._fixedHeight; this._yf = (th - sh) / (sh - this._sliderLength); // Horizontal scrollbar constrain const tw = this._sumWidth() - this._sumWidth(this._fixedColumns), sw = this._width - this._sumWidth(this._fixedColumns); this._xf = (tw - sw) / (sw - this._sliderLength); this._minX = -(tw - this._width); this._minY = -((this._data.length - this._fixedRows) * this._cellHeightA - this._height); } _scroll(e) { if (this._scrollbar.vertical) { const dy = e.wheelDeltaY ? e.wheelDeltaY : e.wheelDelta ? e.wheelDelta : -1; if (dy === -1) return; const cy = this._getY(); var y = cy + dy; this._moveY(y); } if (this._scrollbar.horizontal) { const dx = e.wheelDeltaX; if (dx) { const cx = this._getX(); var x = cx + dx; this._moveX(x); } } e.preventDefault(); } _getX() { return +this._dataArea.attr("transform").split(",")[0].substring(10); } _getY() { return +this._body.attr("transform").split(",")[1].replace(")", ""); } _moveX(x) { if (x > this._fixedWidth) x = this._fixedWidth; else if (x < this._minX) x = this._minX; this._dataArea.attr("transform", `translate(${x},0)`); this._dataHeader.attr("transform", `translate(${x - this._fixedWidth},0)`); if (this._scrollbar.horizontal) this._scrollbar.horizontal.moveSlider(-((x - this._fixedWidth) / this._xf)); } _moveY(y) { if (y < this._minY) y = this._minY; else if (y > this._fixedHeight) y = this._fixedHeight; this._body.attr("transform", `translate(0,${y})`); if (this._scrollbar.vertical) this._scrollbar.vertical.moveSlider(-(y - this._fixedHeight) / this._yf); } }55:T1c0b,// https://github.com/analyzer2004/svgtable // Copyright 2020 Eric Lo class Scrollbar { constructor(svg) { this._svg = svg; this._g = null; this._box = null; this._vertical = true; this._bar = null; this._slider = null; this._sliderWidth = 13; this._sliderLength = 50; this._sliderTimer = null; this._sliderTimeout = 300; this._sliderSteps = null; this._grabbing = false; this._delta = 0; this._deltac = 0; this._onscroll = null; this._namespace = `eric.scrollbar.${Date.now() * Math.random()}`; } vertical(_) { return arguments.length ? (this._vertical = _, this) : this._vertical; } sliderWidth(_) { return arguments.length ? (this._sliderWidth = _, this) : this._sliderWidth; } sliderLength(_) { return arguments.length ? (this._sliderLength = _, this) : this._sliderLength; } position(x, y, length) { return arguments.length ? (this._box = { x, y, length }, this) : this._box; } onscroll(_) { return arguments.length ? (this._onscroll = _, this) : this._onscroll; } attach() { this._render(); this._attachEvents(); } dispose() { if (this._g) this._g.remove(); d3.select("body") .on(`mousedown.${this._namespace}`, null) .on(`mouseup.${this._namespace}`, null) .on(`mousemove.${this._namespace}`, null); } moveSlider(pos) { if (pos < 0) pos = 0; else if (pos + this._sliderLength > this._box.length) pos = this._box.length - this._sliderLength; this._slider.attr(this._vertical ? "y" : "x", pos); } _render() { if (this._vertical) this._renderVBar(); else this._renderHBar(); } _renderVBar() { const box = this._box; const g = this._svg.append("g") .attr("transform", `translate(${box.x},${box.y})`); this._bar = g.append("rect") .attr("width", this._sliderWidth) .attr("height", box.length) .attr("fill", "#eee"); this._slider = g.append("rect") .attr("x", 0).attr("y", 0) .attr("width", this._sliderWidth) .attr("height", this._sliderLength) .attr("fill", "#ccc"); this._g = g; } _renderHBar() { const box = this._box; const g = this._svg.append("g") .attr("transform", `translate(${box.x},${box.y})`); this._bar = g.append("rect") .attr("width", box.length) .attr("height", this._sliderWidth) .attr("fill", "#eee"); this._slider = g.append("rect") .attr("x", 0).attr("y", 0) .attr("width", this._sliderLength) .attr("height", this._sliderWidth) .attr("fill", "#ccc"); this._g = g; } _attachEvents(tbox) { const box = this._box; //this._svg d3.select("body") .on(`mousedown.${this._namespace}`, e => { if (e.buttons === 1) { const p = d3.pointer(e); if (e.srcElement === this._slider.node()) { this._grabbing = true; this._slider.attr("fill", "#aaa"); if (this._vertical) { this._delta = p[1] - +this._slider.attr("y"); this._deltac = p[1] - +this._slider.attr("y") - this._sliderLength / 2; } else { this._delta = p[0] - +this._slider.attr("x"); this._deltac = p[0] - +this._slider.attr("x") - this._sliderWidth / 2; } e.stopPropagation(); } else if (e.srcElement === this._bar.node()) { const cbox = this._bar.node().getBoundingClientRect(); var a, b, pos; if (this._vertical) { a = pos = +this._slider.attr("y"); b = p[1] - cbox.y; } else { a = pos = +this._slider.attr("x"); b = p[0] - cbox.x; } const intr = (b - a) / 4; const steps = []; for (var i = 0; i < 3; i++) { pos += intr; steps.push(pos); } if (b + this._sliderLength > this._box.length) steps.push(this._box.length - this._sliderLength); else steps.push(b); this._sliderSteps = steps.reverse(); this._sliderTimeout = 200; this._sliderTimer = setTimeout(() => this._slide(), this._sliderTimeout); e.stopPropagation(); } } }) .on(`mouseup.${this._namespace}`, () => { if (this._sliderTimer) clearTimeout(this._sliderTimer); const steps = this._sliderSteps; if (steps && steps.length > 0) { this._slideTo(steps.reverse().pop()); this._sliderSteps = null; } this._grabbing = false; this._slider.attr("fill", "#ccc"); }) .on(`mousemove.${this._namespace}`, e => { const box = this._box; if (this._grabbing) { if (this._vertical) { const y = d3.pointer(e)[1]; const sy = y - this._delta; if (sy >= 0 && sy <= box.length - this._sliderLength) { this._slider.attr("y", sy); if (this._onscroll) this._onscroll(y, sy, this._deltac); } } else { const x = d3.pointer(e)[0]; const sx = x - this._delta; if (sx >= 0 && sx <= box.length - this._sliderLength) { this._slider.attr("x", sx); if (this._onscroll) this._onscroll(x, sx, this._deltac); } } } }); } _slideTo(dest) { this._slider.attr(this._vertical ? "y" : "x", dest); if (this._onscroll) this._onscroll(dest, dest, 0); } _slide() { this._slideTo(this._sliderSteps.pop()); if (this._sliderSteps.length > 0) { this._sliderTimeout -= 50; this._sliderTimer = setTimeout(() => this._slide(), this._sliderTimeout); } else this._sliderTimer = null; } }56:T2e2d,// https://github.com/analyzer2004/svgtable // Copyright 2020 Eric Lo class Paginator { constructor(table) { this._table = table; this._tableWidth = 0; this._tableHeight = 0; this._top = 0; this._left = 0; this._pw = 0; this._sw = 0; this._controls = { gotoInput: false, recordsPerPageSelector: true }; this._options = { position: "top", selector: "left", buttonColor: "#aaa" } this._recordsPerPageSelections = [25, 50, 75]; this._recordCount = 0; this._recordsPerPage = 50; this._currentPage = 1; this._totalPages = 0; this._currFloor = 0; this._currCeiling = 0; this._buttonPadding = 15; this._buttonSpacing = 5; this._containerTable = null; this._selectorCell = null; this._paginatorCell = null; this._onPageNumberChange = null; this._onRecordsPerPageChange = null; } controls(_) { return arguments.length ? (this._controls = _, this) : this._controls; } options(_) { return arguments.length ? (this._options = _, this) : this._options; } position(_) { return arguments.length ? (this._left = _[0], this._top = _[1], this) : [this._left, this.top]; } buttonPadding(_) { return arguments.length ? (this._buttonPadding = _, this) : this._buttonPadding; } buttonSpacing(_) { return arguments.length ? (this._buttonSpacing = _, this) : this._buttonSpacing; } recordsPerPageSelections(_) { return arguments.length ? (this._recordsPerPageSelections = _, this) : this._recordsPerPageSelections; } recordsPerPage(_) { if (arguments.length) { this._recordsPerPage = _; this._totalPages = Math.ceil(this._recordCount / this._recordsPerPage); this._validateCurrentPage(); return this; } else return this._recordsPerPage; } recordCount(_) { if (arguments.length) { this._recordCount = _; this._totalPages = Math.ceil(this._recordCount / this._recordsPerPage); this._validateCurrentPage(); return this; } else return this._recordCount; } onPageNumberChange(_) { return arguments.length ? (this._onPageNumberChange = _, this) : this._onPageNumberChange; } onRecordsPerPageChange(_) { return arguments.length ? (this._onRecordsPerPageChange = _, this) : this._onRecordsPerPageChange; } init(recordsPerPage, recordCount) { this._recordsPerPage = recordsPerPage; this._recordCount = recordCount; this._totalPages = Math.ceil(this._recordCount / this._recordsPerPage); this._resetBoundary(); return this; } render() { this._prepare(); this._createContainers(); this._renderPaginator(); if (this._controls.recordsPerPageSelector) { this._renderRecordsPerPageSelector(); } this._table.g.append(() => this._containerTable.node()); return this; } _prepare() { const s = this._table.size(); this._tableWidth = s[0]; this._tableHeight = s[1]; } _createContainers() { const c = d3.create("svg:g"); if (this._options.position === "top") c.attr("transform", `translate(${this._left},${this._top})`); else c.attr("transform", `translate(${this._left},${this._top})`); this._containerTable = c; this._createSelectorCell(); this._createPaginatorCell(); } _createSelectorCell() { if (this._selectorCell) this._selectorCell.remove(); this._selectorCell = this._containerTable.append("g"); } _createPaginatorCell() { if (this._paginatorCell) this._paginatorCell.remove(); this._paginatorCell = this._containerTable.append("g"); } _renderPaginator(pnum) { this._createPaginatorCell(); //if (this._controls.gotoInput) this._addGotoInput(pnum); var tx = 0; tx += this._addPageButton(1, tx); if (this._currFloor === 1 && this._currentPage < 5) { for (let i = 2; i <= this._currCeiling; i++) tx += this._addPageButton(i, tx); } else { var floor; if (this._totalPages === 5) { floor = 2; } else { floor = this._currFloor; tx += this._addSeperator(tx); } for (let i = floor; i <= this._currCeiling; i++) { tx += this._addPageButton(i, tx); } } if (this._currCeiling < this._totalPages) { tx += this._addSeperator(tx); tx += this._addPageButton(this._totalPages, tx); } this._pw = tx; this._adjust(); } _renderRecordsPerPageSelector() { this._createSelectorCell(); var tx = 0; this._recordsPerPageSelections.forEach(d => { tx += this._addSelectorButton(d, tx); }); this._sw = tx; this._selectorCell.attr("transform", `translate(${this._tableWidth - tx},0)`); } _adjust() { const left = this._selectorCell && this._pw > this._tableWidth - this._sw ? this._pw + 30 : this._tableWidth - this._sw; this._selectorCell.attr("transform", `translate(${left},0)`); } _addSelectorButton(num, tx) { tx += this._buttonSpacing; const s = num.toString(); const b = this._getBBox(s); this._selectorCell.append(() => this._addButton(s, "selBtn", true, b.width, b.height, tx, num === this._recordsPerPage) .attr("num", num) .on("click", e => this._clickSelectorNumber(e)) .node() ); return b.width + this._buttonPadding + this._buttonSpacing; } _addPageButton(pageNum, tx) { tx += this._buttonSpacing; const s = pageNum.toString(); const b = this._getBBox(s); this._paginatorCell.append(() => this._addButton(s, "pageBtn", true, b.width, b.height, tx, pageNum === this._currentPage) .attr("pageNum", pageNum) .on("click", e => this._clickPageNumber(e)) .node() ); return b.width + this._buttonPadding + this._buttonSpacing; } _addSeperator(tx) { tx += this._buttonSpacing; const s = "..."; const b = this._getBBox(s); this._paginatorCell.append(() => this._addButton(s, "seperator", false, b.width, b.height, tx).node()); return b.width + this._buttonPadding + this._buttonSpacing; } _addButton(caption, className, rect, w, h, tx, selected) { const rw = w + this._buttonPadding, rh = h + this._buttonPadding / 2; return d3.create("svg:g") .attr("class", className) .attr("text-anchor", "middle") .attr("transform", `translate(${tx},0)`) .call(g => { if (rect) g.append("rect") .attr("rx", 4).attr("ry", 4) .attr("width", rw).attr("height", rh) .attr("opacity", selected ? 1 : 0) .attr("fill", this._options.buttonColor) }) .call(g => g.append("text") .attr("transform", `translate(${rw / 2},${rh / 2 + h / 4})`) .text(caption)); } _getBBox(str) { const svg = this._table.svg; if (!svg) return { width: 0, height: 0 }; else { var t; try { t = svg.append("text").text(str); return t.node().getBBox(); } finally { t.remove(); } } } _gotoPage(pnum) { if (pnum < 1) pnum = 1; else if (pnum > this._totalPages) pnum = this._totalPages; if (pnum <= this._totalPages) { if (pnum >= 1 && pnum <= 4) { this._currFloor = 1; if (this._totalPages <= 5) this._currCeiling = this._totalPages; else this._currCeiling = 5; } else if (pnum >= this._totalPages - 4 && pnum <= this._totalPages) { this._currFloor = this._totalPages - 4; this._currCeiling = this._totalPages; } else { this._currFloor = pnum - 2; this._currCeiling = pnum + 1; } } this._currentPage = pnum; return this._currentPage; } _clickPageNumber(e) { var btn = e.currentTarget; var pnum = +btn.attributes["pageNum"].value; this._currentPage = pnum; if (pnum == this._currCeiling && pnum != this._totalPages) { this._currCeiling++; if (this._currCeiling + 2 >= this._totalPages) { this._currCeiling = this._totalPages; this._currFloor = this._totalPages - 4; } else this._currFloor = this._currCeiling - 3; this._renderPaginator(); } else if (pnum == this._currFloor) { this._currFloor--; if (this._currFloor < 3) this._resetBoundary(); else this._currCeiling = this._currFloor + 3; this._renderPaginator(); } else if (pnum == 1) { this._resetBoundary(); this._renderPaginator(); } else if (pnum == this._totalPages && this._totalPages > 5) { this._currCeiling = this._totalPages; this._currFloor = this._totalPages - 4; this._renderPaginator(); } else { this._paginatorCell .selectAll("rect") .nodes().forEach(node => { const num = +node.parentElement.attributes["pageNum"].value; node.setAttribute("opacity", num === this._currentPage ? 1 : 0); }); } if (this._onPageNumberChange) { var r = this._getRange(pnum); this._onPageNumberChange(pnum, r.begin, r.end); } } _clickSelectorNumber(e) { var btn = e.currentTarget; var num = +btn.attributes["num"].value; this.recordsPerPage(num); this._selectorCell .selectAll("rect") .nodes().forEach(node => { const n = +node.parentElement.attributes["num"].value; node.setAttribute("opacity", num === n ? 1 : 0); }); this._gotoPage(this._currentPage); this._renderPaginator(); if (this._onRecordsPerPageChange) { var r = this._getRange(this._currentPage); this._onRecordsPerPageChange(this._recordsPerPage, this._currentPage, r.begin, r.end); } } _getRange(pnum) { var begin = (pnum - 1) * this._recordsPerPage; var end = begin + this._recordsPerPage - 1; return { begin: begin, end: end }; } _validateCurrentPage() { if (this._currentPage > this._totalPages) { this._currentPage = this._totalPages; this._currCeiling = this._totalPages; this._currFloor = this._totalPages - 4; } } _resetBoundary() { this._currFloor = 1; this._currCeiling = this._totalPages <= 5 ? this._totalPages : 5; } }57:T621,miniMap = (svg, x, y, width, height) => { const cols = d3.max(grid.map(d => d.col)) + 1, rows = d3.max(grid.map(d => d.row)) + 1; const sx = d3.scaleBand().domain(seq(cols)).range([0, width]), sy = d3.scaleBand().domain(seq(rows)).range([0, height]), sc = d3.scaleSequential(d3.interpolateBuPu); const bandwidth = ({ x: sx.bandwidth(), y: sy.bandwidth(), hx: sx.bandwidth() / 2, hy: sy.bandwidth() / 2 }) const g = svg.append("g").attr("transform", `translate(${x},${y})`); const caption = g.append("text") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("transform", `translate(${width / 2},${height + 35})`); update(); function update(context) { if (context) { const cdata = context.getColumn(); sc.domain(d3.extent(cdata.slice(1))); cdata.forEach((d, i) => { const cell = grid.find(m => m.rowIndex === i); if (cell) cell.value = d; }); const s = options.dataset === "sales" ? "Sales Profit" : options.field; caption.text(`${context.column.name} ${up(s)}`); } g.selectAll("rect") .data(grid) .join("rect") //.transition() //.duration(250) .attr("fill", d => d.value ? sc(d.value) : "#ccc") .attr("x", d => sx(d.col)).attr("y", d => sy(d.row)) .attr("width", bandwidth.y).attr("height", bandwidth.y) .call(g => g.select("title").remove()) .append("title") .text(d => `${d.state}\n${d.value ? d3.format(",.2f")(d.value) : "--"}`); } return update; }58:T682,miniChart = (svg, x, y, width, height) => { const columns = data.columns.slice(1); const sx = d3.scaleBand().domain(columns).range([0, width]); const sy = d3.scaleLinear() .domain(d3.extent(columns.map(c => data[0][c]))).nice() .range([height, 0]); const bandwidth = { half: sx.bandwidth() / 2, qtr: sx.bandwidth() / 4 }; const chart = svg.append("g").attr("transform", `translate(${x},${y})`); const caption = chart.append("text") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("transform", `translate(${width / 2},${height + 35})`); chart.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(sx)); var axisY = chart.append("g").call(d3.axisLeft(sy).ticks(2, "s").tickValues(sy.domain())); update({co: {name: "Total"}, getRow: () => data[0]}); function update(context) { axisY.remove(); const rdata = context.getRow(); const s = options.dataset === "sales" ? "Sales Profit" : options.field; caption.text(`${rdata["state"]} ${up(s)}`); const values = columns.map(c => rdata[c]); sy.domain(d3.extent(values)).nice(); axisY = chart.append("g").call(d3.axisLeft(sy).ticks(2, "s").tickValues(sy.domain())); chart.selectAll("rect") .data(values) .join("rect") .attr("fill", "#a8dadc") .call(g => { g.select("title").remove(); g.append("title").text(d => d3.format(",d")(d)); }) .attr("x", (d, i) => sx(columns[i]) + bandwidth.qtr) .attr("y", d => sy(d)) .attr("width", bandwidth.half) .attr("height", d => height - sy(d)); } return update; }59:T46d,grid = { const grid = [[11, 0, "ME"], [0, 1, "AK"], [6, 1, "WI"], [10, 1, "VT"], [11, 1, "NH"], [1, 2, "WA"], [2, 2, "ID"], [3, 2, "MT"], [4, 2, "ND"], [5, 2, "MN"], [6, 2, "IL"], [7, 2, "MI"], [9, 2, "NY"], [10, 2, "MA"], [1, 3, "OR"], [2, 3, "NV"], [3, 3, "WY"], [4, 3, "SD"], [5, 3, "IA"], [6, 3, "IN"], [7, 3, "OH"], [8, 3, "PA"], [9, 3, "NJ"], [10, 3, "CT"], [11, 3, "RI"], [1, 4, "CA"], [2, 4, "UT"], [3, 4, "CO"], [4, 4, "NE"], [5, 4, "MO"], [6, 4, "KY"], [7, 4, "WV"], [8, 4, "VA"], [9, 4, "MD"], [10, 4, "DE"], [2, 5, "AZ"], [3, 5, "NM"], [4, 5, "KS"], [5, 5, "AR"], [6, 5, "TN"], [7, 5, "NC"], [8, 5, "SC"], [9, 5, "DC"], [0, 6, "HI"], [4, 6, "OK"], [5, 6, "LA"], [6, 6, "MS"], [7, 6, "AL"], [8, 6, "GA"], [4, 7, "TX"], [9, 7, "FL"]].map(d => ({ col: d[0], row: d[1], code: d[2] })); grid.forEach(d => { const state = states1.find(s => s.Code === d.code); if (state) { d.state = state.State; for(var i = 0; i < data.length; i++) { if (data[i]["state"] === d.state) { d.rowIndex = i; break; } } } else d.rowIndex = -1; }); return grid; }5a:[{"id":"7a88681c221d6f70d624144ad2c81c5414c9b3a390f5245fd2cde6b4efef3bdfdc208619fce1ebd64fad0be71ba3acd0e54ea1440daf5a797108b52c3ae9b2e2","href":"https://static.observableusercontent.com/files/7a88681c221d6f70d624144ad2c81c5414c9b3a390f5245fd2cde6b4efef3bdfdc208619fce1ebd64fad0be71ba3acd0e54ea1440daf5a797108b52c3ae9b2e2","name":"profit@1.csv","type":"text/csv","lastModified":1640837840134.801,"size":4816},{"id":"df1cfc7ac78875e86695d62e7b1094475334eda9f204b5d22f24ec31d8af006fb6e67e5f26c4d67d53566281815cab0f401ac048396d678661c55f8c9f927919","href":"https://static.observableusercontent.com/files/df1cfc7ac78875e86695d62e7b1094475334eda9f204b5d22f24ec31d8af006fb6e67e5f26c4d67d53566281815cab0f401ac048396d678661c55f8c9f927919","name":"sea19.csv","type":"text/csv","lastModified":1640837840134.801,"size":61115},{"id":"c65af6575dd3c4c20bc9e2d9af272c3fc409d4f9c8324c68395e4042d8a772a3ce6d9ddfd8a0b2dcaf1e900319cd786c5744cbb9d15d50d4e2c7acc721259e64","href":"https://static.observableusercontent.com/files/c65af6575dd3c4c20bc9e2d9af272c3fc409d4f9c8324c68395e4042d8a772a3ce6d9ddfd8a0b2dcaf1e900319cd786c5744cbb9d15d50d4e2c7acc721259e64","name":"statecodes@1.csv","type":"text/csv","lastModified":1640837840134.801,"size":725},{"id":"52ec31826a00af03ec2b62c4b061b1610e856682690cc26e0d61d3ff363617d9a8a6e4b24772c2b37c23a48620a85d3cd9ea6f5e256a03323c4e72984c80c4ed","href":"https://static.observableusercontent.com/files/52ec31826a00af03ec2b62c4b061b1610e856682690cc26e0d61d3ff363617d9a8a6e4b24772c2b37c23a48620a85d3cd9ea6f5e256a03323c4e72984c80c4ed","name":"dateData.csv","type":"text/csv","lastModified":1640837840134.801,"size":274},{"id":"1e74363756c68665c9bc20c24ad7ee728c9772411b32b5ce1f65fa1f92e1d1a1cc1baeb62f490ef69c1b49d81a48f68dcdff6979526eb0ee86a45e2054d962ba","href":"https://static.observableusercontent.com/files/1e74363756c68665c9bc20c24ad7ee728c9772411b32b5ce1f65fa1f92e1d1a1cc1baeb62f490ef69c1b49d81a48f68dcdff6979526eb0ee86a45e2054d962ba","name":"dfx@2.csv","type":"text/csv","lastModified":1640837840134.801,"size":7711},{"id":"7cd1523d2a669afe82efa6e50f0c7b8d87776f1729b975309b0ed9ed9248b19b81188e69fbb80b7b23908818da3ba587567b79471cf9c073ea7c21e9e33b90ff","href":"https://static.observableusercontent.com/files/7cd1523d2a669afe82efa6e50f0c7b8d87776f1729b975309b0ed9ed9248b19b81188e69fbb80b7b23908818da3ba587567b79471cf9c073ea7c21e9e33b90ff","name":"dffinal@3.csv","type":"text/csv","lastModified":1640841022881.609,"size":7189}] 48:{"id":"ab9c272d675e3f6d","slug":"untitled","title":"Untitled","thumbnail":"40fe4be8895f1df11862e24603787dfec49686dabf6db3e6b5ad16ca64cd8b0b","access_level":"public","create_time":"$D2021-12-30T04:17:20.134Z","update_time":"$D2021-12-30T07:32:36.330Z","view_time":null,"first_public_time":"$D2021-12-30T04:17:27.645Z","has_unpublished_edits":null,"fork":{"id":"8748c400427d7ea7","slug":"untitled/2","title":"","owner":{"id":"0506dc2b23e69382","login":"1907040215","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"966e4a1894470cf0","login":"1907040210","name":"浩张","avatar_url":"https://avatars-next.observableusercontent.com/e56d3f8d5c079fb6a2beb9097de831d1d4c7445a5e3d68fb7e04a6afe2c95880","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2941,"publish_version":2941,"role":null,"authored":false,"authors":[{"type":"individual","id":"28c3d885ee150c53","login":"1907040210","name":"浩张","avatar_url":"https://avatars-next.observableusercontent.com/e56d3f8d5c079fb6a2beb9097de831d1d4c7445a5e3d68fb7e04a6afe2c95880","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"28c3d885ee150c53","login":"1907040210","name":"浩张","avatar_url":"https://avatars-next.observableusercontent.com/e56d3f8d5c079fb6a2beb9097de831d1d4c7445a5e3d68fb7e04a6afe2c95880","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":2382,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2393,"value":"data3=FileAttachment(\"dateData.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2443,"value":"aaa=data3.slice(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"# 疫情 Dashboard 实例\n\n* 表的可滚动部分可以看作一个视口，只有一部分内容是可见的。当用户滚动表或移动它的滑块时，可见部分会发生变化。视口受固定行和列的约束。当用户垂直滚动表格时，标题行是固定的，但其他一切都相应移动，如果用户水平滚动表格，除了标题列以外的所有内容都会移动。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":802,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"# API Reference\n## SVGTable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1291,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1842,"value":"# 美国疫情分布详细情况\n在下面交互式图中可以鼠标选择目标地区，在下面图中会详细展示该地区疫情情况","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2051,"value":"number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"viewof number = Inputs.radio([\"newcases\", \"newdeaths\"/*, \"cases\", \"deaths\"*/], {label: `${thisMonth}` , value: \"newcases\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2852,"value":"viewof sanshitian = {\n const map = html`\n

${[trendChart(), barChart()]}

`\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2186,"value":"series = currentState ? currentState : \"Total\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2521,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2771,"value":"viewof lchart = {\n const map = html`\n

${[lineChart()]}

${[columnChart()]}

${[lastTwelveMonths()]}

`\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2697,"value":"function select1(data)\n{\n var temdata1=data.map(d=>d.date);\n var temdata2=data.map(d=>d[series]);\n var newdata=[];\n for(var i=0;i colors(d.total),\n stroke: d => colors(d.total),\n strokeWidth: 0,\n inset: 1\n }),\n plotText(\"0em\", \"code\"),\n plotText(\"1em\", d => formatNum(d.total))\n ];\n\n function plotText(dy, text) {\n return Plot.text(mapData, {\n x: \"col\",\n y: \"row\",\n dy: dy, \n fontWeight: \"bold\",\n fill: d => d.total < threshold ? \"#333\" : \"#eee\",\n text: text\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2090,"value":"import {Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2064,"value":"colorVega = \"#7900FF\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2066,"value":"import {vegaSync} from \"@pierreleripoll/vegasync\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1857,"value":"columnChart = () => {\n const \n series = currentState ? stateNumbers.find(d => d.code === currentState) : totals,\n title = d => `${d.month}\\n${formatNum(d.value)}`;\n\n \n return Plot.plot({\n width: 500 ,\n height: 95, \n marginTop: 0,\n x: {\n label: null,\n tickFormat: d => ticks.get(d),\n tickSize: 0\n },\n y: {\n grid: true,\n label: null,\n tickFormat: \"s\",\n label: `${currentState ?? \"total\"} monthly ${number}`\n },\n marks: [\n xRules,\n Plot.barY(tidy(series), {x: \"month\", y: \"value\", fill: miniPlotColor, fillOpacity: 0.75, title: title})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"barChart = () => {\n const ticks = d => {\n const date = d.getDate();\n return dailyNumbers.length > 20 ? date % 2 === 0 ? date : \"\" : date;\n },\n title = d => `${formatDate(d.date)}\\n${formatNum(d.value)}`;\n \n return Plot.plot({ \n width:600,\n height: 400,\n marginTop: 10,\n marginLeft: 30,\n x: {\n grid: true,\n tickFormat: \"s\",\n label: `${currentState ?? \"total\"} daily ${number}`\n },\n y: { \n round: false,\n label: thisMonth,\n labelOffset: 25,\n tickSize: 3,\n tickFormat: ticks,\n },\n marks:[Plot.barX(dailyNumbers, {x: \"value\", y: \"date\", fill: miniPlotColor, fillOpacity: 0.8, title: title})]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"trendChart = () => { \n const chart = dataset => Plot.plot({\n width: 200,\n height: 40,\n x: {axis: null},\n y: {axis: null},\n marks: [Plot.lineY(dataset, {x: \"date\", y: \"number\", stroke: miniPlotColor})]\n });\n\n return html`\n

${currentState ?? \"Total\"} numbers in the last 30 days

Cases

${chart(cases30.get(currentState))}

Deaths

${chart(deaths30.get(currentState))}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"xRules = Plot.ruleX([...ticks.keys()], {stroke: \"#ccc\", strokeWidth: 0.7, strokeDasharray: \"2\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"ticks = {\n const time = d3.scaleTime().domain([months[0], months[months.length - 1]]).range([40, width - 300]);\n const map = new Map(time.ticks().map(d => {\n const key = d3.timeFormat(\"%y-%m\")(d);\n let value = d.getMonth() === 0 && d.getDate() === 1 \n ? d.getFullYear().toString()\n : d3.timeFormat(\"%b\")(d);\n return [key, value];\n }));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2672,"value":"stateNumbers2 = covidData.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"keys2 = Object.keys(stateNumbers2[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2676,"value":"months2 = keys2.slice(keys2.length-24)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2680,"value":" data232 = months2.map(month2 => stateNumbers2.map(state => ({\n month2,\n series,\n number: series[month2]\n })))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"lastTwelveMonths = () => {\n const\n stateNumbers = covidData.slice(1),\n keys = Object.keys(stateNumbers[0]),\n months = asdas;\n\n const data = months.flatMap(month => stateNumbers.map(state => ({\n month,\n state: state.code,\n number: state[month]\n })));\n\n const coordinates = new Map(mapData.map(d => [d.code, {col: d.col, row: d.row}]));\n const colors = new Map(d3.rollups(\n data, \n v => d3.scaleSequential(d3.interpolateRdPu).domain(d3.extent(v.map(s => s.number))), \n d => d.month)); \n \n return Plot.plot({\n width: 480,\n height: 350,\n marginLeft: 0,\n marginRight: 0,\n x: {axis: null, round: false},\n y: {axis: null}, \n color: {type: \"identity\"},\n facet: {\n data: data,\n x: \"month\",\n label: null\n }, \n marks: [\n Plot.cell(data, {\n x: d => coordinates.get(d.state).col,\n y: d => coordinates.get(d.state).row,\n fill: d => colors.get(d.month)(d.number),\n inset: 0.15\n })\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"vegalite = require(\"@observablehq/vega-lite@0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1876,"value":"extent = d3.extent(mapData.map(d => d.total))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"miniPlotColor = colors.range()[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"oppositeColor = \"#edc949\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"colors = d3.scaleSequential(d3.interpolateRdPu).domain(extent);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"formatNum = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"tidy = row => row ? Object.keys(row).slice(2).map(d => ({month: d, value: row[d]})) : null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"thisMonth = d3.timeFormat(\"%B %Y\")(new Date())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"months = Object.keys(totals).slice(2).map(d => d3.timeParse(\"%y-%m\")(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"covidData = getStates(number)\n .map(d => ({code: states.get(d.state), ...d}))\n .filter(d => d.code || d.state === \"Total\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1896,"value":"totals = covidData[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"stateNumbers = covidData.filter(d => d.code)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"dailyNumbers = {\n const thisMonth = new Date().getMonth();\n return tidy(getStatesLastNDays(number, new Date().getDate(), true, true).find(d => d.code === (currentState ?? \"\")))\n .map(d => ({\n date: d3.timeParse(\"%Y/%m/%d\")(d.month),\n value: d.value\n }))\n .filter(d => d.date.getMonth() === thisMonth);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1902,"value":"tidyAll = stateNumbers.flatMap(state => Object.keys(state).slice(2).map(d => ({state: state.code, month: d, value: state[d]})));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"mapData = {\n const months = Object.keys(stateNumbers[0]).slice(2);\n return new GridMap()\n .field({name: \"state\", code: \"code\", values: [months[months.length - 1]]})\n .mapGrid(map)\n .data(stateNumbers)\n .process();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"cases30 = get30Days(\"newcases\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"deaths30 = get30Days(\"newdeaths\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1910,"value":"get30Days = field => {\n const data = getStatesLastNDays(field, 30, true, true).filter(d => d.code !== \"\" || d.state === \"Total\");\n return d3.group(tidy(data), d => d.state);\n\n function tidy(dataset) {\n const \n parse = d => d3.timeParse(\"%Y/%m/%d\")(d),\n filtered = dataset.filter(d => d.code !== \"\" || d.state === \"Total\");\n return filtered.flatMap(state => Object.keys(state).slice(2).map(d => ({\n state: state.code === \"\" ? null : state.code,\n date: parse(d),\n number: state[d]\n })).reverse())\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"value":"import {getStates, getStatesLastNDays, map as states} from \"@analyzer2004/covid-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"states1 = d3.csvParse(await FileAttachment(\"statecodes@1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1959,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"import {GridMap, map} from \"@analyzer2004/gridcartogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1916,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n if (options.dataset === \"covid\") {\n const cdata = getStates(options.field); \n const cml = cdata.find(d => d.state === \"Northern Mariana Islands\"); \n if (cml) cml.state = \"N. Mariana Isl.\"; // Shorten the name for display\n return cdata;\n }\n else \n return d3.csvParse(await FileAttachment(\"profit@1.csv\").text(), d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"covid = { \n const data = await d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\", d => {\n const date = new Date(d.date.replaceAll(\"-\", \"/\"));\n const y = date.getFullYear(), m = date.getMonth();\n const ldy = new Date(y, m + 1, 0); \n return {\n date: date,\n lastDay: date.getTime() === ldy.getTime(),\n month: (y - 2020) * 12 + m,\n state: d.state,\n fips: +d.fips,\n cases: +d.cases,\n deaths: + d.deaths\n }\n });\n \n const last = data[data.length - 1].date.getTime(); \n for(let i = data.length - 1; i > 0; i--) {\n const row = data[i];\n if (row.date.getTime() === last)\n row.lastDay = true;\n else\n break;\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"seq = n => Array.apply(null, {length: n}).map((d, i) => i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"up = s => s.charAt(0).toUpperCase() + s.slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"resetGrid = () => grid.forEach(d => d.value = null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1944,"value":"states1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"sample = d3.csvParse(await FileAttachment(\"sea19.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2539,"value":"dataII=FileAttachment(\"dffinal@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2544,"value":"dateParse = d3.timeParse(\"%Y-%m\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2545,"value":"dateFormat = d3.timeFormat(\"%B %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2547,"value":"daterange = {\n return dataII.map(d => dateFormat(dateParse(d.date)))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2551,"value":"x = d3.scaleBand()\n .domain(daterange)\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2552,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2554,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(ccc, d => +d.number)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .text(ccc.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2558,"value":"margin = ({top: 50, right: 0, bottom: 80, left: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2560,"value":"width = 600 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2562,"value":"height = 350 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5a","stdlib":"1"}} 24:null