25:["$","title",null,{"children":"Hello, Sparks - a typeface for creating sparklines in text | Max Bo | Observable"}] 4c:T53d,# Hello, [Sparks](https://tools.aftertheflood.com/sparks/) - a typeface for creating sparklines in text

![Demo of sparkline construction](https://aftertheflood.com/wp-content/uploads/2018/01/spark-typing-v2.gif)

[Source](https://tools.aftertheflood.com/sparks/)

> Sparks uses OpenType’s contextual alternates feature to perform simple replacement operations on numbers. > Sparks has been distributed under the [SIL Open Font License](https://github.com/aftertheflood/sparks/blob/master/OFL.txt). This notebook provides helpers for: 1. Constructing and rendering Sparks strings from JavaScript lists 2. Rendering Sparks strings with `Plot.text` It extends the demo [After the Flood _Sparks_ typeface](https://observablehq.com/@tomgp/after-the-flood-i-sparks-i-typeface), built by [Tom Pearson](https://observablehq.com/@tomgp). Sparks was built by [After the flood](https://aftertheflood.com/), a design consultancy based in London. They have made the source code available on [GitHub](https://github.com/aftertheflood/sparks). --- ## Usage ### Importing 1. Import all the helpers: ```js import { Sparks, font, styles } from "@mjbo/sparks" ``` 2. **Evaluate** `font` and `styles` in their own cells:

4d:T4b8,0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
0{0,10,20,30,40,50,60,70,80,90,100}100
4e:T535,class Sparks { static bar(data, { weight, domain } = {}) { const c = Sparks.getClass("bar", { weight }); const s = Sparks.slug(data, { domain }); return htl.html`${s}`; } static dot(data, { weight = 3, domain } = {}) { const c = Sparks.getClass("dot", { weight }); const s = Sparks.slug(data, { domain }); return htl.html`${s}`; } static dotline(data, { weight = 3, domain } = {}) { const c = Sparks.getClass("dotline", { weight }); const s = Sparks.slug(data, { domain }); return htl.html`${s}`; } static slug(data, { domain } = {}) { const first = _.first(data); const ns = translate(data, { domain }).join(","); const last = _.last(data); return `${first}{${ns}}${last}`; } static getFamily(variation, { weight = 3 } = {}) { return FAMILY_BY_VARIATION_BY_WEIGHT[variation][weight]; } static getClass(variation, { weight = 3 } = {}) { return ( `sparks ${variation}-` + STYLE_BY_VARIATION_BY_WEIGHT[variation][weight] ); } static redlabel(string) { return htl.html`${string}`; } static blacklabel(string) { return htl.html`${string}`; } }4f:Tf91,airportWeather = [ { name: "JFK", latitude: 40.6413, longitude: -73.7781, observations: [ { time: "10:00", air_temp: 8.5 }, { time: "11:00", air_temp: 9.2 }, { time: "12:00", air_temp: 9.8 }, { time: "13:00", air_temp: 10.1 }, { time: "14:00", air_temp: 10.3 }, { time: "15:00", air_temp: 10.0 }, { time: "16:00", air_temp: 9.5 }, { time: "17:00", air_temp: 8.8 }, { time: "18:00", air_temp: 8.2 }, { time: "19:00", air_temp: 7.8 }, { time: "20:00", air_temp: 7.5 }, { time: "21:00", air_temp: 7.2 }, { time: "22:00", air_temp: 7.0 }, { time: "23:00", air_temp: 6.8 } ] }, { name: "LGA", latitude: 40.7769, longitude: -73.874, observations: [ { time: "10:00", air_temp: 8.8 }, { time: "11:00", air_temp: 9.5 }, { time: "12:00", air_temp: 10.0 }, { time: "13:00", air_temp: 10.4 }, { time: "14:00", air_temp: 10.5 }, { time: "15:00", air_temp: 10.2 }, { time: "16:00", air_temp: 9.6 }, { time: "17:00", air_temp: 9.0 }, { time: "18:00", air_temp: 8.4 }, { time: "19:00", air_temp: 8.0 }, { time: "20:00", air_temp: 7.7 }, { time: "21:00", air_temp: 7.4 }, { time: "22:00", air_temp: 7.1 }, { time: "23:00", air_temp: 6.9 } ] }, { name: "EWR", latitude: 40.6895, longitude: -74.1745, observations: [ { time: "10:00", air_temp: 8.2 }, { time: "11:00", air_temp: 9.0 }, { time: "12:00", air_temp: 9.6 }, { time: "13:00", air_temp: 10.0 }, { time: "14:00", air_temp: 10.2 }, { time: "15:00", air_temp: 9.9 }, { time: "16:00", air_temp: 9.3 }, { time: "17:00", air_temp: 8.6 }, { time: "18:00", air_temp: 8.0 }, { time: "19:00", air_temp: 7.6 }, { time: "20:00", air_temp: 7.3 }, { time: "21:00", air_temp: 7.0 }, { time: "22:00", air_temp: 6.8 }, { time: "23:00", air_temp: 6.6 } ] }, { name: "TEB", latitude: 40.8501, longitude: -74.0608, observations: [ { time: "10:00", air_temp: 8.4 }, { time: "11:00", air_temp: 9.2 }, { time: "12:00", air_temp: 9.8 }, { time: "13:00", air_temp: 10.2 }, { time: "14:00", air_temp: 10.4 }, { time: "15:00", air_temp: 10.1 }, { time: "16:00", air_temp: 9.5 }, { time: "17:00", air_temp: 8.8 }, { time: "18:00", air_temp: 8.2 }, { time: "19:00", air_temp: 7.8 }, { time: "20:00", air_temp: 7.5 }, { time: "21:00", air_temp: 7.2 }, { time: "22:00", air_temp: 7.0 }, { time: "23:00", air_temp: 6.8 } ] }, { name: "HPN", latitude: 41.067, longitude: -73.7076, observations: [ { time: "10:00", air_temp: 7.8 }, { time: "11:00", air_temp: 8.6 }, { time: "12:00", air_temp: 9.3 }, { time: "13:00", air_temp: 9.8 }, { time: "14:00", air_temp: 10.0 }, { time: "15:00", air_temp: 9.7 }, { time: "16:00", air_temp: 9.0 }, { time: "17:00", air_temp: 8.3 }, { time: "18:00", air_temp: 7.7 }, { time: "19:00", air_temp: 7.3 }, { time: "20:00", air_temp: 7.0 }, { time: "21:00", air_temp: 6.7 }, { time: "22:00", air_temp: 6.5 }, { time: "23:00", air_temp: 6.3 } ] }, { name: "ISP", latitude: 40.7952, longitude: -73.1002, observations: [ { time: "10:00", air_temp: 8.0 }, { time: "11:00", air_temp: 8.8 }, { time: "12:00", air_temp: 9.5 }, { time: "13:00", air_temp: 9.9 }, { time: "14:00", air_temp: 10.1 }, { time: "15:00", air_temp: 9.8 }, { time: "16:00", air_temp: 9.2 }, { time: "17:00", air_temp: 8.5 }, { time: "18:00", air_temp: 7.9 }, { time: "19:00", air_temp: 7.5 }, { time: "20:00", air_temp: 7.2 }, { time: "21:00", air_temp: 6.9 }, { time: "22:00", air_temp: 6.7 }, { time: "23:00", air_temp: 6.5 } ] } ]50:[{"id":"db8435c11df750a48632c672c39042147b33cc9c4ec7a3a0bdac09c92a4e6c63acf39369fb761fef0f010b9d0d62f7f03edd7dc01c78b8435ab34aa5caeaba9b","href":"https://static.observableusercontent.com/files/db8435c11df750a48632c672c39042147b33cc9c4ec7a3a0bdac09c92a4e6c63acf39369fb761fef0f010b9d0d62f7f03edd7dc01c78b8435ab34aa5caeaba9b","name":"airportWeather.json","type":"application/json","lastModified":1677796484948.916,"size":33165},{"id":"1448db981b6b670e0b4bbfde7ef9010112e911853c2cbc7ff36098905a03fa3eae752a28b1d3bddb3af5db9b7ab188ef70123772cbed673243c7a5def5bef781","href":"https://static.observableusercontent.com/files/1448db981b6b670e0b4bbfde7ef9010112e911853c2cbc7ff36098905a03fa3eae752a28b1d3bddb3af5db9b7ab188ef70123772cbed673243c7a5def5bef781","name":"Screen Shot 2022-11-24 at 11.41.39 am.png","type":"image/png","lastModified":1669254132004.274,"size":33877},{"id":"e7110e8fe5658bd2529c88ead6fb9056c566beca2a719c3a1eb006e636c69fd7f8e6d81f8d780500bc5769a88dc2b1b9d3994d57b8aed115ee229987b68c7913","href":"https://static.observableusercontent.com/files/e7110e8fe5658bd2529c88ead6fb9056c566beca2a719c3a1eb006e636c69fd7f8e6d81f8d780500bc5769a88dc2b1b9d3994d57b8aed115ee229987b68c7913","name":"Screen Shot 2022-11-24 at 11.41.17 am.png","type":"image/png","lastModified":1669254142099.901,"size":54991},{"id":"41e11efdc27cfb3591b9d3d145d86f50b5109a39131529f82d0c4bbd9f56f9c7f42e33a14fbe4f1ab934ffdda640e2f7619bec03dd927376d1b135e3dd6542d2","href":"https://static.observableusercontent.com/files/41e11efdc27cfb3591b9d3d145d86f50b5109a39131529f82d0c4bbd9f56f9c7f42e33a14fbe4f1ab934ffdda640e2f7619bec03dd927376d1b135e3dd6542d2","name":"image@2.png","type":"image/png","lastModified":1669255060162.081,"size":18296}] 48:{"id":"68b66a23a0d71ec6","slug":"hello-sparks","title":"Hello, Sparks - a typeface for creating sparklines in text","thumbnail":"149ecbb22294ba42fc3f57882883559c628d011875226fda3b987aca6438c0d3","access_level":"public","create_time":"$D2022-11-23T23:37:48.048Z","update_time":"$D2026-01-10T04:03:46.959Z","view_time":null,"first_public_time":"$D2022-11-23T23:39:21.010Z","has_unpublished_edits":null,"fork":false,"stars":37,"starred":false,"owner":{"type":"team","id":"cc48459e4293f942","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":"starter_2024","bio":"Software Engineer @ Canva, ex-Google | music, color theory, Australian democracy, situated software & generative art","followed_by_you":false,"follows_you":false},"version":1417,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null,"role":"editor"}],"comments":[{"id":"16669a9ec930199c","reply_to_id":null,"content":"1","create_time":"$D2022-11-25T06:33:53.979Z","update_time":"$D2022-11-25T06:34:16.616Z","resolved":true,"user":{"type":"individual","id":"b0fa27a53ad3ec82","login":"gashini-ips","name":"IPS","avatar_url":"https://avatars-next.observableusercontent.com/b4f8e2c28f37a2a5c67e2c3ff9672a8201088b956b07aceaae2ca020c3c72774","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"697dca7b1f39efd7","slug":"hello-x","title":"Hello, X","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"type":"notebook","body":{"titling":"auto","title":"Hello, Sparks - a typeface for creating sparklines in text","cells":[{"id":10,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"---\n\n### Variations\n\nThere are currently three variations: bars, dots, and dot-lines (line charts with tiny dots at the joints between segments): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"\n---\n### Weights\n\n`dot` and `dotline` have 5 weight variants:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"$${Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 1 })}
\n${Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 2 })}
\n${Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 3 })}
\n${Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 4 })}
\n${Sparks.dot([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 5 })}
","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"$${Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 1 })}
\n${Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 2 })}
\n${Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 3 })}
\n${Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 4 })}
\n${Sparks.dotline([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 5 })}
","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"$${Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 1 })}
\n${Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 2 })}
\n${Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 3 })}
\n${Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 4 })}
\n${Sparks.bar([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], { weight: 5 })}
","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"but `bar` only has 4. Weight `1`, the `extranarrow` weight, doesn't exist. \n\nWe gracefully fall back to weight `2`, `narrow` if `weight: 1` is parameterized.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"---\n\n### Custom domain\n\nBy default, the ${tex`y`}-domain is automatically chosen to be ${tex`[min(\\texttt{data}), max(\\texttt{data})]`}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":521,"value":"Sparks.bar([4, 5, 6], { weight: 5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"Alternatively we can set a custom ${tex`y`} domain:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"Sparks.bar([4, 5, 6], { weight: 5, domain: [0, 10] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"Be careful that you don't clip your data presentation with a poorly specified domain! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"Sparks.bar([10, 11, 12], { weight: 5, domain: [0, 10] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"Sparks.bar([-3, -2, -1], { weight: 5, domain: [0, 10] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"---\n\n### Use with Plot\n\nUsing `Plot.text`'s `fontFamily` option, we can embed Sparklines into visualisations! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1136,"value":"fontFamily = Sparks.getFamily(\"bar\", { weight: 3 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"laGuardiaTemperatures = airportWeather[0].observations.map((o) => o.air_temp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"Sparks.slug(laGuardiaTemperatures, { domain: [8, 13] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"import {\n cityCollection,\n stationRollup\n} from \"@observablehq/noaa-weather-data-by-major-u-s-city\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"import {\n statesMesh,\n countiesMesh,\n nation\n} from \"@observablehq/plot-projections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"airportTemperatures = Plot.plot({\n caption: \"Temperature at airports on 2021-12-31, 10am-11pm\",\n projection: {\n type: \"mercator\",\n domain: {\n type: \"MultiPoint\",\n coordinates: [\n [-74.6, 40.6],\n [-74.6, 41.1],\n [-73.3, 40.6],\n [-73.3, 41.1]\n ]\n }\n },\n marks: [\n Plot.geo(countiesMesh, { strokeOpacity: 0.15 }),\n Plot.geo(statesMesh, { strokeOpacity: 0.5 }),\n Plot.geo(nation, {\n strokeWidth: 1.5\n }),\n Plot.text(airportWeather, {\n x: \"longitude\",\n y: \"latitude\",\n fontSize: 14,\n fontFamily: Sparks.getFamily(\"bar\", { weight: 3 }),\n text: (d) =>\n d.name +\n \"\\n\" +\n Sparks.slug(\n d.observations.map((o) => o.air_temp),\n { domain: [6, 11] }\n )\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"---\n\n### Annotations\n\nWant to annotate a sparkline? Well there's some [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)s for that:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":556,"value":"import { goog, amzn } from \"@observablehq/plot-test-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"googMonth = goog.data.slice(-29, -1).map((d) => Math.floor(d.Close))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"amznMonth = amzn.data.slice(-29, -1).map((d) => Math.floor(d.Close))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$${Sparks.redlabel`GOOG`} ${Sparks.dotline(googMonth)}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"$${Sparks.blacklabel`AMZN`} ${Sparks.dotline(amznMonth)}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"---\n\n### Manual construction\n\nBecause you've imported and evaluated the `styles` cell, you can still construct Sparks sparklines manually if you'd like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"$4d","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1245,"value":"or semi-manually with the `getClass` helper function. It shares calling semantics with the `getFamily` helper function. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1248,"value":"thickDotline = Sparks.getClass(\"dotline\", { weight: 4 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"0{0,10,20,30,40,50,60,70,80,90,100}100","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"---\n\n## Prior art on Observable\n\nThere's some alternative methods for creating inline graphics on Observable too. These include:\n\n#### [*Tiny Charts*](/@hamzaamjad/tiny-charts) by [Hamza Amjad](https://observablehq.com/@hamzaamjad)\n\n

\n\n#### [*Inline charts for Markdown*](/@kannankumar/inline-charts-for-markdown) by [Kannan Kumar](https://observablehq.com/@kannankumar)\n

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"\n---\n\n\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1188,"value":"### API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1346,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"### Font","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"font","database":"$undefined"},{"id":716,"value":"BAR_FAMILY_BY_WEIGHT = ({\n 1: \"Sparks-Bar-Narrow\",\n 2: \"Sparks-Bar-Narrow\",\n 3: \"Sparks-Bar-Medium\",\n 4: \"Sparks-Bar-Wide\",\n 5: \"Sparks-Bar-Extrawide\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"DOT_FAMILY_BY_WEIGHT = ({\n 1: \"Sparks-Dot-Extrasmall\",\n 2: \"Sparks-Dot-Small\",\n 3: \"Sparks-Dot-Medium\",\n 4: \"Sparks-Dot-Large\",\n 5: \"Sparks-Dot-Extralarge\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"DOTLINE_FAMILY_BY_WEIGHT = ({\n 1: \"Sparks-Dotline-Extrasmall\",\n 2: \"Sparks-Dotline-Small\",\n 3: \"Sparks-Dotline-Medium\",\n 4: \"Sparks-Dotline-Large\",\n 5: \"Sparks-Dotline-Extralarge\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"FAMILY_BY_VARIATION_BY_WEIGHT = ({\n bar: BAR_FAMILY_BY_WEIGHT,\n dot: DOT_FAMILY_BY_WEIGHT,\n dotline: DOTLINE_FAMILY_BY_WEIGHT\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"### Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1272,"value":"Unexpanded style definitions: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"styles","database":"$undefined"},{"id":167,"value":"BAR_STYLE_BY_WEIGHT = ({\n 1: \"narrow\", // extranarrow does not exist\n 2: \"narrow\",\n 3: \"medium\",\n 4: \"wide\",\n 5: \"extrawide\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"DOT_STYLE_BY_WEIGHT = ({\n 1: \"extrasmall\",\n 2: \"small\",\n 3: \"medium\",\n 4: \"large\",\n 5: \"extralarge\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"DOTLINE_STYLE_BY_WEIGHT = ({\n 1: \"extrathin\",\n 2: \"thin\",\n 3: \"medium\",\n 4: \"thick\",\n 5: \"extrathick\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"STYLE_BY_VARIATION_BY_WEIGHT = ({\n bar: BAR_STYLE_BY_WEIGHT,\n dot: DOT_STYLE_BY_WEIGHT,\n dotline: DOTLINE_STYLE_BY_WEIGHT\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"### Domains & scaling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"/*\n * All three of the variants use a fixed scale of 0–100.\n * If your data only goes to e.g., 10,\n * you’ll need to first translate your numbers to be out of 100,\n * otherwise you’ll end up rendering an especially tiny chart.\n */\nfunction translate(data, { domain } = {}) {\n let max = _.max(data);\n let min = _.min(data);\n\n // custom domain\n if (domain) {\n const [low, high] = domain;\n max = high;\n min = low;\n }\n\n const range = max - min;\n const scaling = 100 / (max - min);\n\n return data.map((d) => _.clamp(Math.floor((d - min) * scaling), 0, 100));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"#### Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"// should expand values around 50 to fill [0, 100]\ntranslate([30, 40, 50, 60, 70])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"// should halve all values\ntranslate([30, 40, 50, 60, 70], { domain: [0, 200] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"// should clamp first and last values\ntranslate([30, 40, 50, 60, 70], { domain: [40, 60] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"### Demo data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"airportStations = stationRollup.map((rollup) => rollup.station)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"airportWeather2 = _(cityCollection)\n .sortBy((observation) => observation.date)\n .groupBy((observation) => observation.station)\n .entries()\n .value()\n .map(([id, observations]) => ({\n id,\n observations: _.takeRight(observations, 14),\n ...airportStations.find((station) => station.id === id)\n }))\n .map((obj) => ({ ...obj, latitude: obj.lat, longitude: obj.lon }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null