30: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 }31:Tfe7,// 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(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(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 format = d3.format(",.1f"); 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]); 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(pct_missing)} ${format(mean)} ${format(median)} ${format(sd)} `; value = { column: col, type, min, max, mean, median, sd, missing: pct_missing, n_categories: null }; break; } el.value = value; el.appendChild(html``); return el; }32:T568,// 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 })}

Column	Snapshot	Missing	Mean	Median	SD

` element.value = value; return element }33:T575,SmallStack = (categoryData, col, maxCategories = 100) => { // Get a horizontal stacked bar const label = categoryData.length === 1 ? " category" : " categories"; 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, { x: "count", fill: col, y: 0, title: (d) => d[col] + "\n" + pct_format(d.pct) }).plot({ color: { scheme: "blues" }, marks: [ Plot.text([0, 0], { x: 0, dy: 13, text: (d) => d3.format(",.0f")(categoryData.length) + `${label}` }) ], style: { paddingTop: "0px", paddingBottom: "15px", textAnchor: "start", overflow: "visible" }, x: { axis: null }, color: { domain: chartData.map((d) => d[col]), scheme: "blues", reverse: true }, height: 30, width: 205, y: { axis: null, range: [30, 3] } }), { fill: "darkblue" } ); }34: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 } ); }35:T792,icon_fns = ({ ordinal:() => html`

`, date: () => html`

`, continuous:() => html`

` })36:[{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1654827483516.635,"size":13490}] 2e:{"title":"Summary Table","cells":[{"id":0,"value":"# Summary Table\n\n(Minor Formatting Edits)\n\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"},{"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"},{"id":1856,"value":"// Load the data (e.g., a .csv file)\nviewof data = dataInput({\n initialValue: await FileAttachment(\"palmer-penguins.csv\").csv({ typed: true })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"// Create a view of the summary statistics\nviewof summary_data = SummaryTable(data, {label: \"Penguins Data\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"The values calculated are exposed as a _view_ and can be used as you like:","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"// Use the summary data (an array of objects, with additional properties)\nsummary_data","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":794,"value":"## Implementation\nThe `SummaryTable` is broken out into a few composable pieces.","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"### SummaryCard","pinned":false,"hidden":false,"mode":"md"},{"id":798,"value":"// A small inset showing the # of rows and columns, and their types\nSummaryCard(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"### SummarizeColumn","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"// A small inset showing the type of column, the categories, and a few (unlabeled) summary stats\nviewof col_summary = SummarizeColumn(data, \"sex\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"### Summary Table","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1671,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1549,"value":"colorMap = new Map([[\"ordinal\",\"rgba(78, 121, 167, 1)\"],\n [\"continuous\", \"rgba(242, 142, 44, 1)\"],\n [\"date\", \"rgba(225,87,89, 1)\"]\n].map(d => {\n const col = d3.color(d[1])\n const color_copy = _.clone(col)\n color_copy.opacity = .6\n return [d[0], {color:col.formatRgb(), brighter:color_copy.formatRgb()}]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1773,"value":"pct_format = d3.format(\".1%\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1066,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}