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:Teae,// 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).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).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(",.0f") 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).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 }33:T47b,// Function that returns a summary table SummaryTable = (data, {label="Summary"} = {}) => { 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 }34:T4e4,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 format = type === "date" ? d3.utcFormat("%m/%d/%Y"):d3.format(",.0f") const rules = [{label:"mean", value:mean}] return addTooltips( Plot.plot({ height:55, width:240, style:{ display:"inline-block" }, x:{ label:"", ticks:[d3.min(data, d => +d[col]), d3.max(data, d => +d[col])], tickFormat:format }, y:{ axis:null }, marks:[ Plot.rectY(data, Plot.binX({y:"count", title: (elems) => { // compute range for the elements const extent = d3.extent(elems, d => d[col]); return `${elems.length} rows\n[${format(extent[0])} to ${format(extent[1])}]`} }, {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":1623711969761.165,"size":13490}] 2f:{"title":"Load Summary Table","cells":[{"id":0,"value":"# Load Summary Table \n\nA fork of [SummaryTable](@observablehq/summary-table) to load your own data.\n\nWant a quick visual overview of a dataset? To get started, import the new (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)).","pinned":false,"hidden":false,"mode":"md"},{"id":1856,"value":"// Load the data\n\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(Plot.barX(summary_data, {x:\"missing\", y:\"column\", fill:\"lightblue\", title: d => `Percent Missing (${d.column}): ${d3.format(\".1%\")(d.missing)}`}).plot({\n x:{\n tickFormat:d3.format(\".1%\")\n }, \n y: {\n domain:summary_data.sort((a, b) => b.missing - a.missing).map(d => d.column), \n label:\"\"\n },\n marginLeft:80, \n caption:\"Percent missing for each variable in the dataset\"\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":"$31","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":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"### Summary Table","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"SmallStack = (categoryData, col) => {\n // Get a horizontal stacked bar\n const label = categoryData.length === 1 ? \" category\" : \" categories\"\n return addTooltips(\n Plot.barX(categoryData, {x:\"count\", fill:col, y:0, title: d => d[col] + \"\\n\" + pct_format(d.pct)}).plot({\n color:{scheme:\"blues\"}, \n marks:[\n Plot.text([0,0], {x:0, dy:13, text:d => d3.format(\",.0f\")(categoryData.length) + `${label}`})\n ], \n style:{\n paddingTop:0,\n paddingBottom:15, \n textAnchor:\"start\", \n overflow:\"visible\" \n }, \n x:{axis:null},\n color:{\n domain:categoryData.map(d => d[col]), \n scheme:\"blues\", \n reverse: true\n },\n height:30, \n width:205,\n y:{\n axis:null, \n range:[30, 3]\n }, \n }\n ), {fill:\"darkblue\"})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"$34","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":1852,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}