Testing Post 3

Published on November 15th, 2021

We want to help you make educated healthcare decisions. While this post may have links to lead generation forms, this won’t influence our writing. We adhere to strict editorial standards to provide the most accurate and unbiased information.

Lorem Ipsum

if(!window.scrollama){ window.hc.loadScript(“https://cdn.healthcare.com/resources/content/js/scrollytelling/intersection-observer.js”); window.hc.loadScript(“https://cdn.healthcare.com/resources/content/js/scrollytelling/scrollama.js”, true, function() { /*BEGIN SCROLLAMA SCRIPT CODE*/ // d3 for convenience var main = d3.select(“main”); var scrolly = main.select(“#scrolly”); var figure = scrolly.select(“figure”); var article = scrolly.select(“article”); var step = article.selectAll(“.step”); // Initialize scrollama var scroller = scrollama(); // Window resize listener event function handleResize() { // Update height of step elements var stepH = Math.floor(window.innerHeight * 0.9); step.style(“height”, stepH + “px”); var figureHeight = window.innerHeight / 2; var figureMarginTop = (window.innerHeight – figureHeight) / 2 + 50; figure .style(“height”, figureHeight + “px”) .style(“top”, figureMarginTop + “px”); // Tell scrollama to update new element dimensions scroller.resize(); } // Scrollama event handlers function handleStepEnter(response) { // console.log(response); d3.selectAll(“svg”) .transition() .duration(50) .style(“opacity”, 0) .remove(); // Get the data step attribute var chartType = response.element.getAttribute(“data-step”); changeChart(chartType); // response.element.classList.add(‘active’) } d3.selectAll(“svg g circle.circles”) .remove(); function handleStepExit(response) { // console.log(response); d3.selectAll(“svg”) .transition() .duration(50) .style(“opacity”, 0) .remove(); // response.element.classList.remove(‘active’) } function init() { // Force resize on load to ensure proper dimensions are sent to scrollama handleResize(); // Setup the scroller, initialize trigger observations, bind scrollama event handlers scroller .setup({ step: “#scrolly article .step”, offset: 0.9, debug: true, }) .onStepEnter(handleStepEnter) .onStepExit(handleStepExit); // Setup resize event window.addEventListener(“resize”, handleResize); } // Kick things off init(); function changeChart(value) { // remove circles d3.selectAll(“.circles”) .remove(); if (value === “CarryDebt”) transitionCarryDebt(); else if (value === “KnowingDebt”) transitionKnowingDebt(); else if (value === “AmountOfDebt”) transitionAmountOfDebt(); else if (value === “FinancialCauses”) transitionFinancialCauses(); else if (value === “MedicalCauses”) transitionMedicalCauses(); else if (value === “SkipFood”) transitionSkipFood(); else if (value === “Discount”) transitionDiscount(); } // First chart shows things respondents skipped paying for function transitionCarryDebt() { d3.selectAll(“circle”) .remove(); (async () => { // D3 FORCE CODE //////////////////////////////////// ///////////// SVG Setup //////////// //////////////////////////////////// // margins for SVG const margin = { left: 50, right: 150, top: 100, bottom: 50, }; const svgWidth = 800; const svgHeight = svgWidth * 0.6; // helper calculated variables for inner width & height const height = svgHeight – margin.top – margin.bottom; const width = svgWidth – margin.left – margin.right; // add SVG const svg = d3 .select(“figure”) .append(“svg”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr( “transform”, “translate(” + margin.left + “,” + margin.top + “)” ); //////////////////////////////////// ///////////// Data wrangling /////// //////////////////////////////////// var xCenter = [100, 300, 500]; const data = await d3.csv(“https://content-static.healthcare.inc/data/Medical_Debt_Survey_2021Q1.csv”); // console.log(data); // Create array of objects const nodes = data.map(function (d, i) { return { radius: 3, category: d.Response, }; }); // console.log(nodes); //////////////////////////////////// ///////////// Scales /////////////// //////////////////////////////////// // xScale takes Response categories as domain and xCenter 3points as range xScale = d3 .scaleOrdinal() .domain([ “No, I don’t have medical debt.”, “Yes, I have medical debt.”, “Don’t know / Unsure”, ]) .range(xCenter); // Create and call xAxis const xAxis = svg .append(“g”) .attr(“transform”, “translate(0,” + height + “)”) // .call(d3.axisBottom(xScale)); //////////////////////////////////// ///////////// Force setup ////////// //////////////////////////////////// // Call forceSimulation, passing in the array of objects var simulation = d3 .forceSimulation(nodes) // .force(“charge”, d3.forceManyBody().strength(5)) .force( “x”, d3.forceX().x(function (d) { // ForceX function positions circles at 3 x positions defined by xScale return xScale(d.category); }) ) // ForceY function positions circles at half of height .force(“y”, d3.forceY(height / 2)) // Collide force function .force( // ForceCollide stops circular elements from overlapping “collision”, d3.forceCollide().radius(function (d) { return d.radius; }) ) .on(“tick”, ticked); //////////////////////////////////// ///////////// Draw ///////////////// //////////////////////////////////// // Callback function to update element positions after each tick function ticked() { // var circles = d3 // .select(“svg g”) svg.selectAll(“circle”) .data(nodes) .join(“circle”) .attr(“class”, “circles”) .attr(“r”, function (d) { return d.radius; }) .attr(“fill”, (d) => { if (d.category === “Yes, I have medical debt.”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“cx”, function (d) { return d.x; }) .attr(“cy”, function (d) { return d.y; }) } // Return Response column from csv in order to count each response type let responses = data.map(function (d) { return d.Response; }); // Count duplicates const counts = {}; responses.forEach((x) => { counts[x] = (counts[x] || 0) + 1; }); console.log(counts); // Add respondent figures svg .append(“text”) .attr(“x”, 100) .attr(“y”, 10) .attr(“font-size”, “16px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .style(“fill”, “#00aebe”) .html( “No: ” + counts[“No, I don’t have medical debt.”] ) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); svg .append(“text”) .attr(“x”, 300) .attr(“y”, 10) .attr(“font-size”, “16px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .attr(“fill”, “#FFB100”) .html( “Yes: ” + counts[“Yes, I have medical debt.”] ) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); svg .append(“text”) .attr(“x”, 500) .attr(“y”, 10) .attr(“font-size”, “16px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .attr(“fill”, “#00aebe”) .html(“Don’t know: ” + counts[“Don’t know / Unsure”]) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); // Add respondent percents svg .append(“text”) .attr(“x”, 100) .attr(“y”, 60) .attr(“font-size”, “30px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .style(“fill”, “#00aebe”) .html(“60%”) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); svg .append(“text”) .attr(“x”, 300) .attr(“y”, 60) .attr(“font-size”, “30px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .attr(“fill”, “#FFB100”) .html(“32%”) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); svg .append(“text”) .attr(“x”, 500) .attr(“y”, 60) .attr(“font-size”, “30px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .attr(“fill”, “#00aebe”) .html(“7%”) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); svg .append(“text”) .attr(“x”, width / 2) .attr(“y”, -50) .attr(“font-size”, “30px”) .attr(“font-weight”, 700) .attr(“font-family”, “proxima nova”) .attr(“text-anchor”, “middle”) .style(“fill”, “#36535d”) .html(“Do you have medical debt?”) .attr(“opacity”, 0) .transition() .duration(3000) .attr(“opacity”, 1); })(); } // Second chart shows how many knew they would go in debt function transitionKnowingDebt() { d3.selectAll(“circle”) .remove(); (async () => { const data = [ { Answer: “Yes”, Response: 62, }, { Answer: “No”, Response: 27, }, { Answer: “Unsure”, Response: 12, } ]; // Set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 250 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(data, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( data.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(data) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Yes”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(data) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 50; }) .attr(“x”, (d) => { return x(+d.Response) – 10; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“Did you receive healthcare services knowing”) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, 30) .text(“that they would result in medical debt?”); })(); } // Third chart shows skipped services function transitionAmountOfDebt() { d3.selectAll(“.circles”) .remove(); (async () => { const data = [ { Answer: “$10,000 or more”, Response: 7, }, { Answer: “$5000 to $9,999”, Response: 7, }, { Answer: “$2500 to $4,999”, Response: 16, }, { Answer: “$1,000 to $2,499”, Response: 23, }, { Answer: “$500 to $999”, Response: 18, }, { Answer: “Less than $500”, Response: 18, }, { Answer: “Other”, Response: 3, }, ]; // Set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 250 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); const sortedData = data .slice() .sort((a, b) => d3.descending(+a.Response, +b.Response)); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(data, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( data.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); ; svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(data) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Dental”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(data) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 25; }) .attr(“x”, (d) => { return x(+d.Response) – 10; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“How much medical debt do you owe?”); })(); } // Fourth chart shows how to pay function transitionFinancialCauses() { d3.selectAll(“.circles”) .remove(); (async () => { const data = [ { Answer: “My plan didn’t cover the service”, Response: 44, }, { Answer: “My deductible was too high”, Response: 30, }, { Answer: “My coinsurance was too high”, Response: 18, }, { Answer: “The hospital billed me incorrectly”, Response: 8, } ]; // set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 280 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); const sortedData = data .slice() .sort((a, b) => d3.descending(+a.Response, +b.Response)); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(sortedData, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( sortedData.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(sortedData) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Don’t know”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(sortedData) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 40; }) .attr(“x”, (d) => { return x(+d.Response) – 10; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“If you have health insurance but still incurred medical debt”) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, 30) .text(“for a service, what was the reason?”); })(); } // Fifth chart shows medical causes of debt function transitionMedicalCauses() { d3.selectAll(“.circles”) .remove(); (async () => { const data = [ { Answer: “Accident/Injury”, Response: 17, }, { Answer: “Dental, vision or hearing services”, Response: 15, }, { Answer: “Chronic diseases”, Response: 15, }, { Answer: “Chronic pain”, Response: 13, }, { Answer: “Infectious diseases”, Response: 10 }, { Answer: “Mental health treatment”, Response: 8, }, { Answer: “Pregnancy/Birth services”, Response: 4, } ]; // set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 280 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); const sortedData = data .slice() .sort((a, b) => d3.descending(+a.Response, +b.Response)); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(sortedData, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( sortedData.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(sortedData) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Accident/Injury”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(sortedData) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 23; }) .attr(“x”, (d) => { return x(+d.Response) – 10; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“What are the top medical expenses incurred”) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, 30) .text(“to cause your medical debt?”); })(); } // Sixth chart shows things skipped due to debt function transitionSkipFood() { d3.selectAll(“.circles”) .remove(); (async () => { const data = [ { Answer: “Travel”, Response: 41, }, { Answer: “Home improvement”, Response: 40, }, { Answer: “Big-ticket purchases”, Response: 30, }, { Answer: “Entertainment”, Response: 29, }, { Answer: “Gift giving”, Response: 29, }, { Answer: “Food”, Response: 22, }, { Answer: “Not applicable”, Response: 20, }, { Answer: “Rent or mortgage”, Response: 18, }, { Answer: “Fitness”, Response: 14, } ]; // set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 280 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); const sortedData = data .slice() .sort((a, b) => d3.descending(+a.Response, +b.Response)); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(sortedData, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( sortedData.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(sortedData) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Food”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(sortedData) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 21; }) .attr(“x”, (d) => { return x(+d.Response) – 8; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“If medical debt is preventing you from purchasing something”) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, 30) .text(“which of the following have you skipped?”); })(); } // Seventh chart shows people’s negotiated discounts function transitionDiscount() { d3.selectAll(“circles”) .remove(); (async () => { const data = [ { Answer: “0-20%”, Response: 22, }, { Answer: “20-40%”, Response: 10, }, { Answer: “40-60%”, Response: 9, }, { Answer: “60-80%”, Response: 3, }, { Answer: “80-100%”, Response: 2, } ]; // set the dimensions and margins of the graph var margin = { top: 100, right: 10, bottom: 100, left: 280 }; const svgWidth = 1000; const svgHeight = svgWidth * 0.5; (width = svgWidth – margin.left – margin.right), (height = svgHeight – margin.top – margin.bottom); // Append the svg object to the body of the page var svg = d3 .select(“figure”) .append(“svg”) .attr(“preserveAspectRatio”, “xMidYMid meet”) .attr(“viewBox”, `0 0 ${svgWidth} ${svgHeight}`) // responsive width & height .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); const sortedData = data .slice() .sort((a, b) => d3.descending(+a.Response, +b.Response)); // Add X axis var x = d3 .scaleLinear() .domain([ 0, d3.max(sortedData, function (d) { return +d.Response; }), ]) .range([10, width]) .nice(); // svg.append(“g”).call(d3.axisTop(x)); // Y axis var y = d3 .scaleBand() .range([0, height]) .domain( sortedData.map(function (d) { return d[“Answer”]; }) ) .padding(0.1); svg.append(“g”).call(d3.axisLeft(y).tickSize(0)).selectAll(“.tick text”); //Draw bars svg .selectAll(“myBars”) .data(sortedData) .enter() .append(“rect”) .attr(“x”, x(0)) .attr(“y”, function (d) { return y(d[“Answer”]); }) .attr(“width”, function (d) { return x(0); }) .attr(“height”, y.bandwidth()) .attr(“fill”, (d) => { if (d[“Answer”] === “Don’t know”) { return “#FFB100”; } else { return “#00aebe”; } }) .attr(“class”, “bars”); // Animate bars svg .selectAll(“rect”) .transition() .duration(1500) .delay(500) .ease(d3.easeBounceOut) .attr(“width”, function (d) { return x(+d.Response); }); // Draw percent text svg .selectAll(“myText”) .data(sortedData) .enter() .append(“text”) .attr(“class”, “score”) .attr(“y”, (d) => { return y(d[“Answer”]) + 30; }) .attr(“x”, (d) => { return x(+d.Response) – 10; }) .style(“fill”, “white”) .style(“font-family”, “Proxima Nova”) .style(“font-size”, “1.25em”) .style(“font-weight”, 700) .style(“text-anchor”, “end”) .style(“opacity”, 0) .transition() .duration(300) .delay(2000) .style(“opacity”, 1) .text((d) => { return Math.floor(+d.Response) + “%”; }); // Peripherals svg .append(“text”) .attr(“x”, 10) .attr(“y”, -30) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, -40) .style(“font-size”, “1.5em”) .style(“font-weight”, 600) .style(“fill”, “#36535d”) .text(“If you negotiated your debt down by what percent “) .append(“tspan”) .attr(“x”, 10) .attr(“dy”, 30) .text(“were you able to get it discounted?”); })(); } /*END SCROLLAMA SCRIPT CODE*/ }); }

The survey shows over one in three Americans aged 18 and over carries medical debt.

Over six in ten American adults with medical debt received healthcare in full knowledge it would put them in debt.

For over half, the amount of debt was over $1,000.

Many Americans are being driven into medical debt despite having health insurance.

Accidents/injuries are the top driver of debt.

Two in ten U.S. adults with medical debt skip food due to their debt.

Almost half of Americans with medical debt tried to negotiate.

Scroll down for survey details.

rect { filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1)); } circle { filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1)); } #scrolly { position: relative; padding: 1rem; } article { position: relative; padding: 0; width: 100%; margin: 0 auto; } figure { position: -webkit-sticky; position: sticky; top: 250px; ; z-index: -1; } .step { margin: 0 auto 2rem auto; width: 90%; } .step p { text-align: center; padding: 1rem; font-size: 2.5rem !important; background-color: rgba(65, 93, 102, 0.9); color: white !important; line-height: 1em !important; } /* Style scales */ .domain { opacity: 0; } g.tick line { opacity: 0; } g.tick text { font-weight: 700; font-size: 1.75em; color: #36535d; } .scrollama__debug-offset { opacity: 0; } .highlight { color: #FFB100; } .floating-hero-text { position: relative; top: 150px; font-weight: 700; opacity: 0.8; font-size: 3em !important; line-height: 1.25em !important; color: white !important; } .step:last-child { margin-bottom: -300px !important; } @media only screen and (max-width: 600px) { .step p { text-align: center; padding: 1rem; font-size: 1.5rem !important; background-color: rgba(65, 93, 102, 0.9); color: white !important; } .floating-hero-text { font-weight: 700 !important; font-size: 1.75em !important; line-height: 1em !important; color: white !important; } }


Share this article