xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>US Breast Cancer Disparities</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; color: #000099; background-color: #F2F2F2; padding: 5px; max-width: 800px; } h1 {border-bottom: solid 5px #000099; font-size: 18pt;} .chartTitle{font-size: 14px;} .rightAligned { position: absolute; width: 250px; left: 560px; text-align: right; font-size: 14px; } svg {background-color: white;} .axis path, .axis line { fill: none; stroke: gray; shape-rendering: crispEdges; } .axis text {font-family: sans-serif;} .x.axis text {font-size: 12px; fill: gray;} .y.axis text {font-size: 12px; fill: gray;} text.axisLabel {font-size: 12px; fill: gray;} path.dataline:hover {stroke-width: 5;} text.datalineLabel {font-size: 13px;} </style> </head> <body> <h1>Breast Cancer Disparities in the U.S.</h1> <p> <!-- JS code to declare the global variables --> <script type="text/javascript"> var svgw = 800; var svgh = 600; var pad = { top: 10, right: 100, bottom: 40, left: 100 }; var yExtra = 5; // Extra y-axis room at the top </script> <p>Black women have traditionally had lower breast cancer incidence rates than White women in the United States. In recent years, rates among White women have dropped while rates among Black women have not and currently rates are roughly the same. </p> <div> <span class="chartTitle">Age-Adjusted Incidence Rates </span> <span class="rightAligned"><label> <input type="checkbox" name="ciCheckBox1val" value="ciChecked" id="ciCheckBox1" onClick="ciChange1()" checked /> Show confidence intervals </label></span> </div> <!-- JS code to define the first SVG --> <script type="text/javascript"> var svg1 = d3.select("body") // An empty SVG .append("svg") .attr("width", svgw).attr("height", svgh); </script> <p>Because Black women's breast cancer incidence rates have traditionally been relatively low, some Black women have a perception that they do not need to get mammograms. Breast cancer screening rates are lower among Black women and they are more often diagnosed with advanced stage disease. Consequently, Black women have higher breast cancer mortality rates than White women. </p> <div> <span class="chartTitle">Age-Adjusted Mortality Rates </span> <span class="rightAligned"><label> <input type="checkbox" name="ciCheckBox2val" value="ciChecked" id="ciCheckBox2" onClick="ciChange2()" checked /> Show confidence intervals </label></span> </div> <!-- JS code to define the second SVG --> <script type="text/javascript"> var svg2 = d3.select("body") // An empty SVG .append("svg") .attr("width", svgw).attr("height", svgh); </script> <p>Many state and local cancer control programs are currently focused on raising awareness among Black women of the importance of getting mammograms. <p>Incidence rates are from the cancer registries of the National Cancer Institute's SEER that have been reporting cancer incidence since 1973. These registries cover about 25% of the population. Mortality rates are from the National Center for Health Statistics and cover the whole U.S. </p> <p style="font-size:12px">Data source: The National Cancer Institute SEER Program ( <a href="https://seer.cancer.gov/canques/" target="_blank"> https://seer.cancer.gov/canques/</a> ).</p> <!-- JS code to generate the two graphs --> <script type="text/javascript"> // Measure selection: var meas1W = { base: "IncWhite_rate", cil: "IncWhite_cil", cih: "IncWhite_cih"}; var meas1B = { base: "IncBlack_rate", cil: "IncBlack_cil", cih: "IncBlack_cih"}; var meas2W = { base: "MortWhite_rate", cil: "MortWhite_cil", cih: "MortWhite_cih"}; var meas2B = { base: "MortBlack_rate", cil: "MortBlack_cil", cih: "MortBlack_cih"}; //Global variables: var dataset; // These need to be global so they can be seen from the checkbox functions: var errorArea1W; var errorArea1B; var errorArea2W; var errorArea2B; //Set up date formatting as years var dateFormat = d3.time.format("%Y"); // Scale and axis variables: var xScale = d3.time.scale() .range([ pad.left, svgw - pad.right ]); var yScale = d3.scale.linear() .range([ pad.top, svgh - pad.bottom ]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(10) .tickFormat(function(d) {return dateFormat(d);}) ; var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(6); //Configure the line generators var line1W = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y(function(d) { return yScale(d[meas1W.base]); }); var line1B = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y(function(d) { return yScale(d[meas1B.base]); }); var line2W = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y(function(d) { return yScale(d[meas2W.base]); }); var line2B = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y(function(d) { return yScale(d[meas2B.base]); }); //Configure the area generators based on confidence intervals var area1W = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y0(function(d) { return yScale(d[meas1W.cil]) }) .y1(function(d) { return yScale(d[meas1W.cih]); }); var area1B = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y0(function(d) { return yScale(d[meas1B.cil]) }) .y1(function(d) { return yScale(d[meas1B.cih]); }); var area2W = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y0(function(d) { return yScale(d[meas2W.cil]) }) .y1(function(d) { return yScale(d[meas2W.cih]); }); var area2B = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y0(function(d) { return yScale(d[meas2B.cil]) }) .y1(function(d) { return yScale(d[meas2B.cih]); }); //Load in contents of CSV file, check for errors, and call generateVis functions d3.csv("usBreastCancerRates.csv", function(error, data) { if (error) { console.log(error); //Log the error. } else { console.log(data); //Log the data. dataset = data; generateVis1(); generateVis2(); } }); // generateVis1: function to generate the incidence graph var generateVis1 = function() { // Set up the input domains xScale.domain([ d3.min(dataset, function(d) { return dateFormat.parse(d.Year); }), d3.max(dataset, function(d) { return dateFormat.parse(d.Year); }) ]); yScale.domain([ d3.max(dataset, function(d) { return Math.max(+d[meas1W.cih], +d[meas1B.cih]) + yExtra; }), // Pick one - set y-axis start at 0 or the smallest y value: 0 // d3.min(dataset, function(d) // { return Math.min(+d[meas1W.cil], +d[meas1B.cil]) - yExtra; }) ]); // Generate the confidence interval areas using the area generators // Do this before the lines so the line hover and mouseover will work errorArea1W = svg1.data([ dataset ]) // A global variable .append("path") .attr("class", "dataarea") .attr("d", area1W) .attr("fill", "green") .attr("stroke", "none") .attr("opacity", 0.5); errorArea1B = svg1.data([ dataset ]) // A global variable .append("path") .attr("class", "dataarea") .attr("d", area1B) .attr("fill", "purple") .attr("stroke", "none") .attr("opacity", 0.5); // Generate the data lines using the line generators svg1.data([ dataset ]) .append("path") .attr("class", "dataline") .attr("d", line1W) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2) .append("title") .text("White women"); svg1.append("text") // label the dataline .attr("class", "datalineLabel") .attr("x", svgw - pad.right + 5).attr("y", 80) .attr("fill", "green") .text("White women"); svg1.data([ dataset ]) .append("path") .attr("class", "dataline") .attr("d", line1B) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 2) .append("title") .text("Black women"); svg1.append("text") // label the dataline .attr("class", "datalineLabel") .attr("x", svgw - pad.right + 5).attr("y", 110) .attr("fill", "purple") .text("Black women"); // Add the axes and labels: svg1.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (svgh - pad.bottom) + ")") .call(xAxis); svg1.append("g") .attr("class", "y axis") .attr("transform", "translate(" + pad.left + ",0)") .call(yAxis); svg1.append("text") // label the x-axis .attr("class", "axisLabel") .attr("x", pad.left - 2) .attr("y", svgh - pad.bottom + 32) .text("Year of diagnosis"); // Label the y-axis - multiple text lines svg1.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 10) .text("Cases per"); svg1.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 25) .text("100,000"); svg1.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 40) .text("people"); svg1.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 55) .text("per year"); }; // End generateVis1 function // generateVis2: function to generate the mortality graph var generateVis2 = function() { // Set up the input domains xScale.domain([ d3.min(dataset, function(d) { return dateFormat.parse(d.Year); }), d3.max(dataset, function(d) { return dateFormat.parse(d.Year); }) ]); yScale.domain([ d3.max(dataset, function(d) { return Math.max(+d[meas2W.cih], +d[meas2B.cih]) + yExtra; }), // Pick one - set y-axis start at 0 or the smallest y value: 0 // d3.min(dataset, function(d) // { return Math.min(+d[meas2W.cil], +d[meas2B.cil]) - yExtra; }) ]); // Generate the confidence interval areas using the area generators // Do this before the lines so the line hover and mouseover will work errorArea2W = svg2.data([ dataset ]) // A global variable .append("path") .attr("class", "dataarea") .attr("d", area2W) .attr("fill", "green") .attr("stroke", "none") .attr("opacity", 0.5); errorArea2B = svg2.data([ dataset ]) // A global variable .append("path") .attr("class", "dataarea") .attr("d", area2B) .attr("fill", "purple") .attr("stroke", "none") .attr("opacity", 0.5); // Generate the data lines using the line generators svg2.data([ dataset ]) .append("path") .attr("class", "dataline") .attr("d", line2W) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2) .append("title") .text("White women"); svg2.append("text") // label the dataline .attr("class", "datalineLabel") .attr("x", svgw - pad.right + 5).attr("y", 308) .attr("fill", "green") .text("White women"); svg2.data([ dataset ]) .append("path") .attr("class", "dataline") .attr("d", line2B) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 2) .append("title") .text("Black women"); svg2.append("text") // label the dataline .attr("class", "datalineLabel") .attr("x", svgw - pad.right + 5).attr("y", 200) .attr("fill", "purple") .text("Black women"); // Add the axes and labels: svg2.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (svgh - pad.bottom) + ")") .call(xAxis); svg2.append("g") .attr("class", "y axis") .attr("transform", "translate(" + pad.left + ",0)") .call(yAxis); svg2.append("text") // label the x-axis .attr("class", "axisLabel") .attr("x", pad.left - 2) .attr("y", svgh - pad.bottom + 32) .text("Year of death"); // Label the y-axis - multiple text lines svg2.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 10) .text("Deaths per"); svg2.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 25) .text("100,000"); svg2.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 40) .text("people"); svg2.append("text") .attr("class", "axisLabel") .attr("x", 5).attr("y", pad.top + 55) .text("per year"); }; // End generateVis2 function // ciChange1: function to show or remove confidence intervals var ciChange1 = function() { if (document.getElementById("ciCheckBox1").checked) { var op=0.5; } else { var op=0; } console.log("Checkbox1 op: " + op) errorArea1W.transition() .duration(1000) .attr("opacity", op) errorArea1B.transition() .duration(1000) .attr("opacity", op) }; // End ciChange1 function // ciChange2: function to show or remove confidence intervals var ciChange2 = function() { if (document.getElementById("ciCheckBox2").checked) { var op=0.5; } else { var op=0; } console.log("Checkbox2 op: " + op) errorArea2W.transition() .duration(1000) .attr("opacity", op) errorArea2B.transition() .duration(1000) .attr("opacity", op) }; // End ciChange2 function </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js