2a:null 2b:["$","title",null,{"children":"Census Reporter-type Coal charts with a few lines of code | Christopher L. Keller | Observable"}] 30:T631,md` Occasionally I want a straightforward way to visualize the distribution of individual datapoints along a continuum. I've always liked the way [Census Reporter](https://censusreporter.org/) and [Ryan Pitts](https://twitter.com/ryanpitts), [Joe Germuska](https://twitter.com/JoeGermuska), [Ian Dees](https://twitter.com/iandees) and [Sara Schnadt](https://twitter.com/SaraSchnadt) charted distribution using ["Circles on a Line" — or Coal — charts](https://censusreporter.org/data/distribution/?table=B28002&geo_ids=04000US35,040|01000US&primary_geo_id=04000US35) This manages to recreate Coal charts — with HTML, CSS and a bit of JavaScript — in a reusable way. To use this chart in your Observable notebook, simply import from this notebook: \`\`\`js import { coalChart } from "@chrislkeller/census-reporter-type-coal-chart" \`\`\` **Options**: * **key**: Text or values you want to display on hover. * **value**: Text or values you want to display on hover. * **title**: A string value for a title to be displayed as a H2. **Sources**: * Census Reporter [JS](https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/js/comparisons.js#L717) to build COAL charts. * Census Report [CSS](https://github.com/censusreporter/censusreporter/blob/47ee559d3939ec00d2e39e1f540b277bc50bbff8/censusreporter/apps/census/static/css/charts.css#L450) to build COAL charts. **Contributors**: * [Alex Garcia](https://observablehq.com/@asg017) * [Chris Keller](https://observablehq.com/@chrislkeller) `31:Tbca,internetSubscriptions = [ { "name": "Alabama", "value": 81.93590138 }, { "name": "Alaska", "value": 87.97180005 }, { "name": "Arizona", "value": 87.40421526 }, { "name": "Arkansas", "value": 80.08897887 }, { "name": "California", "value": 89.96086982 }, { "name": "Colorado", "value": 91.20649026 }, { "name": "Connecticut", "value": 88.80229399 }, { "name": "Delaware", "value": 88.90040639 }, { "name": "District of Columbia", "value": 87.49528415 }, { "name": "Florida", "value": 86.97322432 }, { "name": "Georgia", "value": 85.18888243 }, { "name": "Hawaii", "value": 88.17964363 }, { "name": "Idaho", "value": 88.80933249 }, { "name": "Illinois", "value": 86.15936766 }, { "name": "Indiana", "value": 84.20557672 }, { "name": "Iowa", "value": 84.43118936 }, { "name": "Kansas", "value": 85.44849512 }, { "name": "Kentucky", "value": 83.37669809 }, { "name": "Louisiana", "value": 80.72565471 }, { "name": "Maine", "value": 85.36761399 }, { "name": "Maryland", "value": 89.22361433 }, { "name": "Massachusetts", "value": 89.11347277 }, { "name": "Michigan", "value": 86.16864993 }, { "name": "Minnesota", "value": 88.28013361 }, { "name": "Mississippi", "value": 77.03023643 }, { "name": "Missouri", "value": 85.04708671 }, { "name": "Montana", "value": 85.65112384 }, { "name": "Nebraska", "value": 87.25481046 }, { "name": "Nevada", "value": 85.76214391 }, { "name": "New Hampshire", "value": 89.46002556 }, { "name": "New Jersey", "value": 89.54444926 }, { "name": "New Mexico", "value": 78.94053591 }, { "name": "New York", "value": 86.45067178 }, { "name": "North Carolina", "value": 85.44218144 }, { "name": "North Dakota", "value": 84.41822582 }, { "name": "Ohio", "value": 85.59572885 }, { "name": "Oklahoma", "value": 83.74752784 }, { "name": "Oregon", "value": 89.32635362 }, { "name": "Pennsylvania", "value": 85.90177973 }, { "name": "Rhode Island", "value": 87.82510671 }, { "name": "South Carolina", "value": 82.85381709 }, { "name": "South Dakota", "value": 85.24614258 }, { "name": "Tennessee", "value": 83.13482654 }, { "name": "Texas", "value": 86.38825389 }, { "name": "Utah", "value": 91.06084358 }, { "name": "Vermont", "value": 84.08361781 }, { "name": "Virginia", "value": 86.88336252 }, { "name": "Washington", "value": 91.38990689 }, { "name": "West Virginia", "value": 81.43248532 }, { "name": "Wisconsin", "value": 86.48479462 }, { "name": "Wyoming", "value": 88.09623898 } ]32:T1444,coalChart = function(data, valueof = a => a, options = {}) { // right here... // this is all Alex Garcia (@asg017) if (arguments.length < 3 && typeof valueof === 'object') { options = valueof; valueof = a => a; } // hire him let coal = {}; coal.min = d3.min(data, valueof); coal.max = d3.max(data, valueof); coal.mean = d3.mean(data, valueof); coal.median = d3.median(data, valueof); coal.xScale = d3 .scaleLinear() .range([0, 100]) .domain([coal.min, coal.max]); function drawChart() { return html`

${options.title ? html`

${options.title}

` : ""}

${'key' && 'value' in options ? d[options.key] + ':
' + d[options.value] : d}
Min: ${coal.min}
Median: ${coal.median}
Mean: ${coal.mean}
Max: ${coal.max}

`; } let dom = drawChart(); return dom; }33:[] 2e:{"id":"d67264e3c8a1a2ed","slug":"census-reporter-type-coal-chart","title":"Census Reporter-type Coal charts with a few lines of code","thumbnail":"b8158af0b873074c73d8de20e27ecb17686257b25087fd3c4fd4189875379bfd","access_level":"public","create_time":"$D2021-03-22T20:52:58.593Z","update_time":"$D2021-03-24T04:27:55.626Z","view_time":null,"first_public_time":"$D2021-03-22T22:49:37.389Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":684,"publish_version":684,"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":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"role":"editor"},{"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,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Census Reporter-type Coal charts with a few lines of code","cells":[{"id":171,"value":"bannerTitleTwoLine(\n \"Census Reporter-type Coal charts\", \"with a few lines of code\",\n \"linear-gradient(#00022e, black, #00022e)\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"examplesHeader = md`\n----\n## Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"coalChart(internetSubscriptions, d => d.value, {\n key: \"name\",\n value: \"value\",\n title: \"Types of Internet Subscriptions in Household\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"randomArray = Array.from({ length: 100 }, (v, i) => i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"coalChart(randomArray, {title: \"How many dots does it take to get to 100\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"coalChart([{ firstName: \"Alex\", age: 3 }, { firstName: \"Boris\", age: 7 }, { firstName: \"Chris\", age: 10 }], d => d.age, {key: \"firstName\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"importsHeader = md`\n----\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"import { bannerTitle, bannerTitleTwoLine } from \"@observablehq/banner\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2f:"$2e:body"