2d:null 2e:["$","title",null,{"children":"Turning prototypes into DataViz components using Observable | Eric Lo | Observable"}] 33:T74c,viewof options = form(html``)34:T45e,md`## Prototype I needed a proof-of-concept to verify these ideas - If I rank the dataset and fit all the points into a circle, use lines to connect each category. Will it look better than a standard bump chart? How large the amount of data will cause the chart less interpretable? What if all data points are plotted as arcs or squares instead of circles? Whenever I started creating a new component, I would always sketch those ideas using an Observable Notebook. Thanks to the interactivity and reactive dataflow, prototyping becomes an exciting experience. Working in Observable Notebooks makes me feel like collaborating with a very reliable team. As I keep adding ideas to the prototype, the invisible team gathers data in the background, plots the results on screen, discusses details with me through the interactions, and gives feedback immediately on any change in the data or code. Here is the prototype of **RingChart**. As you can see, most of the main concepts were experimented in this prototype. And it has a nickname: Dancing Skittles. Those color dots are like Skittles dancing around the circle.`35:T8c0,prototype = { const d = diameter; const svg = d3.create("svg") .style("width", d) .style("height", d) .style("background", "black") .attr("viewBox", [-d/2, -d/2, d, d]); var lines; if (options2.color === "rank") { lines = svg.selectAll(".line") .data(ranks) .join("path") .attr("opacity", 0) .attr("class", "line") .attr("fill", "none") .attr("stroke", (d, i) => color(sortedTerritories[i])) .attr("d", d => line(d.series)); } var g; const isSeq = options2.color === "value"; if (isArc) { g = svg.append("g") .selectAll("g") .data(sorted) .join("g") .selectAll("path") .data((d, i) => d.values.map(v => ({index: i, territory: v.territory, value: v.value}))) .join("path") .attr("fill", d => color(isSeq ? d.value : d.territory)) .attr("d", arc); } else { const r = radius, x = 2 * r; const gg = svg.append("g") .selectAll("g") .data(sorted) .join("g") .attr("transform", (d, i) => `rotate(${xl(i)})`); if (options2.shape === "circle") g = gg.selectAll("circle") .data(d => d.values) .join("circle") .attr("fill", d => color(isSeq ? d.value : d.territory)) .attr("cx", (d, i) => sticky ? i * x + options2.innerRadius: y(i)) .attr("r", r); else { const w = 2 * r, hb = y.bandwidth() / 2; g = gg.selectAll("rect") .data(d => d.values) .join("rect") .attr("fill", d => color(isSeq ? d.value : d.territory)) .attr("x", (d, i) => (sticky ? i * w + options2.innerRadius: y(i)) - hb) .attr("y", sticky ? -r : -hb) .attr("width", w) .attr("height", w); } } g.attr("opacity", 1) .on("mouseenter", (e, d) => { g.transition().duration(500).attr("opacity", _ => _.territory === d.territory ? 1 : 0.5); if (lines) lines.transition().duration(250).attr("opacity", _ => _.territory === d.territory ? 1 : 0); }) .on("mouseleave", () => { g.transition().duration(500).attr("opacity", 1); if (lines) lines.transition().duration(250).attr("opacity", 0); }); return svg.node(); }36:Tad3,md`## API Reference and Source Code * **RingChart(container)** - Constructs a new instance of RingChart with default settings. The container can be an svg or g element. * **size([width, height])** - Sets the dimensions to specified width and height and returns this chart. * **innerRadius(_)** - Sets the chart's inner radius and returns this chart. * **palette(_)** - Sets the color palette to a categorical scheme *(for rankmap)* or a continuous interpolator *(heatmap)* and returns this chart. * **options(options)** - Overrides the default settings and returns this chart. * options.**order** - sets the sort order to *"asc"* or *"desc"*. Default is ascending. * options.**nodeStyle** - specifies the node styles. Available styles are *"arc"*, *"circle"* and *"square"*. Default is arc. * options.**chartType** - sets the chart type to *"rankmap"* (bump chart) or *"heatmap"*. Default is heatmap. * options.**clickAction** - specifies the click action to *"none"* or *"highlight"*. Default is highlight. * options.**stickNodes** - specifies whether the nodes are always stick together if the *nodeStyle* is circle or square. Default is true. * options.**showZeros** - specifies whether the nodes with zero value should be plotted. Default is true. * options.**alwaysShowLines** - specifies whether the rank lines are always displayed. By turning this option on the chart becomes a radar chart. The default value is false. * options.**fixedNodeRadius** - specifies a fixed radius for nodes. * **legend(legend)** - Overrides the legend settings and returns this chart. * legend.**enabled** - a boolean value that indicates whether the legend is enabled or disabled. Default is true. * legend.**centered** - specifies whether the legend is placed at the center of the ring. Default is true. * legend.**fontSize** - sets the legend's font size. * legend.**format** - sets the legend's number format. (for heatmap) * legend.**labelColor** - sets the legend's text color. * legend.**num** - sets the number of legend items. (for heatmap) * **tick(tick)** - Overrides the tick settings and returns this chart. * tick.**name** - sets the column name of ticks * tick.**isDate** - specifies whether the tick column is Date * tick.**format** - sets the format *(d3.timeParse)* for parsing the tick column. Default is empty. * tick.**fontSize** - sets the tick's font size * tick.**color** - sets the tick's text color * **data(_)** - Sets the data and returns this chart. * **render()** - Renders the chart and returns it's instance. * **onhover(d)** - Occurs when user hover over a node or a legend item. * **onclick(d)** - Occurs when user click on a node or a legend item. * **oncancel()** - Occurs when cancelling the locked highlight.`37:T4b24,// 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); let ticks = scale.ticks(); if (ticks.length > this._chartData.length) ticks = scale.ticks(this._chartData.length); 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) => { if (Number.isInteger(d)) { 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); } }38:[{"id":"c2ae0f4f252dafb534fc9e79e631d3fbad91d8105d1ae963db295a5af6a103312d792939f0eb422ce86a4c4d45f66a514789dd9cb3eb2b6f5b928bc969106eb1","href":"https://static.observableusercontent.com/files/c2ae0f4f252dafb534fc9e79e631d3fbad91d8105d1ae963db295a5af6a103312d792939f0eb422ce86a4c4d45f66a514789dd9cb3eb2b6f5b928bc969106eb1","name":"ssdata.csv","type":"text/csv","lastModified":1607846591947,"size":941},{"id":"1ab6fa8146f780bdcfcb601908f28cb962dbe087d97394664f08625909fa3de14bbd37819a03cc84c13e311465f405e0273f18de31e63170b2e2b8043e34bc50","href":"https://static.observableusercontent.com/files/1ab6fa8146f780bdcfcb601908f28cb962dbe087d97394664f08625909fa3de14bbd37819a03cc84c13e311465f405e0273f18de31e63170b2e2b8043e34bc50","name":"fterr.csv","type":"text/csv","lastModified":1607889790516.16,"size":855},{"id":"74e3756231ecc5f3701ab1b397cba07d9ce6d169455df14f6b61f2aee0851b39ea7590491715e4e1f868e9246f6236abc53f1744c15c88291453cafe3019c632","href":"https://static.observableusercontent.com/files/74e3756231ecc5f3701ab1b397cba07d9ce6d169455df14f6b61f2aee0851b39ea7590491715e4e1f868e9246f6236abc53f1744c15c88291453cafe3019c632","name":"sample.csv","type":"text/csv","lastModified":1607935855530.203,"size":26087},{"id":"6a09765c4c5d75dcc8cd2af419029bc0332639a24c7775676ca345a70956e6d603a0f2f9654b577106c7065c35998eecddf1abcb71b6ba97a6c26a46408d232c","href":"https://static.observableusercontent.com/files/6a09765c4c5d75dcc8cd2af419029bc0332639a24c7775676ca345a70956e6d603a0f2f9654b577106c7065c35998eecddf1abcb71b6ba97a6c26a46408d232c","name":"bchart53.png","type":"image/png","lastModified":1607967138511.025,"size":172037}] 31:{"id":"2fb8b2d3aaa1ad7a","slug":"ringchart","title":"Turning prototypes into DataViz components using Observable","thumbnail":"79b2f773f1a0ae372585b7fb377dff677f1957ba28f24d03d6e4d49afe14e03e","access_level":"public","create_time":"$D2020-12-12T10:09:17.386Z","update_time":"$D2021-11-06T20:07:24.078Z","view_time":null,"first_public_time":"$D2020-12-14T17:29:21.419Z","has_unpublished_edits":null,"fork":false,"stars":105,"starred":false,"owner":{"type":"team","id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":"starter_2024"},"version":1002,"publish_version":1002,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}],"members":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"role":"editor"}],"comments":[{"id":"52ad213e979d7050","reply_to_id":null,"content":"Beautiful! I am searching for a way to display large dataset with bump chart. This is very refreshing to come across - thank you! You solved the problem with the time direction - especially when the screen real estate is limited. Keep up the great work!","create_time":"$D2020-12-17T20:34:43.419Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"96ed94d65669aed6","login":"ambrosechoy","name":"Ambrose Choy","avatar_url":"https://avatars-next.observableusercontent.com/75c989d99a93b2e907b04972c679640b4bda520767d19aee8afe5612e36a7c26","tier":null}},{"id":"becfe5c2e2a0471d","reply_to_id":"52ad213e979d7050","content":"Thank you.","create_time":"$D2020-12-21T18:51:26.017Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":44,"collection":{"id":"b0fa06a3b7dc5033","slug":"business-data-storytelling","title":"2. Charts","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"type":"notebook","body":{"title":"Turning prototypes into DataViz components using Observable","cells":[{"id":0,"value":"md`# Turning prototypes into DataViz components using Observable\n\nFirstly, let's take a look at the finished product. The original concept of **RingChart** was to create a radial bump chart that is suitable for showing a larger dataset over a more extended period in a single view. A standard bump chart is excellent for displaying 15 to maybe 30 ticks. But what if you need to present a 3-month dataset in an interpretable fashion? Below is a bump chart with a 53-week dataset; the result is still interpretable, but it hurts your eyes.\n

\nBy utilizing the circular design, the chart becomes capable of displaying more data without compromising visual quality. As the demo below, the **RingChart** neatly visualizes a 90-day dataset in an exquisite style.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"chart = {\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 document.body.append(svg.node());\n \n const chart = new RingChart(svg)\n .tick({\n name: \"Date\", \n isDate: true, \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 showZeros: options.showZeros,\n stickyNodes: options.stickyNodes\n })\n .legend({ \n centered: options.legend === \"center\", \n labelColor: dark ? \"white\" : \"#666\",\n fontSize: `${fs(d)}pt`\n }) \n .data(salesData)\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`Let's double the data. It is even more beautiful than 90 days.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"chart2 = { \n const d = diameter;\n const svg = d3.create(\"svg\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", width)\n .attr(\"height\", d);\n\n document.body.append(svg.node());\n const chart = new RingChart(svg)\n .tick({name: \"Date\", isDate: true, fontSize: `${fs(d)}pt`})\n .size([d, d])\n .innerRadius(diameter * 0.365) // 0.365 doesn't matter\n .options({nodeStyle: \"circle\"})\n .legend({centered: options.legend === \"center\", fontSize: `${fs(d)}pt`})\n .data(src.slice(0, 180))\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`During the prototyping, a few ideas popped into my head: It is already a radial chart. What if I keep the original order in each category and add a sequential scale for assigning colors to each node? It became a radial Heat Map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"chart3 = {\n const d = 480;\n const svg = d3.create(\"svg\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", d)\n .attr(\"height\", d);\n \n document.body.append(svg.node());\n const chart = new RingChart(svg)\n .tick({name: \"Sales\"})\n .size([d, d])\n .innerRadius(100)\n .options({chartType: \"heatmap\", nodeStyle: \"arc\"}) \n .palette(d3.interpolateRdPu) // Sequential color interpolator for heatmap\n .data(src2)\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`What if I add two options: 1) An option that keeps those lines always visible. 2) Another option that fixates the node's radius? It became a Radar Chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"chart4 = {\n const d = 480;\n const svg = d3.create(\"svg\")\n .attr(\"cursor\", \"default\")\n .attr(\"width\", d)\n .attr(\"height\", d);\n\n document.body.append(svg.node());\n const chart = new RingChart(svg)\n .tick({name: \"quarter\"})\n .size([d, d])\n .innerRadius(100)\n .options({\n // Use these options to create a radar chart\n stickyNodes: false,\n nodeStyle: \"circle\",\n alwaysShowLines: true,\n fixedNodeRadius: 6\n }) \n .palette(d3.schemeTableau10)\n .data(src3)\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"viewof options2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"arc = d3.arc()\n .innerRadius((d, i) => y(i))\n .outerRadius((d, i) => y(i) + y.bandwidth())\n .startAngle(d => xb(d.index))\n .endAngle(d => xb(d.index) + xb.bandwidth())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"line = {\n var a = Math.PI * 0.5, r = 0;\n if (isArc) {\n a = xb.bandwidth() / 2;\n r = y.bandwidth() / 2;\n }\n \n return d3.lineRadial()\n .curve(d3.curveLinearClosed)\n .angle((d, i) => xb(i) + a)\n .radius(d => y(d.index) + r)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"radius = {\n const \n r1 = 2 * Math.PI * options2.innerRadius / sample.length / 2, \n r2 = (diameter / 2 - options2.innerRadius) / (territories.length * 2);\n return Math.min(r1, r2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"isArc = options2.shape === \"arc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"sticky = options2.sticky","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`#### Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"// for dot\nxl = d3.scaleLinear().domain([0, sample.length]).range([0, 360]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"// for arc\nxb = d3.scaleBand().domain(seq(sample.length)).range([0, 2 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"y = {\n const max = isArc || !sticky ? diameter / 2 : options2.innerRadius + radius * 2 * territories.length;\n return d3.scaleBand().domain(seq(territories.length)).range([options2.innerRadius, max]) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"color = {\n if (options2.color === \"rank\")\n return d3.scaleOrdinal()\n .domain(sortedTerritories)\n .range(d3.schemeTableau10);\n else \n return d3.scaleSequential(d3.interpolateBlues)\n .domain(d3.extent(sample.flatMap(d => Object.values(d).slice(1)))); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`#### Data Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"ranks = sortedTerritories.map(t => ({\n territory: t,\n series: sorted.map(d => ({\n date: d.date,\n index: d.values.findIndex(e => e.territory === t)\n }))\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"sortedTerritories = {\n const ts = sorted[0].values.map(d => d.territory); \n if (ts.length < territories.length) {\n territories.forEach(t => {\n if (ts.indexOf(t) === -1) {\n if (options2.reverse) ts.unshift(t);\n else ts.push(t);\n }\n });\n }\n return ts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"sorted = sample.map(d => {\n let values = territories.map(t => ({territory: t, value: d[t]}));\n if (!options2.showEmpty) values = values.filter(v => v.value !== 0)\n \n if (options2.color === \"rank\") {\n if (options2.reverse) values.sort((a, b) => a.value - b.value)\n else values.sort((a, b) => b.value - a.value)\n }\n \n return {\n date: d.Date,\n values: values\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"territories = Object.keys(sample[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"sample = src.slice(0, options2.beams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"seq = length => Array.from({length: length}).map((d, i) => i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`### Source Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`## Data and other stuff...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"salesData = src.filter(d => { \n const q = (+options.qtr - 1) * 3;\n const month = new Date(d.Date).getMonth();\n return month >= q && month < q + 3; \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"src = d3.csvParse(await FileAttachment(\"sample.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"src2 = d3.csvParse(await FileAttachment(\"ssdata.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"src3 = d3.csvParse(await FileAttachment(\"fterr.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"diameter = Math.min(screen.width, screen.height) * 0.8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"fs = d3.scaleLinear().domain([300,768]).range([6,9])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"{\n const s = document.getElementById(\"time\"); \n if (s) s.innerText = `Quarter ${options.qtr}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"