2d:null 2e:["$","title",null,{"children":"Summary Table | Observable | Observable"}] 33: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 }34:Tff6,// A function to summarize a single column SummarizeColumn = (data, col) => { let content, value, format, finiteFormat, el, chart, missing_label, pct_missing, min, max, median, mean, sd; const notFiniteFormat = d3.format(",.0f"); // 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 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]) if(Number.isFinite(sd)) { finiteFormat = d3.format(",." + d3.precisionFixed(sd / 10) + "f"); format = x => Number.isFinite(x) ? finiteFormat(x) : notFiniteFormat(x); } else { format = notFiniteFormat; } 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 }35: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 }36:T596,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, frameAnchor: "bottom", dy: 10, 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" } ); }37: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 } ); }38:T792,icon_fns = ({ ordinal:() => html`

`, date: () => html`

`, continuous:() => html`

` })39:[{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1623284869062.497,"size":13490}] 31:{"id":"253d3c1b5eb8410c","slug":"summary-table","title":"Summary Table","thumbnail":"29e93bb31351f270c1eed5d2768d3c1cfa1e41f1e8b9bb4929191af96220f686","access_level":"public","create_time":"$D2021-05-23T00:32:36.905Z","update_time":"$D2022-12-22T20:09:03.768Z","view_time":null,"first_public_time":"$D2021-06-14T14:56:16.720Z","has_unpublished_edits":null,"fork":false,"stars":226,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1948,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"23a8d8e117cd5e23","reply_to_id":null,"content":"when we have thousands of categories i wonder if we could have a different strategy? I made some heuristics to determine # of unique answers for surveys.\nthings like source are like 30k unique things, could maybe show different summary stats and a sampling?\nwhereas tags a top 20 or so with rest binned into \"Other\" might be nicer?","create_time":"$D2021-05-27T17:12:41.239Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"2ca5b3878943d607","reply_to_id":"23a8d8e117cd5e23","content":"Binning to \"other\" is a good idea for the plot!","create_time":"$D2021-05-27T17:36:38.442Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"0a5dfaa1a57ff082","reply_to_id":"23a8d8e117cd5e23","content":"Just thinking outloud here -- hard to figure out the exact threshold (it's actually quite nice to be able to hover over 200 countries and see all the names). Also, an edge case when there is *already* a category called \"Other\". We could name the hover \"## others...\".","create_time":"$D2021-05-28T16:13:24.741Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"a5ef118860a2aa50","reply_to_id":"23a8d8e117cd5e23","content":"Noted in backlog.","create_time":"$D2021-05-28T20:05:00.386Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"afd350ebfeec5db4","reply_to_id":null,"content":"Wow this looks super convenient. Excited to use it. Thanks!","create_time":"$D2021-06-14T15:29:30.119Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45671f5cf79e9a9b","login":"frscott","name":"Scott","avatar_url":"https://avatars-next.observableusercontent.com/df66f560190e3631fb29c6e023cb3b55e240c28f76698b4b6128701d634cbe33","tier":null}},{"id":"bed10d77404a5823","reply_to_id":"afd350ebfeec5db4","content":"Thanks so much, let me know if you have any trouble or feedback!","create_time":"$D2021-06-14T21:09:10.499Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"c3f0f5a903485b3f","reply_to_id":"afd350ebfeec5db4","content":"I would like to see the min and max too","create_time":"$D2021-06-18T20:53:35.735Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"ea2d71233131eb23","reply_to_id":"afd350ebfeec5db4","content":"I think the min and max is already on the graph?","create_time":"$D2021-06-18T21:43:47.818Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null}},{"id":"73f2e326ecbc7917","reply_to_id":"afd350ebfeec5db4","content":"ah! I was looking at the median area not the ticks, good one!","create_time":"$D2021-06-18T21:50:08.010Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"6110ad5c0879b255","reply_to_id":"afd350ebfeec5db4","content":"🤣","create_time":"$D2021-06-18T22:04:13.933Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null}},{"id":"0eade33c26449bb9","reply_to_id":null,"content":"Mike, wouldn't it be cool to have an option for people to load their own data here? See https://observablehq.com/@john-guerra/load-summary-table","create_time":"$D2021-06-23T16:05:21.012Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"702abdaa3beaa6ab","reply_to_id":null,"content":"How to set column type to be number? I imported some CSV data and numbers are detected as string categories.","create_time":"$D2021-07-31T13:16:38.223Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d88a810c493f2e55","login":"abitrolly","name":"Anatoli Babenia","avatar_url":"https://avatars-next.observableusercontent.com/2f343abb5b012a4f26ec5ddf4f3b27e3a604c9e61f196dc6634e49da57892fa1","tier":null}},{"id":"18f02a342be31ccd","reply_to_id":"702abdaa3beaa6ab","content":"You’ll need to do that type setting before passing it into the table- depending on how you’re loading the data, you can:\n\nFileAttachment(\"path.csv\").csv({ typed: true })\n\nOr, using d3.csv:\n\nd3.csv(“path.csv”, d3.autoType)","create_time":"$D2021-07-31T21:41:33.080Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"e9aceefca137dd3f","reply_to_id":"702abdaa3beaa6ab","content":"That helps, thanks! I read the [FileAttachment](https://observablehq.com/@observablehq/file-attachments#cell-417) docs, but didn't understand what a well-typed CVS meant. Thought that I have just a plain CSV that carries no type information.","create_time":"$D2021-08-01T05:15:33.228Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d88a810c493f2e55","login":"abitrolly","name":"Anatoli Babenia","avatar_url":"https://avatars-next.observableusercontent.com/2f343abb5b012a4f26ec5ddf4f3b27e3a604c9e61f196dc6634e49da57892fa1","tier":null}},{"id":"65a6bed068aa9201","reply_to_id":"702abdaa3beaa6ab","content":"Looks like you already tracked down the documentation: https://observablehq.com/@observablehq/file-attachments. If you include {typed:true}, the FileAttachment will use the automatic type inference described here: \n\nhttps://observablehq.com/@d3/d3-autotype","create_time":"$D2021-08-11T15:45:29.930Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"f059a1398aba407f","reply_to_id":null,"content":"Note that the