2a:null 2b:["$","title",null,{"children":"Re-creating Census Reporter's COAL charts | Christopher L. Keller | Observable"}] 30:T422,html`

${d}
${d}
Min: ${coalCompare(data).min}
Median: ${coalCompare(data).median}
Mean: ${coalCompare(data).mean}
Max: ${coalCompare(data).max}

`31:T91b,coalStyle = html` `32:[] 2e:{"id":"bc9b106489839a2a","slug":"re-creating-census-reporters-coal-charts","title":"Re-creating Census Reporter's COAL charts","thumbnail":"cc4d7bbc6acd5f1273be49192c51983585adcf7362c6b8d4cb6ce656a9eb58e8","access_level":"public","create_time":"$D2021-03-22T22:07:40.016Z","update_time":"$D2021-03-22T22:07:40.016Z","view_time":null,"first_public_time":"$D2021-03-22T22:09:45.714Z","fork":{"id":"d67264e3c8a1a2ed","slug":"census-reporter-type-coal-chart","title":"Census Reporter-type Coal charts with a few lines of code","owner":{"id":"b1060e5bd7932c0c","login":"chrislkeller","name":"Christopher L. Keller"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b1060e5bd7932c0c","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":"starter_2024"},"version":135,"publish_version":135,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e214d36195dad3a","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":null}],"members":[{"type":"individual","id":"7e214d36195dad3a","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Re-creating Census Reporter's COAL charts","cells":[{"id":0,"value":"md`# Re-creating Census Reporter's COAL charts\n\nI've always liked the way [Census Reporter](https://censusreporter.org/) Ryan Pitts, Joe Germuska, Ian Dees and Sara Schnadt charted distribution using \"Circles on a Line\" — or COAL — charts: \n\nYou can see an example [here](https://censusreporter.org/data/distribution/?table=B28002&geo_ids=04000US35,040|01000US&primary_geo_id=04000US35).\n\nI've managed to kind of recreate them here using HTML, CSS and a tiny bit of JavaScript.\n\n**Sources**:\n\n* Census Reporter [JS](https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/js/comparisons.js#L717) to build COAL charts.\n\n* Census Report [CSS](https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/css/charts.css#L450) to build COAL charts.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"data = [3, 45, 13, 63, 100, 78, 94, 32, 12, 24]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"compareHeader = md`\n----\n## Calculate min, max, mean and median\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"function coalCompare(array) {\n return {\n min: d3.min(array),\n max: d3.max(array),\n mean: d3.mean(array),\n median: d3.median(array)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"cssHeader = md`\n----\n## CSS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"importsHeader = md`\n----\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"