2b:null 2c:["$","title",null,{"children":"Summary Table | Christopher Rucinski | Observable"}] 31:T79f,SummaryCard = (data, label = "Summary") => { // Compute values const sample = data[0] || {}; const cols = data.columns || Object.keys(sample); const col_data = cols.map(d => { return { label:d === "" ? "unlabeled" : d, type:getType(data, d) } }) const n_columns = col_data.length; const n_rows = data.length; // Create the header row as a plot const header_plot = addTooltips( Plot.cellX(col_data, {fill:d => colorMap.get(d.type).color, title: d => `${d.label}\n(${d.type})`} ).plot({ x:{axis:null}, width:100, height:10, color:{ domain:[...colorMap.values()].map(d => d.color) }, style:{ overflow:"visible" } }), {stroke:"black", "stroke-width":"3px"} ) // Create the columns as a plot const col_plot = Plot.cellX(col_data, {fill:d => colorMap.get(d.type).color, fillOpacity:.3}).plot({ x:{axis:null}, width:100, height:80, color:{ domain:[...colorMap.values()].map(d => d.color) }} ) // Construct the element const arrow_styles = {display: "inline-block", verticalAlign: "top", transformOrigin: "0 0", transform: "rotate(90deg)", marginTop: "20px", position:"absolute", left: "114px", top: "54px"} const ele = htl.html`

${label}

${d3.format(",.0f")(n_columns)} ⟶

${header_plot} ${col_plot} ${d3.format(",.0f")(n_rows)}
⟶

` ele.value = {n_rows, n_columns}; return ele }32:Tf33,// A function to summarize a single column SummarizeColumn = (data, col) => { let content, value, format, el, chart, missing_label, pct_missing, min, max, median, mean, sd; // Construct content based on type const type = getType(data, col); const col1 = htl.html`${icon_fns[ type ]()}${ col === "" ? "unlabeled" : col }`; switch (type) { // Categorical columns case "ordinal": format = d3.format(",.0f"); // Calculate category percent and count const categories = d3 .rollups( data, (v) => ({ count: v.length, pct: v.length / data.length || 1 }), (d) => d[col] ) .sort((a, b) => b[1].count - a[1].count) .map((d) => { let obj = {}; obj[col] = d[0] === null || d[0] === "" ? "(missing)" : d[0]; obj.count = d[1].count; obj.pct = d[1].pct; return obj; }); // Calculate pct. missing pct_missing = data.filter((d) => d[col] === null || d[col] === "").length / data.length; // Create the chart const stack_chart = SmallStack(categories, col); // element to return el = htl.html` ${col1}

${stack_chart}

${pct_format(1 - pct_missing)} `; value = { column: col, type, min: null, max: null, mean: null, median: null, sd: null, missing: pct_missing, n_categories: categories.length }; break; // Date columns case "date": // Calculate and format start / end const start = d3.min(data, (d) => +d[col]); const end = d3.max(data, (d) => +d[col]); mean = d3.mean(data, (d) => +d[col]); median = d3.median(data, (d) => +d[col]); sd = d3.deviation(data, (d) => +d[col]); // Calculate pct. missing pct_missing = data.filter((d) => d[col] === null || d[col] === "").length / data.length; chart = Histogram(data, col, type); // Element to return el = htl.html` ${col1}

${chart}

${pct_format(1 - pct_missing)} `; value = { column: col, type, min: start, max: end, mean: null, median: null, sd: null, missing: pct_missing, n_categories: null }; break; // Continuous columns default: // Compute values min = d3.min(data, (d) => +d[col]); max = d3.max(data, (d) => +d[col]); mean = d3.mean(data, (d) => +d[col]); median = d3.median(data, (d) => +d[col]); sd = d3.deviation(data, (d) => +d[col]); format = d3.format(",." + d3.precisionFixed(sd / 10) + "f"); pct_missing = data.filter((d) => d[col] === null || isNaN(d[col])).length / data.length; chart = Histogram(data, col, type); // Element to return el = htl.html` ${col1}

${chart}

${pct_format(1 - pct_missing)} `; value = { column: col, type, min, max, mean, median, sd, missing: pct_missing, n_categories: null }; break; } el.value = value; el.appendChild(html``); return el; }33:T558,// Function that returns a summary table SummaryTable = (dataObj, { label = "Summary" } = {}) => { const data = typeof dataObj.numRows === "function" ? dataObj.objects() : typeof dataObj.toArray === "function" ? dataObj.toArray().map((r) => Object.fromEntries(r)) : dataObj; const sample = data[0] || {}; const cols = data.columns || Object.keys(sample); let value = []; // Create the summary card and track data shape const summaryCard = SummaryCard(data, label); value.n_rows = summaryCard.value.n_rows; value.n_columns = summaryCard.value.n_columns; value.columns = cols; // Compose the element const element = htl.html`

${summaryCard}

${cols.map((d) => { const ele = SummarizeColumn(data, d); value.push(ele.value); // get the value from the element return ele; })}

Group	Historical Snapshot	Percentage

`; element.value = value; return element; }34:T66d,SmallStack = (categoryData, col, maxCategories = 100) => { console.log(categoryData); // Get a horizontal stacked bar const label = categoryData.length === 1 ? " variant" : " variants"; let chartData = categoryData; let categories = 0; if (chartData.length > maxCategories) { chartData = categoryData.filter((d, i) => i < maxCategories); const total = d3.sum(categoryData, (d) => d.count); const otherCount = total - d3.sum(chartData, (d) => d.count); let other = {}; other[col] = "Other categories..."; other.count = otherCount; other.pct = other.count / total; chartData.push(other); } return addTooltips( Plot.barX(chartData.reverse(), { x: "count", fill: col, y: 0, title: (d) => d[col] + "\n" + pct_format(d.pct) }).plot({ color: { scheme: "greens" }, marks: [ Plot.text([0, 0], { x: 0, dy: 24, text: (d) => d3.format(",.0f")( categoryData.filter( (d) => d[col] !== "(missing)" && col !== "All Omicron" && d[col] !== "BA" ).length ) + `${label}` }) ], style: { paddingTop: "0px", paddingBottom: "15px", textAnchor: "start", overflow: "visible" }, x: { axis: null }, color: { domain: chartData.map((d) => d[col]), scheme: "greens", reverse: true }, height: 30, width: 205, y: { axis: null, range: [30, 3] } }), { fill: colorMap.get("ordinal").darker } ); }35:T742,Histogram = (data, col, type = "continuous") => { // Compute color + mean const barColor = colorMap.get(type).brighter; const mean = d3.mean(data, (d) => d[col]); // Formatter for the mean const extent = d3.extent(data, (d) => d[col]); const format = type === "date" ? getDateFormat(extent) : Math.floor(extent[0]) === Math.floor(extent[1]) ? d3.format(",.2f") : d3.format(",.0f"); const rules = [{ label: "mean", value: mean }]; return addTooltips( Plot.plot({ height: 55, width: 240, style: { display: "inline-block" }, x: { label: "", ticks: extent, tickFormat: format }, y: { axis: null }, marks: [ Plot.rectY( data, Plot.binX( { y: "count", title: (elems) => { // compute range for the elements const [start, end] = d3.extent(elems, (d) => d[col]); let barFormat; if (type === "date") { barFormat = getDateFormat([start, end]); } else { barFormat = d3.format( Math.floor(start) === Math.floor(end) ? ",.2f" : ",.0f" ); } return `${elems.length} rows\n[${barFormat( start )} to ${barFormat(end)}]`; } }, { x: col, fill: barColor } ) ), Plot.ruleY([0]), Plot.ruleX(rules, { x: "value", strokeWidth: 2, title: (d) => `${d.label} ${col}: ${format(d.value)}` }) ], style: { marginLeft: -17, background: "none", overflow: "visible" } }), { opacity: 1, fill: colorMap.get(type).color } ); }36:T792,icon_fns = ({ ordinal:() => html`

`, date: () => html`

`, continuous:() => html`

` })37:[{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1670857766053.01,"size":13490},{"id":"661576b29e3a88a1e15359e821253c3089ffd2fd838e5d6ddef6d8d36e5faecfb3c636447171d28c865d715ba37d053a6948a13620a4087c4a6b710a7bb1e149","href":"https://static.observableusercontent.com/files/661576b29e3a88a1e15359e821253c3089ffd2fd838e5d6ddef6d8d36e5faecfb3c636447171d28c865d715ba37d053a6948a13620a4087c4a6b710a7bb1e149","name":"data.csv","type":"text/csv","lastModified":1676201687858.835,"size":160603}] 2f:{"id":"25cc0a78e6d1359a","slug":null,"title":"Summary Table","thumbnail":"0582195fb347a2136b9b60df0ac746b72965a87600cec38010dd9c337f0e66b1","access_level":"public","create_time":"$D2022-12-12T15:09:26.053Z","update_time":"$D2023-02-26T16:08:08.144Z","view_time":null,"first_public_time":"$D2022-12-12T15:09:26.053Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"df46c5c86daf47bd","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":"starter_2024"},"version":2006,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b23d8809910c4529","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":null}],"members":[{"type":"individual","id":"b23d8809910c4529","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Summary Table","cells":[{"id":0,"value":"# Summary Table\nWant a quick visual overview of a dataset? To get started, import the (experimental) `SummaryTable` function from this notebook:\n\n~~~js\n// Import the function into your notebook\nimport { SummaryTable } from \"@observablehq/summary-table\"\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"Then, pass your data into the `SummaryTable` function. As an example, here is a summary table of the Penguins dataset (described in detail [here](https://observablehq.com/@observablehq/plot-exploration-penguins)). You can also upload your own data using this button:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"// Load the data (e.g., a .csv file)\nviewof data = dataInput({\n initialValue: await FileAttachment(\"data.csv\").csv({ typed: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// Create a view of the summary statistics\nviewof summary_data = SummaryTable(data, { label: \"SARS-CoV-2 Variants\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"The values calculated are exposed as a _view_ and can be used as you like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"// Use the summary data (an array of objects, with additional properties)\nsummary_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"For example, you could then create a separate plot of the percentage of missingness of each column:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"addTooltips(\n Plot.barX(summary_data, {\n x: \"missing\",\n y: \"column\",\n fill: \"lightblue\",\n title: (d) =>\n `Percent Missing (${d.column}): ${d3.format(\".1%\")(d.missing)}`\n }).plot({\n x: {\n tickFormat: d3.format(\".1%\")\n },\n y: {\n domain: summary_data\n .sort((a, b) => b.missing - a.missing)\n .map((d) => d.column),\n label: \"\"\n },\n marginLeft: 80,\n caption: \"Percent missing for each variable in the dataset\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"## Implementation\nThe `SummaryTable` is broken out into a few composable pieces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"### SummaryCard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"// A small inset showing the # of rows and columns, and their types\nSummaryCard(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"### SummarizeColumn","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"// A small inset showing the type of column, the categories, and a few (unlabeled) summary stats\nviewof col_summary = SummarizeColumn(data, \"BA.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"### Summary Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"data1 = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data1","database":"$undefined"},{"id":64,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"// Using an offet to calculate the format\ngetDateFormat = (extent) => {\n const formatMillisecond = d3.utcFormat(\".%L\"),\n formatSecond = d3.utcFormat(\":%S\"),\n formatMinute = d3.utcFormat(\"%I:%M\"),\n formatHour = d3.utcFormat(\"%I %p\"),\n formatDay = d3.utcFormat(\"%a %d\"),\n formatWeek = d3.utcFormat(\"%b %d\"),\n formatMonth = d3.utcFormat(\"%B\"),\n formatYear = d3.utcFormat(\"%Y\");\n\n // Test on the difference between the extent, offset by 1\n \n return extent[1] > d3.utcYear.offset(extent[0], 1)? formatYear :\n extent[1] > d3.utcMonth.offset(extent[0], 1)? formatMonth :\n extent[1] > d3.utcWeek.offset(extent[0], 1) ? formatWeek :\n extent[1] > d3.utcDay.offset(extent[0], 1) ? formatDay :\n extent[1] > d3.utcHour.offset(extent[0], 1) ? formatHour :\n extent[1] > d3.utcMinute.offset(extent[0], 1) ? formatMinute :\n extent[1] > d3.utcSecond.offset(extent[0], 1) ? formatSecond :\n extent[1] > d3.utcMillisecond.offset(extent[0], 1) ? formatMillisecond :\n formatDay\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"function dateFormat(date) {\n var formatMillisecond = d3.timeFormat(\".%L\"),\n formatSecond = d3.timeFormat(\":%S\"),\n formatMinute = d3.timeFormat(\"%I:%M\"),\n formatHour = d3.timeFormat(\"%I %p\"),\n formatDay = d3.timeFormat(\"%a %d\"),\n formatWeek = d3.timeFormat(\"%b %d\"),\n formatMonth = d3.timeFormat(\"%B\"),\n formatYear = d3.timeFormat(\"%Y\");\n \n return (d3.timeSecond(date) < date ? formatMillisecond\n : d3.timeMinute(date) < date ? formatSecond\n : d3.timeHour(date) < date ? formatMinute\n : d3.timeDay(date) < date ? formatHour\n : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)\n : d3.timeYear(date) < date ? formatMonth\n : formatYear)(date);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"colorMap = new Map(\n [\n [\"ordinal\", \"rgba(11, 167, 92, 0.8)\"],\n [\"continuous\", \"rgba(242, 142, 44, 0.8)\"],\n [\"date\", \"rgba(225,87,89, 0.8)\"]\n ].map((d) => {\n const col = d3.color(d[1]);\n const color_copy = _.clone(col);\n color_copy.opacity = 0.6;\n const color_copy2 = _.clone(col);\n color_copy2.opacity = 1;\n return [\n d[0],\n {\n color: col.formatRgb(),\n brighter: color_copy.formatRgb(),\n darker: color_copy2.formatRgb()\n }\n ];\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"getType = (data, column) => {\n for (const d of data) {\n const value = d[column];\n if (value == null) continue;\n if (typeof value === \"number\") return \"continuous\";\n if (value instanceof Date) return \"date\";\n return \"ordinal\"\n }\n // if all are null, return ordinal\n return \"ordinal\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"pct_format = d3.format(\".1%\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1857,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"