25:["$","title",null,{"children":"Dot Plot - CT Healthcare Prices | Vivien Ngo | Observable"}] 49:T90c,tooltip = (selectionGroup, tooltipDiv) => { // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 8; selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on const datum = d3.select(this).datum(); showTooltip(); setContents({ Payor: titleCase(datum.Payor), NegotiatedCharge: d3.format("$0,")(datum.NegotiatedCharge) }); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } function setContents(datum) { // customize this function to set the tooltip's contents however you see fit tooltipDiv .selectAll("p") .data(Object.entries(datum)) .join("p") .filter(([key, value]) => value !== null && value !== undefined) .html( ([key, value]) => `${key}: ${ typeof value === "object" ? value.toLocaleString("en-US") : value }` ); } }4a:[{"id":"e7d25682afab16cf2cd849e216c46618190546dfa5245462d04583eecca258c169a2216916647e3f29f7c7bb32b01475ad70b4705a367928ba6e48e445f11694","href":"https://static.observableusercontent.com/files/e7d25682afab16cf2cd849e216c46618190546dfa5245462d04583eecca258c169a2216916647e3f29f7c7bb32b01475ad70b4705a367928ba6e48e445f11694","name":"final_cpts_sampled.csv","type":"text/csv","lastModified":1643998868325.803,"size":16347309},{"id":"7c228bdf108ec8b478067b295bb3e316330a929510448a8a836f3f156890d14133a130883e3c447ed9d0f022b05c0f762d4b9b8cc18b31d22510d56c1da6d092","href":"https://static.observableusercontent.com/files/7c228bdf108ec8b478067b295bb3e316330a929510448a8a836f3f156890d14133a130883e3c447ed9d0f022b05c0f762d4b9b8cc18b31d22510d56c1da6d092","name":"edited_code_descriptions@1.csv","type":"text/csv","lastModified":1644266880333.547,"size":68114}] 29:{"id":"e2890a25fce3e582","slug":null,"title":"Dot Plot - CT Healthcare Prices","thumbnail":"92087e1605eaa6c9053ae1e9effa7bf892749096e11006144fdb4bebe847d614","access_level":"public","create_time":"$D2022-02-04T18:20:20.301Z","update_time":"$D2022-03-09T19:13:01.702Z","view_time":null,"first_public_time":"$D2026-01-27T06:15:38.789Z","has_unpublished_edits":null,"fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5e7e6b2ba0cbe919","login":"vivngo","name":"Vivien Ngo","avatar_url":"https://avatars-next.observableusercontent.com/25571f516d9c5457dcca291277ca551455b75984fa8b1502b279172f336ce7d8","tier":"starter_2024","bio":"graphics editor","followed_by_you":false,"follows_you":false},"version":596,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d0a0424ccf2ec9b","login":"vivngo","name":"Vivien Ngo","avatar_url":"https://avatars-next.observableusercontent.com/25571f516d9c5457dcca291277ca551455b75984fa8b1502b279172f336ce7d8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7d0a0424ccf2ec9b","login":"vivngo","name":"Vivien Ngo","avatar_url":"https://avatars-next.observableusercontent.com/25571f516d9c5457dcca291277ca551455b75984fa8b1502b279172f336ce7d8","tier":null,"role":"editor"},{"type":"team","id":"5e7e6b2ba0cbe919","login":"vivngo","name":"Vivien Ngo","avatar_url":"https://avatars-next.observableusercontent.com/25571f516d9c5457dcca291277ca551455b75984fa8b1502b279172f336ce7d8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dot Plot - CT Healthcare Prices","cells":[{"id":0,"value":"# Dot Plot - CT Healthcare Prices\nThis is just to figure out how to encode the different prices for a medical procedures across different hospitals and different insurance providers.\n\nYou can change the category of operations, and the operation below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof category = {\n let categories = getUniqueValues(operations, \"Chosen Category\").sort(\n sortAlphabetical\n );\n yield Inputs.select(categories, {\n label: \"Category\",\n format: (x) => x,\n value: categories.find(\n (t) => t === \"Maternity, newborn care and delivery, including surgeries\"\n )\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof operation = Inputs.select(\n operations\n .filter(\n (d) => d[\"Chosen Category\"] === category\n // (d) => d.shortened_code_description && d[\"Chosen Category\"] === category\n )\n .sort((a, b) => {\n return sortAlphabetical(\n a.shortened_code_description,\n b.shortened_code_description\n );\n }),\n {\n label: \"Operation\",\n format: (x) =>\n x.shortened_code_description ? x.shortened_code_description : x.Code,\n value: operations.find(\n (t) => t.shortened_code_description === \"Cesarean delivery only\"\n )\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"

Cost of ${operation.shortened_code_description ? operation.shortened_code_description : operation.Code}

${operation.code_description}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"legend = {\n const domain = getUniqueValues(costData, \"HealthSystem\");\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, domain.length * 20 + 30]);\n\n svg\n .append(\"text\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"transform\", \"translate(0, 15)\")\n .text(\"Health systems\");\n\n const legend_g = svg\n .selectAll(\"g\")\n .data(domain)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0, ${i * 20 + 40})`);\n\n legend_g\n .selectAll(\"rect\")\n .data((d, i) => [d])\n .join(\"rect\")\n .attr(\"height\", 15)\n .attr(\"width\", 15)\n .attr(\"y\", -13)\n .attr(\"opacity\", 0.8)\n .attr(\"fill\", (d) => color(d));\n\n legend_g\n .selectAll(\"text\")\n .data((d, i) => [d])\n .join(\"text\")\n .attr(\"dx\", 20)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"chart = {\n const container = d3.select(\n html`

${tooltipTemplate}

`\n );\n const tooltipDiv = container.select(\".tooltip\");\n const svg = container.append(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(costData)\n .join(\"circle\")\n .filter((d) => d[\"Hospital\"])\n .attr(\"cx\", (d) => x(d[\"NegotiatedCharge\"]))\n .attr(\"cy\", (d) => y(d[\"Hospital\"]) + y.bandwidth() / 2)\n .attr(\"r\", 6)\n .attr(\"opacity\", 0.5)\n .attr(\"fill\", (d) => color(d[\"HealthSystem\"]))\n .call(tooltip, tooltipDiv);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"### Tooltip code\nReference: https://observablehq.com/@clhenrick/tooltip-d3-convention","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":520,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"tooltipTemplate = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"tooltipId = DOM.uid().id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"function resetStyle(selection) {\n selection.attr(\"stroke\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"function setStyle(selection) {\n selection.attr(\"stroke\", \"#333\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"# Let's see how this is made...\nGoing to break the steps leading up to the above visualization:\n- [Data processing](https://observablehq.com/d/e2890a25fce3e582#cell-213)\n- [Graphic setup](https://observablehq.com/d/e2890a25fce3e582#cell-245)\n- [Scales](https://observablehq.com/d/e2890a25fce3e582#cell-256)\n- [Appendix](https://observablehq.com/d/e2890a25fce3e582#cell-277)\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"## Data processing\nFirst, we read in the two data files.\n\n### 1. Operations\n`operations` is used to look up the codes for each medical procedure. The most important keys are:\n - the numerical `Code`\n - the `shortened_code_description` we use to describe it\n - and the `Chosen Category` we use to group it with other procedures.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"operations = FileAttachment(\"edited_code_descriptions@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"### 2. Cost Data\n`data` is the cost for each operation (code)/hospital/health provider combination.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"data = FileAttachment(\"final_cpts_sampled.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"I filter this down to `costData` based on which of these rows have a `Code` attribute that I can use to lookup the medical procedure.\n\nFurthermore, within this subset, I also sort the rows by:\n- the health system with the lowest minimum charge\n- within each health system, the hospital with the lowest minimum charge\n- if they have the lowest minimum, I default to the one with the lowest maximum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"costData = data\n .filter((d) => d.Code === operation.Code)\n .sort((a, b) => {\n return d3.ascending(a.NegotiatedCharge, b.NegotiatedCharge);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"getUniqueValues(costData, \"Hospital\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"---\n## Graphic setup\n\nHere, I'm setting up the constants to determine how big my canvas is for my D3 visualization. The width is responsive to the page, but I need to set a `height`. And I also set up numbers for all four sides of my `margin`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({ top: 25, right: 20, bottom: 35, left: 240 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"---\n## Scales\nNext I create the scales & axes for my x- and y-values.\n\nFor my x-values, I use `scaleLinear` because the variable `NegotiatedCharge` represents a numerical dollar value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(costData, (d) => d[\"NegotiatedCharge\"]))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .style(\"font-size\", 14)\n .call(d3.axisTop(x).tickFormat(d3.format(\"$~s\")).ticks(3))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"For my y-values, I use `scaleBand` because I'm using `Hospital`, which is a list of names, i.e. a categorical variable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"y = d3\n .scaleBand()\n .domain(getUniqueValues(costData, \"Hospital\"))\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"font-size\", 14)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"Making a color scale based on `HealthSystem`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"color = d3\n .scaleOrdinal(d3.schemeSet2)\n .domain(getUniqueValues(data, \"HealthSystem\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Swatches(color, {\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"---\n\n## Appendix\nHere I'm just storing some utility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"sortAlphabetical = (a, b) => {\n if (a < b) {\n return -1;\n }\n if (a > b) {\n return 1;\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"// https://stackoverflow.com/a/23282057\ngetUniqueValues = (data, key) => {\n return data\n .map((d) => d[key])\n .filter((item, i, ar) => ar.indexOf(item) === i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"// https://stackoverflow.com/a/42987923\ntitleCase = (str) => {\n return str\n .toLowerCase()\n .split(\" \")\n .map((x) => x[0].toUpperCase() + x.slice(1))\n .join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null