31: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" } } )32: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) }); }33:[{"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}] 2f:{"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"},{"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"},{"id":732,"value":"viewof testText = Text({\n placeholder: \"Try your own text\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":362,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"viewof fontsSearched = Search(stats, { placeholder: \"Search Font Name\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"selectedFonts = fontsStatsSelection.map(d => fonts.get(d.family))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"md`### Total by Browsers`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1657,"value":"md`### Total by Operating Systems`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":456,"value":"formatBigNum = x => html`\n ${d3\n .format(\",.3s\")(x)\n .replace(/G/, 'B')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":369,"value":"family = family => {\n return html`\n\n${\n testText === \"\" ? family : testText\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1695,"value":"md`todo:\n * Viz of most viewed fonts by OS/Browser\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":22,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}