25:["$","title",null,{"children":"Scatter Plot | bmdatavisualisation | Observable"}] 49:T218b,chart = { const width = 1000; const height = 1000; const margin = { left: 60, right: 30, top: 200, bottom: 70 }; const fontSize = 14; const chartDotRadius = 5; const dotOpacity = 0.3; const percentFormat = d3.format(".0%"); const percentFormatDecimal = d3.format(".2%"); let tooltip = d3.select(".gretaTooltip"); if (!tooltip.node()) { tooltip = d3 .select("body") .append("div") .attr("class", "gretaTooltip") .html(""); } const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const xMax = d3.max(chartDataset, (d) => d.cancerRate); const xScale = d3 .scaleLinear() .domain([0, xMax]) .range([0, width - margin.left - margin.right]) .nice(); const yMax = d3.max(chartDataset, (d) => d.vaccinationRate); const yScale = d3 .scaleLinear() .domain([0, yMax]) .range([height - margin.top - margin.bottom, 0]) .nice(); const annotations = [ { id: "malawi", note: { label: "MALAWI" }, x: margin.left + xScale(0.0007) - 3, y: margin.top + yScale(0.75) + chartDotRadius, connector: { end: "arrow" }, dy: 0, dx: -100 } ]; const makeAnnotations = d3_annotation .annotation() .type(d3_annotation.annotationLabel) .annotations(annotations); svg.append("g").attr("class", "annotation-group").call(makeAnnotations); svg .append("circle") .attr("r", chartDotRadius) .attr("cx", 10 + chartDotRadius) .attr("cy", 155) .attr("stroke-opacity", dotOpacity) .attr("fill-opacity", 0.1) .attr("fill", "#006d2c") .attr("stroke", "#006d2c"); svg .append("text") .attr("x", 15 + chartDotRadius * 2) .attr("y", 159) .attr("fill", "grey") .attr("font-size", fontSize) .text("national screening program in place"); svg .append("text") .attr("x", 10) .attr("y", 55) .attr("font-size", 30) .text("HPV vaccination: How the world can eliminate cervical cancer"); svg .append("text") .attr("x", 10) .attr("y", 85) .attr("font-size", fontSize + 2) .attr("fill", "grey") .text( "Evidence proves that the HPV vaccination has the power to eradicate Cervical Cancer." ); svg .append("text") .attr("x", 10) .attr("y", 110) .attr("font-size", fontSize) .attr("fill", "#A0A0A0") .text( "The world is waking up to this - vaccination rates are rising and cancer rates will slowly begin to drop. 11% of countries (ie MALAWI) with high cancer rates" ); svg .append("text") .attr("x", 10) .attr("y", 125) .attr("font-size", fontSize) .attr("fill", "#A0A0A0") .text( "are ahead of game already, having introduced a national screening and vaccination program in recent years." ); svg .append("text") .attr("x", 10) .attr("y", height - 2) .attr("font-size", 10) .attr("fill", "#A0A0A0") .text( "** data provided is incomplete - ideally we would trace the timespan from introduction of national vaccination programs -> 2022. Also, some countries have no vaccination or cancer rate data which needs investigation." ); svg .append("rect") .attr("x", margin.left + xScale(meanCancerRate)) .attr("y", margin.top + yScale(meanVaccinationRate)) .attr("width", width - margin.left - margin.right - xScale(meanCancerRate)) .attr("height", yScale(0) - yScale(meanVaccinationRate)) .attr("fill", "#fee0d2"); svg .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", xScale(meanCancerRate)) .attr("height", yScale(meanVaccinationRate)) .attr("fill", "#e5f5e0"); svg .append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 2) .attr("y", height - 18) .attr("text-anchor", "middle") .attr("font-size", fontSize) .attr("fill", "grey") .text("2022 rate of new cervical cancer cases"); svg .append("text") .attr("x", width - margin.right) .attr( "y", height - margin.bottom - (yScale(0) - yScale(meanVaccinationRate) + 5) ) .attr("text-anchor", "end") .attr("font-size", fontSize) .attr("fill", "#fb6a4a") .text("above average CANCER rate and below average VACCINATION rate"); svg .append("text") .attr("x", width - margin.right - 4) .attr( "y", fontSize * 3 + height - margin.bottom - (yScale(0) - yScale(meanVaccinationRate)) ) .attr("text-anchor", "end") .attr("font-size", fontSize * 3) .attr("fill", "#fb6a4a") .text(`${d3.format(".0%")(countAboveMeanInBoth / chartDataset.length)}`); svg .append("text") .attr("x", margin.left) .attr("y", margin.top - 4) .attr("text-anchor", "start") .attr("font-size", fontSize) .attr("fill", "#006d2c") .text("below average CANCER rate and above average VACCINATION rate"); svg .append("text") .attr("x", margin.left + 4) .attr("y", fontSize * 3 + margin.top) .attr("text-anchor", "start") .attr("font-size", fontSize * 3) .attr("fill", "#006d2c") .text(`${d3.format(".0%")(countBelowMeanInBoth / chartDataset.length)}`); svg .append("text") .attr("x", width - margin.right) .attr("y", margin.top - 4 + fontSize * 3) .attr("text-anchor", "end") .attr("font-size", fontSize * 3) .attr("fill", "#006d2c") .text(`${d3.format(".0%")(countAboveAverageBoth / chartDataset.length)}`); svg .append("text") .attr("x", width - margin.right - 4) .attr("y", margin.top - 4) .attr("text-anchor", "end") .attr("font-size", fontSize) .attr("fill", "#006d2c") .text("above average CANCER rate and above average VACCINATION rate"); svg .append("text") .attr( "transform", `translate(10,${ margin.top + (height - margin.top - margin.bottom + 10) / 2 }) rotate(-90)` ) .attr("text-anchor", "middle") .attr("font-size", fontSize) .attr("fill", "grey") .text("2022 Vaccination Rate in target population"); const xAxis = svg.append("g"); xAxis .call(d3.axisBottom(xScale).tickSizeOuter(0)) .attr("transform", `translate(${margin.left},${height - margin.bottom})`); xAxis.selectAll("path").style("stroke", "#F0F0F0"); xAxis.selectAll("line").attr("display", "none"); xAxis .selectAll("text") .attr("pointer-events", "none") .attr("font-weight", 300) .attr("fill", "grey") .attr("y", 15) .attr("font-size", fontSize) .text((d) => (d === 0 ? "" : percentFormatDecimal(d))); const yAxis = svg.append("g"); yAxis .call(d3.axisLeft(yScale).tickSizeOuter(0)) .attr("transform", `translate(${margin.left},${margin.top})`); yAxis.selectAll("path").style("stroke", "#F0F0F0"); yAxis.selectAll("line").attr("display", "none"); yAxis .selectAll("text") .attr("pointer-events", "none") .attr("font-weight", 300) .attr("x", -5) .attr("fill", "grey") .attr("font-size", fontSize) .text((d) => (d < 0 ? "" : percentFormat(d))); const dotGroup = svg .selectAll(".dotGroup") .data(chartDataset) .join((group) => { const enter = group.append("g").attr("class", "dotGroup"); enter.append("circle").attr("class", "dotCircle"); return enter; }); dotGroup.attr("transform", `translate(${margin.left},${margin.top})`); dotGroup .select(".dotCircle") .attr("r", chartDotRadius) .attr("cx", (d) => xScale(d.cancerRate)) .attr("cy", (d) => yScale(d.vaccinationRate)) .attr("stroke-opacity", dotOpacity) .attr("fill-opacity", 0.1) .attr("fill", (d) => (d.screeningInPlace ? "#006d2c" : "#fb6a4a")) .attr("stroke", (d) => (d.screeningInPlace ? "#006d2c" : "#fb6a4a")) .on("mouseover", (event, d) => { let tooltipText = `${d.country.toUpperCase()}
`; tooltipText += `Cancer rate: ${percentFormatDecimal( d.cancerRate )}
Vaccination rate: ${percentFormat(d.vaccinationRate)}
${ d.screeningInPlace ? "" : "" }Screening Program: ${d.screeningInPlace ? "Y" : "N"}`; tooltip .style("visibility", "visible") .style("top", `${event.pageY - 20}px`) .style("left", `${event.pageX + 20}px`) .html(tooltipText); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); return svg.node(); }4a:[{"id":"df902a012757b5f9c42a9a6c05f881dcfbf1c6ce541e6b48b30e0846daa36cede725d3c9f0d388c96a89b4d9c49ed3a61882f5a4b73733d0aa64158c65444205","href":"https://static.observableusercontent.com/files/df902a012757b5f9c42a9a6c05f881dcfbf1c6ce541e6b48b30e0846daa36cede725d3c9f0d388c96a89b4d9c49ed3a61882f5a4b73733d0aa64158c65444205","name":"rate-of-new-cervical-cancer-cases-gco.csv","type":"text/csv","lastModified":1736163391569.157,"size":4496},{"id":"5c22dc72117c0f8896aaf400f9451fa89d2b71127a6a497f8ca72f4bca85e1ef59f260ac64a32829e45c6d73dbeb511b4f2570d9fb271f04ccfb41acb28789ae","href":"https://static.observableusercontent.com/files/5c22dc72117c0f8896aaf400f9451fa89d2b71127a6a497f8ca72f4bca85e1ef59f260ac64a32829e45c6d73dbeb511b4f2570d9fb271f04ccfb41acb28789ae","name":"countries-with-national-cervical-cancer-screening-program.csv","type":"text/csv","lastModified":1736166028666.854,"size":17588},{"id":"42b4f83e8564044e18cad64a223f2203fa8a8f9fed0db9ea730b8bf40566af540030381dab375ea7bfcbce42f4499b081a05d4c52c97b987f4b734856e217496","href":"https://static.observableusercontent.com/files/42b4f83e8564044e18cad64a223f2203fa8a8f9fed0db9ea730b8bf40566af540030381dab375ea7bfcbce42f4499b081a05d4c52c97b987f4b734856e217496","name":"coverage-of-the-human-papillomavirus-vaccine.csv","type":"text/csv","lastModified":1736163362180.26,"size":23718}] 29:{"id":"5daf22eb94a21715","slug":null,"title":"Scatter Plot","thumbnail":"885124262dbb4acc2ba3a29c37c7e8ea88cc70504037abe195a1388f9ec6cd7d","access_level":"public","create_time":"$D2025-01-06T11:35:35.121Z","update_time":"$D2025-12-06T18:29:19.341Z","view_time":null,"first_public_time":"$D2025-01-06T21:05:39.393Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"83f5a5fb6fe280ff","login":"bmdatavisualisation","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a158843df5971e68866096807cebb835fff8d443036113d0fbd4b85e4b67e90","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":343,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null,"bio":"Bringing data to life with the power of d3.js.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"83f5a5fb6fe280ff","login":"bmdatavisualisation","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a158843df5971e68866096807cebb835fff8d443036113d0fbd4b85e4b67e90","tier":"starter_2024","role":"editor"},{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scatter Plot","cells":[{"id":0,"value":"# Scatter Plot\n\n#### Makeover Monday 6th Jan 2025 - 2 hour challenge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"I set myself the challenge of doing what I could with the [Makeover Monday Data](https://ourworldindata.org/hpv-vaccination-world-can-eliminate-cervical-cancer) within a time limit as an excuse to showcase a scatter plot with basic annotations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"style = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"countAboveAverageBoth = chartDataset.filter(\n (f) =>\n f.vaccinationRate >= meanVaccinationRate && f.cancerRate > meanCancerRate\n).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"countBelowMeanInBoth = chartDataset.filter(\n (f) =>\n f.cancerRate <= meanCancerRate && f.vaccinationRate >= meanVaccinationRate\n).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"countAboveMeanInBoth = chartDataset.filter(\n (f) =>\n f.cancerRate > meanCancerRate && f.vaccinationRate < meanVaccinationRate\n).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"countrySet = {\n return JSON.stringify(\n Array.from(\n chartDataset.reduce((arr, entry) => {\n arr.add(entry.isoCode);\n return arr;\n }, new Set())\n ).join(\",\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"meanCancerRate = d3.mean(chartDataset, (d) => d.cancerRate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"meanVaccinationRate = d3.mean(chartDataset, (d) => d.vaccinationRate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chartDataset = {\n return rateOfNewCervicalCancerCasesGco.reduce((acc, entry) => {\n const matchingScreeningData = countriesWithNationalCervicalCancerScreening\n .filter((f) => f.Code === entry.Code)\n .sort((a, b) => d3.ascending(a.Year, b.Year));\n const matchingVaccinationData = coverageOfTheHumanPapillomavirusVaccine\n .filter((f) => f.Code === entry.Code)\n .sort((a, b) => d3.ascending(a.Year, b.Year));\n\n const firstYes = matchingScreeningData.find((f) => f.Screening === \"Yes\");\n acc.push({\n cancerRate: entry.cancerRate / 100000,\n vaccinationRate:\n matchingVaccinationData.length === 0\n ? 0\n : matchingVaccinationData[0].vaccinationRate / 100,\n country: entry.Entity,\n isoCode: entry.Code,\n screeningInPlace: firstYes\n });\n\n return acc;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"rateOfNewCervicalCancerCasesGco = await FileAttachment(\"rate-of-new-cervical-cancer-cases-gco.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"rateOfNewCervicalCancerCasesGco","database":"$undefined"},{"id":5,"value":"coverageOfTheHumanPapillomavirusVaccine = await FileAttachment(\"coverage-of-the-human-papillomavirus-vaccine.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"coverageOfTheHumanPapillomavirusVaccine","database":"$undefined"},{"id":59,"value":"countriesWithNationalCervicalCancerScreening = await FileAttachment(\"countries-with-national-cervical-cancer-screening-program.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"countriesWithNationalCervicalCancerScreening","database":"$undefined"},{"id":200,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.3.0/d3-annotation.min.js\")","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