2b:null 2c:["$","title",null,{"children":"Tiny Charts | Fati CHEN | Observable"}] 31:T773,md` ## What is a Tiny Chart? A small, visual representation of data. Tiny charts are small **graphics** or [**sparklines**](https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000AIr). They can be used inline, in tables, or with traditional charts. This is an active project. Feedback and suggestions are welcomed! ### Sparklines A very small graphic, typically word sized. No frames, tic marks or other non-data marks. Typically used as an inline chart or within a table. To import sparklines: ~~~js import {line, bar, area, histogram, ticks, range} from "@hamzaamjad/tiny-charts" ~~~ ${table(sparkline_catalog, { width: "200px", cols: ["Chart", "Rendered"], widths: ["75px", "125px"], align: ["left", "center"] })} ### Graphics Mapping of data to visual marks. Simple artifacts, usually used with a sparkline to provide context or depth. May include non-data marks such as titles, scales, etc. To import graphics: ~~~js import {bigtext, arrow, table} from "@hamzaamjad/tiny-charts" ~~~ ### Tiny Charts in Action ${previews([ { path: "@hamzaamjad/covid-cases-by-state", thumbnail: "f60bb0150ffeb5d0167e0d44246e1a8fb2f6da433c8481c3773c209107dddb7e", title: "COVID-19 - Cases by State", author: "Hamza Amjad" }, { path: "@justinferrara/trending-job-markets", thumbnail: "c4e5c4afac14e9014d6a6102ff9beb676b008537fc914e16bff11dc530fe6e7e", title: "U.S. Job Trends by MSA", author: "Justin Ferrara" }, { path: "@hamzaamjad/demographic-update-unemployment", thumbnail: "79ba7aa004b741a77160689f94d131bf0d29db2631a1112599fd4f5b53ea1288", title: "U.S. Unemployment", author: "Hamza Amjad" }, { path: "@hamzaamjad/demographic-update-state-claims", thumbnail: "e6cfff230bdce45ea8b1c9d428f016a250535eff7ff0f01a8da652b4d2f02b3c", title: "U.S. Claims", author: "Hamza Amjad" } ])}

`32:Td6b,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 900; const xstart = 5; const spacer = 150; return html`

`; }33:T5e2,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }34:T8c9,md` ### Function \`\`\`JavaScript line( values, options = { "width" : 125, "height" : 25, "color" : "black", "size" : 1, "highlights" : {"start" : null, "end" : null, "min" : null, "max" : null}, "datum" : null, "scaling" : "min", "margin" : {"horizontal": .04, "vertical": .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of line stroke
- size | size of line stroke in px
- highlights | points along the line; specify a color to plot a point
- - start | first point on the line
  - end | last point on the line
  - min | lowest point on the line
  - max | highest point on the line
- datum | line from which other values are compared, referenced or measured
- - value | value of datum line
  - color | color of datum line
  - size | size of datum line
- scaling | whether the y-axis scales from "zero" or the "min" of the data
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `35:Tfb7,function line(values, options = {}) { let { width, height, color, size, highlights, datum, scaling, margin } = { width: 125, height: 25, color: "black", size: 1, highlights: { start: null, end: null, min: null, max: null }, datum: null, scaling: "min", margin: { horizontal: .04, vertical: .125 }, ...options }; const x = d3 .scaleLinear() .domain([0, values.length - 1]) .range([width * margin.horizontal, width - width * margin.horizontal]); const yscale = scaling == "zero" ? [0, d3.max(values)] : scaling === "min" ? d3.extent(values) : d3.extent(values); const y = d3 .scaleLinear() .domain(yscale) .range([height - height * margin.vertical, height * margin.vertical]); const context = DOM.context2d(width, height); const range = (start, stop, step) => Array.from( { length: (stop - start) / step + 1 }, (_, i) => start + i * step ).map(d => Number(d.toFixed(2))); const zip = (a, b) => a.map((k, i) => [k, b[i]]); // Color logic if (typeof color === "object" && color !== null) { var gradient = context.createLinearGradient(0, 0, 0, height); if (Object.keys(color)[0] === "gradient") { if (typeof color["gradient"][0] === "object") { color["gradient"].forEach(g => { gradient.addColorStop(g.value, g.color); }); } else { const step_length = 1 / (color["gradient"].length - 1); const steps = range(0, 1, step_length); const colorStops = zip(color["gradient"], steps); colorStops.forEach(e => { gradient.addColorStop(e[1], e[0]); }); } } if (Object.keys(color)[0] === "threshold") { gradient.addColorStop( y(color["threshold"]["value"]) / height, color["threshold"]["above"] ); gradient.addColorStop( y(color["threshold"]["value"]) / height, color["threshold"]["below"] ); } color = gradient; } // Line drawing function, the core const line = d => { context.beginPath(); var lineDrawer = d3 .line() .x((d, i) => x(i)) .y(y) .context(context); lineDrawer(d); context.strokeStyle = color; context.lineWidth = size; context.stroke(); context.closePath(); }; // Highlights drawn on line as points const points = []; if (highlights.start !== undefined && highlights.start !== null) { points.push({ value: values[0], color: highlights.start, x: 0 }); } if (highlights.end !== undefined && highlights.end !== null) { points.push({ value: values[values.length - 1], color: highlights.end, x: values.length }); } if (highlights.min !== undefined && highlights.min !== null) { points.push({ value: d3.min(values), color: highlights.min, x: d3.minIndex(values) }); } if (highlights.max !== undefined && highlights.min !== null) { points.push({ value: d3.max(values), color: highlights.max, x: d3.maxIndex(values) }); } const point = d => { context.beginPath(); d.forEach(d => { context.beginPath(); context.arc(x(d.x), y(d.value), 2, 0, 2 * Math.PI); context.fillStyle = d.color; context.fill(); }); }; line(values); point(points); // Datum // {value: , color: } if (datum !== undefined && datum !== null) { if (datum.color === undefined || datum.color === null) { datum.color = "black"; } if (datum.size === undefined || datum.size === null) { datum.size = 1; } if (datum.dash === undefined || datum.dash === null) { datum.dash = []; } context.strokeStyle = datum.color; context.lineWidth = datum.size; context.setLineDash(datum.dash); context.beginPath(); context.moveTo(width * margin.horizontal, y(datum.value)); context.lineTo(width - width * margin.horizontal, y(datum.value)); context.stroke(); } return context.canvas; }36:T5d7,{ const height = 25; const width = 125; const bheight = 65; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }37:Td50,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 900; const xstart = 5; const spacer = 150; return html`

`; }38:T5c7,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }39:T95b,md` #### Function \`\`\`JavaScript bar( values, options = { "width" : 125, "height" : 25, "color" : {"fill" : "gainsboro", "stroke" : "grey"}, "highlights" : {"start" : null, "end" : null, "min" : null, "max" : null}, "datum" : null, "scaling" : "zero", "margin" : {"horizontal" : .04, "vertical" : .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of bar fill & stroke
- - fill | color of bar fill
  - stroke | color of bar stroke (bar border)
- highlights | bars along the graph; specify a color to fill
- - start | first bar in the graph
  - end | last bar in the graph
  - min | shortest bar in the graph
  - max | tallest bar in the graph
- datum | line from which other values are compared, referenced or measured
- - value | value of datum line
  - color | color of datum line
  - size | size of datum line
- scaling | whether the y-axis scales from "zero" or the "min" of the data
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `3a:Tbe9,function bar(values, options = {}) { let { preset, width, height, color, highlights, datum, scaling, margin } = { preset: null, width: 125, height: 25, color: { fill: "gainsboro", stroke: "grey" }, highlights: { start: null, end: null, min: null, max: null }, datum: null, scaling: "zero", margin: { horizontal: .04, vertical: .125 }, ...options }; if (preset === "mobile") { width = 50; height = 20; } const x = d3 .scaleBand() .domain(d3.range(values.length)) .range([width * margin.horizontal, width - width * margin.horizontal]) .padding(.1); const yscale = scaling == "zero" ? [0, d3.max(values)] : scaling === "min" ? d3.extent(values) : d3.extent(values); const y = d3 .scaleLinear() .domain(yscale) .range([height - height * margin.vertical, height * margin.vertical]); const highlight = []; if (highlights.start !== undefined && highlights.start !== null) { highlight.push({ value: values[0], color: highlights.start, x: 0 }); } if (highlights.end !== undefined && highlights.end !== null) { highlight.push({ value: values[values.length - 1], color: highlights.end, x: values.length - 1 }); } if (highlights.min !== undefined && highlights.min !== null) { highlight.push({ value: d3.min(values), color: highlights.min, x: d3.minIndex(values) }); } if (highlights.max !== undefined && highlights.min !== null) { highlight.push({ value: d3.max(values), color: highlights.max, x: d3.maxIndex(values) }); } const highlight_x = highlight.map(d => d.x); const highlight_color = highlight.map(d => d.color); const context = DOM.context2d(width, height); const bar = d => { context.beginPath(); context.strokeStyle = color.stroke; d.forEach((d, i) => { if (highlight_x.includes(i) === true) { context.fillStyle = highlight_color[highlight_x.indexOf(i)]; } else { context.fillStyle = color.fill; } context.strokeRect( x(i), y(d), x.bandwidth(), height - y(d) - height * margin.vertical ); context.fillRect( x(i), y(d), x.bandwidth(), height - y(d) - height * margin.vertical ); }); }; bar(values); // Datum // {value: , color: } if (datum !== undefined && datum !== null) { if (datum.color === undefined || datum.color === null) { datum.color = "black"; } if (datum.size === undefined || datum.size === null) { datum.size = 1; } if (datum.dash === undefined || datum.dash === null) { datum.dash = []; } context.strokeStyle = datum.color; context.lineWidth = datum.size; context.setLineDash(datum.dash); context.beginPath(); context.moveTo(width * margin.horizontal, y(datum.value)); context.lineTo(width - width * margin.horizontal, y(datum.value)); context.stroke(); } return context.canvas; }3b:T5d6,{ const height = 25; const width = 125; const bheight = 65; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }3c:T5d7,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }3d:T5e3,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }3e:T7f0,md` #### Function \`\`\`JavaScript histogram( values = [], options = { "width" : 125, "height" : 25, "color" : {"fill" : "silver", "stroke" : null}, "domain" : [0, d3.max(values)], "thresholds" : d3.thresholdFreedmanDiaconis(values, ...(options.domain ?? [0, d3.max(values)])), "domainline" : {"size" : 1, "stroke" : "slategrey"}, "margin" : {"horizontal" : .04, "vertical" : .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of bar fill & stroke
- - fill | color of bar fill
  - stroke | color of bar stroke (bar border)
- domain | The domain of x values. Align histograms by setting the same domain.
- thresholds | Number of bins. Default uses d3.thresholdFreedmanDiaconis.
- domainline | size & color of the domain line
- - size | size of domain line in px
  - stroke | color (stroke style) of domain line
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `3f:T8e6,function histogram(values = [], options = {}) { const max = d3.max(values); let { width, height, color, domain, thresholds, domainline, margin, yScale } = { width: 125, height: 25, color: { fill: "silver", stroke: null }, domain: [0, max], thresholds: d3.thresholdFreedmanDiaconis( values, ...(options.domain ?? [0, max]) ), domainline: { size: 1, stroke: "slategray" }, margin: { horizontal: .04, vertical: .125 }, yScale: d3.scaleLinear, ...options }; if (domainline === undefined || domainline === null) { domainline = { size: 0, color: "transparent" }; } // custom threshold generator so we don't nice domains const thresholdGen = (data, min, max) => d3.range(thresholds).map(t => min + (t / thresholds) * (max - min)); const x = d3 .scaleLinear() .domain(domain) .range([width * margin.horizontal, width - width * margin.horizontal]); const binsGenerator = d3 .histogram() .domain(x.domain()) .thresholds(thresholdGen); const bins = binsGenerator(values); const y = yScale() .domain([0, d3.max(bins.map(b => b.length))]) .range([0, height - domainline.size - 2 * height * margin.vertical]); const context = DOM.context2d(width, height); if (color.stroke === undefined || color.stroke === null) { color.stroke = "transparent"; } context.fillStyle = color.fill; context.strokeStyle = color.stroke; context.lineWidth = 1; for (const d of bins) { context.strokeRect( x(d.x0), height - domainline.size - height * margin.vertical, x(d.x1) - x(d.x0), -y(d.length) ); context.fillRect( x(d.x0), height - domainline.size - height * margin.vertical, x(d.x1) - x(d.x0), -y(d.length) ); } if (domainline && domainline.size !== 0) { context.strokeStyle = domainline.stroke; context.lineWidth = domainline.size; context.beginPath(); context.moveTo( width * margin.horizontal, height - domainline.size - height * margin.vertical ); context.lineTo( width - width * margin.horizontal, height - domainline.size - height * margin.vertical ); context.stroke(); } return context.canvas; }40:T607,{ const height = 25; const width = 125; const bheight = 65; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }41:Td71,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 900; const xstart = 5; const spacer = 150; return html`

`; }42:T5f0,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }43:T99e,md` ### Function \`\`\`JavaScript area( values, options = { "width" : 125, "height" : 25, "color" : {"line" : "black", "fill" : "silver"}, "highlights" : {"start" : null, "end" : null, "min" : null, "max" : null}, "datum" : null, "scaling" : "zero", "margin" : {"horizontal" : .04, "vertical" : .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of line & fill
- - line | color of line
  - fill | color of fill
- size | size of line stroke in px
- highlights | points along the line; specify a color to plot a point
- - start | first point on the line
  - end | last point on the line
  - min | lowest point on the line
  - max | highest point on the line
- datum | line from which other values are compared, referenced or measured
- - value | value of datum line
  - color | color of datum line
  - size | size of datum line
- scaling | whether the y-axis scales from "zero" or the "min" of the data
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `44:Tc99,function area(values, options = {}) { let { width, height, color, size, highlights, datum, scaling, margin } = { width: 125, height: 25, color: { line: "black", fill: "silver" }, size: 1, highlights: { start: null, end: null, min: null, max: null }, datum: null, scaling: "zero", margin: { horizontal: .04, vertical: .125 }, ...options }; const x = d3 .scaleLinear() .domain([0, values.length - 1]) .range([width * margin.horizontal, width - width * margin.horizontal]); const yscale = scaling === "zero" ? [0, d3.max(values)] : scaling === "min" ? d3.extent(values) : d3.extent(values); const y = d3 .scaleLinear() .domain(yscale) .range([height - height * margin.vertical, height * margin.vertical]); const curve = d3.curveLinear; const context = DOM.context2d(width, height); const line = d => { context.beginPath(); var lineDrawer = d3 .line() .x((d, i) => x(i)) .y(y) .context(context); lineDrawer(d); context.strokeStyle = color.line; context.lineWidth = size; context.stroke(); context.closePath(); }; const area = d => { context.beginPath(); var areaDrawer = d3 .area() .curve(curve) .x((d, i) => x(i)) .y0(y(yscale[0])) .y1(y) .context(context); areaDrawer(d); context.fillStyle = color.fill; context.fill(); context.closePath(); }; const points = []; if (highlights.start !== undefined && highlights.start !== null) { points.push({ value: values[0], color: highlights.start, x: 0 }); } if (highlights.end !== undefined && highlights.end !== null) { points.push({ value: values[values.length - 1], color: highlights.end, x: values.length }); } if (highlights.min !== undefined && highlights.min !== null) { points.push({ value: d3.min(values), color: highlights.min, x: d3.minIndex(values) }); } if (highlights.max !== undefined && highlights.min !== null) { points.push({ value: d3.max(values), color: highlights.max, x: d3.maxIndex(values) }); } const point = d => { context.beginPath(); d.forEach(d => { context.beginPath(); context.arc(x(d.x), y(d.value), 2, 0, 2 * Math.PI); context.fillStyle = d.color; context.fill(); context.closePath(); }); }; area(values); line(values); point(points); // Datum // {value: , color: } if (datum !== undefined && datum !== null) { if (datum.color === undefined || datum.color === null) { datum.color = "black"; } if (datum.size === undefined || datum.size === null) { datum.size = 1; } if (datum.dash === undefined || datum.dash === null) { datum.dash = []; } context.strokeStyle = datum.color; context.lineWidth = datum.size; context.setLineDash(datum.dash); context.beginPath(); context.moveTo(width * margin.horizontal, y(datum.value)); context.lineTo(width - width * margin.horizontal, y(datum.value)); context.stroke(); } //context.fillText(values[0], width - (width * .2), 10) return context.canvas; }45:T5bf,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }46:T4c0,md` #### Function \`\`\`JavaScript ticks( values = [], options = { "width" : 125, "height" : 25, "color" : "silver", "domain" : [0, d3.max(values)], "margin" : {"horizontal" : .04, "vertical" : .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of tick stroke
- domain | The domain of x values. Align tick charts by setting the same domain.
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `47:T627,{ const height = 25; const width = 125; const bheight = 65; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }48:Te5a,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 900; const xstart = 5; const spacer = 150; return html`

`; }49:T5dd,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }4a:T5f3,{ const height = 25; const width = 125; const bheight = 75; const bwidth = 540; const xstart = 5; const spacer = 150; return html`

`; }4b:Ta07,md` #### Function \`\`\`JavaScript range( values = [], options = { "width" : 125, "height" : 25, "color" : {"fill" : "slategray", "stroke" : "slategray"}, "text": {"fill": "black", "stroke": "transparent", "font": "9px 'Open Sans'", "format": ",.2f"} "domain" : d3.extent(values), "domainline" : {"size" : 1, "stroke" : slategray} "margin" : {"horizontal" : .04, "vertical" : .125} } ) \`\`\`

values | an Array of *integer* or *float* values
options | optional arguments, adjust to override defaults
- width | distance from side to side in px
- height | distance from end to end in px
- color | color of circle fill and stroke
- - fill | color of circle fill
  - stroke | color of circle stroke
- text | options for range text
- - fill | color of text fill
  - stroke | color of text stroke
  - font | the font of the text
  - format | format of text, uses d3.format()
- domain | The domain of x values. Align range charts by setting the same domain.
- domainline | size & color of the domain line
- - size | size of domain line in px
  - stroke | color (stroke style) of domain line
- margin | the "horizontal" & "vertical" whitespace around the chart, as a percentage

### Code `4c:T8b8,function range(values = [], options = {}) { let { width, height, color, text, domain, domainline, margin } = { width: 125, height: 25, color: { fill: "slategray", stroke: "slategray" }, text: { fill: "black", stroke: "transparent", font: "9px 'Open Sans'", format: ",.2f" }, domain: d3.extent(values), domainline: { size: 1, stroke: "slategray" }, margin: { horizontal: .04, vertical: .125 }, ...options }; if (domainline === undefined || domainline === null) { domainline = { size: 1, color: "slategrey" }; } const x = d3 .scaleLinear() .domain(domain) .range([width * margin.horizontal, width - width * margin.horizontal]); const formatter = d3.format(text.format); const context = DOM.context2d(width, height); const range_text = `${formatter(domain[0])} - ${formatter(domain[1])}`; context.fillStyle = text.fill; context.strokeStyle = text.stroke; context.font = text.font; context.textAlign = 'right'; context.strokeText( range_text, width - width * margin.horizontal, height * margin.vertical * 2.5, width - width * margin.horizontal * 2 ); context.fillText( range_text, width - width * margin.horizontal, height * margin.vertical * 2.5, width - width * margin.horizontal * 2 ); context.stroke(); context.fill(); if (color.stroke === undefined || color.stroke === null) { color.stroke = "transparent"; } context.fillStyle = color.fill; context.strokeStyle = color.stroke; context.lineWidth = 1; context.beginPath(); context.arc( x(values[values.length - 1]), height - height * margin.vertical * 3, 5, 0, 2 * Math.PI ); context.fill(); context.closePath(); context.stroke(); if (domainline && domainline.size !== 0) { context.strokeStyle = domainline.stroke; context.lineWidth = domainline.size; context.beginPath(); context.moveTo( width * margin.horizontal, height - domainline.size - height * margin.vertical ); context.lineTo( width - width * margin.horizontal, height - domainline.size - height * margin.vertical ); context.stroke(); } return context.canvas; }4d:T557,function sparkseesaw(data, options = {}) { let { width, height, margin } = { width: 125, height: 25, margin: { horizontal: .04, vertical: .125 }, ...options }; let series = d3 .stack() .keys(Object.keys(data[0])) .offset(d3.stackOffsetExpand)(data) .map(d => (d.forEach(v => (v.key = d.key)), d)); let x = d3 .scaleLinear() .range([width * margin.horizontal, width - width * margin.horizontal]); let y = d3 .scaleBand() .domain(data.map(d => d.name)) .range([height * margin.vertical, height - height * margin.vertical]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const color = d3 .scaleOrdinal() .domain(series.map(d => d.key)) .range([ colors.color_blind_safe.ibm[0].hex, colors.color_blind_safe.ibm[2].hex ]) .unknown("#ccc"); const bar = svg .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(${x(i)},0)`); svg .append("g") .selectAll("g") .data(series) .enter() .append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.name)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()); return svg.node(); }4e:Teb3,function table(data, options) { let { display, width, layout, caption, cols, rows, align, color, formats, widths, overflow, overflowwrap, whitespace, wordbreak, totals } = { display: "inline-table", width: "100%", layout: "auto", caption: { value: "", side: "bottom" }, cols: Object.keys(data[0]), rows: [...data].map(Object.values), align: null, color: null, formats: null, widths: null, overflow: "auto", overflowwrap: "normal", whitespace: "normal", wordbreak: "normal", totals: null, ...options }; const statistics = { sum: d3.sum, mean: d3.mean, median: d3.median }; // Array of column data types, which is used in later calculations // For example, dates must use d3.timeFormat(), while numbers should use d3.format(). // Can use this Array to validate the data type of a column before passing the appropriate format functionn // In instances where colformats are specified const dtypes = Object.values([...data][0]).map(value => Object.prototype.toString.call(value) ); const format = (value, i) => formats[i] === null ? value : dtypes[i] === '[object Date]' ? d3.timeFormat(formats[i])(value) : d3.format(formats[i])(value); if (formats === null) { formats = Array(Object.keys([...data][0]).length).fill(null); } if (align === null) { align = Array(Object.keys([...data][0]).length).fill(null); } if (color === null) { color = Array(Object.keys([...data][0]).length).fill(null); } if (layout === "fixed") { if (widths !== null) { var colgroup = html``; widths.forEach(col => colgroup.appendChild(html``) ); } } const root = html`

`; const tbase = html`

`; tbase.appendChild( html`${caption.value}` ); if (typeof colgroup !== "undefined") { tbase.appendChild(colgroup); } const header = html``; if (cols !== null && cols !== "") { const header_row = header.appendChild(html``); [...cols].forEach((col, i) => header_row.appendChild( html`${col}` ) ); } const body = html``; rows.forEach(row => { body.appendChild( html`${row.map( (item, i) => html`${format( item, i )}` )}` ); }); const footer = html``; if (totals !== null && totals !== "") { const footer_row = footer.appendChild(html``); Object.keys(data[0]).forEach((col, i) => footer_row.appendChild( html`${ totals[i] === null && i === 0 ? "Total" : totals[i] === null ? "" : dtypes[i] === "[object Number]" ? format(statistics[totals[i]](data, d => d[col]), i) : "" }` ) ); } tbase.appendChild(header); tbase.appendChild(body); tbase.appendChild(footer); root.appendChild(tbase); return root; }4f:T79c,md` ## Background & Research ### Design Rules 1. Maintain 5:1 ratio whenever possible per **Tufte**. 2. Use color blind safe palette for default highlight colors. #### Default Colors

${colorboxSmall( colors.color_blind_safe.ibm[2].name, colors.color_blind_safe.ibm[2].hex )} ${colorboxSmall( colors.color_blind_safe.ibm[0].name, colors.color_blind_safe.ibm[0].hex )}

### Research > #### | [Peter Zelchenko - QuoteTracker](http://pete.zelchenko.com/portfolio/screen/2gk.htm) > He was looking for a way to ***represent the historical chart efficiently***, and I suggested he put it inside the spreadsheet. We thought it was a clever idea, but we didn't think it was that big a deal. (I still don't know what all the fuss is about.) In about 30 minutes, Mike had it working. > #### | [Edward Tufte - History of Sparklines](https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000AIr) > Sparklines are ***small, intense, word-sized graphics with typographic resolution***. Sparklines can be placed anywhere that words or numbers or graphics can be placed: in sentences, maps, graphics, tables....Thus sparklines have no frames, tic marks, and non-data paraphernalia. Sparklines often get their quantitative scaling context from nearby words, numbers and graphics; sparklines are directly quantified by numbers on or near the sparkline itself. > #### | [Microsoft - Use sparklines to show data trends](https://support.microsoft.com/en-us/office/use-sparklines-to-show-data-trends-1474e169-008c-4783-926b-5c60e620f5ca) > A sparkline is ***a tiny chart...that provides a visual representation of data***. Use sparklines to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values. Position a sparkline near its data for greatest impact. `50:[{"id":"00ffef38dc86dc5b5cf0acfbe66de990a370a331ee6a6e13b819760ccd95e6bc2e87e4f83c498c52e07c8aab8bd4780463b61cd8e34a3d51230bebf54dba1289","href":"https://static.observableusercontent.com/files/00ffef38dc86dc5b5cf0acfbe66de990a370a331ee6a6e13b819760ccd95e6bc2e87e4f83c498c52e07c8aab8bd4780463b61cd8e34a3d51230bebf54dba1289","name":"googlefonts-logo.png","type":"image/png","lastModified":1618089426468.309,"size":10334},{"id":"83e5ae94ffb7cd784f7241700b9a468cfe96fd26c19f90212824c3eaa3516f3faae8dc6b596d26e234d378610277af1884124f8e5baf89ebfa4df00a105b00c9","href":"https://static.observableusercontent.com/files/83e5ae94ffb7cd784f7241700b9a468cfe96fd26c19f90212824c3eaa3516f3faae8dc6b596d26e234d378610277af1884124f8e5baf89ebfa4df00a105b00c9","name":"^RUA.csv","type":"text/csv","lastModified":1618089426468.309,"size":91096}] 2f:{"id":"2011f4f478c93ba5","slug":"tiny-charts","title":"Tiny Charts","thumbnail":"427e0b5e9eae0d2e7184b3bd830a0ec83ee8aa3ea65b83c74fc586202183f5ea","access_level":"public","create_time":"$D2021-04-10T21:17:06.468Z","update_time":"$D2021-04-22T13:45:28.170Z","view_time":null,"first_public_time":"$D2021-04-10T21:18:27.591Z","fork":{"id":"c0bcd66651865d7a","slug":"tiny-charts","title":"Tiny Charts","owner":{"id":"94ec2c192e76a917","login":"hamzaamjad","name":"Hamza Amjad"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":"starter_2024"},"version":3935,"publish_version":3935,"role":null,"authored":false,"authors":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}],"members":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Tiny Charts","cells":[{"id":0,"value":"md`\n\n# Tiny Charts\n\n##### Sparklines. Small Graphics. Inline Graphics & Charts.\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md`\n\n# Sparklines\nA very small chart, typically word sized. Often displayed inline or within a table.\n\n## Line\nSparklines can be used directly inline for seamless visual communication. For example, we can visualize closing prices for the Russell 3000 from Jan 1, 2020 to Nov 4, 2020 ${line(\n russell3000_padjclose\n)}.\n\n### Live Example\nView chart options live by adjusting the properties below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2371,"value":"line(randarray_small, {\n width: 125,\n height: 25,\n color: \"black\",\n size: 1,\n highlights: { start: null, end: null, min: null, max: null },\n datum: null,\n scaling: \"min\",\n margin: { horizontal: 0, vertical: 0 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2381,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3078,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3098,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3103,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2363,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3296,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 75;\n const bwidth = 540;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1291,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2330,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"md`\n\n

\n\n## Bar\nSimilarly, sparkbars ${bar(\n randarray_small\n)} can convey change in quantities in line.\n\n### Live Example\nView chart options live by adjusting the properties below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2400,"value":"bar(randarray_small, {\n width: 125,\n height: 25,\n color: { fill: \"gainsboro\", stroke: \"grey\" },\n highlights: { start: null, end: null, min: null, max: null },\n scaling: \"zero\",\n margin: { horizontal: 0, vertical: .01 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2396,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1089,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3374,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 75;\n const bwidth = 540;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1177,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2348,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2473,"value":"md`\n\n

\n\n## Histogram\n\nA histogram ${histogram(\n randarray\n)} shows the counts of values that fill into discrete bins. They are useful for showing distributions. Original function by [@domoritz/inline](https://observablehq.com/@domoritz/inline), functionality extended here.\n\n### Live Example\nView chart options live by adjusting the properties below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2489,"value":"histogram(randarray, {\n domain: [-4, 7],\n thresholds: 20,\n color: { fill: '#dc267f' },\n domainline: { size: 1, stroke: \"#1e90ff\" },\n margin: { vertical: 0, horizontal: 0 },\n yScale: d3.scaleSymlog\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2478,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2688,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2703,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2719,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2729,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 260;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2738,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2760,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2587,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2471,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"md`\n\n

\n\n## Area\nArea charts are based on the line chart, combining a line ${line(\n russell3000_padjclose,\n { scaling: \"zero\" }\n)} with an area ${area(russell3000_padjclose, {\n color: { line: \"transparent\", fill: \"silver\" }\n})}underneath. The result: ${area(russell3000_padjclose)}\n\n### Live Example\nView chart options live by adjusting the properties below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2464,"value":"area(randarray_small, {\n width: 125,\n height: 25,\n color: { line: \"black\", fill: \"silver\" },\n highlights: { start: null, end: null, min: null, max: null },\n scaling: \"zero\",\n margin: { horizontal: 0, vertical: 0 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2461,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1243,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1322,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1311,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3388,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 75;\n const bwidth = 540;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1299,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2445,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1316,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1241,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3167,"value":"md`\n\n

\n\n## Tick\nA tick plot ${ticks(\n randarray_small\n)} shows the distribution of values. Original function by [@domoritz/inline](https://observablehq.com/@domoritz/inline), functionality extended here.\n\n### Live Example\nView chart options live by adjusting the properties below.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3178,"value":"ticks(randarray, {\n domain: [-5, 5],\n width: 125,\n height: 25,\n color: 'rgba(255,0,0,0.2)',\n margin: { horizontal: 0, vertical: 0 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3439,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3441,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3445,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3451,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3457,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3191,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3169,"value":"function ticks(values = [], options = {}) {\n const max = d3.max(values);\n let { domain, width, height, color, margin } = {\n domain: [0, max],\n width: 125,\n height: 25,\n color: 'silver',\n margin: { horizontal: .04, vertical: .125 },\n ...options\n };\n\n const x = d3\n .scaleLinear()\n .domain(domain)\n .range([width * margin.horizontal, width - width * margin.horizontal]);\n\n const ctx = DOM.context2d(width, height);\n ctx.strokeStyle = color;\n\n for (const xValue of values.map(x)) {\n ctx.beginPath();\n ctx.moveTo(xValue, height * margin.vertical);\n ctx.lineTo(xValue, height - height * margin.vertical);\n ctx.stroke();\n }\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3621,"value":"md`\n\n

\n\n## Range\nA range plot ${range(\n russell3000_padjclose\n)} shows the range of values, and displays the most recent value in the provided series within the range as a point above the range line. Inspired by the price range chart from Bloomberg, where I first saw this type of spark graphic.\n\n### Live Example\nView chart options live by adjusting the properties below.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3682,"value":"range(russell3000_padjclose, {\n width: 125,\n height: 25,\n color: { fill: \"slategray\", stroke: \"slategray\" },\n text: {\n fill: \"black\",\n stroke: \"transparent\",\n font: \"9px 'Open Sans'\",\n format: \",.2f\"\n },\n domain: [d3.min(russell3000_padjclose), d3.max(russell3000_padjclose)],\n domainline: { size: 1, stroke: \"slategray\" },\n margin: { horizontal: .04, vertical: .125 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3687,"value":"md`\n\n### Definition\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3689,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 70;\n const bwidth = 165;\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3693,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3699,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3721,"value":"{\n const height = 25;\n const width = 125;\n const bheight = 65;\n const bwidth = 360;\n const xstart = 5;\n\n const spacer = 150;\n\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3697,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3728,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3731,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3623,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3852,"value":"sparkbar(50, 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3832,"value":"function sparkbar(\n value,\n max,\n { background = \"steelblue\", color = \"white\", value: showed = value } = {}\n) {\n return html`

${showed.toLocaleString(\"fr\")}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3909,"value":".parent {\ndisplay: grid;\ngrid-template-columns: 1fr;\ngrid-template-rows: 1fr;\ngrid-column-gap: 0px;\ngrid-row-gap: 0px;\n}\n\n.div1 { grid-area: 1 / 1 / 2 / 2; }\n.div2 { grid-area: 1 / 1 / 2 / 2; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`\n\n

\n\n## Seesaw\n${sparkseesaw([{ Blue: 50, Pink: 50 }])}\n${sparkseesaw([{ Blue: 30, Pink: 70 }])}\n${sparkseesaw([{ Blue: 90, Pink: 10 }])}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"md`\n

\n\n\n# Graphics\n\n## Big Text\n\nUseful for providing large labels. For example, can be used to label a sparkline for the ${bigtext(\n \"Russell 3000\",\n { font: \"bold 16px 'Open Sans'\", color: \"steelblue\" }\n)} ${line(russell3000_padjclose, {\n color: \"steelblue\",\n highlights: { start: \"orange\", end: \"orange\" },\n margin: { horizontal: 0.04, vertical: 0 }\n})}from ${bigtext(\n d3.timeFormat(\"%B %d, %Y\")(\n d3.min(\n russell3000.filter(d => d.pdate.getFullYear() === filter_date),\n d => d.pdate\n )\n ),\n { font: \"bold 16px 'Open Sans'\", color: \"orange\" }\n)} to ${bigtext(\n d3.timeFormat(\"%B %d, %Y\")(\n d3.max(\n russell3000.filter(d => d.pdate.getFullYear() === filter_date),\n d => d.pdate\n )\n ),\n { font: \"bold 16px 'Open Sans'\", color: \"orange\" }\n)}. Big text is typically used out of line.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1459,"value":"function bigtext(value, options = {}) {\n let { color, stroke, font, alignment, baseline } = {\n color: \"steelblue\",\n stroke: \"transparent\",\n font: \"bold 30px 'Open Sans', 'Arial'\",\n alignment: \"center\",\n baseline: \"middle\",\n ...options\n };\n\n const text_size = getTextSize(value, font);\n\n const context = DOM.context2d(text_size.width, text_size.height);\n context.font = font;\n context.textAlign = alignment;\n context.textBaseline = baseline;\n context.fillStyle = color;\n context.strokeStyle = stroke;\n\n const bigtext = d => {\n context.beginPath();\n context.fillText(value, text_size.width / 2, text_size.height / 2);\n context.strokeText(value, text_size.width / 2, text_size.height / 2);\n context.closePath();\n };\n\n bigtext(value);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2057,"value":"md`\n\n## Arrow\n\nWork in progress.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2061,"value":"function arrow(value, options = {}) {\n let { preset, width, height, color, highlights, scaling } = {\n preset: null,\n width: 25,\n height: 25,\n color: \"black\",\n ...options\n };\n\n const context = DOM.context2d(width, height);\n\n context.beginPath();\n context.moveTo(width * .2, height * .8);\n context.lineTo(width / 2, height * .2);\n context.lineTo(width - width * .2, height * .8);\n context.fill();\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2065,"value":"arrow(\"x\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2076,"value":"md`this is a ${arrow(\"x\")} test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1454,"value":"md`\n\n## Tables\n\nWork in progress\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1651,"value":"table(russell3000.slice(0, 2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2013,"value":"table(russell3000.slice(0, 2), { layout: \"fixed\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1966,"value":"table(russell3000.slice(0, 2), { wordbreak: \"break-all\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1978,"value":"table(russell3000.slice(0, 2), { overflowwrap: \"anywhere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1986,"value":"table(russell3000.slice(0, 2), {\n cols: [\"Date\", \"Open\", \"High\", \"Low\", \"Close\", \"Adjusted Close\"],\n formats: [\"%B %d, %Y\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1721,"value":"html`${table(russell3000.slice(0, 2), {\n cols: \"\",\n formats: [\"%B %d, %Y\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\"]\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2032,"value":"table(russell3000.slice(0, 2), {\n width: \"${window.innerWidth}px\",\n layout: \"fixed\",\n cols: [\"Date\", \"Open\", \"High\", \"Low\", \"Close\", \"Adjusted Close\"],\n formats: [\"%B %d, %Y\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\"],\n widths: [\"150px\", \"75px\", \"75px\", \"75px\", \"75px\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2132,"value":"table(russell3000.slice(0, 2), {\n width: \"${window.innerWidth}px\",\n layout: \"fixed\",\n cols: [\"Date\", \"Open\", \"High\", \"Low\", \"Close\", \"Adjusted Close\"],\n formats: [\"%B %d, %Y\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\", \"($,.2f\"],\n widths: [\"150px\", \"90px\", \"90px\", \"90px\", \"90px\"],\n totals: [null, \"sum\", \"mean\", \"median\", null, \"sum\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1625,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2269,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`\n\n## Appendix\n\n### Credits\nData is sourced from $\"drawing\"$ . Certain fonts in graphics are from $\"drawing\"$ . Certain colors are sourced from ***IBM Design - Color blind safe***.\n\n### Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1571,"value":"filter_date = 2020","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"russell3000 = d3.csvParse(await FileAttachment(\"^RUA.csv\").text(), d => {\n return {\n pdate : d3.timeParse(\"%Y-%m-%d\")(d.Date),\n popen : parseFloat(d.Open),\n phigh : parseFloat(d.High),\n plow : parseFloat(d.Low),\n pclose : parseFloat(d.Close),\n padjclose : parseFloat(d[\"Adj Close\"]) \n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"russell3000_padjclose = russell3000.filter(d => d.pdate.getFullYear() === filter_date).map(d => d.padjclose)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2390,"value":"russell3000_smallslice = russell3000_padjclose.slice(45, 90)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2491,"value":"randarray = Float64Array.from({ length: 100 }, d3.randomNormal(2, 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2404,"value":"randarray_small = Float64Array.from({ length: 30 }, d3.randomNormal(2, 0.5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2193,"value":"sparkline_catalog = [\n { Spark: \"Line\", Graphic: line(randarray_small) },\n { Spark: \"Bar\", Graphic: bar(randarray_small) },\n { Spark: \"Area\", Graphic: area(randarray_small) },\n {\n Spark: \"Histogram\",\n Graphic: histogram(randarray_small, { domain: [-4, 7] })\n },\n {\n Spark: \"Tick Plot\",\n Graphic: ticks(randarray)\n },\n {\n Spark: \"Range\",\n Graphic: range(randarray)\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":956,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"import {colors, colorboxSmall} from \"@hamzaamjad/color-palettes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1760,"value":"import {preview, previews} from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1511,"value":"function getTextSize(txt, font) {\n const tempcanvas = document.createElement('canvas');\n const tempcontext = tempcanvas.getContext(\"2d\");\n tempcontext.font = font;\n const tsize = {'width':tempcontext.measureText(txt).width, 'height':parseInt(tempcontext.font.replace( /^\\D+/g, ''))};\n return tsize;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"style = await html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W50","stdlib":"1","titling":"auto"}} 30:"$2f:body"