2e:null 2f:["$","title",null,{"children":"Medical Lab Diagrams | Luke Murray | Observable"}] 34:T650,notes = md`# Medical Lab Diagrams ${await FileAttachment("chem7.png").image()} Fishbone charts (maybe also called skeleton diagrams) are a type of shorthand found in medicine so that doctors do not have to write out the names and units for common measurements. The most common fishbone charts are the Complete Blood Count chart, the Chem 7 Chart, the Chem 10 chart, and the Liver Enzyme chart. Although these charts originated in paper notes they are now used as simple data visualizations in some electronic health record applications because they can rapidly convey common information with fewer labels than an equivalent table. There seems to be a lack of information about fishbone charts online with most practitioners describing them as intrinsic knowledge which is passed on without being formally recorded. I was able to find some examples on [stack exchange](https://medicalsciences.stackexchange.com/questions/17847/which-lab-value-skeleton-diagrams-are-used-to-display-results-for-cbc-chemistry) and [khan academy](https://www.khanacademy.org/science/health-and-medicine/lab-values-unit/lab-values/v/introduction-to-lab-values-and-normal-ranges) and [twitter](https://twitter.com/DavidSteensma/status/1280900821639553025). The khan acaedemy reference is by far the best reference I found. They also seem to show up when you type [lab value diagram](https://www.google.com/search?q=lab+value+diagrams&sxsrf=ALeKk01xpV7Pa_0MJvkjtJ0rWSrprTqZ4Q:1611089189019&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiD7b_27qjuAhXGnuAKHVviAIUQ_AUoAXoECCIQAw&cshid=1611089258669345&biw=2560&bih=1328) into google images. `35:T9d5,chem7 = { const chartHeight = 32; const chartWidth = 210; const fontSize = 16; const x = d3 .scaleLinear() .domain([0, 1]) .range([0, chartWidth]); const y = d3 .scaleLinear() .domain([0, 1]) .range([chartHeight, 0]); let xDist = .07; const chem7Data = { na: { value: 100.55, isAbnormal: true }, k: { value: 100.55, isAbnormal: false }, ci: { value: 100.55, isAbnormal: false }, co2: { value: 100.55, isAbnormal: true }, bun: { value: 100.55, isAbnormal: true }, cr: { value: 100.55, isAbnormal: false }, glucose: { value: 100.55, isAbnormal: true } }; const skeletonLines = svg` `; const text = svg` ${chem7Data.na.value} ${chem7Data.ci.value} ${chem7Data.bun.value} ${chem7Data.k.value} ${chem7Data.co2.value} ${chem7Data.cr.value} ${chem7Data.glucose.value} `; return svg` `; }36:T7ed,cbc = { // rendering variables const chartHeight = 32; const chartWidth = 150; const fontSize = 16; const x = d3 .scaleLinear() .domain([0, 1]) .range([0, chartWidth]); const y = d3 .scaleLinear() .domain([0, 1]) .range([chartHeight, 0]); const cbcData = { wbc: { value: 100.55, isAbnormal: false }, hemoglobin: { value: 100.55, isAbnormal: true }, hematocrit: { value: 100.55, isAbnormal: false }, platelets: { value: 100.55, isAbnormal: true } }; let xDist = .05; const centerOffset = .33; const skeletonLines = svg` `; const text = svg` ${cbcData.wbc.value} ${cbcData.hemoglobin.value} ${cbcData.hematocrit.value} ${cbcData.platelets.value} `; return svg` `; }37:[{"id":"a1df804e2abf232834cfc669f88af439220ca5d77c83444fda7bc2a1098d8d5de18111cb4716b81654fafe166c9894c866e3269adb0246f1064c00631f35d050","href":"https://static.observableusercontent.com/files/a1df804e2abf232834cfc669f88af439220ca5d77c83444fda7bc2a1098d8d5de18111cb4716b81654fafe166c9894c866e3269adb0246f1064c00631f35d050","name":"chem7.png","type":"image/png","lastModified":1611092211101.78,"size":5402}] 32:{"id":"25217121ed3f4f1d","slug":"medical-lab-diagrams","title":"Medical Lab Diagrams","thumbnail":"5a5efa17409d7e00636e8b09088dbce0a7f5b7549726c07cee7338d56402d867","access_level":"public","create_time":"$D2021-01-18T21:38:37.925Z","update_time":"$D2021-10-08T19:29:42.099Z","view_time":null,"first_public_time":"$D2021-01-19T21:31:50.446Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":395,"publish_version":395,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Medical Lab Diagrams","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof svgHeight = slider({\n min: 0,\n max: 500,\n step: 1,\n value: 50,\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"chem7Title = md`## Chem 7 Prototype`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"cbcTitle = md`## CBC Prototype`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`\nThe most challenging part of creating these charts is making sure and lines are proportionally to each other regardless of the size of the SVG.\n\nLuckily it is pretty easy to preserve aspect ratios in SVG.\nWe just need to use the viewbox attribute.\nWhen the SVG is given a viewbox we can define the contents of the SVG in the viewbox coordinate system.\nWhen the viewbox scales up to fill space in the DOM, the size of the elements in the SVG scale up proportionally to each other.\nBy default SVGs preserve aspe\n\nI wanted the svg to stay on the left so I use preserveAsepctRatio xMinYMid to center the height of the elements and keep the viewbox left aligned in the viewport.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"