From cbc93da8a2133ad8eecfa8c231d1591eb89ed20f Mon Sep 17 00:00:00 2001 From: zachcp Date: Sun, 5 Jan 2025 13:43:10 -0500 Subject: [PATCH] 20250105 plm dash (#1) * factor to component * delete unused tempalte files. --- observablehq.config.js | 6 +- src/app.png | Bin 0 -> 1004 bytes src/components/hardware.js | 72 ++++++++++++++++++++ src/components/timeline.js | 16 ----- src/data/events.json | 8 --- src/data/launches.csv.js | 61 ----------------- src/desktop_hardware.md | 106 ----------------------------- src/example-dashboard.md | 99 --------------------------- src/index.md | 118 ++++++--------------------------- src/observable.png | Bin 394 -> 0 bytes src/protein_language_models.md | 13 ---- 11 files changed, 96 insertions(+), 403 deletions(-) create mode 100644 src/app.png create mode 100644 src/components/hardware.js delete mode 100644 src/components/timeline.js delete mode 100644 src/data/events.json delete mode 100644 src/data/launches.csv.js delete mode 100644 src/desktop_hardware.md delete mode 100644 src/example-dashboard.md delete mode 100644 src/observable.png delete mode 100644 src/protein_language_models.md diff --git a/observablehq.config.js b/observablehq.config.js index 231514e..b538a6f 100644 --- a/observablehq.config.js +++ b/observablehq.config.js @@ -17,7 +17,7 @@ export default { // ], // Content to add to the head of the page, e.g. for a favicon: - head: '', + head: '', // The path to the source root. root: "src", @@ -26,9 +26,9 @@ export default { // theme: "default", // try "light", "dark", "slate", etc. // header: "", // what to show in the header (HTML) // footer: "Built with Observable.", // what to show in the footer (HTML) - // sidebar: true, // whether to show the sidebar + sidebar: false, // whether to show the sidebar // toc: true, // whether to show the table of contents - // pager: true, // whether to show previous & next links in the footer + pager: false, // whether to show previous & next links in the footer // output: "dist", // path to the output root for build // search: true, // activate search // linkify: true, // convert URLs in Markdown to links diff --git a/src/app.png b/src/app.png new file mode 100644 index 0000000000000000000000000000000000000000..aab8ce09f886ed61d8bf1d081723d968c4bee65d GIT binary patch literal 1004 zcmV_>9LGQZbMD=}ZIex>WKqlA9-tsJ+9LD{k@Y4ds4Ub-Fb2yP(F@BxNWps8hPc9d z*HtPklClu;jZok+w5;9?dJwW`>IRBT^ls`s4}br^bNAm4W7j)%LlA##mvhejpWpZQ z@PGJRhiRBnsH98M-e>P)*(Ec`H4a zG2Qt_~O)#7jZwtPo_+nE8t*1KW*H_>!t#~*z$`nlZ2j9*jy-a=mmIkzoeeUTUWDn z#lt)yPrM6wQg-S0R2kTIBq~i%0erTfPuq9XF?5C@TLGKQc#p-IL?kcPRa5u=YI?Uf zvmmMJR~mNiW9PaY>m=DIn|W2tYh0w7^jWQ?6f+?jU;i>cjKk!zd&$~>9J!GC z=P#-eV}lI5 z@-Z!)d+3aWEeOOZWMK`rcCDgo{bRf=Gr%9kkC1hm0mu;>VNf+r;Vgxoy>z{|mu^We zu2T~B9?8(uYuGEh*jbLJ4eaUiuosTOo^ieF0AIF!P22yc8Hi@_B-on@ZzCYLgVsK( z*7Q72&z<$UUa-jbC*iI6ld%!rrr@_f_|@R;#vhMxK)#Rg*5J=%z`s1u>tdf%hL|_6 zWOMsU+7oj~>ipR3Hy<(?sfJU7ob339j_rNyh%$`*0-4Hx+4DbMqPyy-?_Ndsnk;MW zn()r!eXx(-cfRA@`~^nFF*g*tE^X5SkBADLiT&Y!RAkN^WQ@pv1PSm a%Go6ttcCkXxCC?n0000 { + const parsedDate = parseDate(d["Release Date"]); + const parsedRam = parseMemorySize(d["Base RAM"]); + + return { + y: parsedDate, + x: parsedRam, + model: d.Model, + }; + }) + .filter((d) => { + const isValid = d.x != null && d.y != null; + if (!isValid) { + console.log("Filtered out entry:", d); + } + return isValid; + }); +} + +export function hardware_plot(hardware, { width, height } = {}) { + let data = munge_hardware(hardware); + + return Plot.plot({ + y: { + grid: true, + label: "Release Date", + type: "time", + nice: true, + }, + x: { + grid: true, + label: "RAM (GB)", + nice: true, + }, + marks: [ + Plot.dot(data), + Plot.text(data, { + x: "x", + y: "y", + text: "model", + dy: -8, + }), + ], + height: 400, + width: 800, + }); +} diff --git a/src/components/timeline.js b/src/components/timeline.js deleted file mode 100644 index 23d692c..0000000 --- a/src/components/timeline.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as Plot from "npm:@observablehq/plot"; - -export function timeline(events, {width, height} = {}) { - return Plot.plot({ - width, - height, - marginTop: 30, - x: {nice: true, label: null, tickFormat: ""}, - y: {axis: null}, - marks: [ - Plot.ruleX(events, {x: "year", y: "y", markerEnd: "dot", strokeWidth: 2.5}), - Plot.ruleY([0]), - Plot.text(events, {x: "year", y: "y", text: "name", lineAnchor: "bottom", dy: -10, lineWidth: 10, fontSize: 12}) - ] - }); -} diff --git a/src/data/events.json b/src/data/events.json deleted file mode 100644 index 52d1927..0000000 --- a/src/data/events.json +++ /dev/null @@ -1,8 +0,0 @@ -[ - {"name": "Sputnik 1", "year": 1957, "y": 10}, - {"name": "Apollo 11", "year": 1969, "y": 20}, - {"name": "Viking 1 and 2", "year": 1975, "y": 30}, - {"name": "Space Shuttle Columbia", "year": 1981, "y": 40}, - {"name": "Hubble Space Telescope", "year": 1990, "y": 50}, - {"name": "ISS Construction", "year": 1998, "y": 60} -] diff --git a/src/data/launches.csv.js b/src/data/launches.csv.js deleted file mode 100644 index 4d1a354..0000000 --- a/src/data/launches.csv.js +++ /dev/null @@ -1,61 +0,0 @@ -import {csvFormat, tsvParse} from "d3-dsv"; -import {utcParse} from "d3-time-format"; - -async function text(url) { - const response = await fetch(url); - if (!response.ok) throw new Error(`fetch failed: ${response.status}`); - return response.text(); -} - -// “Top” vehicles -const TOP_LAUNCH_VEHICLES = new Set([ - "Falcon9", - "R-7", - "R-14", - "Thor", - "DF5", - "R-36", - "Proton", - "Titan", - "Zenit", - "Atlas" -]); - -// “Top” launching states -const TOP_STATES_MAP = new Map([ - ["US", "United States"], - ["SU", "Soviet Union"], - ["RU", "Russia"], - ["CN", "China"] -]); - -// Load and parse launch vehicles. -const launchVehicles = tsvParse(await text("https://planet4589.org/space/gcat/tsv/tables/lv.tsv")); - -// Construct map to lookup vehicle family from name. -const launchVehicleFamilyMap = new Map(launchVehicles.map((d) => [d["#LV_Name"], d.LV_Family.trim()])); - -// Reduce cardinality by mapping smaller states to “Other”. -function normalizeState(d) { - return TOP_STATES_MAP.get(d) ?? "Other"; -} - -// Reduce cardinality by mapping smaller launch families to “Other”. -function normalizeFamily(d) { - const family = launchVehicleFamilyMap.get(d); - return TOP_LAUNCH_VEHICLES.has(family) ? family : "Other"; -} - -// Parse dates! -const parseDate = utcParse("%Y %b %_d"); - -// Load and parse launch-log and trim down to smaller size. -const launchHistory = tsvParse(await text("https://planet4589.org/space/gcat/tsv/derived/launchlog.tsv"), (d) => ({ - date: parseDate(d.Launch_Date.slice(0, 11)), - state: normalizeState(d.LVState), - stateId: d.LVState, - family: normalizeFamily(d.LV_Type) -})).filter((d) => d.date != null); - -// Write out csv formatted data. -process.stdout.write(csvFormat(launchHistory)); diff --git a/src/desktop_hardware.md b/src/desktop_hardware.md deleted file mode 100644 index 4e59fda..0000000 --- a/src/desktop_hardware.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Desktop hardware ---- - -# File Attachment - -```js -const hardware = FileAttachment("./data/desktop_hardware.csv").csv(); -``` - -```js -hardware -``` - -```js -const parseDate = d3.timeParse("%b %Y") - -function parseMemorySize(str) { - if (!str) return null; - - const match = str.match(/^(\d+)\s*(KB|MB|GB|TB|PB)?$/i); - if (!match) return null; - - const [, value, unit = 'GB'] = match; - const multipliers = { - 'KB': 1/1024/1024, // Convert to GB - 'MB': 1/1024, // Convert to GB - 'GB': 1, // Already in GB - 'TB': 1024, // Convert to GB - 'PB': 1024 * 1024 // Convert to GB - }; - - return Number(value) * multipliers[unit.toUpperCase()]; -} - - -const data = hardware.map(d => { - const parsedDate = parseDate(d["Release Date"]); - const parsedRam = parseMemorySize(d["Base RAM"]); - - console.log("Processing entry:", { - original: d["Release Date"], - parsedDate, - originalRam: d["Base RAM"], - parsedRam - }); - - return { - y: parsedDate, - x: parsedRam, - model: d.Model - }; -}).filter(d => { - const isValid = d.x != null && d.y != null; - if (!isValid) { - console.log("Filtered out entry:", d); - } - return isValid; -}); - -let p = Plot.plot({ - y: { - grid: true, - label: "Release Date", - type: "time", - nice: true - }, - x: { - grid: true, - label: "RAM (GB)", - nice: true - }, - marks: [ - Plot.dot(data), - Plot.text(data, { - x: "x", - y: "y", - text: "model", - dy: -8 - }) - ], - height: 400, - width: 800 -}) - - -``` - -```js -p -``` - - -```txt -Vendor, Model, Base RAM, Release Date, Max RAM, CPU Cores, GPU Cores, Neural Engine -Apple, M1, 8GB, Nov 2020, 16GB, 8 (4P+4E), 7/8, 16-core -Apple, M1 Pro, 16GB, Oct 2021, 32GB, 8/10 (6/8P+2E), 14/16, 16-core -Apple, M1 Max, 32GB, Oct 2021, 64GB, 10 (8P+2E), 24/32, 16-core -Apple, M1 Ultra, 64GB, Mar 2022, 128GB, 20 (16P+4E), 48/64, 32-core -Apple, M2, 8GB, Jun 2022, 24GB, 8 (4P+4E), 8/10, 16-core -Apple, M2 Pro, 16GB, Jan 2023, 32GB, 10/12 (6/8P+4E), 16/19, 16-core -Apple, M2 Max, 32GB, Jan 2023, 96GB, 12 (8P+4E), 30/38, 16-core -Apple, M2 Ultra, 64GB, Jun 2023, 192GB, 24 (16P+8E), 60/76, 32-core -Apple, M3, 8GB, Oct 2023, 24GB, 8 (4P+4E), 10, 16-core -Apple, M3 Pro, 18GB, Oct 2023, 36GB, 12 (6P+6E), 18, 16-core -Apple, M3 Max, 36GB, Oct 2023, 128GB, 16 (12P+4E), 40, 16-core diff --git a/src/example-dashboard.md b/src/example-dashboard.md deleted file mode 100644 index a04f311..0000000 --- a/src/example-dashboard.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -theme: dashboard -title: Example dashboard -toc: false ---- - -# Rocket launches 🚀 - - - -```js -const launches = FileAttachment("data/launches.csv").csv({typed: true}); -``` - - - -```js -const color = Plot.scale({ - color: { - type: "categorical", - domain: d3.groupSort(launches, (D) => -D.length, (d) => d.state).filter((d) => d !== "Other"), - unknown: "var(--theme-foreground-muted)" - } -}); -``` - - - -
-
-

United States 🇺🇸

- ${launches.filter((d) => d.stateId === "US").length.toLocaleString("en-US")} -
-
-

Russia 🇷🇺 / Soviet Union

- ${launches.filter((d) => d.stateId === "SU" || d.stateId === "RU").length.toLocaleString("en-US")} -
-
-

China 🇨🇳

- ${launches.filter((d) => d.stateId === "CN").length.toLocaleString("en-US")} -
-
-

Other

- ${launches.filter((d) => d.stateId !== "US" && d.stateId !== "SU" && d.stateId !== "RU" && d.stateId !== "CN").length.toLocaleString("en-US")} -
-
- - - -```js -function launchTimeline(data, {width} = {}) { - return Plot.plot({ - title: "Launches over the years", - width, - height: 300, - y: {grid: true, label: "Launches"}, - color: {...color, legend: true}, - marks: [ - Plot.rectY(data, Plot.binX({y: "count"}, {x: "date", fill: "state", interval: "year", tip: true})), - Plot.ruleY([0]) - ] - }); -} -``` - -
-
- ${resize((width) => launchTimeline(launches, {width}))} -
-
- - - -```js -function vehicleChart(data, {width}) { - return Plot.plot({ - title: "Popular launch vehicles", - width, - height: 300, - marginTop: 0, - marginLeft: 50, - x: {grid: true, label: "Launches"}, - y: {label: null}, - color: {...color, legend: true}, - marks: [ - Plot.rectX(data, Plot.groupY({x: "count"}, {y: "family", fill: "state", tip: true, sort: {y: "-x"}})), - Plot.ruleX([0]) - ] - }); -} -``` - -
-
- ${resize((width) => vehicleChart(launches, {width}))} -
-
- -Data: Jonathan C. McDowell, [General Catalog of Artificial Space Objects](https://planet4589.org/space/gcat) diff --git a/src/index.md b/src/index.md index eca2057..2b4a6e4 100644 --- a/src/index.md +++ b/src/index.md @@ -1,111 +1,35 @@ --- -toc: false +title: Protein Language Models +toc: true --- -
-

Protein Language Models

-

Welcome to your new app! Edit src/index.md to change this page.

- Get started↗︎ -
-
-
${ - resize((width) => Plot.plot({ - title: "Your awesomeness over time 🚀", - subtitle: "Up and to the right!", - width, - y: {grid: true, label: "Awesomeness"}, - marks: [ - Plot.ruleY([0]), - Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}) - ] - })) - }
-
${ - resize((width) => Plot.plot({ - title: "How big are penguins, anyway? 🐧", - width, - grid: true, - x: {label: "Body mass (g)"}, - y: {label: "Flipper length (mm)"}, - color: {legend: true}, - marks: [ - Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}), - Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true}) - ] - })) - }
-
---- +## Protein Language Models -## Next steps +```js +const plms = FileAttachment("./data/protein_language_models.csv").csv(); +``` -Here are some ideas of things you could try… +```js +plms +``` -
-
- Chart your own data using Plot and FileAttachment. Make it responsive using resize. -
-
- Create a new page by adding a Markdown file (whatever.md) to the src folder. -
-
- Add a drop-down menu using Inputs.select and use it to filter the data shown in a chart. -
-
- Write a data loader that queries a local database or API, generating a data snapshot on build. -
-
- Import a recommended library from npm, such as Leaflet, GraphViz, TeX, or DuckDB. -
-
- Ask for help, or share your work or ideas, on our GitHub discussions. -
-
- Visit Framework on GitHub and give us a star. Or file an issue if you’ve found a bug! -
-
- +```js +hplot +``` diff --git a/src/observable.png b/src/observable.png deleted file mode 100644 index cff4f44bc64d764f7051454316b752781f74f3ad..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 394 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv-2k5uSN8&+j*gD@_Vx)ACICqY z8<~U%0!4sep-hDwP$OSSkY6yv9V-^eewEM1p0CMUo*5u05(Sj`=jq}Yq7j@rN#EN! zQKVh|ou2l#*4Eb3yB~ZKxX!~Yc*bwT$!%F?5qXFWfE;O$V zk7n>(w%yrd{T7Y`JFS=`R(wCObzM8dOCNj1nXma7YBEG6R=izn5a{l6W&7HKMcX1* zo-e53Vt*y>t;>9Jk+8=V-kH-H*KPAC(mk?p{tS0~f diff --git a/src/protein_language_models.md b/src/protein_language_models.md deleted file mode 100644 index db06a87..0000000 --- a/src/protein_language_models.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: PLMs ---- - -# File Attachment - -```js -const plms = FileAttachment("./data/protein_language_models.csv").csv(); -``` - -```js -plms -```