2f:Td4c,main = Plot.plot({ aspectRatio: 1, r: { type: "sqrt", domain: d3.extent( data, (d) => d.total_health_care_expenditure_euro_per_capita ), range: [5, 20] }, marks: [ Plot.gridX({ stroke: "#222", strokeOpacity: 0.05 }), Plot.gridY({ stroke: "#222", strokeOpacity: 0.05 }), Plot.axisX({ label: "Curative care beds", stroke: "#222", strokeOpacity: 0.05 }), Plot.axisY({ label: "Psychiatric care beds", stroke: "#222", strokeOpacity: 0.2 }), Plot.ruleX([0], { stroke: "#222", strokeOpacity: 0.2 }), Plot.ruleY([0], { stroke: "#222", strokeOpacity: 0.2 }), Plot.linearRegressionY(data, { x: "curative_care_beds_in_hospitals_per_100000", y: "psychiatric_care_beds_in_hospitals_per_100000", stroke: "#222", strokeDasharray: "6px 6px", fill: "none" }), Plot.dot(data, { x: "curative_care_beds_in_hospitals_per_100000", y: "psychiatric_care_beds_in_hospitals_per_100000", r: (d) => d.total_health_care_expenditure_euro_per_capita, fill: (d) => colorScale(d.total_health_care_expenditure_euro_per_capita), fillOpacity: 0.6, stroke: "#222", strokeWidth: 0.5 }), (index, scales, channels, dimensions, context) => { doAnnotation(context.ownerSVGElement, { note: { title: minCountry[0].geoLabel, label: `Spends the least on health care in the EU with ${toEuroString( minCountry[0].total_health_care_expenditure_euro_per_capita )}` }, x: scales.x(minCountry[0].curative_care_beds_in_hospitals_per_100000) - 8, y: scales.y( minCountry[0].psychiatric_care_beds_in_hospitals_per_100000 ) + 2, dy: 50, dx: -75, color: "#222", connector: { type: "curve", points: 1, points: [[-50, 25]] } }); doAnnotation(context.ownerSVGElement, { note: { title: maxCountry[0].geoLabel, label: `Spent ${toEuroString( maxCountry[0].total_health_care_expenditure_euro_per_capita )} on health` }, x: scales.x(maxCountry[0].curative_care_beds_in_hospitals_per_100000), y: scales.y( maxCountry[0].psychiatric_care_beds_in_hospitals_per_100000 ) - scales.r( maxCountry[0].total_health_care_expenditure_euro_per_capita ) - 8, dy: -100, dx: 0, color: "#222" }); const euAverage = countryDataMap.get("EU27_2020"); doAnnotation(context.ownerSVGElement, { note: { label: "European average (2020)", wrap: 400 }, x: scales.x(euAverage.curative_care_beds_in_hospitals_per_100000) + 4, y: scales.y(euAverage.psychiatric_care_beds_in_hospitals_per_100000) - scales.r(euAverage.total_health_care_expenditure_euro_per_capita) - 4, dy: -150, dx: 50, color: "#222" }); } ], height: size.height - 64 - 32, // Update canvas height width: size.width, // Update canvas width margin: 0, // Update margins marginTop: margins.top, marginBottom: margins.bottom, marginLeft: margins.left, marginRight: margins.right })30:[{"id":"a18956484e21ec93312d063e84d73259f01bf782dfe767e68f733726244d8d9b78030d211b6da8b225c77c707afe071ca685e6ed3d5ff9ca87a8a5652ebeb87c","href":"https://static.observableusercontent.com/files/a18956484e21ec93312d063e84d73259f01bf782dfe767e68f733726244d8d9b78030d211b6da8b225c77c707afe071ca685e6ed3d5ff9ca87a8a5652ebeb87c","name":"data (1).json","type":"application/json","lastModified":1686734199327.13,"size":12219}] 2d:{"title":"Hospital beds in EU - scatterplot","cells":[{"id":0,"value":"# Hospital beds in EU - scatterplot","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"A project looking into how to create annotated scatterplots using Observable Plot.","pinned":false,"hidden":false,"mode":"md"},{"id":1110,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":457,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"### constants\n","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"margins = ({ top: 24, bottom: 32, left: 40, right: 16 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"size = ({\n height: 600,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"### components","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"Main chart","pinned":false,"hidden":false,"mode":"md"},{"id":1351,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"### data","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"Load the hospital data","pinned":false,"hidden":false,"mode":"md"},{"id":1120,"value":"data = FileAttachment(\"data (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"Get the extent of the data","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"dataExtent = d3.extent(\n data,\n (d) => d.total_health_care_expenditure_euro_per_capita\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"Country map for easier and faster access to country level data","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"countryDataMap = new Map(data.map((d) => [d.geo, { ...d }]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"maxCountry = data.filter(\n (d) => d.total_health_care_expenditure_euro_per_capita === dataExtent[1]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"minCountry = data.filter(\n (d) => d.total_health_care_expenditure_euro_per_capita === dataExtent[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"### scales","pinned":false,"hidden":false,"mode":"md"},{"id":921,"value":"Create a color scale where the EU expenditure mean is the middle of the scale","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"colorScale = d3\n .scaleLinear()\n .domain([\n dataExtent[0],\n countryDataMap.get(\"EU28\").total_health_care_expenditure_euro_per_capita,\n dataExtent[1]\n ])\n .range([\"#67001f\", \"#FFFFFF\", \"#053061\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"### utils","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"Formatting function to transform number to a Euro currency string","pinned":false,"hidden":false,"mode":"md"},{"id":851,"value":"toEuroString = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"EUR\",\n maximumFractionDigits: 0\n}).format","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"// Takes an SVG and using d3 + d3-annotation adds an annotation to the svg\nfunction doAnnotation(targetSVG, annotation, annotationType) {\n const makeAnnotations = d3_annotation\n .annotation()\n .editMode(false)\n .type(annotationType ?? d3_annotation.annotationLabel)\n .annotations([annotation]);\n\n const renderAnnotation = () => {\n const svg = d3.select(targetSVG).append(\"svg\");\n svg.attr(\n \"style\",\n \"font: initial;text-anchor: initial; fill: red; font-family: Arial;\"\n );\n svg.call(makeAnnotations);\n };\n\n // need to wait a tick for the dom to be rendered\n window.requestAnimationFrame(renderAnnotation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.0/d3-annotation.min.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}