28:null 29:["$","title",null,{"children":"CSE 453 Lab Visualizations | Wei Jun | Observable"}] 2e:T42c,{ const a = vl.markLine({point: {color: "red"}, color: "red"}) .data(d) .encode( vl.y().fieldQ("Frontend").title("Latency"), vl.x().fieldQ("Load").title("Load (req/sec)") ) .title("Frontend Latency") const b = vl.markLine({point: {color: "green"}, color: "green"}) .data(d) .encode( vl.y().fieldQ("Reservation").title("Latency"), vl.x().fieldQ("Load").title("Load (req/sec)") ) .title("Reservation Latency") const c = vl.markLine({point: true}) .data(d) .encode( vl.y().fieldQ("Detail").title("Detail").title("Latency"), vl.x().fieldQ("Load").title("Load (req/sec)") ) .title("Detail Latency") const combined = vl.layer(a, b, c) .title("Overview Latency for 3 services") return vl.vconcat( vl.hconcat(a, b), vl.hconcat(c, combined)) .render() // return vl.layer(a, b, rule) // .resolve({"scale": {"y": "independent"}}) // .title("Frontend Utilization and Client Response Time for different Load") // .width(400) // .height(300) // .render() // return a.render() }2f:T40c,{ const w = 200; const h = 530; const bar_1 = vl.markBar({opacity: 0.8, color: "steelblue"}) .data(viz) .transform( vl.filter("datum.id == 'Student'") ) .encode( vl.x().fieldQ("y").title(""), vl.y().fieldN("x").sort(vl.field('y').order('descending')).title("Feature"), ).title("Student").width(w).height(h) const bar_2 = vl.markBar({opacity: 0.8, color: "#6c94b2"}) .data(viz) .transform( vl.filter("datum.id == 'Section'") ) .encode( vl.x().fieldQ("y").title("Importance"), vl.y().fieldN("x").sort(vl.field('y').order('descending')).title("") ).title("Page").width(w).height(h) const bar_3 = vl.markBar({opacity: 0.8, color: "#0B5563"}) .data(viz) .transform( vl.filter("datum.id == 'Chapter'") ) .encode( vl.x().fieldQ("y").title(""), vl.y().fieldN("x").sort(vl.field('y').order('descending')).title("") ).title("Chapter").width(w).height(h) return vl.hconcat(bar_1, bar_2, bar_3).title( { text: "", anchor: "middle" } ).render() }30:T89e,function plotCache(cache, title = "") { const total_hit = sumColumn(cache, "Hit") const total_request = sumColumn(cache, "Miss") + total_hit const total_evict = sumColumn(cache, "Evict") const hit_thres = 0 const hit_rate_hist = vl.markBar() .data(cache) .transform( vl.filter('datum.Miss + datum.Hit >= ' + hit_thres), vl.calculate('datum.Hit / (datum.Hit + datum.Miss)').as('Hit Rate') ) .encode( vl.y().count(), vl.x().fieldQ("Hit Rate").bin({maxbins: 20}) ) .title("Histogram of hit rate (filter: Key access > " + hit_thres + " times)") const evict_rate_hist = vl.markBar() .data(cache) .transform( vl.filter('datum.Miss + datum.Hit >= ' + hit_thres), vl.calculate('datum.Evict / (datum.Hit + datum.Miss)').as('Evict Rate') ) .encode( vl.y().count(), vl.x().fieldQ("Evict Rate").bin({maxbins: 20}) ) .title("Histogram of evict rate (filter: Key access > " + hit_thres + " times)") // const top_thres = 15 // const evict = vl.markBar() // .data(cache) // .transform( // vl.window(vl.rank().as('Rank')).sort(vl.field('Evict').order('descending')), // vl.filter('datum.Rank < ' + top_thres) // ) // .encode( // vl.y().fieldN("Key").sort(vl.field('Evict').order('descending')), // vl.x().fieldQ("Evict") // ) // .title("Top " + top_thres + " Keys evicted") // const hit = vl.markBar() // .data(cache) // .transform( // vl.window(vl.rank().as('Rank')).sort(vl.field('Hit').order('descending')), // vl.filter('datum.Rank < ' + top_thres) // ) // .encode( // vl.y().fieldN("Key").sort(vl.field('Hit').order('descending')), // vl.x().fieldQ("Hit") // ) // .title("Top " + top_thres + " Keys hit") return htl.html`

${title}
${"Total hit: " + total_hit}
${"Total Request: " + total_request}
${"Total Hit Rate: " + (total_hit / total_request).toFixed(4)}
${"Total evict: " + total_evict}
${"Evict rate: " + (total_evict / total_request).toFixed(4)}

` return vl.hconcat(hit_rate_hist, evict_rate_hist) .title({text: title, fontSize: 24, anchor: "middle"}) .render() }31:[{"id":"b97f3135f2ab58afc8abf61b70e4835a8459a529784d6e25c7e5a1728cbc4a22530d882f50ac4dd0fd5d08417dd84a2f7cc4f1dc2144b04d9bab292790d7017d","href":"https://static.observableusercontent.com/files/b97f3135f2ab58afc8abf61b70e4835a8459a529784d6e25c7e5a1728cbc4a22530d882f50ac4dd0fd5d08417dd84a2f7cc4f1dc2144b04d9bab292790d7017d","name":"viz.csv","type":"text/csv","lastModified":1711911535447.498,"size":1174},{"id":"70d6b8f8a81949d69ffa4ba174e45f6a8fc2d0a9830a5aa5085f9c70adde6a1f553e3bc00e86b2fa34924c5e5648503d3d1fc7c62f1f4db48375b31e80530518","href":"https://static.observableusercontent.com/files/70d6b8f8a81949d69ffa4ba174e45f6a8fc2d0a9830a5aa5085f9c70adde6a1f553e3bc00e86b2fa34924c5e5648503d3d1fc7c62f1f4db48375b31e80530518","name":"viz@1.csv","type":"text/csv","lastModified":1711911672025.212,"size":1187},{"id":"1315d96b241d9d441b7d7e231cce1d1cd3a2ec1d7e443d838d0fb9958ae32f10a5697c82cf78a2a71a9440d0ec2a8da7132ba6676f2cd2b3ff032d80a6e745cf","href":"https://static.observableusercontent.com/files/1315d96b241d9d441b7d7e231cce1d1cd3a2ec1d7e443d838d0fb9958ae32f10a5697c82cf78a2a71a9440d0ec2a8da7132ba6676f2cd2b3ff032d80a6e745cf","name":"viz@2.csv","type":"text/csv","lastModified":1711911774369.35,"size":1191},{"id":"54eadee0072e63be592de4c74f2a75ffb10f64420e2020484ff5e332f96ddc91935819a03055576ccda6896dacc98ed9399dfd167af96a182783c8d850dd534b","href":"https://static.observableusercontent.com/files/54eadee0072e63be592de4c74f2a75ffb10f64420e2020484ff5e332f96ddc91935819a03055576ccda6896dacc98ed9399dfd167af96a182783c8d850dd534b","name":"perplexity.csv","type":"text/csv","lastModified":1730261082736.613,"size":1611},{"id":"3f441f9dc9784c530f9af7212cb385abee1ead84e28ee4b6f19da63e0694aebdfcfcdf9a128c4eb53ab2b9a40247a1f8a09e19fefd9314db1bbafb03f8aa393a","href":"https://static.observableusercontent.com/files/3f441f9dc9784c530f9af7212cb385abee1ead84e28ee4b6f19da63e0694aebdfcfcdf9a128c4eb53ab2b9a40247a1f8a09e19fefd9314db1bbafb03f8aa393a","name":"453.csv","type":"text/csv","lastModified":1700293734670.11,"size":205},{"id":"5fa94e9418bae2ddc80bdeca1c036e381935ccd63c5b58937d1dce093f08135b5835a8b525cab931f7b95fdee0a047321f3dfbd8bdac50ab94b8625d2e210b02","href":"https://static.observableusercontent.com/files/5fa94e9418bae2ddc80bdeca1c036e381935ccd63c5b58937d1dce093f08135b5835a8b525cab931f7b95fdee0a047321f3dfbd8bdac50ab94b8625d2e210b02","name":"453-a2.csv","type":"text/csv","lastModified":1700293734670.11,"size":282},{"id":"9f6012b93125ae111af210b88f5190179b21d47c5a68cf8be75b16b77fda64d93c877a47de9e477fdd96bd5c968f3f249669f98bcfdb55d07dc9bb0e10737e7a","href":"https://static.observableusercontent.com/files/9f6012b93125ae111af210b88f5190179b21d47c5a68cf8be75b16b77fda64d93c877a47de9e477fdd96bd5c968f3f249669f98bcfdb55d07dc9bb0e10737e7a","name":"lfu-detail.csv","type":"text/csv","lastModified":1700355198442.759,"size":14561},{"id":"234911632ef824788826a1e3be1b719e18d844230507b797d2f5b91d5763f407915f318230fc206fef3ed77dbe62c7f709a7403f911b4bf9808e90e542319d90","href":"https://static.observableusercontent.com/files/234911632ef824788826a1e3be1b719e18d844230507b797d2f5b91d5763f407915f318230fc206fef3ed77dbe62c7f709a7403f911b4bf9808e90e542319d90","name":"random-review.csv","type":"text/csv","lastModified":1700355198739.793,"size":14829},{"id":"21ba6a591c76c9dbaca55fccef7f9eddd54a9c55c3da6ab227bfd12c60cc0c8f57dd78aa06cad8fd51b34eda60c41dea96fd848e8004fb1d613e9b10cec5bed3","href":"https://static.observableusercontent.com/files/21ba6a591c76c9dbaca55fccef7f9eddd54a9c55c3da6ab227bfd12c60cc0c8f57dd78aa06cad8fd51b34eda60c41dea96fd848e8004fb1d613e9b10cec5bed3","name":"random-detail.csv","type":"text/csv","lastModified":1700355198766.352,"size":14918},{"id":"c09ebe421d4526caeb2687fd4ab16572e8245634188dd0bd29d1be3474c070a23daa2e873d806bc2b1951036e17d5ec4416a4e4e12a6c2963c2ee106d60cfebe","href":"https://static.observableusercontent.com/files/c09ebe421d4526caeb2687fd4ab16572e8245634188dd0bd29d1be3474c070a23daa2e873d806bc2b1951036e17d5ec4416a4e4e12a6c2963c2ee106d60cfebe","name":"CSE 453 Lab Data - Lab 4 A3.csv","type":"text/csv","lastModified":1702606631991.263,"size":501},{"id":"7511083eb2d6c57d2b2174cb9a660434d7626448bbb62d8b84014515e88de0048d80a2491b64f11f1e5bd9c692c9191a4d55a4c6f48f9472b2263946adf2c74a","href":"https://static.observableusercontent.com/files/7511083eb2d6c57d2b2174cb9a660434d7626448bbb62d8b84014515e88de0048d80a2491b64f11f1e5bd9c692c9191a4d55a4c6f48f9472b2263946adf2c74a","name":"mru-review.csv","type":"text/csv","lastModified":1700355198747.35,"size":15005},{"id":"c38030ff408dd9f6c090a42d7a6389c21576d675c04f9c97fa5181ce1e7452443e08be8c6c4e22ecb44e775e9787cbe47594c2703aec30f8be158fd980bfc332","href":"https://static.observableusercontent.com/files/c38030ff408dd9f6c090a42d7a6389c21576d675c04f9c97fa5181ce1e7452443e08be8c6c4e22ecb44e775e9787cbe47594c2703aec30f8be158fd980bfc332","name":"mru-detail.csv","type":"text/csv","lastModified":1700355198749.28,"size":14879},{"id":"55744cff0d137691467d2cd2b3252b917fc8c599a90c460a36c17a6c9d17e9611cfcb75a2338afc7e90dcda0e9926e58f648cb97334149b40a0ceea310b2835a","href":"https://static.observableusercontent.com/files/55744cff0d137691467d2cd2b3252b917fc8c599a90c460a36c17a6c9d17e9611cfcb75a2338afc7e90dcda0e9926e58f648cb97334149b40a0ceea310b2835a","name":"lfu-review.csv","type":"text/csv","lastModified":1700355198765.436,"size":15322},{"id":"f4a9ade05b4d8c9787c897fefbcca1a04c1433316eec939b3bbf4cc40bdc9593f045d27d77be014cca3d8446ef118f70cedb500f7f0dff09ec40c793f4b88c9c","href":"https://static.observableusercontent.com/files/f4a9ade05b4d8c9787c897fefbcca1a04c1433316eec939b3bbf4cc40bdc9593f045d27d77be014cca3d8446ef118f70cedb500f7f0dff09ec40c793f4b88c9c","name":"LatencyCDF.csv","type":"text/csv","lastModified":1700435194517.235,"size":512}] 2c:{"id":"776ec22110864436","slug":null,"title":"CSE 453 Lab Visualizations","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-11-18T07:48:54.670Z","update_time":"$D2024-10-30T04:25:06.177Z","view_time":null,"first_public_time":"$D2023-11-18T07:48:54.670Z","fork":{"id":"e996f36ec52df761","slug":null,"title":"Assignment Grade distribution Boxplot","owner":{"id":"38049f1a6f4ca8ab","login":"weijuntan","name":"Wei Jun"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38049f1a6f4ca8ab","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":"starter_2024"},"version":486,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2351dc4e961bf865","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"2351dc4e961bf865","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CSE 453 Lab Visualizations","cells":[{"id":0,"value":"# CSE 453 Lab Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"# CSE 447 N-gram perplexity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":436,"value":"p = FileAttachment(\"perplexity.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"pp = {\n const pivotedData = [];\n\n // Push dev values\n p.forEach(item => {\n pivotedData.push({ perplexity: item.dev, type: \"dev\", k: item.k, n: item.n });\n pivotedData.push({ perplexity: item.train, type: \"train\", k: item.k, n: item.n });\n });\n return pivotedData;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"{\n const a = vl.markLine({point: true, opacity: 0.7})\n .data(p)\n .encode(\n vl.y().fieldQ(\"train\").title(\"Perplexity\"),\n vl.x().fieldQ(\"k\").title(\"K\").scale({\"type\": \"log\"}),\n vl.color().fieldN(\"n\").title(\"N\"),\n )\n .title(\"Train Perplexity\")\n .width(350)\n\n const b = vl.markLine({point: true, opacity: 0.7})\n .data(p)\n .encode(\n vl.y().fieldQ(\"dev\").title(\"Perplexity\"),\n vl.x().fieldQ(\"k\").title(\"K\").scale({\"type\": \"log\"}),\n vl.color().fieldN(\"n\").title(\"N\")\n )\n .title(\"Dev Perplexity\")\n .width(350)\n\n return vl.hconcat(a, b).render() // vl.layer(a, b).render()\n // return vl.layer(a, b, rule)\n // .resolve({\"scale\": {\"y\": \"independent\"}})\n // .title(\"Frontend Utilization and Client Response Time for different Load\")\n // .width(400)\n // .height(300)\n // .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"## Lab 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"g = FileAttachment(\"CSE 453 Lab Data - Lab 4 A3.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"cse453LabDataLab4A3 = await FileAttachment(\"CSE 453 Lab Data - Lab 4 A3.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"untitled = await FileAttachment(\"453.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"{\n const a = vl.markLine({point: true})\n .data(g)\n .encode(\n vl.y().fieldQ(\"Utilization\").title(\"Frontend Utilization\").axis({\"titleColor\": \"steelblue\"}),\n vl.x().fieldQ(\"Load Rate\").title(\"Load (req/sec)\")\n )\n\n const b = vl.markLine({color: \"green\", point: true})\n .data(g)\n .transform(\n vl.filter('datum[\"Load Rate\"] <= 1500')\n )\n .encode(\n vl.y().fieldQ(\"Client Response Time (ms)\").axis({\"titleColor\": \"green\"}),\n vl.x().fieldQ(\"Load Rate\").scale({\"domain\": [0, 1500]})\n )\n\n const rule = vl.markRule({strokeDash: [4, 2]})\n .data(g)\n .encode(\n vl.y().datum(1).scale({domain: [0.0, 18]}).axis({labels:false, ticks:false, grid:false})\n )\n\n return vl.layer(a, b, rule)\n .resolve({\"scale\": {\"y\": \"independent\"}})\n .title(\"Frontend Utilization and Client Response Time for different Load\")\n .width(400)\n .height(300)\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"d = FileAttachment(\"453-a2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"## Lab 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":268,"value":"### Latency CDF","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":272,"value":"latency = FileAttachment(\"LatencyCDF.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"vl.markLine({opacity: 0.8})\n .data(latency)\n .encode(\n vl.y().fieldQ(\"Percentile\").scale({domain: [50, 100]}),\n vl.x().fieldQ(\"Latency\"),\n vl.color().fieldN(\"Cache\")\n )\n .title(\"Latency CDF for 4 cache policies\")\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"viz = FileAttachment(\"viz@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"{\n viz[8][\"x\"] = \"code_density\"\n viz[11][\"x\"] = \"num_code\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"### Least Frequently Used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"lfu_detail = FileAttachment(\"lfu-detail.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"lfu_review = FileAttachment(\"lfu-review.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"plotCache(lfu_detail, \"Least Frequently Used Cache - Detail\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"plotCache(lfu_review, \"Least Frequently Used Cache - Review\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"### Most Recently Used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":209,"value":"mru_detail = FileAttachment(\"mru-detail.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"mru_review = FileAttachment(\"mru-review.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"sumColumn(mru_detail, \"Hit\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"plotCache(mru_detail, \"Most Recently Used Cache - Detail\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"plotCache(mru_review, \"Most Recently Used Cache - Review\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"### Random","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":215,"value":"random_detail = FileAttachment(\"random-detail.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"random_review = FileAttachment(\"random-review.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"plotCache(random_detail, \"Random Cache - Detail\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"plotCache(random_review, \"Random Cache - Review\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"function sumColumn(csv, columnName) {\n return csv.reduce((total, row) => {\n // Check if the column exists in the current row\n if (columnName in row) {\n // Parse the value as a number and add it to the total\n return total + (parseFloat(row[columnName]) || 0);\n }\n return total;\n }, 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"