31:[] 2f:{"title":"2024 30-Day Chart Challenge • Day 11 • Distribution • Mobile Friendly","cells":[{"id":0,"value":"# 2024 30-Day Chart Challenge • Day 11 • Distribution • Mobile Friendly","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"No data-insights this time 'round, but a focus on responsive chart design.\n\nBy using CSS media queries and Observable's spiffy `width` variable, we can resize some elements — like the annotation — when the display gets to a certain size. We can also switch chart types.\n\nHere, we resize the astute annotation on the horizontal bar chart then the width hits 750px and switch chart types completely (plus move the annotation outside the chart) when it gets down to phone-size.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"

${wide}

A very notable annotation.

\n ${long}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"wide = Plot.plot({\n width: width,\n marks: [\n Plot.barY(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n sort: { x: \"y\", reverse: true }\n }),\n Plot.text([\"A very notable annotation\"], {\n frameAnchor: \"top-right\",\n fontSize: (d) => (width > 750 ? \"40pt\" : \"20pt\")\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"long = Plot.plot({\n width: width,\n height: width * 2,\n marks: [\n Plot.barX(alphabet, {\n x: \"frequency\",\n y: \"letter\",\n sort: { y: \"x\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { style } from \"@hrbrmstr/hrbrthemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":45,"value":"html`${style}`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}