2a:null 2b:["$","title",null,{"children":"King’s Digital Lab Technology Network | Miguel Vieira | Observable"}] 30:Te66,chart = { const links = filteredNetwork.links.map((d) => Object.create(d)); const linksByIndex = {}; links.forEach((l) => (linksByIndex[`${l.source},${l.target}`] = true)); const areConnected = (a, b) => a === b || linksByIndex[`${a.id},${b.id}`] || linksByIndex[`${b.id},${a.id}`]; const nodes = filteredNetwork.nodes.map((d) => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody()) .force( "collision", d3.forceCollide().radius((d) => d.radius) ) .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance(linkDistance) ) .force("x", d3.forceX()) .force("y", d3.forceY()); const left = -width / 2; const top = -height / 2; const svg = d3.create("svg").attr("viewBox", [left, top, width, height]); const root = svg.append("g").attr("id", "root"); const transform = d3.zoomIdentity.translate(0, 0).scale(zoomLevel); root.attr("transform", transform); const linkOpacity = 0.75; const link = root .append("g") .attr("opacity", linkOpacity) .selectAll("line") .data(links) .join("line") .attr("stroke", (d) => linkColor(d.label)) .attr("stroke-width", strokeWidth); const node = root .append("g") .attr("stroke-width", strokeWidth + 1) .selectAll("circle") .data(nodes) .join("circle") .attr("id", (d) => d.id) .attr("class", (d) => (d.url !== undefined ? "has-link" : "no-link")) .attr("r", (d) => Math.sqrt(d.connections + 25)) .attr("stroke", (d) => nodeStroke(d.stack)) .attr("stroke-dasharray", "2,2") .attr("stroke-width", strokeWidth) .attr("fill", (d) => nodeFill(d.group)) .call(drag(simulation)); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("visibility", "hidden"); const hideTooltip = () => tooltip.style("visibility", "hidden"); const showTooltip = (node) => tooltip .style("visibility", "visible") .html( `${node.group}: ${node.title}
stack: ${node.stack}
connections: ${node.connections}
id:${node.id}` ); let focusedNode = null; const transitionTimeout = 125; const handleNodeClick = (d) => { showTooltip(d); if (d === focusedNode) { mutable selectedNode = focusedNode = null; hideTooltip(); link .transition(transitionTimeout) .style("opacity", linkOpacity) .transition(transitionTimeout); node.transition(transitionTimeout).style("opacity", 1); } else { mutable selectedNode = focusedNode = d; link .transition(transitionTimeout) .style("opacity", (l) => l.source.id === d.id || l.target.id === d.id ? 1.0 : 0.1 ) .transition(transitionTimeout); node .transition(transitionTimeout) .style("opacity", (n) => (areConnected(n, d) ? 1.0 : 0.25)); } }; node .on("mousemove pointermove", (e) => tooltip .style("top", `${e.clientY - 10}px`) .style("left", `${e.clientX + 10}px`) ) .on("mouseenter pointerenter", (e, d) => { showTooltip(d); }) .on("mouseout pointerout", () => { hideTooltip(); }) .on("click", (e, d) => { handleNodeClick(d); }); simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }31:T5e8,network = { const groups = facets; let nodes = groups.flatMap((group) => Object.values( data.reduce((acc, item) => { const nodeId = getId(group, item[group]); const node = acc[nodeId] || { id: nodeId, title: item[group], group: group, stack: item.stack }; node.stack = _.union(node.stack, item.stack); acc[nodeId] = node; return acc; }, {}) ) ); const links = getUniqueObjects( data.flatMap((d) => networkLinks.flatMap((p) => { const source_label = p[0]; const source_value = _.isArray(d[source_label]) ? d[source_label] : [d[source_label]]; const target_label = p[1]; const target_value = _.isArray(d[target_label]) ? d[target_label] : [d[target_label]]; return source_value.flatMap((source) => target_value.flatMap((target) => ({ id: `${getId(source_label, source)}_${getId(target_label, target)}`, source: getId(source_label, source), target: getId(target_label, target), label: `${source_label} - ${target_label}` })) ); }) ) ); nodes = nodes .map((n) => ({ ...n, connections: links.filter((l) => l.source === n.id || l.target === n.id) .length })) .map((n) => ({ ...n, stack: n.stack.sort() })) .filter((d) => d.connections > 0); return { nodes, links }; }32:T4c2,styles = html` `33:[{"id":"f992d73c5ea251e8d899e5e2363b766c4ca71ad3dd29c7817c2d96ddbcbf97c6bbdd5827fd10e78e193e3ca816ad84e6193d672a04d4ecc8c3582c23782fde83","href":"https://static.observableusercontent.com/files/f992d73c5ea251e8d899e5e2363b766c4ca71ad3dd29c7817c2d96ddbcbf97c6bbdd5827fd10e78e193e3ca816ad84e6193d672a04d4ecc8c3582c23782fde83","name":"data_technology@4.csv","type":"text/csv","lastModified":1638186789546.554,"size":15011},{"id":"dccf128296582d04011262b07c0a4d965d12516ef0619a94570cf06df1d8f0f6dcea4a6fc7c327e023c1b4db740f208a21fe6532ce40e3d9c27cf93d92fe2c23","href":"https://static.observableusercontent.com/files/dccf128296582d04011262b07c0a4d965d12516ef0619a94570cf06df1d8f0f6dcea4a6fc7c327e023c1b4db740f208a21fe6532ce40e3d9c27cf93d92fe2c23","name":"data_technology@5.csv","type":"text/csv","lastModified":1639070887160.256,"size":14224}] 2e:{"id":"561257a8899bbec7","slug":"dhlab-kdl-technology-network","title":"King’s Digital Lab Technology Network","thumbnail":"8fc908d666c38380a4c5c5f175f9e7abe83f9043b1696cb6a85e36cad10a8779","access_level":"public","create_time":"$D2021-11-01T15:59:19.693Z","update_time":"$D2023-08-14T08:24:11.968Z","view_time":null,"first_public_time":"$D2021-12-10T10:22:20.843Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":"starter_2024"},"version":2171,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null}],"members":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"17a6ed353107def4","slug":"kings-digital-lab","title":"King's Digital Lab","owner":{"id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira"}},"type":"notebook","body":{"titling":"auto","title":"King’s Digital Lab Technology Network","cells":[{"id":0,"value":"# King’s Digital Lab Technology Network\nThis notebook was created as part of the [Marie Skłodowska-Curie project](https://dhinfra.org/), *[Digital Humanities Laboratory: Studying the Entanglement of Infrastructure and Technology in Knowledge Production](https://kdl.kcl.ac.uk/our-work/dhlab/)* conducted at [King’s Digital Lab](https://kdl.kcl.ac.uk) (KDL) at King’s College London.\n\n\n*Concept by Urszula Pawlicka-Deger*; \n*data selection by Urszula Pawlicka-Deger*;\n*data collection by Urszula Pawlicka-Deger, and KDL*;\n*data review by Arianna Ciula, Miguel Vieira, and KDL*; \n*notebook by Miguel Vieira*; *design review by Tiffany Ong*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"## Data\nThe data represents the technology stack of KDL. It includes a non-exhaustive list of technologies applied or considered by the KDL team in the production of digital research. For each technology, the data contains information about its developer, function, permission (`${getValues(\"permission\")}`), and sector (`${getValues(\"sector\")}`).\n\nIt also specifies, in the stack field, which technologies have been actively used by the lab (`KDL`) at the time of data collection, applied in the digital humanities `legacy` projects inherited from the Department of Digital Humanities at King’s College London or `considered` by the lab team at the stage of project conceptualisation and feasibility assessment. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"## Technology network\nThe network below aims to provide a resource for investigating how a digital humanities lab and scholarly research are embedded in the complex global and local technological landscape through which digital humanities institutions, the IT industry, and society are brought together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"### Network data\n_Select an item to higlight the selected item in the network._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"viewof nodeSelection = {\n function sparkbar(max) {\n return (x) => html`${x.toLocaleString(\"en\")}`;\n }\n\n const data = filteredNetwork.nodes;\n\n return Inputs.table(data, {\n columns:\n data.length > 0 ? Object.keys(data[0]).filter((c) => c !== \"id\") : [],\n format: {\n connections: sparkbar(d3.max(data, (d) => d.connections / 3)),\n group: (d) => md`${textColour(d, nodeFill(d))}`,\n stack: (d) => html`\n ${d.map(\n (s) =>\n ` ${s} `\n )}`\n },\n multiple: false,\n rows: 5.5,\n sort: \"title\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"### Network\nTo interact with the network:\n* Filter the network by toggling the `Nodes` and the `Part of stack` checkboxes.\n* Hover over an individual node in the network to view more information. \n* Click on an individual node to highlight it and its connections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2023,"value":"

\n ${viewof showNodes}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":800,"value":"viewof stack = Inputs.checkbox(stacks, {\n label: \"Part of stack:\",\n format: (s) =>\n html`\n ${s} (${stackCount(s)})`,\n value: stacks\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"## Explore the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"html`

Filter the data

${[\n viewof filterBy,\n filterBy ? viewof filterValues : \"\"\n]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"{\n const domain = Object.values(\n filteredData.reduce((acc, item) => {\n const value = item[colourFacet];\n const key = _.isArray(value) ? value.join(\"\") : value;\n\n if (!acc.hasOwnProperty(key)) acc[key] = value;\n\n return acc;\n }, {})\n ).sort();\n\n return Inputs.table(filteredData, {\n format: {\n [colourFacet]: (d) => md`${textColour(d, highlightColour(domain, d))}`\n },\n multiple: false,\n rows: 5.5,\n sort: \"technology\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"### Distribution plot for `${_.uniqBy(filteredData, \"technology\").length}` technologies ${filterBy ? `with \\`${filterBy}\\`: \\`${filterValues.join(\", \")}\\`` : \"\"}\nSelect X and colour facets to plot the data distribution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof xFacet = Inputs.radio(\n facets.filter((f) => f !== \"technology\"),\n {\n label: \"Select X facet:\",\n value: \"sector\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof colourFacet = Inputs.radio(facets, {\n label: \"Select colour facet:\",\n value: \"permission\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"{\n const localData =\n xFacet === \"stack\"\n ? filteredData.flatMap((d) => d.stack.map((s) => ({ ...d, stack: s })))\n : filteredData;\n\n return Plot.plot({\n color: {\n legend: true,\n range: vl.vega.scheme(vlConfig.range.category.scheme)\n },\n caption: `${_.startCase(xFacet)} distribution`,\n marginBottom: [\"developer\", \"function\"].includes(xFacet) ? 300 : 40,\n marks: [\n Plot.axisX({\n fontSize: 12,\n tickRotate: [\"developer\", \"function\"].includes(xFacet) ? -90 : 0\n }),\n Plot.axisY({ fontSize: 12 }),\n Plot.barY(\n localData,\n Plot.groupX({ y: \"count\" }, { x: xFacet, fill: colourFacet, tip: true })\n ),\n Plot.ruleY([0])\n ],\n width\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"---\n## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"### Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"linkDistance = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"linkColor = (value) => \"darkgray\" //d3.scaleOrdinal().domain(linkLabels).range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"linkLabels = network.links\n .reduce((a, c) => {\n if (!a.includes(c.label)) a.push(c.label);\n return a;\n }, [])\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"strokeWidth = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"### Nodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"drag = (simulation) => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"mutable selectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"getSelectedNodeInfo = () => {\n let info = null;\n\n if (selectedNode !== null) {\n info = `${selectedNode.group}: ${selectedNode.title} | stack:[${selectedNode.stack}]`;\n\n if (selectedNode.url !== undefined) {\n info = `${info}`;\n }\n }\n\n return info;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"nodeFill = (value) => nodeColour(value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"nodeColour = (value) =>\n [\"#4c78a8\", \"#9ecae9\", \"#54a24b\", \"#e45756\", \"#f58518\", \"#f2cf5b\"][\n nodeGroups.indexOf(value)\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"nodeStroke = (array) => {\n return nodeStrokeColour(\n array.includes(\"KDL\")\n ? \"KDL\"\n : array.includes(\"legacy\")\n ? \"legacy\"\n : \"considered\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"nodeStrokeColour = (value) =>\n ({ KDL: \"#111\", legacy: \"#888\", considered: consideredColour }[value])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"nodeGroups = [...facets]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1782,"value":"consideredColour = \"#bbb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"### Network data table functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"handleTableClear = {\n if (nodeSelection === null && tableSelectedNode !== null) {\n d3.select(`#${tableSelectedNode.id}`).dispatch(\"click\");\n mutable tableSelectedNode = null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"handleTableSelection = {\n if (nodeSelection !== null) {\n mutable tableSelectedNode = nodeSelection;\n d3.select(`#${nodeSelection.id}`).dispatch(\"click\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"mutable tableSelectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"### Network display options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"zoomLevel = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"### Prepare network data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"stackCount = (stack) => data.filter((d) => d.stack.includes(stack)).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"groupDetail = (group) => {\n const localData = _.groupBy(data, group);\n\n if (Object.keys(localData).length > 5 || group === \"stack\") return \"\";\n\n const detail = Object.keys(localData)\n .map((k) => `${k}: ${localData[k].length}`)\n .join(\", \");\n\n return `: [${detail}]`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"groupCount = (group, value = null) => {\n const localData = value\n ? _.groupBy(data, \"permission\", value)\n : _.uniqBy(data, group);\n\n return group === \"stack\" ? stacks.length : localData.length;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"filteredNetwork = {\n let nodes = network.nodes.filter((n) =>\n n.stack.some((s) => stack.includes(s))\n );\n\n const links = network.links.filter(\n (l) =>\n nodes.some((n) => n.id === l.source) &&\n nodes.some((n) => n.id === l.target)\n );\n\n nodes = nodes\n .map((n) => {\n return {\n ...n,\n connections: links.filter((l) => l.source === n.id || l.target === n.id)\n .length\n };\n })\n .filter((d) => d.connections > 0);\n\n return { nodes: nodes, links: links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"networkLinks = {\n const links = [\n [\"technology\", \"developer\"],\n [\"technology\", \"function\"],\n [\"technology\", \"sector\"],\n [\"technology\", \"stack\"],\n [\"technology\", \"permission\"],\n [\"developer\", \"sector\"]\n ];\n\n return links.filter(\n (n) => showNodes.includes(n[0]) && showNodes.includes(n[1])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"stacks = [...new Set(data.flatMap((d) => d.stack))].sort((a, b) =>\n (a === \"considered\" || b === \"considered\") ? 1 : a.localeCompare(b)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"getId = (group, text) => `${group}-${_.kebabCase(text)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"getUniqueObjects = (arrayOfObjects) =>\n arrayOfObjects.filter(\n (item, idx, array) => array.findIndex((x) => x.id === item.id) === idx\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"### Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"The views are defined here so they can be grouped in a single form above. Because they are used above, they produce empty outputs in this section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"viewof showNodes = Inputs.checkbox(nodeGroups, {\n disabled: [\"technology\"],\n label: \"Nodes:\",\n format: (n) =>\n html`\n ${n} (${groupCount(n)})${groupDetail(n)}`,\n value: nodeGroups\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"viewof filterBy = Inputs.select([null, ...facets], { label: \"Filter by\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof filterValues = {\n const values = [...new Set(data.flatMap((d) => d[filterBy]))].sort();\n\n return Inputs.select(values, {\n label: filterBy ? `Select ${filterBy}s` : \"\",\n multiple: true,\n value: [values[0]]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"highlightColour = (domain, value) =>\n vl.vega\n .scale(\"ordinal\")()\n .domain(domain)\n .range(vl.vega.scheme(vlConfig.range.category.scheme))(value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"getValues = (field) =>\n _.uniqBy(data, field)\n .map((d) => d[field])\n .join(\", \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"## Load and prepare the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2148,"value":"selectedFacetDomain = _.uniqBy(\n data.flatMap((d) => d.stack.map((s) => ({ ...d, stack: s }))),\n xFacet\n).map((d) => d[xFacet])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"filteredData = {\n return filterBy !== null\n ? data.filter((d) => filterValues.some((fv) => d[filterBy].includes(fv)))\n : data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"data = raw\n .map((d) => ({ ...d, technology: d.software }))\n .map((d) => ({ ...d, developer: d.developer || \"Community\" }))\n .map((d) => ({ ...d, sector: d.sector || \"Community\" }))\n .map((d) => ({\n ...d,\n permission: d.open && d.open === \"y\" ? \"Open-source\" : \"Proprietary\"\n }))\n .map((d) => ({ ...d, active: d.active && d.active === \"y\" ? \"KDL\" : \"\" }))\n .map((d) => ({\n ...d,\n legacy: d.legacy && d.legacy === \"y\" ? \"legacy\" : \"\"\n }))\n .map((d) => ({\n ...d,\n stack: [\n ...new Set([\n d.active || d.legacy || \"considered\",\n d.legacy || d.active || \"considered\"\n ])\n ]\n }))\n .map((d) => _.pick(d, facets))\n .map((d) => _.each(d, (v, k) => _.isString(v) && (d[k] = v.trim())))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"// facets for plotting\nfacets = [\n \"technology\",\n \"developer\",\n \"function\",\n \"permission\",\n \"sector\",\n \"stack\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"raw = FileAttachment(\"data_technology@5.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"vlConfig = {\n const config = vegaBaseConfig;\n config.range.category.scheme = \"tableau20\";\n\n return config;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"import {\n textColour,\n vegaBaseConfig,\n vegaOrdinalColour\n} from \"@jmiguelv/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import { vl } from \"@vega/vega-lite-api-v5\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2f:"$2e:body"