31:Tc5a,groupedBarChart = { const w = Math.min(width, 600); const h = Math.floor((width * 1) / 5); const container = html`

Patient Pain by Device Setting

`; const data = groupedBarData; const margin = { top: 10, right: 30, bottom: 20, left: 80 }; const y0 = d3 .scaleBand() .domain(data.map((d) => d[groupPrimaryKey])) .rangeRound([h - margin.bottom, margin.top]) .paddingInner(0.2); const y1 = d3 .scaleBand() .domain(groupKeys) .rangeRound([0, y0.bandwidth()]) .padding(0.05); const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d3.max(groupKeys, (key) => d[key]))]) .nice() .rangeRound([margin.left, w - margin.right]); const color = d3.scaleOrdinal().range(["#8a89a6", "#98abc5"]); const xAxis = (g) => g .attr("transform", `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(x).tickFormat((d) => `${d3.format(".0f")(d * 100)}%`)) .call((g) => g.select(".domain").remove()); const yAxis = (g) => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y0)) .call((g) => g.select(".domain").remove()); const legend = (svg) => { const g = svg .attr("transform", `translate(${w},0)`) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(color.domain().slice()) .join("g") .attr("transform", (d, i) => `translate(0,${i * 20})`); g.append("rect") .attr("x", -19) .attr("width", 19) .attr("height", 19) .attr("fill", color); g.append("text") .attr("x", -24) .attr("y", 9.5) .attr("dy", "0.35em") .text((d) => d); }; const svg = d3.select(container).select("svg"); const painGroups = svg .append("g") .selectAll("g") .data(data) .join("g") .attr("transform", (d) => `translate(0, ${y0(d[groupPrimaryKey])})`) .classed(groupPrimaryKey, true); const barGroups = painGroups .selectAll("g.bar") .data((d) => groupKeys.map((key) => ({ key, value: d[key] }))) .join("g") .attr("transform", (d) => `translate(${x(0)}, ${y1(d.key)})`); barGroups .append("rect") .attr("height", y1.bandwidth()) .attr("width", (d) => x(d.value) - x(0)) .attr("fill", (d) => color(d.key)); barGroups .append("text") .attr("y", y1.bandwidth() / 2) .attr("dy", "0.35em") .attr("x", (d) => x(d.value) - x(0) - 25) .attr("fill", "#333") .attr("font-family", "sans-serif") .attr("font-size", 10) .text((d) => `${d3.format(".0f")(d.value * 100)}%`); // svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(legend); return container; }32:[] 2f:{"title":"SWD Synthesize: Explore Various Views","cells":[{"id":0,"value":"md`# SWD Synthesize: Explore Various Views \n\nWeek Two exercise from class.\n\nThe prompt was to use four different chart types to visualize the same data, and to discuss their trade offs. \n\nThe charts I chose to try out with the data are:\n- [Pie Charts](#pie_charts)\n- [Bar Charts](#bar_charts)\n- [Stacked Bar Charts](#stacked_bars)\n- [Grouped Bar Chart](#grouped_bar_chart)\n- [Slope Graph](#slope_graph)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"the_data = md`## The Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`The data is fairly simple; it represents the ratio of responses from surveyed patients on their pain level using a medical device in an \"on\" and \"off\" state. Note that the values represent percentages, I've shown them as decimal values to make it easier to create the charts below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`

${Table(data)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`One simple way to report this data might be with a sentence, for example:\n\n> For patients surveyed there was a **+${\n 58 - 36\n}% change in improved pain level** _when using_ the device, and a –9% change in worsened pain levels _when not using_ the device.\n\n> When using the device, we saw that **58% of patients surveyed reported an improvement** _when using the device_, compared to 36% of patients surveyed reporting an improvement _when not using the device_.\n\n> When using the device, we saw that **58% of patients surveyed reported an improvement**, while 19% reported worsening pain when _not using it_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"pie_charts = md`## Pie Charts\n\nWhile I know they're \"evil\", I think in this case because the data is so simple that it's okay to use them. Using color semantically helps here as well with comparing slices between the two pies. That being said, I feel that it's a little bit difficult to make comparisons between them. There's something that doesn't feel quite right to me when comparing one slice of one pie to the corresponding slice of another.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"PieChart(pie1data, { name: d => d.name, value: d => d.value, width: pieWidth })","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"PieChart(pie2data, { name: d => d.name, value: d => d.value, width: pieWidth })","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"pieWidth = window.innerWidth > 600 ? Math.round(width / 2) : width","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"pie1data = data.map((d) => ({ name: d.pain_level, value: d.on * 100 }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"pie2data = data.map((d) => ({ name: d.pain_level, value: d.off * 100 }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"import {PieChart} from \"@d3/pie-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"bar_charts = md`## Bar Charts\n\nUsing bar charts makes it a little easier to make comparisons between the two categories, however I still don't like having to look back and forth between charts to compare corresponding bars.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"### Bar Chart for \"On\"","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"Plot.barY(bar1data, {x: \"name\", y: \"value\", fill: \"steelblue\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"### Bar Chart for \"Off\"","pinned":false,"hidden":false,"mode":"md"},{"id":675,"value":"Plot.barY(bar2data, {x: \"name\", y: \"value\", fill: \"steelblue\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"bar1data = Object.assign(\n [],\n data.map((d) => ({ name: d.pain_level, value: d.on })),\n { format: \"%\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"bar2data = Object.assign(\n [],\n data.map((d) => ({ name: d.pain_level, value: d.off })),\n { format: \"%\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"grouped_bar_chart = md`## Grouped Bar Chart\n\nOut of all the choices I prefer the grouped bar chart for this communicating this data in a chart form. Bars are easy for viewers to visually decode and thus easier to compare than other encodings such as area or angle. Placing bars for both the \"on\" and \"off\" categories next to one another makes the comparison for each pain level measurement straightforward. It also saves space and reduces the amount of ink needed to show the data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"groupedBarData = data.slice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"groupPrimaryKey = data.columns[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"groupKeys = data.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"stacked_bars = md`## Stacked Bars\n\nUsing 100% horizontally stacked bars helps make it slightly easier to compare the difference in On and Off for the worsened and improved categories, but makes it a bit more difficult to compare the unchanged category. With more time I would add the exact values within the bars themselves to help with the comparisons.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"stackedBars({\n data: seriesOn,\n name: \"On\",\n height: 60,\n titlePrefix: \"\",\n showLegend: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"stackedBars({\n data: seriesOff,\n name: \"Off\",\n height: 60,\n titlePrefix: \"\",\n showLegend: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"legend({ color: stackedColor, title: \"Legend\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"stackedDataOn = data.slice().reverse().reduce((acc, cur) => {\n acc[cur.pain_level] = cur.on;\n return acc;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"stackedDataOff = data\n .slice()\n .reverse()\n .reduce((acc, cur) => {\n acc[cur.pain_level] = cur.off;\n return acc;\n }, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"stackedColor.range([\n ...d3.schemeRdYlBu[3]\n // d3.schemeRdYlBu[5][0],\n // d3.schemeRdYlBu[5][2],\n // d3.schemeRdYlBu[5][4]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"import {\n chart as stackedBars,\n series as seriesOn,\n color as stackedColor,\n legend\n} with { stackedDataOn as datum } from \"@clhenrick/u-s-county-population-age-distribution\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"import { series as seriesOff } with { stackedDataOff as datum } from \"@clhenrick/u-s-county-population-age-distribution\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"slope_graph = md`## Slope Graph\n\nThe slanted lines in the slope graph highlight the change between the device being on or off. It's clear right away that there was a drop in \"improved\" and an increase for both \"unchanged\" and \"worsened\". \n\nOne interesting thing I noticed with the slope graph is that it will read differently depending whether or not you have \"On\" or \"Off\" on the left hand side. With \"On\" on the left I feel that it emphasizes the greater amounts in \"unchanged\" and \"worsened\" for \"Off\", while with \"Off\" on the left it seems to emphasize \"improved\".\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"SlopeChart(slopeData, { x: d => d.position, y: d => d.value, z: d => d.pain_level })","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"SlopeChart(slopeData.slice().reverse(), { x: d => d.position, y: d => d.value, z: d => d.pain_level })","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"slopeData = {\n let on = data.map(({ pain_level, on }) => ({ pain_level, position: \"on\", value: on }))\n let off = data.map(({ pain_level, off }) => ({ pain_level, position: \"off\", value: off }))\n return [...on, ...off];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"import {SlopeChart} from \"@d3/slope-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = d3.csvParse(\n `pain_level,on,off\nimproved,0.58,.36\nunchanged,0.32,.45\nworsened,0.1,0.19`,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"import { Table } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}