// 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; }