2c:null 2d:["$","title",null,{"children":"Google Fonts Analytics - Visualized | Radamés Ajna | Observable"}] 32:T722,viewof fontsStatsSelection = Table( (fontsSearched || stats).map((r, i) => ({ family: r.family, rate: r.rate, totalViews: r.totalViews, designers: r.designers, [`${byYear} views`]: r.viewsByDateRange[byYear].views, [`${byYear} change`]: r.viewsByDateRange[byYear].change, viewsByBrowser: Object.assign(d3.max(Object.values(r.viewsByBrowser)), { data: Object.entries(r.viewsByBrowser).map(e => e.concat(e[1] * r.totalViews) ) }), viewsByOS: Object.assign(d3.max(Object.values(r.viewsByOS)), { data: Object.entries(r.viewsByOS).map(e => e.concat(e[1] * r.totalViews)) }) })), { format: { family, totalViews: formatBigNum, viewsByBrowser: x => html`

${barChart(x.data)}`, viewsByOS: x => html`

${barChart(x.data)}`, designers: x => html`

${x.map( e => html`${e}
` )}

`, [`${byYear} views`]: formatBigNum, [`${byYear} change`]: x => html`

0 ? 0.9 : 0.1)), { opacity: 0.2 } ) }}>${(+x.toFixed(1)).toLocaleString("en")}%

` }, width: { change: "min-content", totalViews: "auto", byPeriodViews: "auto" }, columns: [ "family", "totalViews", `${byYear} views`, `${byYear} change`, "viewsByBrowser", "viewsByOS", "designers" ], rows: 40, layout: "auto", sort: "totalViews", reverse: true, align: { totalViews: "right", family: "left", rate: "right" } } )33:T47f,stats = { const byBrowser = new Map(); const byOs = new Map(); const data = await fetch( "https://raw.githubusercontent.com/radames/google-fonts-analytics-archive/main/stats.json" ) .then(r => { if (!r.ok) { throw new Error(""); } else { return r.text(); } }) // .catch(async e => await FileAttachment("stats.json").text()) .then(d => { const data = JSON.parse(d.replace(/SamsungBrowser/g, 'Samsung')); data.map(d => { Object.entries(d.viewsByBrowser).map(e => { if (!byBrowser.has(e[0])) { byBrowser.set(e[0], 0); } byBrowser.set(e[0], byBrowser.get(e[0]) + e[1] * d.totalViews); }); Object.entries(d.viewsByOS).map(e => { if (!byOs.has(e[0])) { byOs.set(e[0], 0); } byOs.set(e[0], byOs.get(e[0]) + e[1] * d.totalViews); }); }); return data.sort((a, b) => { return b.totalViews - a.totalViews; }); }); return Object.assign(data, { byBrowser, byOs, totalViews: data.reduce((acc, i) => acc + i.totalViews, 0) }); }34:[{"id":"c8f1a1a909d9bf6ace63a13b4d0908cd3ac892f5f47ff1d7b75c9d9440b6dad24b037e15ec976346fdcba5f170d03439c79a46e13ea6a2d12f4f5f79f766faae","href":"https://static.observableusercontent.com/files/c8f1a1a909d9bf6ace63a13b4d0908cd3ac892f5f47ff1d7b75c9d9440b6dad24b037e15ec976346fdcba5f170d03439c79a46e13ea6a2d12f4f5f79f766faae","name":"stats.json","type":"application/json","lastModified":1612767775075.705,"size":535737},{"id":"a3332e2dafac295b4e8d53e390a5781e4fa72a77551d95ee593d7a8454832162c643c55a1a619863c3f19424f52a6a29c21d6a6ce06a12df2ada21c4b87493e4","href":"https://static.observableusercontent.com/files/a3332e2dafac295b4e8d53e390a5781e4fa72a77551d95ee593d7a8454832162c643c55a1a619863c3f19424f52a6a29c21d6a6ce06a12df2ada21c4b87493e4","name":"fonts.json","type":"application/json","lastModified":1613026492585.513,"size":404687}] 30:{"id":"834b579ce900bea4","slug":"google-fonts-analytics-visualized","title":"Google Fonts Analytics - Visualized","thumbnail":"e3bd750668ee1d729d930ec0cc8ca074d432748133a9763d35714f2a4177d1c6","access_level":"public","create_time":"$D2020-02-20T19:32:38.929Z","update_time":"$D2021-07-14T00:52:02.431Z","view_time":null,"first_public_time":"$D2021-02-13T08:53:11.897Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024","bio":"Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations."},"version":1751,"publish_version":1751,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"bio":"Data visualization enthusiast. Creative technologist. Open for collaborations."}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[{"id":"071cf63c7989eb69","reply_to_id":null,"content":"Add `{submit: true}` to allow for explicit submission (instead of on every keystroke)?","create_time":"$D2021-02-14T12:55:04.997Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"90def32571039d7d","reply_to_id":"071cf63c7989eb69","content":"Great idea Fabian! thanks!","create_time":"$D2021-02-14T22:18:56.496Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"89bffa387e2789ba","slug":"typography","title":"Typography","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"titling":"auto","title":"Google Fonts Analytics - Visualized","cells":[{"id":0,"value":"md`# Google Fonts Analytics - Visualized\n\nExperimenting with the new [Observable Inputs Table](https://observablehq.com/@observablehq/input-table) and because the original [google fonts analytics table](https://fonts.google.com/analytics) is not interactive enough.\n\ndata: [google-fonts-analytics-archive](https://github.com/radames/google-fonts-analytics-archive)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"md`### Total Font Views\n\n 600 ? 3 : 2}rem;font-weight:700;\">\n${stats.totalViews.toLocaleString(\"en\")} =\n${formatBigNum(stats.totalViews)}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"viewof testText = Text({\n placeholder: \"Try your own text\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"viewof byYear = Select(\n new Map([\n [\"7 day\", \"7day\"],\n [\"30 day\", \"30day\"],\n [\"90 day\", \"90day\"],\n [\"1 year\", \"year\"]\n ]),\n {\n value: \"7day\",\n label: \"Views by Date Range\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"viewof fontsSearched = Search(stats, { placeholder: \"Search Font Name\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"selectedFonts = fontsStatsSelection.map(d => fonts.get(d.family))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"md`### Total by Browsers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"barChart(\n [...stats.byBrowser.entries()].map(e => [\n e[0],\n e[1] / d3.max([...stats.byOs.values()]),\n e[1]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"md`### Total by Operating Systems`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"barChart(\n [...stats.byOs.entries()].map(e => [\n e[0],\n e[1] / d3.max([...stats.byOs.values()]),\n e[1]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"formatBigNum = x => html`\n ${d3\n .format(\",.3s\")(x)\n .replace(/G/, 'B')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"function barChart(data) {\n return html`

\n ${data\n .sort((a, b) => b[1] - a[1])\n .map(\n (e, i) =>\n html.fragment`\n

${e[0]}

\n ${formatBigNum(e[2])}

\n `\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"family = family => {\n return html`\n\n${\n testText === \"\" ? family : testText\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"colors = {\n const s = d3.scaleOrdinal(d3.schemeTableau10.concat(d3.schemeSet2));\n s.domain([...stats.byBrowser.keys(), ...stats.byOs.keys()]);\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"md`todo:\n * Viz of most viewed fonts by OS/Browser\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"fonts = {\n const data = await fetch(\n \"https://raw.githubusercontent.com/radames/google-fonts-analytics-archive/main/fonts.json\"\n )\n .then(d => d.json())\n .catch(async e => await FileAttachment(\"fonts.json\").json());\n\n return new Map(data.familyMetadataList.map(e => [e.family, e]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"icons = {\n const data = await fetch(\n \"https://raw.githubusercontent.com/radames/google-fonts-analytics-archive/main/icons.json\"\n )\n .then(d => d.json())\n .catch(async e => await FileAttachment(\"fonts.json\").json());\n\n // return new Map(data.familyMetadataList.map(e => [e.family, e]));\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"import {\n Input,\n Search,\n Table,\n Select,\n Text,\n html,\n bind\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"await fetch(\n \"https://raw.githubusercontent.com/radames/google-fonts-analytics-archive/main/stats.json\"\n).then(d => d.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"