2b:null 2c:["$","title",null,{"children":"An Interactive Typology Matrix | Kevin Chambers | Observable"}] 31:T162c,viewof matrix = { const urls = () => { return 1; }; let thisData = groupedData; // Create our master container for everything const container = d3 .select(DOM.element("div")) .attr("id", "typology-container"); // Add in the form for selecting the presentation mode const modeSwitch = container.append("div").append(() => switchViewToolbar()); // Create the matrix table const tbl = container .append("table") .attr("id", "matrix-table") .attr("class", "basic-table test") .datum("drawer closed"); // Create the matrix table header row, populated with data from the keys of the first row of grouped data. const thead = tbl.append("thead"); const ths = thead .append("tr") .selectAll("th") .data(Object.keys(thisData[1])) .join("th"); ths .append("img") .attr("src", d => { return screenIconUrls[d]; }) .attr("style", "width: 50%; object-fit: cover") .attr("class", "no-print"); ths .append("img") .attr("src", d => { return printIconUrls[d]; }) .attr("style", "width: 50%; object-fit: cover") .attr("class", "no-screen"); ths.append("div").text(d => d); // Create the body of the table and populate it with the grouped data const tbody = tbl .append("tbody") .selectAll("tr") .data(Object.values(thisData)) .join("tr") .selectAll("td, th") .data(function(d) { return Object.values(d); }) .join( enter => enter.append(d => document.createElement(d[0]["Is Header"] ? "th" : "td") ), update => update, exit => exit.remove() ) .text(function(d) { return d[0]["Name"]; }); // Create the div where the drawer will be placed const drawerDiv = container .append("div") .attr("id", "drawer") .style("height", 0) .text(""); // Create the div where the details will be placed const detailsDiv = container .append("div") .attr("id", "details") .text(""); // Select all the table cells that will be the interactive ones (just the td's, not the th's) let matrixTds = tbl.selectAll("td"); // Assign the title of each data cell to match the description field. // This sets up Tippy to collect the data title text and turn it into a fancy tooltip matrixTds.attr("title", function(d) { return d[0]["Description"]; }); matrixTds.on("click", function(d) { if (tbl.datum() == "drawer closed") { // Open the drawer setDrawerHtml(drawerDiv, d, this, matrixTds); drawerDiv .transition() .duration(600) .style("height", null) .style("border-width", "0 2px 2px 2px"); tbl.datum("drawer open"); } else if (tbl.datum() == "drawer open") { if (drawerDiv.datum() == d) { // The clicked on the same cell, so toggle the drawer closed drawerDiv .transition() .duration(600) .style("height", "0px") .on("end", () => matrixTds.classed("selected-drawer", false)) .transition() .style("border-width", "0"); tbl.datum("drawer closed"); } else { // The clicked on the different cell, so close the drawer, // switch out the content, and reopen the drawer drawerDiv.datum(d); drawerDiv .transition() .duration(600) .style("height", "0px") .on("end", () => setDrawerHtml(drawerDiv, d, this, matrixTds)) .transition() .duration(600) .style("height", null); tbl.datum("drawer open"); } } else if (tbl.datum() == "details shown") { document.getElementById(typeDetailId(d[0]["Index"])).scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } }); let viewToolbar = container.selectAll("#switch-view-toolbar input"); let detailsAppearDelay = 0; viewToolbar.on("click", function() { if (this.value == 'one') { if (tbl.datum() == "drawer open" || tbl.datum() == "drawer closed") { // Do nothing } else { // Remove all the tables detailsDiv .transition() .duration(600) .style("opacity", 0) .on("end", () => detailsDiv.html(null)); tbl.datum("drawer closed"); } } else if (this.value == 'all') { if (tbl.datum() == "details shown") { // Do nothing } else { if (tbl.datum() == "drawer open") { // Close the drawer drawerDiv .transition() .duration(600) .style("height", "0px") .on("end", () => matrixTds.classed("selected-drawer", false)) .transition() .style("border-width", "0"); tbl.datum("drawer closed"); detailsAppearDelay = 600; } else { detailsAppearDelay = 0; } // Iterate through the types and append them to the div detailsDiv.style("opacity", 0); for (let i = 0; i < rawData.length; i++) { const thisRow = rawData[i]; detailsDiv.append(() => typeOuterHtml(rawData[i], i)); } detailsDiv .transition() .delay(detailsAppearDelay) .duration(600) .style("opacity", 1); tbl.datum("details shown"); detailsDiv.selectAll(".return-to-matrix").on("click", function() { document.getElementById("matrix-table").scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" }); }); } } }); return container.node(); }32:T522,// Takes the raw data and arranges it into a 'crosstab' // with 'Overall Score' as the row and 'Category' as the columns. // Both are ordered by how they are found in the raw data. groupedData = { // Gather the categories from the source data. The first "category" is for the first non-data th column let categories = ["Level"]; for (const thisRow of rawData) { if (categories.indexOf(thisRow["Category"]) == -1) { categories.push(thisRow["Category"]); } } let scores = []; for (const thisRow of rawData) { if (scores.indexOf(thisRow["Overall Score"]) == -1) { scores.push(thisRow["Overall Score"]); } } // Create the hash of hashes let g = {}; for (const thisScore of scores) { g[thisScore] = {}; for (const thisCategory of categories) { g[thisScore][thisCategory] = []; } } // Fill in the level number for the first (non-data) column for (const score of scores) { g[score]["Level"].push({ Name: score, "Is Header": true }); } // Insert the data into the right location //for (const thisRow of rawData) { for (let i = 0; i < rawData.length; i++) { const thisRow = rawData[i]; thisRow["Is Header"] = false; thisRow["Index"] = i; g[thisRow["Overall Score"]][thisRow["Category"]].push(thisRow); } return g; }33:T830,html` `34:[{"id":"d24e1538d193d15889a40a80843952220862e9989fb8a05f7ec743301073df1f0f00145ce15a77c3bba3845847e603afbe91cb682046a05b0324b5731245f989","href":"https://static.observableusercontent.com/files/d24e1538d193d15889a40a80843952220862e9989fb8a05f7ec743301073df1f0f00145ce15a77c3bba3845847e603afbe91cb682046a05b0324b5731245f989","name":"typology.csv","type":"text/csv","lastModified":1582613890091.23,"size":16032},{"id":"0c8b9b4e43879a456c0143259c07ad1ea55c09f380b12d7cf1119baa5ad4388dfc6c755efb01034b9a1f4fec75555428f6ff0cf34c363afe05c06741231fcb0a","href":"https://static.observableusercontent.com/files/0c8b9b4e43879a456c0143259c07ad1ea55c09f380b12d7cf1119baa5ad4388dfc6c755efb01034b9a1f4fec75555428f6ff0cf34c363afe05c06741231fcb0a","name":"Payment icon.png","type":"image/png","lastModified":1589586229400.823,"size":5645},{"id":"b7f21f75afcb007297d62baf7b3791524a7cf3f105382d4ac4a90dfe8a8372cef363b53c445d7b4d5ebdd7fc2ae85fa3f684e62701a626023cd0d7b897483a87","href":"https://static.observableusercontent.com/files/b7f21f75afcb007297d62baf7b3791524a7cf3f105382d4ac4a90dfe8a8372cef363b53c445d7b4d5ebdd7fc2ae85fa3f684e62701a626023cd0d7b897483a87","name":"Operations icon.png","type":"image/png","lastModified":1589586229449.969,"size":18762},{"id":"a2586390d77ea73e9f61b69ce97e0fdf03b0641daf19e0af75e8f3609764a4eeff870e117ae6138544a624121999de02e09dd136f0ca301e2d3af1cff25ae6e7","href":"https://static.observableusercontent.com/files/a2586390d77ea73e9f61b69ce97e0fdf03b0641daf19e0af75e8f3609764a4eeff870e117ae6138544a624121999de02e09dd136f0ca301e2d3af1cff25ae6e7","name":"Coordination icon.png","type":"image/png","lastModified":1589586229367.184,"size":12483},{"id":"08dfaf38c7d73857d689584e349c2b2b01f6851cfd38f0578bb6c5c218b4d859cc625350ba6fed1777b2d04192cdcc8238dff0cae326b37608b959dc57b8a7e7","href":"https://static.observableusercontent.com/files/08dfaf38c7d73857d689584e349c2b2b01f6851cfd38f0578bb6c5c218b4d859cc625350ba6fed1777b2d04192cdcc8238dff0cae326b37608b959dc57b8a7e7","name":"Technology Typology - All Types@16.csv","type":"text/csv","lastModified":1589788856381.503,"size":40782},{"id":"ce51c15752b25346234c1ed31ab2cc6c78d226d38505dfdcf8a0b1b74d65a5cd95e71b635399c0a95823319ca44ff44415de5db343e2b8d6f87fc42a2c4e4d84","href":"https://static.observableusercontent.com/files/ce51c15752b25346234c1ed31ab2cc6c78d226d38505dfdcf8a0b1b74d65a5cd95e71b635399c0a95823319ca44ff44415de5db343e2b8d6f87fc42a2c4e4d84","name":"Vehicles print icon.png","type":"image/png","lastModified":1592382033999.576,"size":6705},{"id":"a73655eb00a83c54d12080cd98b1ed37b8dc6cfd39248a655ffe7b2b8f72f713e4345b9b1eeb95eb97be8ee21afa6b428061065a61ddde0fb6bd93d4279043ee","href":"https://static.observableusercontent.com/files/a73655eb00a83c54d12080cd98b1ed37b8dc6cfd39248a655ffe7b2b8f72f713e4345b9b1eeb95eb97be8ee21afa6b428061065a61ddde0fb6bd93d4279043ee","name":"Payment print icon.png","type":"image/png","lastModified":1592382047752.515,"size":5292},{"id":"d622ac18a3eb841b7978236efe03025751e1c617ec0283d3c706ef3b43aeff6d4eacbcf6adddd39884b7c7fe8b2248e36664e56ffd485662f48ed7153944b7ce","href":"https://static.observableusercontent.com/files/d622ac18a3eb841b7978236efe03025751e1c617ec0283d3c706ef3b43aeff6d4eacbcf6adddd39884b7c7fe8b2248e36664e56ffd485662f48ed7153944b7ce","name":"Operations print icon.png","type":"image/png","lastModified":1592382037355.246,"size":17455},{"id":"8eec1257ad23844566b5ceb8a2dd644b72a39b4fed7398941e8e4a2da98f67136188a5461afeb45b1c616760f116b3f130e7c85da59e577ed2e370d467d9de87","href":"https://static.observableusercontent.com/files/8eec1257ad23844566b5ceb8a2dd644b72a39b4fed7398941e8e4a2da98f67136188a5461afeb45b1c616760f116b3f130e7c85da59e577ed2e370d467d9de87","name":"Coordination print icon.png","type":"image/png","lastModified":1592382058547.507,"size":11617},{"id":"e4766310ef0d795374c18abc566b5846a1217218810179a63fc0fe14c936bf155f9c3b77ed72379c6b560e56da4d702264f8e5faea1bb108cbe01f8f9663a945","href":"https://static.observableusercontent.com/files/e4766310ef0d795374c18abc566b5846a1217218810179a63fc0fe14c936bf155f9c3b77ed72379c6b560e56da4d702264f8e5faea1bb108cbe01f8f9663a945","name":"Outreach and Access print icon.png","type":"image/png","lastModified":1592382588570.764,"size":12439},{"id":"9773368c1a6059f514abc04dca6790cc3ea69678f7ac0353824d35a7a4759e1ef958a2f5685464524538afbafb1d7a7195f4c7eb4431a46245f69639cd9a063d","href":"https://static.observableusercontent.com/files/9773368c1a6059f514abc04dca6790cc3ea69678f7ac0353824d35a7a4759e1ef958a2f5685464524538afbafb1d7a7195f4c7eb4431a46245f69639cd9a063d","name":"Outreach and Access icon@1.png","type":"image/png","lastModified":1592383673809.311,"size":14033},{"id":"1bb7989b4d23c7ea38db6633e3f316e1559f7db1568d712a6ff37c93b047f839ad2fc27861fa805ef1cdc367e91f1f2e7f491e529f35604cdf4116c4f2f8e6d3","href":"https://static.observableusercontent.com/files/1bb7989b4d23c7ea38db6633e3f316e1559f7db1568d712a6ff37c93b047f839ad2fc27861fa805ef1cdc367e91f1f2e7f491e529f35604cdf4116c4f2f8e6d3","name":"Vehicles print icon@3.png","type":"image/png","lastModified":1592427558026.033,"size":7118},{"id":"1d594254212ff83a801702e5a2a529903b3d3d14ff9546cb354f82d2203cff5bd51881c9c8d224983b92d619f802c9093bb3115230c96a2672306e5b25f214d8","href":"https://static.observableusercontent.com/files/1d594254212ff83a801702e5a2a529903b3d3d14ff9546cb354f82d2203cff5bd51881c9c8d224983b92d619f802c9093bb3115230c96a2672306e5b25f214d8","name":"Vehicles icon@4.png","type":"image/png","lastModified":1592427558030.833,"size":7690}] 2f:{"id":"1e9bf829aa965ff1","slug":"a-testing-version-of-a-live-typology-matrix","title":"An Interactive Typology Matrix","thumbnail":"8fb195aa9696d1eb9fc113fcacaed43ca3732c5632088aa2188f2e476c8f8f9f","access_level":"public","create_time":"$D2020-02-21T05:50:19.143Z","update_time":"$D2022-09-19T20:02:15.929Z","view_time":null,"first_public_time":"$D2020-02-29T16:52:19.752Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"a13f78dc474cc6a5","login":"keviniano","name":"Kevin Chambers","avatar_url":"https://avatars-next.observableusercontent.com/6b22e84921b35c87e532f95e9f1b36ce566322d713cc8717a12e2ce3085d4b2a","tier":"starter_2024"},"version":1596,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa479b19627ddc22","login":"keviniano","name":"Kevin Chambers","avatar_url":"https://avatars-next.observableusercontent.com/6b22e84921b35c87e532f95e9f1b36ce566322d713cc8717a12e2ce3085d4b2a","tier":null}],"members":[{"type":"individual","id":"fa479b19627ddc22","login":"keviniano","name":"Kevin Chambers","avatar_url":"https://avatars-next.observableusercontent.com/6b22e84921b35c87e532f95e9f1b36ce566322d713cc8717a12e2ce3085d4b2a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"An Interactive Typology Matrix","cells":[{"id":0,"value":"md`# An Interactive Typology Matrix\n\nClick on a box to see more information about it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`# Includes\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"// This is the attached data file\ndataFile = FileAttachment(\"Technology Typology - All Types@16.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"// This is the data source parsed into a JSON object\nrawData = d3.csvParse(await dataFile.text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"properties = [\n { name: \"Overall Score\", format: \"1-5\" },\n { name: \"Scalability\", format: \"1-5\" },\n { name: \"Platform Accessibility\", format: \"1-5\" },\n { name: \"Ease of Implementation\", format: \"1-5\" },\n { name: \"Relative Affordability\", format: \"1-5\" },\n { name: \"Maturity\", format: \"1-5\" },\n { name: \"Generalizability\", format: \"1-5\" },\n { name: \"Trending\", format: \"up-down\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"firstRow = rawData[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1491,"value":"screenIconUrls = {\n return {\n \"Outreach and Access\": await FileAttachment(\n \"Outreach and Access icon@1.png\"\n ).url(),\n Operations: await FileAttachment(\"Operations icon.png\").url(),\n Vehicles: await FileAttachment(\"Vehicles icon@4.png\").url(),\n Payment: await FileAttachment(\"Payment icon.png\").url(),\n Coordination: await FileAttachment(\"Coordination icon.png\").url()\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1560,"value":"printIconUrls = {\n return {\n \"Outreach and Access\": await FileAttachment(\n \"Outreach and Access print icon.png\"\n ).url(),\n Operations: await FileAttachment(\"Operations print icon.png\").url(),\n Vehicles: await FileAttachment(\"Vehicles print icon@3.png\").url(),\n Payment: await FileAttachment(\"Payment print icon.png\").url(),\n Coordination: await FileAttachment(\"Coordination print icon.png\").url()\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"md`## UI Templating`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"function switchViewToolbar() {\n return html`\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"setDrawerHtml = function(drawerDiv, d, thisCell, matrixCells) {\n drawerDiv.html(null);\n drawerDiv.append(() => typeInnerHtml(d[0]));\n drawerDiv.datum(d);\n matrixCells.classed(\"selected-drawer\", false);\n d3.select(thisCell).classed(\"selected-drawer\", true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1340,"value":"function typeOuterHtml(d, i) {\n return html`\n

\n ${typeInnerHtml(d)}\n Return to typology matrix\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":756,"value":"// \"Lift the flap\" and see more detailed information\nfunction typeInnerHtml(d) {\n return html`\n

${d[\"Category\"]}

${d[\"Name\"]}

\n ${d[\"Detailed Description\"]}\n

\n \n \n \n \n \n \n \n \n \n ${properties.map(property => typePropertyHtml(property, d))}\n \n

Area	Score	Notes

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"function typePropertyHtml(property, d) {\n return html`\n \n ${property.name}\n ${rating(\n d[property.name],\n property.format\n )}\n ${\n d[property.name + \" Notes\"] == undefined\n ? \"\"\n : d[property.name + \" Notes\"]\n }\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"function rating(score, format) {\n if (Math.abs(score) <= 5) {\n if (score == 0) {\n return html`―`;\n } else if (format == \"up-down\") {\n if (score > 0) {\n return charRepeat(\"↑\", score);\n } else if (score < 0) {\n return charRepeat(\"↓\", Math.abs(score));\n }\n } else {\n return charRepeat(\"★\", score);\n }\n } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1386,"value":"function typeDetailId(index) {\n return \"type-detail-\" + index;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"function charRepeat(char, times) {\n let result = \"\"\n if (times >= 1) {\n for (let i = 1; i <= times; i++) {\n result = result.concat(char);\n }\n } \n return html`${result}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"toolTip = {\n viewof matrix;\n return tippy(\"#matrix-table td\", {\n content(reference) {\n const title = reference.getAttribute('title');\n reference.removeAttribute('title');\n return title;\n },\n arrow: true,\n size: 'large',\n maxWidth: 150,\n animation: 'fade',\n placement: 'right'\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":692,"value":"md`## Page Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"md`## Javascript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"popper = require(\"https://unpkg.com/popper.js@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"tippy = require(\"https://unpkg.com/tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"