2f:Ted3,Plot.plot({ projection: { type: "conic-conformal", domain: countriesTopo, inset: 16 }, // size and margins height: 600, width: 600, margin: 0, marginTop: margins.top, marginBottom: margins.bottom, marks: [ // choropleth map Plot.frame({ fill: "#f7fbfd" }), Plot.graticule({ stroke: "#737373" }), Plot.geo(worldTopo, { fill: "#f9f9f9", stroke: "#d9d9d9" }), Plot.geo(countriesTopo, { fill: (d) => colorScale(countryDataMap.get(d.id)?.expenditure) ?? "#e9e9e9", stroke: "#c0c0c0", strokeWidth: 0.5 }), // text ...titles, ...captions, // custom world inset (a, b, c, layout) => svg` ${Plot.plot({ projection: { type: "orthographic", domain: worldTopo, rotate: [-30.7, -53.4] }, marks: [ Plot.graticule({ stroke: "#5d5d5d" }), Plot.geo(worldTopo, { fill: "#f9f9f9", stroke: "#b4b4b4" }), Plot.geo(countriesTopo, { fill: "#222" }) ], height: 150, width: 150 })} `, // custom legend (a, b, c, layout) => svg` ${toEuroString(dataExtent[0])} ${toEuroString(dataExtent[1])} `, (index, scales, channels, dimensions, context) => { const path = d3.geoPath().projection(context.projection); const italy = countriesTopo.features.find((d) => d.id === "IT"); const italyCentroid = path.centroid(italy); doAnnotation(context.ownerSVGElement, { note: { title: "Italy", label: "A country in southern Europe" }, x: italyCentroid[0], y: italyCentroid[1], dy: -25, dx: -190, color: "#222" }); }, (index, scales, channels, dimensions, context) => { const path = d3.geoPath().projection(context.projection); const italy = countriesTopo.features.find((d) => d.id === "SE"); const italyCentroid = path.centroid({ type: "Point", coordinates: [18.0686, 59.3293] }); doAnnotation( context.ownerSVGElement, { note: { title: "Stockholm, Sweden", label: "I live here" }, x: italyCentroid[0], y: italyCentroid[1], dy: -75, dx: -75, color: "#222", subject: { radius: 16, radiusPadding: 4 } }, d3_annotation.annotationCalloutCircle ); } ] })30:[{"id":"955b297fb84a5866b93293267a6908e8618c71556d67d3e7865c326c02891c7c0ae9fc92b115f798bba9520155847b846e359ce370baa90204e7afe5d2302cdc","href":"https://static.observableusercontent.com/files/955b297fb84a5866b93293267a6908e8618c71556d67d3e7865c326c02891c7c0ae9fc92b115f798bba9520155847b846e359ce370baa90204e7afe5d2302cdc","name":"eurostatHospitalExpenditure@2.json","type":"application/json","lastModified":1685696692738.495,"size":2397},{"id":"6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","href":"https://static.observableusercontent.com/files/6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","name":"europe-2.json","type":"application/json","lastModified":1685696692738.495,"size":196194},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1685696692738.495,"size":107761}] 2d:{"title":"Hospital beds in the EU with annotations","cells":[{"id":0,"value":"# Hospital beds in the EU with annotations","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"A project looking into how to create maps using Observable Plot.\n\nThe map uses mostly native Observable Plot features but also some custom features for creating a custom legend and a custom globe inset.","pinned":false,"hidden":false,"mode":"md"},{"id":865,"value":"$2f","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: 56, bottom: 32 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"### components","pinned":false,"hidden":false,"mode":"md"},{"id":889,"value":"Header and sub header components","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"titles = [\n Plot.text([\"Health care expenditure per capita, 2019\"], {\n frameAnchor: \"top-left\",\n textAnchor: \"start\",\n dy: -margins.top,\n text: (d) => d,\n fill: \"#222\",\n fontSize: 24,\n fontWeight: \"bold\"\n }),\n Plot.text(\n [\"Liechtenstein leads with €8,626, while Bulgaria trails with €626\"],\n {\n frameAnchor: \"top-left\",\n textAnchor: \"start\",\n dy: -margins.top + 32,\n text: (d) => d,\n fill: \"#494949\",\n fontSize: 16\n }\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"Footer component(s)","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"captions = [\n Plot.text([\"explained.media\"], {\n frameAnchor: \"bottom-right\",\n textAnchor: \"end\",\n dy: margins.bottom / 2 + 4,\n text: (d) => d,\n fill: \"#707070\",\n fontSize: 16,\n fontStyle: \"italic\"\n }),\n\n Plot.text([\"Source: Eurostat\"], {\n frameAnchor: \"bottom-left\",\n textAnchor: \"start\",\n dy: margins.bottom / 2 + 4,\n text: (d) => d,\n fill: \"#707070\",\n fontSize: 16\n })\n]","pinned":false,"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":912,"value":"data = FileAttachment(\"eurostatHospitalExpenditure@2.json\").json()","pinned":false,"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(data, (d) => d.expenditure)","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":483,"value":"### scales","pinned":false,"hidden":false,"mode":"md"},{"id":921,"value":"Create a color scale where the EU 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\").expenditure,\n dataExtent[1]\n ])\n .range([\"#67001f\", \"#FFFFFF\", \"#053061\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"### geo","pinned":false,"hidden":false,"mode":"md"},{"id":923,"value":"Load and create topo data for Europe","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"countries = FileAttachment(\"europe-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"countriesTopo = topojson.feature(countries, countries.objects.europe)","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"Load and create topo data for the World","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"worldTopo = topojson.feature(world, world.objects.land)","pinned":true,"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 .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":true,"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"}