31:T4dd,// dot: https://observablehq.com/@observablehq/dot showWorkflow ? md`## Application's Workflow Object(s) | Interface Component | Source ----|----|---- ${anchor("datasets")},${anchor("measure")},${anchor( "dimension" )} | [*Select*](https://github.com/observablehq/inputs/blob/main/README.md#select)| [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "maxDistinct" )} | [*Range*](https://github.com/observablehq/inputs/blob/main/README.md#range) | [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "useNumericDimensions" )} | [*Toggle*](https://github.com/observablehq/inputs/blob/main/README.md#toggle) | [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "paretoChart" )} | [*Bar*](https://observablehq.com/plot/marks/bar)| [*Observable Plot*](https://observablehq.com/plot/) ${anchor("paretoTable")}, ${anchor( "filteredData" )} | [*Table*](https://github.com/observablehq/inputs/blob/main/README.md#table)| [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${dot`digraph {rankdir="LR"; node [style=filled, height=.9] ${digraphNodes.colors}${digraphNodes.nodes}; }`} ` : md``32:T803,viewof paretoChart = { if (paretoData.length == 0) return md``; const measureText = `Running % of Total ${measure.replace( countDim, countDim.replace("__", "") )}`; // https://observablehq.com/@observablehq/plot-dual-axis const v1 = (d) => parseFloat(d.measure.replace(/[^\d.]/g, "")); const v2 = (d) => parseFloat(d.perCentRunTotal); const y2 = d3 .scaleLinear() .domain([0, 1]) // percentages y2 axis .range([0, d3.max(paretoData, v1)]); // measures y1 axis let x1 = paretoData.filter((f) => parseFloat(f.perCentRunTotal) <= 0.8); x1 = x1.length == 0 ? paretoData : x1; x1 = x1[x1.length - 1].dimension; return Plot.plot({ marginBottom: 125, marginLeft: 100, x: { domain: paretoData.map((d) => d.dimension), label: `${dimension}` }, y: { axis: "left", label: `${measure.replace("__", "")}`, domain: [0, d3.max(paretoData, v1)] }, marks: [ Plot.axisY(d3.ticks(0, 1, 10), { color: "steelblue", anchor: "right", label: `${measureText}`, y: y2, // y2, tickFormat: (d) => d3.format(".0%")(d) }), Plot.barY(paretoData, { x: (d) => d.dimension, y: v1, sort: { x: "y", reverse: true }, fill: (d) => (d.perCentRunTotal <= 0.8 ? "yellow" : "lightgrey") }), Plot.lineY(paretoData, { x: (d) => d.dimension, y: (d) => y2(parseFloat(d.perCentRunTotal)), stroke: "steelblue", marker: true }), Plot.ruleY([0]), Plot.ruleY(paretoData, { y: y2(0.8), x2: (d, i, arr) => arr[arr.length - 1].dimension, x1: [x1], insetLeft: insets[paretoData.length - 1], strokeDasharray: "2" }), Plot.ruleX(paretoData, { x: [x1], y2: y2(0.8), strokeDasharray: "2" }), Plot.axisX({ // orient: "bottom", // Set the orientation to bottom (default is top) tickRotate: -90 // Rotate the tick labels vertically }) ] }); }33:T7c6,viewof paretoTable = { const measureText = measure.replace(countDim, countDim.replace("__", "")); const paretoAnalysis = [ { dimension: `Unique: ${paretoData.length.toLocaleString()}`, measure: `Total: ${d3 .sum(wrangledData, (d) => (measure == countDim ? 1 : d[measure])) .toLocaleString()}` } ].concat(paretoData); // const header = { dimension, measure: getTableHead(measureText), percentTotal: getTableHead(`% of Total ${measureText}`), runTotal: getTableHead(`Running ${measureText} Total`), perCentRunTotal: getTableHead(`Running % of Total ${measureText}`), perCentRunTotalDim: getTableHead(`Running % of Total ${dimension}`) }; const format = { dimension: paretoFormat(), measure: paretoFormat(), percentTotal: paretoFormat(), runTotal: paretoFormat(), perCentRunTotal: sparkbar(), perCentRunTotalDim: sparkbar() }; return Inputs.table(paretoAnalysis, { header, format }); function getTableHead(text) { return html`

${text}<\div>`; } function paretoFormat() { return (text, i, table) => { if (i) { return table[i].perCentRunTotal > 0.8 ? text : htl.html`

${text}`; } else { return text; } }; } // https://observablehq.com/@observablehq/input-table#cell-712 function sparkbar() { return (fraction, i, table) => { return fraction == "" ? d3.format(".2%")(fraction) : htl.html`

${d3.format( ".2%" )(fraction)}

`; }; } }34:T774,// https://graphviz.org/about/ // https://observablehq.com/@observablehq/notebook-visualizer digraphNodes = { const digraphNodes = `vegaDatasets,datasets datasets,data data,dataProfile dataProfile,datasetDimensions datasetDimensions,wrangledData dataProfile,getMeasures wrangledData,paretoData wrangledData,filteredData maxDistinct,datasetDimensions useNumericDimensions,datasetDimensions datasetDimensions,getMeasures datasetDimensions,dimension getMeasures,measure dimension,paretoData paretoData,paretoChart measure,paretoData paretoData,paretoTable paretoTable,filteredData`; const nodes = d3 .csvParseRows(digraphNodes, ([n1, n2]) => `${n1}->${n2.trimEnd()}`) .join(" "); // https://observablehq.com/@observablehq/notebook-visualizer const Runtime = (await require("@observablehq/runtime@4")).Runtime; let colors; try { // Won't work for forked notebooks that have not been published or shared const viewofs = await import(moduleUrl(document.baseURI)).then( async ({ default: define }) => { const runtime = new Runtime(); const main = runtime.module(define, (name) => name); await runtime._compute(); runtime.dispose(); return Array.from(main._runtime._variables, (v, i) => ((v._id = i), v)) .map((v) => v._name) .filter((name) => name != null && name.startsWith("viewof ")) .map((name) => name.replace("viewof ", "")); } ); colors = [...new Set(nodes.replace(/->/g, " ").split(" "))] .map((n) => viewofs.find((v) => v == n) ? `${n} [fillcolor="${dotColor(n)}" URL="#${n}"]` : `${n} [fillcolor="white" URL="#${n}"]` ) .join(" "); } catch (err) { colors = [...new Set(nodes.replace(/->/g, " ").split(" "))] .map((n) => `${n} [fillcolor="${dotColor(n)}" URL="#${n}"]`) .join(" "); } return { nodes, colors }; }35:[] 2f:{"title":"Pareto Analysis Quick Start App","cells":[{"id":0,"value":"md`# [Pareto Analysis](https://en.wikipedia.org/wiki/Pareto_principle) Quick Start App \n\n* This notebook builds on the pattern established with the [Sankey Quick Start App](https://observablehq.com/@mariodelgadosr/sankey-quick-start-app). \n* It implements a one-liner app for a [Pareto Analysis](https://en.wikipedia.org/wiki/Pareto_principle), by way of import's [***with option***](https://observablehq.com/@observablehq/import#cell-763).\n\n**Usage**: \n\n~~~js\nimport {paretoApp} with {YourData as data} from \"@ambassadors/pareto-analysis-quick-start-app\"\n~~~\n\nWhere: \n\n***YourData*** is a data table relative to your notebook formatted as: \n\n~~~js\n[{dimension1: value, dimension2: value, measure1: value...}, ...] \n~~~\n\nThen reference ***paretoApp*** in an Observable Cell. \n\nSee [Pareto Quick Start App Test](https://observablehq.com/@ambassadors/pareto-quick-start-app-test) for an example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3149,"value":"viewof showWorkflow = Inputs.toggle({\n label: \"Show Application's Workflow\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3154,"value":"## Demonstration","pinned":false,"hidden":false,"mode":"md"},{"id":1327,"value":"//https://github.com/vega/vega-datasets\nviewof datasets = {\n const listFilter = \"disasters,iowa,movies\";\n\n const dataList = Object.keys(vegaDatasets)\n .sort()\n .filter((dataset) =>\n listFilter.split(\",\").find((filter) => dataset.startsWith(filter))\n );\n\n return Select(dataList, {\n label: md`[Datasets](https://github.com/vega/vega-datasets)`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2130,"value":"paretoApp = data.length != 0\n ? html`\n${viewof maxDistinct}\n${viewof useNumericDimensions}\n${viewof dimension}\n${viewof useAllDimensions}\n${viewof measure}\n${pAnalysisHeader}\n${chartHeader}\n${viewof paretoChart}\n${analysisHeader}\n${viewof paretoTable}\n

\n${filteredHeader}\n${viewof filteredData}`\n : md`# No data to analyze.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2134,"value":"md`🢇 Click cells below to exapand code for ***viewofs***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"viewof maxDistinct = {\n datasets;\n\n return Range([1, maxDimensions], {\n value: maxDimensions > 50 ? maxDimensions * 0.5 : 12,\n step: 1,\n label: \"Maximum Distinct Dimension Instances\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"viewof useNumericDimensions = Toggle({\n label: \"Use Distinct Numbers As Dimensions\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof dimension = {\n const dimensions = datasetDimensions.map((d) => d.field);\n\n return Inputs.select(dimensions, {\n label: \"Dimension\",\n value: dimensions[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"viewof useAllDimensions = Toggle({\n label: \"Include Undefined/Null Dimensions\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"viewof measure = {\n const measures = getMeasures(wrangledData);\n\n return Select(measures, {\n label: \"Measure\",\n format: (m) => m.replace(countDim, countDim.replace(\"__\", \"\")),\n value: initialMeasure\n ? initialMeasure\n : measures[measures.length >= 2 ? 1 : 0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2469,"value":"pAnalysisHeader = md`## Analyses`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2997,"value":"chartHeader = md`### [Pareto Chart](https://en.wikipedia.org/wiki/Pareto_chart)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2862,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3005,"value":"analysisHeader = md`### Pareto Table\n(Selected rows shown in Filtered Data)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2241,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"filteredHeader = md`### Filtered Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof filteredData = {\n const selectedData = paretoTable\n .map((d) => wrangledData.filter((datum) => datum[dimension] == d.dimension))\n .flat();\n\n return Inputs.table(selectedData, {\n columns:\n selectedData.length != 0\n ? [...new Set([...[dimension], ...Object.keys(selectedData[0])])]\n : []\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"# Notebook Objects","pinned":false,"hidden":false,"mode":"md"},{"id":2477,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1329,"value":"vegaDatasets = require(\"vega-datasets@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"data = vegaDatasets[datasets]()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"dataProfile = dl.summary(data); // https://github.com/vega/datalib/wiki/Statistics#dl_summary","pinned":false,"hidden":false,"mode":"ojs"},{"id":2551,"value":"wrangledData = {\n let duplicate = dl.duplicate(data);\n\n const dateFields = datasetDimensions\n .filter((d) => d.type == \"date\")\n .map((d) => d.field);\n\n //Untype dates: https://observablehq.com/@d3/d3-autotype\n dateFields.forEach((field) =>\n duplicate.forEach((d) => (d[field] = d[field].slice(0, 10)))\n );\n\n const fields = datasetDimensions.map((d) => d.field);\n\n // No rows with nulls or undefined for dimensions\n // Allowed with pareto analysis\n fields.forEach(\n (dimension) =>\n (duplicate = duplicate.filter((d) => useAllDimensions || d[dimension]))\n );\n\n return duplicate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2630,"value":"paretoData = {\n // https://d3js.org/d3-array/group#rollups\n const paretoData = d3\n .rollups(\n wrangledData,\n (v) => d3.sum(v, (d) => (measure == countDim ? 1 : d[measure])),\n (d) => d[dimension]\n )\n .sort((a, b) => b[1] - a[1]);\n\n const uniqueDimensions = paretoData.length;\n const totalMeasure = d3.sum(wrangledData, (d) =>\n measure == countDim ? 1 : d[measure]\n );\n\n const pData = [];\n const runTotal = new d3.Adder(); // https://d3js.org/d3-array/add#Adder\n let dimIndex = 0;\n\n for (const [dimension, measure] of paretoData) {\n runTotal.add(measure);\n const perCentRunTotal = runTotal.valueOf() / totalMeasure;\n const obj = {\n dimension,\n measure: measure.toLocaleString(),\n percentTotal: d3.format(\".2%\")(measure / totalMeasure),\n runTotal: runTotal.valueOf().toLocaleString(),\n perCentRunTotal: runTotal.valueOf() / totalMeasure,\n perCentRunTotalDim: ++dimIndex / uniqueDimensions\n };\n pData.push(obj);\n }\n\n return pData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"// The virtual 'count' measure: should not be a property(column) in the data\ncountDim = \"__Count\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"// Maximum distinct values that will be displayed for an individual node\nmaxDimensions = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":3111,"value":"// https://talk.observablehq.com/t/specifying-x2-attribute-for-ruley-mark-of-bary-plot/8925\ninsets = [\n 291, 108, 73, 63, 52, 44, 38, 32, 29, 27, 24, 22, 20, 19, 18, 17, 16, 15, 14,\n 13, 12, 11, 10, 9, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7,\n 7, 7, 7, 6, 6, 6\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"initialMeasure = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"// Use datalib's (https://github.com/vega/datalib) statistics to determine dimensions\ndatasetDimensions = {\n return d3.sort(\n dataProfile\n .filter(\n ({ type }) =>\n type == \"string\" ||\n type == \"date\" ||\n (type == \"number\" && useNumericDimensions)\n )\n .filter(({ distinct }) => distinct <= maxDimensions)\n .map(({ field, distinct, type }) => ({ field, distinct, type })),\n ({ distinct }) => distinct,\n ({ field }) => field //sorting sequence\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"// Use datalib's (https://github.com/vega/datalib) statistics to determine measures\nfunction getMeasures() {\n const fields = new Set(datasetDimensions.map((d) => d.field));\n return [countDim].concat(\n d3.sort(\n dataProfile\n .filter(({ type }) => type == \"number\")\n .filter(({ field }) => !fields.has(field))\n .map(({ field }) => field)\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"format = {\n return d3.format(\",.0f\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n // https://github.com/d3/d3-scale#scaleOrdinal\n // https://github.com/d3/d3-scale-chromatic#schemeCategory10\n // https://observablehq.com/@d3/d3-scaleordinal\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2089,"value":"// From: https://observablehq.com/@observablehq/notebook-visualizer\n// Also: https://talk.observablehq.com/t/access-current-cell-metadata/1873/2\nfunction moduleUrl(notebook) {\n let v = notebook, m;\n\n if (m = /\\.js(\\?|$)/i.exec(v)) v = v.slice(0, m.index);\n if (m = /^[0-9a-f]{16}$/i.test(v)) v = `d/${v}`;\n if (m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)) v = v.slice(m[0].length);\n \n return `https://api.observablehq.com/${v.split(\"?\")[0]}.js?v=3`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"dotColor = {\n // https://github.com/d3/d3-scale#scaleOrdinal\n // https://github.com/d3/d3-scale-chromatic#schemeSet3\n // https://observablehq.com/@d3/d3-scaleordinal\n const color = d3.scaleOrdinal(d3.schemeSet3 );\n return d => color(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function anchor(text) {\n return html`${text}`;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"import {selectOrder} from \"@mariodelgadosr/data-driven-table-column-selection-and-sorting\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"import { Toggle, Search, Table, Select, Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"// https://github.com/vega/datalib\ndl = require('datalib')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}