29:null 2a:["$","title",null,{"children":"Viewports.fyi | GnimOay | Observable"}] 2f:[{"id":"fad544ae49570ffa4152428c0f1709bce19a6360b5a541157e92f54bdd1b31e5e24d36bbded806a40cd1bc29d4b779073876e399628fe6a25052b17a3391021b","href":"https://static.observableusercontent.com/files/fad544ae49570ffa4152428c0f1709bce19a6360b5a541157e92f54bdd1b31e5e24d36bbded806a40cd1bc29d4b779073876e399628fe6a25052b17a3391021b","name":"data.json","type":"application/json","lastModified":1692715214719.958,"size":88102}] 2d:{"id":"6b57aeb01bc6caf0","slug":null,"title":"Viewports.fyi","thumbnail":"d9a517efa016ced051d856a53a6cf931ff222d62a37513ff17eec4752158b81f","access_level":"public","create_time":"$D2023-08-22T13:55:20.685Z","update_time":"$D2023-08-22T16:02:16.430Z","view_time":null,"first_public_time":"$D2023-08-22T13:55:20.685Z","fork":{"id":"7012061a800e7057","slug":"simple-svg","title":"Simple SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":377,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Viewports.fyi","cells":[{"id":0,"value":"# Viewports.fyi\na visualisation of data from https://viewports.fyi/ --> https://viewports.fyi/data.json","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":251,"value":"#### Treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"Treemap(\n { children: data },\n {\n // path: (d) => d.name.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n label: (d) => `${d.width} x ${d.height}`, // display text\n group: (d) => d.width + d.height, // for color; e.g. animate\n value: (d) => d.count, // area of each rect\n // title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), // hover text\n width,\n height: 600\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"viewof sliceStart = Inputs.range([1, data.length], {\n label: html`viewport amount`,\n step: 1,\n value: data.length\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"plotRects(dataView)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(data, {x: \"width\", y: \"count\", color: \"#ff77a7\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":233,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":213,"value":"maxAmount = Math.max(...dataView.map((d) => d.count))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"maxHeight = Math.max(...dataView.map((d) => d.height))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"maxWidth = Math.max(...dataView.map((d) => d.width))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"dataView=data.slice(data.length - sliceStart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"data = rawData.viewports.sort((a, z) => {\n const num10 = a.width > z.width ? 1 : a.width === z.width ? 0 : -1;\n const num1 = a.height > z.height ? 1 : a.height === z.height ? 0 : -1;\n return -(num10 * 10 + num1);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"rawData = FileAttachment(\"data.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"mutable selectedSvg = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"function pointermove(e) {\n const w = e.target.width.baseVal.value;\n const h = e.target.height.baseVal.value;\n mutable selectedSvg = `${w} × ${h}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"function plotRects(data) {\n const svg = html``;\n svg.onpointermove = pointermove;\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"import {Treemap} from \"@d3/treemap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"