31:T7b2,viewof options = form(html``)32:T4a73,// https://github.com/analyzer2004/ringchart // Copyright 2020 Eric Lo class RingChart { constructor(container) { this._container = container; this._width = 0; this._height = 0; this._diameter = 0; this._radius = { inner: 50, outer: 0, node: 0, max: 0 }; this._palette = d3.schemeTableau10; // options this._options = { order: "asc", nodeStyle: "arc", chartType: "rankmap", clickAction: "highlight", stickyNodes: true, showZeros: true, alwaysShowLines: false, fixedNodeRadius: 0 }; this._legend = { enabled: true, centered: true, fontSize: "9pt", format: ".2s", labelColor: "#666", num: 7 } // elements this._g = null; this._lines = null; this._dots = null; this._yTicks = null; this._legendBox = null; this._legendItems = null; // data this._tick = { name: "", isDate: false, format: "", fontSize: "9pt", color: "#666" }; this._data = null; this._chartData = null; this._min = 0; this._max = 0; this._keys = null; this._sortedKeys = null; this._ranks = null; // scales this._xl = null; this._xb = null; this._y = null; this._color = null; this._bandwidth = { x: 0, y: 0 }; this._isArc = false; this._isSeq = false; this._focus = 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]; } innerRadius(_) { return arguments.length ? (this._radius.inner = _, this) : this._radius.inner; } palette(_) { return arguments.length ? (this._palette = _, this) : this._palette; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } legend(_) { return arguments.length ? (this._legend = Object.assign(this._legend, _), this) : this._legend; } tick(_) { return arguments.length ? (this._tick = Object.assign(this._tick, _), this) : this._tick; } 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._initScales(); this._renderChart(); if (this._legend.enabled) this._renderLegend(); return this; } _init() { this._isArc = this._options.nodeStyle === "arc"; this._isSeq = this._options.chartType === "heatmap"; const cb = this._getCharBox(this._tick.fontSize); this._radius.outer = Math.min(this._width, this._height) - (cb.height + 10); // dy of ticks = 10 } _process() { const op = this._options, ascending = op.order === "asc"; this._processKeys(); const cd = this._data.map(d => { const tick = d[this._tick.name]; const row = { tick: tick, values: this._keys.map(key => { const value = +d[key]; if (value < this._min) this._min = value; else if (value > this._max) this._max = value; return { tick, key, value }; }) }; const sorting = op.chartType === "rankmap" ? row.values : row.values.map(r => r); if (ascending) sorting.sort((a, b) => a.value - b.value); else sorting.sort((a, b) => b.value - a.value); const len = sorting.length; sorting.forEach((d, i) => d.rank = ascending ? len - i : i + 1); return row; }); if (op.chartType === "rankmap") { this._sortedKeys = cd[0].values.map(d => d.key); this._ranks = this._sortedKeys.map(key => ({ key: key, series: cd.map(row => { var index = row.values.findIndex(_ => _.key === key); if (!op.showZeros && row.values[index].value === 0) index = -1; return { tick: row.tick, index: index } }) })); } 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."; } } _initScales() { const op = this._options, radius = this._calculateRadius(); this._xl = d3.scaleLinear().domain([0, this._chartData.length]).range([0, 360]); this._xb = d3.scaleBand().domain(this._seq(0, this._chartData.length)).range([0, 2 * Math.PI]); radius.max = this._isArc || !op.stickyNodes ? radius.outer / 2 : radius.inner + radius.node * 2 * this._keys.length; if (op.showZeros) { this._y = d3.scaleBand().domain(this._seq(0, this._keys.length)).range([radius.inner, radius.max]); } else { // y scale is from -1 to keys.length, -1 is for zero nodes const u = (radius.max - radius.inner) / (this._keys.length + 1); this._y = d3.scaleBand().domain(this._seq(-1, this._keys.length + 1)).range([radius.inner - u, radius.max]); } if (op.chartType === "rankmap") this._color = d3.scaleOrdinal().domain(this._keys).range(this._palette); else this._color = d3.scaleSequential(this._palette).domain([this._min, this._max]).nice(); this._bandwidth.x = this._xb.bandwidth(); this._bandwidth.y = this._y.bandwidth(); } _calculateRadius() { const radius = this._radius; if (this._options.fixedNodeRadius) radius.node = this._options.fixedNodeRadius; else { const r1 = 2 * Math.PI * radius.inner / this._chartData.length / 2, r2 = (radius.outer / 2 - radius.inner) / (this._keys.length * 2); radius.node = Math.min(r1, r2); } return radius; } _renderChart() { const op = this._options; this._g = this._container.append("g") .attr("transform", `translate(${this._width / 2},${(this._height / 2)})`); if (op.chartType === "rankmap") this._renderLines(); if (this._isArc) this._renderArcs(); else this._renderDots(); this._dots.append("title") .text(d => `${d.tick} - ${d.key}\nRank: ${d.rank}\nValue: ${d.value}`); this._attachEvents(this._dots); this._renderAxis(); if (op.chartType === "heatmap") this._renderAxisY(); } _renderLines() { var a = 0, r = 0; if (this._isArc) { a = this._bandwidth.x / 2; r = this._bandwidth.y / 2; } const line = d3.lineRadial() .curve(d3.curveLinearClosed) .angle((d, i) => this._xb(i) + a) .radius(d => this._y(d.index) + r); const opacity = this._options.alwaysShowLines ? 1 : 0; this._lines = this._g.selectAll(".line") .data(this._ranks) .join("path") .attr("class", "line") .attr("fill", "none") .attr("opacity", opacity) .attr("stroke", (d, i) => this._color(this._sortedKeys[i])) .attr("stroke-width", 2) .attr("d", d => line(d.series)); } _renderArcs() { const arc = d3.arc() .innerRadius((d, i) => this._y(i)) .outerRadius((d, i) => this._y(i) + this._bandwidth.y) .startAngle(d => this._xb(d.index)) .endAngle(d => this._xb(d.index) + this._bandwidth.x); this._dots = this._g.append("g") .selectAll("g") .data(this._chartData) .join("g") .selectAll("path") .data((d, i) => d.values.map(v => Object.assign({ index: i }, v))) .join("path") .attr("fill", d => this._getColor(d)) .attr("d", arc); } _renderDots() { const op = this._options, radius = this._radius, x = 2 * radius.node; const g = this._g.append("g") .selectAll("g") .data(this._chartData) .join("g") .attr("transform", (d, i) => `rotate(${this._xl(i) - 90})`); if (op.nodeStyle === "circle") { this._dots = g.selectAll("circle") .data(d => d.values) .join("circle") .attr("fill", d => this._getColor(d)) .attr("cx", (d, i) => op.stickyNodes ? i * x + radius.inner : this._y(i)) .attr("r", radius.node); } else { const w = radius.node * 2, hb = this._bandwidth.y / 2; this._dots = g.selectAll("rect") .data(d => d.values) .join("rect") .attr("fill", d => this._getColor(d)) .attr("x", (d, i) => (op.stickyNodes ? i * x + radius.inner : this._y(i)) - hb) .attr("y", op.stickyNodes ? -radius.node : -hb) .attr("width", w).attr("height", w); } } _renderAxis() { const radius = this._radius, id = "axis_" + this._uniqueId, scale = d3.scaleLinear() .domain([0, this._chartData.length - 1]) .range([0, 100 - (100 / this._chartData.length)]); this._drawCircle(id, radius.max); const ticks = scale.ticks(); this._g.selectAll(".tick") .data(ticks) .join("g") .style("font-size", this._tick.fontSize) .attr("class", "tick") .attr("transform", "rotate(90)") .call(g => g.append("line") .attr("stroke", this._tick.color) .attr("stroke-dasharray", "1,2") .attr("x1", -radius.inner) .attr("x2", -radius.max - 10) .attr("transform", d => `rotate(${360 * scale(d) / 100})`)) .call(g => g.append("text") .attr("dx", 3) .attr("dy", -5) .attr("fill", this._tick.color) .append("textPath") .attr("xlink:href", "#" + id) .attr("startOffset", d => scale(d) + "%") .text((d, i) => { const s = this._chartData[d].tick; if (this._tick.isDate) { const date = this._tick.format !== "" ? d3.timeParse(s) : new Date(s); return date.toLocaleDateString(); } else return s; })); } _drawCircle(id, radius) { this._g.append("path") .attr("id", id) .attr("fill", "none") .attr("stroke", "none") .attr("d", "M 0, 0 " + "m " + -radius + ",0 " + "a " + radius + "," + radius + " 0 0,1 " + radius * 2 + ",0 " + "a " + radius + "," + radius + " 0 0,1 " + (-radius * 2) + ",0 " ); } _renderAxisY() { this._keys.forEach((d, i) => { const id = `axisY${i}_${this._uniqueId}`; this._drawCircle(id, this._y(i)); }); this._yTicks = this._g.append("g") .style("font-size", this._tick.fontSize) .attr("transform", "rotate(90)") .selectAll("text") .data(this._keys) .join("g") .style("visibility", "hidden") .call(g => { g.append("text") .attr("dx", "0.5em") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", "none") .call(t => { t.append("textPath") .attr("xlink:href", (d, i) => `#axisY${i}_${this._uniqueId}`) .text(d => d) }) .clone(true) .attr("stroke", "none") .attr("fill", this._tick.color); }); } _renderLegend() { const w = 15, spacing = 2.5, format = d3.format(this._legend.format), h = this._getCharBox(this._legend.fontSize).height; this._legendBox = this._container.append("g") .style("font-size", this._legend.fontSize); const items = this._processLegend(); const legend = this._legendItems = this._legendBox.selectAll("g") .data(items) .join("g") .attr("transform", (d, i) => `translate(0,${i * (h + spacing)})`) .call(g => g.append("rect") .attr("fill", d => this._isSeq ? this._color(d.f) : this._color(d.key)) .attr("rx", 4).attr("ry", 4) .attr("width", w).attr("height", h)) .call(g => g.append("text") .attr("dy", "1em") .attr("fill", this._legend.labelColor) .attr("transform", `translate(${w + spacing},0)`) .text((d, i) => { if (this._isSeq) return i < items.length - 1 ? `${format(d.f)} - ${format(d.c)}` : `> ${format(d.f)}`; else return d.key; })); this._attachEvents(legend); var centered = this._legend.centered; const box = this._legendBox.node().getBBox(), threshold = this._radius.inner - this._radius.node; if (box.width / 2 >= threshold || box.height / 2 >= threshold) centered = false; if (centered) this._legendBox.attr("transform", `translate(${(this._width - box.width) / 2},${(this._height - box.height) / 2})`); else { const left = (this._width / 2) + this._y.range()[1] + h + 15, top = (this._height / 2) - this._y.range()[1]; this._legendBox.attr("transform", `translate(${left},${top})`); } } _processLegend() { if (this._options.chartType === "rankmap") return this._keys.map(d => ({ key: d })); else { const ranges = [], ticks = this._color.ticks(this._legend.num); for (let i = 0; i < ticks.length - 1; i++) { ranges.push({ f: ticks[i], c: ticks[i + 1] }); } return ranges; } } _attachEvents(selections) { const op = this._options; selections.attr("opacity", 1) .on("click", (e, d) => { if (op.clickAction === "none") return; const f = this._focus; if (f && (f === d || f.key && f.key === d.key)) { this._focus = null; this._cancel(); if (this._oncancel) this._oncancel(d); } else { this._focus = d; this._highlight(d); if (this._onclick) this._onclick(d); } e.stopPropagation(); }) .on("mouseenter", (e, d) => { if (!this._focus) { this._highlight(d); if (this._onhover) this._onhover(d); } }) .on("mouseleave", (e, d) => { if (!this._focus) this._cancel(); }); this._container.on("click.eric.ringchart." + this._uniqueId, () => { if (op.clickAction === "none") return; this._focus = null; this._cancel(); }) } _highlight(d) { if (this._isSeq) { const t = this._dots.transition().duration(500); if (d.key) { t.attr("opacity", _ => _.key === d.key ? 1 : 0.2); this._yTicks.style("visibility", _ => _ === d.key ? "visible" : "hidden"); } else t.attr("opacity", _ => _.value >= d.f && _.value < d.c ? 1 : 0.2); } else { this._dots.transition().duration(500).attr("opacity", _ => _.key === d.key ? 1 : 0.2); if (this._lines) { const opacity = this._options.alwaysShowLines ? 0.2 : 0; this._lines.transition().duration(250).attr("opacity", _ => _.key === d.key ? 1 : opacity); } if (this._yTicks) this._yTicks.style("visibility", _ => _ === d.key ? "visible" : "hidden"); if (this._legendItems) this._legendItems.style("font-weight", _ => _.key === d.key ? "bold" : ""); } } _cancel() { this._dots.transition().duration(500).attr("opacity", 1); if (this._lines) { const opacity = this._options.alwaysShowLines ? 1 : 0; this._lines.transition().duration(250).attr("opacity", opacity); } if (this._yTicks) this._yTicks.style("visibility", "hidden"); if (this._legendItems) this._legendItems.style("font-weight", ""); } _getColor(d) { return !this._options.showZeros && d.value === 0 ? "none" : this._color(this._isSeq ? d.value : d.key); } _getCharBox(fontSize) { var text; try { text = this._container.append("text") .attr("font-size", fontSize) .text("M"); return text.node().getBBox(); } finally { if (text) text.remove(); } } _seq(start, length) { return Array.from({ length: length }).map((d, i) => start + i); } }33:[{"id":"e6e268969195b29f54466ce74aacf506ca32e06bb64fe0b9cf63055b4277a85c467e89bbe51a13cf56ba73f5b6b6fd7f16fa91227daa62dfc5909595ee29edf0","href":"https://static.observableusercontent.com/files/e6e268969195b29f54466ce74aacf506ca32e06bb64fe0b9cf63055b4277a85c467e89bbe51a13cf56ba73f5b6b6fd7f16fa91227daa62dfc5909595ee29edf0","name":"test_cranberrycup_usa_2021sp_pcs@2.csv","type":"text/csv","lastModified":1634458188739.996,"size":583},{"id":"b93f7b0a6883b1c974af1329e761772f123897a0dc3ac0870ff519f1fccdac424ccef17fcec8ff48b0fecdae44cb94a3371e3faa01b853d366a83192c0df5bb8","href":"https://static.observableusercontent.com/files/b93f7b0a6883b1c974af1329e761772f123897a0dc3ac0870ff519f1fccdac424ccef17fcec8ff48b0fecdae44cb94a3371e3faa01b853d366a83192c0df5bb8","name":"test_cranberrycup_usa_2021sp_pcs@3.csv","type":"text/csv","lastModified":1634458866179.197,"size":566},{"id":"b93f7b0a6883b1c974af1329e761772f123897a0dc3ac0870ff519f1fccdac424ccef17fcec8ff48b0fecdae44cb94a3371e3faa01b853d366a83192c0df5bb8","href":"https://static.observableusercontent.com/files/b93f7b0a6883b1c974af1329e761772f123897a0dc3ac0870ff519f1fccdac424ccef17fcec8ff48b0fecdae44cb94a3371e3faa01b853d366a83192c0df5bb8","name":"test_cranberrycup_usa_2021sp_pcs@4.csv","type":"text/csv","lastModified":1634459156499.47,"size":566},{"id":"b23b7cb9f42119c7115b5c4c8d7cee81c398e4f9c1c62caea01e221577de4fd3ac6726bc2e850586eea120afa9b9f520d126355957a3ec1b6eec3361e933a2ca","href":"https://static.observableusercontent.com/files/b23b7cb9f42119c7115b5c4c8d7cee81c398e4f9c1c62caea01e221577de4fd3ac6726bc2e850586eea120afa9b9f520d126355957a3ec1b6eec3361e933a2ca","name":"2019 by region.csv","type":"text/csv","lastModified":1634457091732.199,"size":1002},{"id":"a6a1971f300b74100bbad143636a7927077f4524e9d184027eefaace8760400dfac4d49cfc661720bfe5cb0621956540d8a208bd670e167d377eaae8c38cde0b","href":"https://static.observableusercontent.com/files/a6a1971f300b74100bbad143636a7927077f4524e9d184027eefaace8760400dfac4d49cfc661720bfe5cb0621956540d8a208bd670e167d377eaae8c38cde0b","name":"2017 by region.csv","type":"text/csv","lastModified":1634457091253.89,"size":1117},{"id":"927df93c3275f99f4fd82b74ec0c8c603458e81675b83f08f75d8642e3e061da9fcb806ca86ce3bc4ab3dd7bdc97339fdf08fbed7235ef5524e29f11095f43bc","href":"https://static.observableusercontent.com/files/927df93c3275f99f4fd82b74ec0c8c603458e81675b83f08f75d8642e3e061da9fcb806ca86ce3bc4ab3dd7bdc97339fdf08fbed7235ef5524e29f11095f43bc","name":"2018 by region.csv","type":"text/csv","lastModified":1634457091221.728,"size":978},{"id":"218b4d3b01f63d81c98eeefb0dbf377cccde2854ba412344e6826d2181b0f24679c0b65c4eb04a9e3334aba28aacab7e666300630d6ece830c482da516fa9c1d","href":"https://static.observableusercontent.com/files/218b4d3b01f63d81c98eeefb0dbf377cccde2854ba412344e6826d2181b0f24679c0b65c4eb04a9e3334aba28aacab7e666300630d6ece830c482da516fa9c1d","name":"2015 by region.csv","type":"text/csv","lastModified":1634457091739.491,"size":1017},{"id":"26741e1b4545bfecae1a49939263c82f962b06a150a81a1357a7b2ab0e5d57d1f840145351ec7dc5b281d60f0b966c44270b3c69d992325e3a50c58443ea0651","href":"https://static.observableusercontent.com/files/26741e1b4545bfecae1a49939263c82f962b06a150a81a1357a7b2ab0e5d57d1f840145351ec7dc5b281d60f0b966c44270b3c69d992325e3a50c58443ea0651","name":"2020 by region.csv","type":"text/csv","lastModified":1634457091741.787,"size":1118},{"id":"da2432fa8d9d8071d60ad23537e6bc952f20ab427394462e21a18b505db4de510edec4ae6e93ecdf84d7abadf172500f5a8d0cbc0d16ef79a371eaeba8d66758","href":"https://static.observableusercontent.com/files/da2432fa8d9d8071d60ad23537e6bc952f20ab427394462e21a18b505db4de510edec4ae6e93ecdf84d7abadf172500f5a8d0cbc0d16ef79a371eaeba8d66758","name":"test_cranberrycup_usa_2021sp_pcs.csv","type":"text/csv","lastModified":1634457946334.052,"size":615},{"id":"fc5541a2cddfb6e6e0b10613a90d48581a35fb7d60dbac085ff96750e41fca6eb06b73e9fe821524c155f64cbf09df8ec17a192cc9935671bf3e0d38b399fe57","href":"https://static.observableusercontent.com/files/fc5541a2cddfb6e6e0b10613a90d48581a35fb7d60dbac085ff96750e41fca6eb06b73e9fe821524c155f64cbf09df8ec17a192cc9935671bf3e0d38b399fe57","name":"2016 by region.csv","type":"text/csv","lastModified":1634457091730.167,"size":1053}] 2f:{"title":"Radar chart with Vega-lite","cells":[{"id":0,"value":"# Radar chart with Vega-lite","pinned":true,"hidden":false,"mode":"md"},{"id":9,"value":"diameter = Math.min(screen.width, screen.height) * 0.6;","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"fs = d3.scaleLinear().domain([300,768]).range([6,9])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"Data2","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"chart3 = {\n const d = diameter,\n dark = options.theme === \"dark\";\n const svg = d3.create(\"svg\")\n .style(\"background\", dark ? \"#2e2e2e\" : \"white\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", width)\n .attr(\"height\", diameter);\n\n yield svg.node();\n const chart = new RingChart(svg)\n .tick({\n name: \"pcs\", \n fontSize: `${fs(d)}pt`,\n color: dark ? \"white\" : \"#666\"\n })\n .size([diameter, diameter])\n .innerRadius(+options.innerRadius)\n .options({ \n order: 'asc', \n nodeStyle: options.nodestyle,\n alwaysShowLines: true,\n })\n .legend({ \n centered: options.legend === \"center\", \n labelColor: dark ? \"white\" : \"#666\",\n fontSize: `${fs(d)}pt`\n }) \n .data(skaters)\n .render();\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"chart5 = {\n const d = diameter,\n dark = options.theme === \"dark\";\n const svg = d3.create(\"svg\")\n .style(\"background\", dark ? \"#2e2e2e\" : \"white\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", width)\n .attr(\"height\", diameter);\n\n yield svg.node();\n const chart = new RingChart(svg)\n .tick({\n name: \"name\", \n fontSize: `${fs(d)}pt`,\n color: dark ? \"white\" : \"#666\"\n })\n .size([diameter, diameter])\n .innerRadius(+options.innerRadius)\n .options({ \n order: options.sort, \n nodeStyle: options.nodestyle,\n alwaysShowLines: true,\n })\n .legend({ \n centered: options.legend === \"center\", \n labelColor: dark ? \"white\" : \"#666\",\n fontSize: `${fs(d)}pt`\n }) \n .data(skaters0)\n .render();\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"chart4 = {\n const d = diameter,\n dark = options.theme === \"dark\";\n const svg = d3.create(\"svg\")\n .style(\"background\", dark ? \"#2e2e2e\" : \"white\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", width)\n .attr(\"height\", diameter);\n\n yield svg.node();\n const chart = new RingChart(svg)\n .tick({\n name: \"Region\", \n fontSize: `${fs(d)}pt`,\n color: dark ? \"white\" : \"#666\"\n })\n .size([diameter, diameter])\n .innerRadius(+options.innerRadius)\n .options({ \n order: options.sort, \n nodeStyle: options.nodestyle,\n alwaysShowLines: true,\n })\n .legend({ \n centered: options.legend === \"center\", \n labelColor: dark ? \"white\" : \"#666\",\n fontSize: `${fs(d)}pt`\n }) \n .data(Data2[options.year])\n .render();\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"# Imports","pinned":true,"hidden":false,"mode":"md"},{"id":20,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Data2= ({\n year2015: d3.csvParse(await FileAttachment(\"2015 by region.csv\").text(), d3.autoType),\n year2016: d3.csvParse(await FileAttachment(\"2016 by region.csv\").text(), d3.autoType),\n year2017: d3.csvParse(await FileAttachment(\"2017 by region.csv\").text(), d3.autoType),\n year2018: d3.csvParse(await FileAttachment(\"2018 by region.csv\").text(), d3.autoType),\n year2019: d3.csvParse(await FileAttachment(\"2019 by region.csv\").text(), d3.autoType),\n year2020: d3.csvParse(await FileAttachment(\"2020 by region.csv\").text(), d3.autoType)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"skaters = { let data = d3.csvParse(await FileAttachment(\"test_cranberrycup_usa_2021sp_pcs@3.csv\").text(), d3.autoType);\n let newData = [];\n let keep = ['name', 'Skating Skills', 'Transitions', 'Performance', 'Composition', 'Interpretation of the Music'];\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"skaters0 = { let data = d3.csvParse(await FileAttachment(\"test_cranberrycup_usa_2021sp_pcs@4.csv\").text(), d3.autoType);\n let newData = [];\n let keep = ['name', 'Skating Skills', 'Transitions', 'Performance', 'Composition', 'Interpretation of the Music'];\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}