31:T4bd,style = html` `32:T6ce,enterTheMatrix = { const dpi = devicePixelRatio; var canvas = document.createElement("canvas"); canvas.width = width * dpi; canvas.height = (width - 80) * dpi; canvas.style.width = width + "px"; canvas.style.position = "relative"; canvas.style.top = 0; canvas.style.left = 0; var context = canvas.getContext("2d"); context.scale(dpi, dpi); const katakana = "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン"; const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const nums = "0123456789"; const alphabet = katakana + latin + nums; const fontSize = 16; const columns = width / fontSize; const rainDrops = []; for (let x = 0; x < columns; x++) { rainDrops[x] = 1; } function drawMatrixRain() { context.fillStyle = "rgba(0, 0, 0, 0.05)"; context.fillRect(0, 0, width, width); context.fillStyle = "#0F0"; context.font = fontSize + "px monospace"; for (let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); const x = i * fontSize; const y = rainDrops[i] * fontSize; context.fillText(text, x, y); if (y > width && Math.random() > 0.975) { rainDrops[i] = 0; } rainDrops[i]++; } } setInterval(drawMatrixRain, 50); return html`

${canvas}

${grid}

`; }33:[{"id":"ddaa0e85dcb638f77cd107987103d5a63f2f5f83acea0455bbf03b291961bcb7fb9220e320013633f0faea291ee4ef1d44cd9f83e8aa1b93a8c1eee51f209b1b","href":"https://static.observableusercontent.com/files/ddaa0e85dcb638f77cd107987103d5a63f2f5f83acea0455bbf03b291961bcb7fb9220e320013633f0faea291ee4ef1d44cd9f83e8aa1b93a8c1eee51f209b1b","name":"matrix.ttf","type":"font/ttf","lastModified":1712041622857.941,"size":11220},{"id":"d0736fa495b37f6e0144ee913d12f031ae790bbdd1c4c462e81952fc7d0631e7cab5db734796fa5565810045f79292e13b6f9ac3ba8685b25eca04aef50d180a","href":"https://static.observableusercontent.com/files/d0736fa495b37f6e0144ee913d12f031ae790bbdd1c4c462e81952fc7d0631e7cab5db734796fa5565810045f79292e13b6f9ac3ba8685b25eca04aef50d180a","name":"the-matrix.json","type":"application/json","lastModified":1712045305401.597,"size":23248}] 2f:{"title":"THE MATRIX: INTERACTIONS","cells":[{"id":0,"value":"# THE MATRIX: INTERACTIONS","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"The [Harvard Dataverse](https://dataverse.harvard.edu/) houses many datasets, including [this one](https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/T4HBA3) which contains network graphs and network metadata from [Moviegalaxies](http://moviegalaxies.com/), a website providing network graph data from ~773 films (1915–2012). The data includes individual network graph data in [Graph Exchange XML Format](https://gexf.net/) and descriptive statistics on measures such as clustering coefficient, degree, density, diameter, modularity, average path length, the total number of edges, and the total number of nodes.\n\nOne of those datasets is the character interactions from The Matrix.\n\nIn The Matrix (heh), below, the visible cells indicate the characters had some interaction and the fill level is based on the relative interaction level (use the tooltips to view them).","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"$${enterTheMatrix}","pinned":false,"hidden":false,"mode":"html"},{"id":61,"value":"grid = Plot.plot({\n className: \"the-matrix\",\n width: width,\n height: width - 80,\n marginLeft: 140,\n marginRight: 70,\n marginTop: 140,\n style: {\n color: \"white\",\n background: \"#000000bb\",\n fontFamily: \"courier\",\n fontSize: \"0.9em\"\n },\n color: {\n type: \"sequential\",\n scheme: \"greens\",\n reverse: true\n },\n x: {\n label: null,\n tickSize: 0\n },\n y: {\n label: null,\n tickSize: 0\n },\n marks: [\n Plot.cell(interactions, {\n x: \"source\",\n y: \"target\",\n fill: \"weight\",\n stroke: \"#33393E\",\n strokeWidth: 1\n }),\n Plot.tip(\n interactions,\n Plot.pointer({\n x: \"source\",\n y: \"target\",\n fill: \"black\",\n stroke: mcols.ltGreen,\n strokeWidth: 3 / 4,\n color: mcols.ltGreen,\n title: (d) => `${d.source}↔${d.target} (${d.weight})`\n })\n ),\n Plot.axisX({ anchor: \"top\", tickRotate: -90, tickSize: 0 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"interactions = matrix.network.edges.map((d) => {\n d.source = toTitleCase(d.source);\n d.target = toTitleCase(d.target);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"matrix = FileAttachment(\"the-matrix.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"mcols = ({\n black: \"#0D0208\",\n darkGreen: \"#003B00\",\n midGreen: \"#008F11\",\n ltGreen: \"#00FF41\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"font = {\n const font = new FontFace(\n \"Matrix\",\n `url(${await FileAttachment(\"matrix.ttf\").url()})`\n );\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function toTitleCase(x) {\n var smallWords =\n /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|v.?|vs.?|via)$/i;\n var alphanumericPattern = /([A-Za-z0-9\\u00C0-\\u00FF])/;\n var wordSeparators = /([ :–—-])/;\n\n return x\n .toLowerCase()\n .split(wordSeparators)\n .map(function (current, index, array) {\n if (\n current.search(smallWords) > -1 &&\n index !== 0 &&\n index !== array.length - 1 &&\n array[index - 3] !== \":\" &&\n array[index + 1] !== \":\" &&\n (array[index + 1] !== \"-\" ||\n (array[index - 1] === \"-\" && array[index + 1] === \"-\"))\n ) {\n return current.toLowerCase();\n }\n\n return current.replace(alphanumericPattern, function (match) {\n return match.toUpperCase();\n });\n })\n .join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}