25:["$","title",null,{"children":"Julkiset terveysasemat ja yksityiset lääkäriasemat kartalla | HealthDataVisualization | Observable"}] 49:T7fa,tileHelpers = { const { tile } = await import("https://cdn.jsdelivr.net/npm/d3-tile@1/+esm"); // Web-mercator (EPSG:3857) “tile projection” at zoom 0: // scale = 256 / (2π), translate = [0, 0] function tileProject() { return d3.geoMercator().scale(256 / (2 * Math.PI)).translate([0, 0]); } // Compute the initial d3.zoom transform for the tile pyramid // so it matches *your* existing D3 mercator projection. function initialTileTransform(projection, width, height) { // D3 mercator: pixels per radian const s = projection.scale(); // Convert to “zoom units”: 2^z = s * 2π / 256 const zScale = (s / (256 / (2 * Math.PI))); // Find current map center in lon/lat (center of the svg) const centerLL = projection.invert([width / 2, height / 2]); // Project that lon/lat into tile pixel space const proj0 = tileProject(); const [cx, cy] = proj0(centerLL); // Standard slippy transform: // translate to screen center, scale to z, then translate the world so center is at screen center return d3.zoomIdentity .translate(width / 2, height / 2) .scale(zScale) .translate(-cx, -cy); } // Create a renderer bound to your width/height and a tile URL template. function tileRenderer(width, height, tileUrl) { const t = tile().size([width, height]).tileSize(256); return function render(layer, transform) { const ts = t.scale(transform.k).translate([transform.x, transform.y])(); layer .attr("transform", `translate(${ts.translate[0]},${ts.translate[1]}) scale(${ts.scale})`); const image = layer.selectAll("image").data(ts, d => d); image.join( enter => enter.append("image") .attr("x", d => d[0] * 256) .attr("y", d => d[1] * 256) .attr("width", 256) .attr("height", 256) .attr("href", d => tileUrl(d[0], d[1], d[2])), update => update, exit => exit.remove() ); }; } return { initialTileTransform, tileRenderer }; } 4a:T5cb7,viewof map3 = { // ————————————————————————————————————————————————————— // Setup // ————————————————————————————————————————————————————— const width = 800; const height = 1000; const tooltip = d3.select("body").append("div") .attr("class", "municipality-tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("background", "#fff") .style("border", "1px solid #333") .style("border-radius", "4px") .style("padding", "6px 8px") .style("font-family", "sans-serif") .style("font-size", "13px") .style("box-shadow", "0 2px 6px rgba(0,0,0,0.15)") .style("display", "none"); const projection = d3.geoMercator().fitSize([width, height], muni_data); const path = d3.geoPath().projection(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 60%; height: auto; background: white"); const g = svg.append("g"); // ————————————————————————————————————————————————————— // Visual defs: subtle glow filter + CSS // ————————————————————————————————————————————————————— const defs = svg.append("defs"); const glow = defs.append("filter") .attr("id", "muni-glow") .attr("x", "-50%").attr("y", "-50%") .attr("width", "200%").attr("height", "200%"); glow.append("feMorphology").attr("in", "SourceAlpha").attr("operator", "dilate").attr("radius", 0.5).attr("result", "dilated"); glow.append("feGaussianBlur").attr("in", "dilated").attr("stdDeviation", 1.2).attr("result", "blurred"); const fade = glow.append("feComponentTransfer").attr("in", "blurred").attr("result", "faded"); fade.append("feFuncA").attr("type", "linear").attr("slope", 0.5); const merge = glow.append("feMerge"); merge.append("feMergeNode").attr("in", "faded"); merge.append("feMergeNode").attr("in", "SourceGraphic"); const style = html``; // ————————————————————————————————————————————————————— // State // ————————————————————————————————————————————————————— let selected = null; let currentZoom = 1; let highlightedMunicipalityName = (selectedMunicipality && selectedMunicipality !== "Suomi") ? selectedMunicipality : null; let highlightedHvaName = (selectedHva && selectedHva !== "Suomi") ? selectedHva : null; // ————————————————————————————————————————————————————— // Layer groups (ORDER MATTERS): muni → hva → kuntarajat → clinics // (we’ll control actual stacking with .raise() calls) // ————————————————————————————————————————————————————— const muniLayer = g.append("g"); const hvaLayer = g.append("g"); const kuntarajatLayer = g.append("g"); // above HVA const clinicLayer = g.append("g"); // always on top // Single background rect (first child) for clearing selection g.insert("rect", ":first-child") .attr("width", width).attr("height", height) .attr("fill", "transparent") .on("click", clearSelection); // ————————————————————————————————————————————————————— // Helpers: clear, focus, zoom // ————————————————————————————————————————————————————— function clearSelection() { selected = null; tooltip.style("display", "none"); muniLayer.selectAll("path").attr("stroke", "#595959").attr("stroke-width", 0.2).classed("is-highlighted", false); kuntarajatLayer.selectAll("path").attr("stroke", "#595959").attr("stroke-width", 0.2).classed("is-highlighted", false); highlightedMunicipalityName = null; svg.classed("dim-others", false); hvaLayer.selectAll("path").attr("stroke", "#595959").attr("stroke-width", 1.5).classed("is-highlighted", false); highlightedHvaName = null; svg.classed("dim-others-hva", false); g.selectAll("circle").attr("stroke", "none").attr("stroke-width", 0); } function focusMunicipalityByName(name) { highlightedMunicipalityName = (name && name !== "Suomi") ? name : null; svg.classed("dim-others", !!highlightedMunicipalityName); if (highlightedMunicipalityName) svg.classed("dim-others-hva", false); const muniPaths = muniLayer.selectAll("path"); muniPaths.classed("is-highlighted", d => d.properties.kuntanimi === highlightedMunicipalityName); muniPaths.filter(d => d.properties.kuntanimi === highlightedMunicipalityName).raise(); const rajaPaths = kuntarajatLayer.selectAll("path"); rajaPaths.classed("is-highlighted", d => d.properties.kuntanimi === highlightedMunicipalityName); rajaPaths.filter(d => d.properties.kuntanimi === highlightedMunicipalityName).raise(); clinicLayer.raise(); } function focusHvaByName(name) { highlightedHvaName = (name && name !== "Suomi") ? name : null; svg.classed("dim-others-hva", !!highlightedHvaName); if (highlightedHvaName) svg.classed("dim-others", false); const paths = hvaLayer.selectAll("path"); paths.classed("is-highlighted", d => d.properties.nimi === highlightedHvaName); paths.filter(d => d.properties.nimi === highlightedHvaName).raise(); if (!kuntarajatLayer.selectAll("path").empty()) kuntarajatLayer.raise(); // keep outlines above HVA clinicLayer.raise(); } function zoomToFeature(feature) { if (!feature) return; const [[x0, y0], [x1, y1]] = path.bounds(feature); const dx = x1 - x0, dy = y1 - y0; const scale = Math.min(width / dx, height / dy) * 0.9; const translate = [(width - scale * (x0 + x1)) / 2, (height - scale * (y0 + y1)) / 2]; svg.transition().duration(750) .call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)); } // ————————————————————————————————————————————————————— // Municipality layer (filled polygons) — TOP when enabled // ————————————————————————————————————————————————————— function drawMuni() { muniLayer.selectAll("path") .data(muni_data.features) .join("path") .attr("class", "muni-path") .attr("d", path) .attr("fill", d => colorScale(d.properties.maka_code)) .attr("stroke", d => selected === d ? "#000" : "#595959") .attr("stroke-width", d => selected === d ? 1.25 : 0.2) .classed("is-highlighted", d => d.properties.kuntanimi === highlightedMunicipalityName) .style("cursor", "pointer") .on("mouseover", function (event, d) { if (selected !== d) d3.select(this).attr("stroke", "#ffffff").attr("stroke-width", 1.25); }) .on("mouseout", function (event, d) { d3.select(this).attr("stroke", (selected === d) ? "#000" : "#595959").attr("stroke-width", (selected === d) ? 1.25 : 0.2); }) .on("click", function (event, d) { event.stopPropagation(); if (selected === d) return clearSelection(); clearSelection(); selected = d; focusMunicipalityByName(d.properties.kuntanimi); tooltip.style("display", "block") .style("left", (event.pageX + 26) + "px") .style("top", (event.pageY - 28) + "px") .html(`Kunta: ${d.properties.kuntanimi ?? "–"}
Kuntaluokitus: ${d.properties.maka_name ?? "–"}
Hyvinvointialue: ${d.properties.hyvinvointialue_name_fi ?? "–"}`); d3.select(this).attr("stroke", "#000").attr("stroke-width", 1.25); }); // ensure muni sits above HVA + Kuntarajat when enabled muniLayer.raise(); clinicLayer.raise(); } // Default: OFF for Kuntaluokitus const muniCheckbox = html` Näytä kuntaluokitus`; muniCheckbox.querySelector("input").onchange = function() { if (this.checked) { drawMuni(); focusMunicipalityByName(highlightedMunicipalityName); } else { muniLayer.selectAll("path").remove(); svg.classed("dim-others", false); } }; // (no initial drawMuni) // ————————————————————————————————————————————————————— // HVA layer (base) — ON by default // ————————————————————————————————————————————————————— function drawHva() { hvaLayer.selectAll("path") .data(hva_borders.features) .join("path") .attr("class", "hva-path") .attr("d", path) .attr("stroke", d => (selected === d || d.properties.nimi === highlightedHvaName) ? "#000" : "#595959") .attr("stroke-width", d => (selected === d || d.properties.nimi === highlightedHvaName) ? 1.75 : 1.5) .classed("is-highlighted", d => d.properties.nimi === highlightedHvaName) .style("cursor", "pointer") .on("mouseover", function (event, d) { if (selected !== d) d3.select(this).raise().attr("stroke", "#ffffff").attr("stroke-width", 1.75); }) .on("mouseout", function (event, d) { const on = (selected === d) || (d.properties.nimi === highlightedHvaName); d3.select(this).attr("stroke", on ? "#000" : "#595959").attr("stroke-width", on ? 1.75 : 1.5); }) .on("click", function(event, d) { event.stopPropagation(); if (selected === d) return clearSelection(); clearSelection(); selected = d; focusHvaByName(d.properties.nimi); tooltip.style("display", "block") .style("left", (event.pageX + 20) + "px") .style("top", (event.pageY - 28) + "px") .html(`Hyvinvointialue: ${d.properties.nimi ?? "–"}`); d3.select(this).attr("stroke", "#000").attr("stroke-width", 1.75); }); if (!kuntarajatLayer.selectAll("path").empty()) kuntarajatLayer.raise(); // outlines above base clinicLayer.raise(); } const hvaCheckbox = html` Näytä hyvinvointialueet`; const hvaToggle = hvaCheckbox.querySelector("input"); hvaToggle.onchange = function() { if (this.checked) { drawHva(); focusHvaByName(highlightedHvaName); } else { hvaLayer.selectAll("path").remove(); svg.classed("dim-others-hva", false); highlightedHvaName = null; } }; drawHva(); // ON by default // ————————————————————————————————————————————————————— // Kuntarajat layer (outlines) — above HVA, ON by default // ————————————————————————————————————————————————————— function drawKuntarajat() { kuntarajatLayer.selectAll("path") .data(muni_data.features) .join("path") .attr("class", "kuntaraja-path") .attr("d", path) .classed("is-highlighted", d => d.properties.kuntanimi === highlightedMunicipalityName) .style("cursor", "pointer") .on("mouseover", function(event, d) { if (selected !== d) d3.select(this).attr("stroke", "#ffffff").attr("stroke-width", 1.25); }) .on("mouseout", function(event, d) { const on = (selected === d) || (d.properties.kuntanimi === highlightedMunicipalityName); d3.select(this).attr("stroke", on ? "#000" : "#595959").attr("stroke-width", on ? 1.25 : 0.2); }) .on("click", function(event, d) { event.stopPropagation(); if (selected === d) return clearSelection(); clearSelection(); selected = d; focusMunicipalityByName(d.properties.kuntanimi); tooltip.style("display", "block") .style("left", (event.pageX + 26) + "px") .style("top", (event.pageY - 28) + "px") .html(`Kunta: ${d.properties.kuntanimi ?? "–"}
Kuntaluokitus: ${d.properties.maka_name ?? "–"}
Hyvinvointialue: ${d.properties.hyvinvointialue_name_fi ?? "–"}`); d3.select(this).attr("stroke", "#000").attr("stroke-width", 1.25); }); kuntarajatLayer.raise(); clinicLayer.raise(); } // Default: ON for Kuntarajat const kuntarajatCheckbox = html` Kuntarajat`; const kuntarajatToggle = kuntarajatCheckbox.querySelector("input"); kuntarajatToggle.onchange = function() { if (this.checked) { drawKuntarajat(); focusMunicipalityByName(highlightedMunicipalityName); } else { kuntarajatLayer.selectAll("path").remove(); } }; drawKuntarajat(); // draw by default // ————————————————————————————————————————————————————— // Clinics (points) // ————————————————————————————————————————————————————— const types = ["terveysasema", "paivystys", "laakariasema"]; const typeLabels = { terveysasema: "Terveysasemat", paivystys: "Päivystykset", laakariasema: "Lääkäriasemat" }; const clinicColorMap = { terveysasema: "#e41a1c", paivystys: "orange", laakariasema: "#377eb8" }; const typeCheckboxes = types.map(type => { const box = html` ${typeLabels[type]} `; box.querySelector("input").onchange = updateClinics; return box; }); function updateClinics() { const enabledTypes = types.filter((t,i) => typeCheckboxes[i].querySelector("input").checked); const filtered = clinics.features.filter(d => enabledTypes.includes(d.properties.yksikkotyyppi)); const projected = filtered.map(d => { const [x, y] = projection(d.geometry.coordinates); return { ...d, x, y }; }); const radius = 3 / Math.pow(currentZoom, 0.7); const circles = clinicLayer.selectAll("circle") .data(projected, d => d.properties.id ?? d.properties.toimipiste); circles.join( enter => enter.append("circle") .attr("fill", d => clinicColorMap[d.properties.yksikkotyyppi] ?? "gray") .attr("stroke", "none").attr("r", radius) .attr("cx", d => d.x).attr("cy", d => d.y).attr("stroke-width", 0) .style("cursor", "pointer") .on("mouseover", function(event, d) { if (selected !== d) d3.select(this).attr("stroke", "white").attr("stroke-width", 1.4 / Math.pow(currentZoom, 0.7)).raise(); }) .on("mouseout", function(event, d) { d3.select(this).attr("stroke", (selected === d) ? "black" : "none").attr("stroke-width", (selected === d) ? 1.4 / Math.pow(currentZoom, 0.7) : 0); }) .on("click", function(event, d) { event.stopPropagation(); if (selected === d) return clearSelection(); clearSelection(); selected = d; tooltip.style("display", "block") .style("left", (event.pageX + 20) + "px") .style("top", (event.pageY - 28) + "px") .html(`Toimipiste: ${d.properties.toimipiste ?? "–"}
Kunta: ${d.properties.kunta_nimi ?? "–"}`); d3.select(this).attr("stroke", "black").attr("stroke-width", 1.4 / Math.pow(currentZoom, 0.7)).raise(); }), update => update .attr("r", radius) .attr("stroke", d => selected === d ? "black" : "none") .attr("stroke-width", d => selected === d ? 1.4 / Math.pow(currentZoom, 0.7) : 0) .on("mouseover", function(event, d) { if (selected !== d) d3.select(this).attr("stroke", "white").attr("stroke-width", 1.4 / Math.pow(currentZoom, 0.7)).raise(); }) .on("mouseout", function(event, d) { d3.select(this).attr("stroke", (selected === d) ? "black" : "none").attr("stroke-width", (selected === d) ? 1.4 / Math.pow(currentZoom, 0.7) : 0); }), exit => exit.remove() ); clinicLayer.raise(); } // ————————————————————————————————————————————————————— // Zoom // ————————————————————————————————————————————————————— const zoom = d3.zoom() .scaleExtent([1, 200]) .on("zoom", event => { currentZoom = event.transform.k; g.attr("transform", event.transform); updateClinics(); }); svg.call(zoom).on("dblclick.zoom", null); updateClinics(); // ————————————————————————————————————————————————————— // Initial highlight/zoom (if preselected) // ————————————————————————————————————————————————————— if (highlightedMunicipalityName) { const mFeature = muni_data.features.find(d => d.properties.kuntanimi === highlightedMunicipalityName); if (mFeature) { zoomToFeature(mFeature); focusMunicipalityByName(highlightedMunicipalityName); } } if (highlightedHvaName) { const hFeature = hva_borders.features.find(d => d.properties.nimi === highlightedHvaName); if (hFeature) { zoomToFeature(hFeature); focusHvaByName(highlightedHvaName); } } // ————————————————————————————————————————————————————— // Dropdown wiring // ————————————————————————————————————————————————————— (viewof selectedMunicipality).addEventListener("input", e => { const name = e.target.value; if (!name || name === "Suomi") { focusMunicipalityByName(null); svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); return; } const feature = muni_data.features.find(d => d.properties.kuntanimi === name); if (feature) { zoomToFeature(feature); focusMunicipalityByName(name); } }); (viewof selectedHva).addEventListener("input", e => { const name = e.target.value; if (!name || name === "Suomi") { focusHvaByName(null); svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); return; } if (!hvaToggle.checked || hvaLayer.selectAll("path").empty()) { hvaToggle.checked = true; drawHva(); } const feature = hva_borders.features.find(d => d.properties.nimi === name); if (feature) { zoomToFeature(feature); focusHvaByName(name); } }); // ————————————————————————————————————————————————————— // UI layout // ————————————————————————————————————————————————————— const container = html`

`; const firstRow = html`

`; firstRow.append(viewof selectedMunicipality); firstRow.append(viewof selectedHva); firstRow.append(muniCheckbox); firstRow.append(kuntarajatCheckbox); firstRow.append(hvaCheckbox); const secondRow = html`

`; const clinicLabel = html`Valitse toimipisteet:`; secondRow.append(clinicLabel); types.map((_, i) => secondRow.append(typeCheckboxes[i])); resetButton.onclick = () => { clearSelection(); svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); // restore dropdowns viewof selectedMunicipality.value = "Suomi"; viewof selectedMunicipality.dispatchEvent(new Event("input", { bubbles: true })); viewof selectedHva.value = "Suomi"; viewof selectedHva.dispatchEvent(new Event("input", { bubbles: true })); // restore layer defaults: // HVA ON hvaToggle.checked = true; drawHva(); // Kuntarajat ON kuntarajatToggle.checked = true; drawKuntarajat(); // Kuntaluokitus OFF muniCheckbox.querySelector("input").checked = false; muniLayer.selectAll("path").remove(); svg.classed("dim-others", false); }; const legend = html`

Kuntaluokitus:

Kaupunkimainen

Taajaan asuttu

Maaseutumainen

`; container.append(style); container.append(firstRow); container.append(secondRow); container.append(resetButton); container.append(legend); container.append(svg.node()); return container; } 4b:T7fd,viewof leafletMap = { // ---- 1) Load Leaflet (JS + CSS) ---- const L = await require("leaflet@1.9.4"); const link = html``; document.head.appendChild(link); await new Promise(resolve => (link.sheet ? resolve() : link.addEventListener("load", resolve, { once: true }))); // ---- 2) Container ---- const width = 800, height = 1000; const el = html`

`; // ---- 3) Initialize AFTER mount (prevents grey box/tiny square) ---- (async () => { // wait until Observable mounts `el` into the DOM await new Promise(requestAnimationFrame); // Map const map = L.map(el, { zoomControl: true, maxZoom: 19, minZoom: 5.4, worldCopyJump: false }); // Tiles L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", crossOrigin: true }).addTo(map); // Bounds from your OSM Finland boundary const fiBounds = L.geoJSON(OSM).getBounds(); // Make sure Leaflet measures the container correctly and then fit so Finland fills the map map.invalidateSize(true); map.fitBounds(fiBounds, { animate: false, padding: [0, 0] }); // Optional overlays const fiLayer = L.geoJSON(OSM, { style: { color: "#666", weight: 1, fill: false } }).addTo(map); const hvaLayer = L.geoJSON(hva_borders, { style: () => ({ color: "#595959", weight: 1.5, fillColor: "#e8f5e9", fillOpacity: 0.35 }) }).addTo(map); const kuntarajatLayer = L.geoJSON(muni_data, { style: () => ({ color: "#595959", weight: 0.2, fill: false }) }).addTo(map); L.control.layers(null, { "Hyvinvointialueet": hvaLayer, "Kuntarajat": kuntarajatLayer, "Suomen raja": fiLayer }, { collapsed: false }).addTo(map); })(); // Return the element immediately; the map initializes right after mount return el; } 4c:[{"id":"f04ab7404ed1ed66c1c1e8ccba701ba31dabe7694c57b3b1de5caae41a9112649fdeb5ce88801d55b7e9f0525068427a357235bf7f9ac293c9fc6523fd58c14d","href":"https://static.observableusercontent.com/files/f04ab7404ed1ed66c1c1e8ccba701ba31dabe7694c57b3b1de5caae41a9112649fdeb5ce88801d55b7e9f0525068427a357235bf7f9ac293c9fc6523fd58c14d","name":"SuomenHyvinvointialuejako_2023_10k(1).geojson","type":"application/geo+json","lastModified":1754313213900.074,"size":15994484},{"id":"4644490fb467542d744d7aa3db6d354c2cd9732ce76346d013f4d6b738aedf0d16e39edefecf859934121a04c1d72f97767dba0d9d3700c2b798f9ed59ebd5bb","href":"https://static.observableusercontent.com/files/4644490fb467542d744d7aa3db6d354c2cd9732ce76346d013f4d6b738aedf0d16e39edefecf859934121a04c1d72f97767dba0d9d3700c2b798f9ed59ebd5bb","name":"hva_data_wgs84@1.geojson","type":"application/geo+json","lastModified":1754383518954.995,"size":154017},{"id":"704e4efb23e34d73b10969d85c1735c67ada14e17c7f7650fca14054c5b354fd2c9373394c74ece6079c9b3dc28a71e344bd466bf0edf0f39db8fe6d2e1060d0","href":"https://static.observableusercontent.com/files/704e4efb23e34d73b10969d85c1735c67ada14e17c7f7650fca14054c5b354fd2c9373394c74ece6079c9b3dc28a71e344bd466bf0edf0f39db8fe6d2e1060d0","name":"hyvinvointialuerajat_2023.geojson","type":"application/geo+json","lastModified":1754474983849.459,"size":167351},{"id":"17e0b3a238aa37d0fef1e51cae908a69a94e891ff82793be4a67e4ffb8d5b5ad120a2fe91617180a293021aed12052fed616a81ddcd2784b4c1302b7b93c48fa","href":"https://static.observableusercontent.com/files/17e0b3a238aa37d0fef1e51cae908a69a94e891ff82793be4a67e4ffb8d5b5ad120a2fe91617180a293021aed12052fed616a81ddcd2784b4c1302b7b93c48fa","name":"finland_private_health_stations.geojson","type":"application/geo+json","lastModified":1750850043553.188,"size":92722},{"id":"20a3c9124651dee648d73911d25a041d2f357752c0e5d76dbdb5fa2176a32392f45bdd7ffed6deb5d8d3c6e39344352d339173ab02dc63ae0e021bcb13d6ad5b","href":"https://static.observableusercontent.com/files/20a3c9124651dee648d73911d25a041d2f357752c0e5d76dbdb5fa2176a32392f45bdd7ffed6deb5d8d3c6e39344352d339173ab02dc63ae0e021bcb13d6ad5b","name":"munies_data.geojson","type":"application/geo+json","lastModified":1753955126293.249,"size":386392},{"id":"45cbbf307137acc72736ffe3c8633d4aff08cedd106a67c3a7796345a049722d7e83475323790f24076d8ac46ef44dba2a5e2d3feabf9957a5f5d7adec86c395","href":"https://static.observableusercontent.com/files/45cbbf307137acc72736ffe3c8633d4aff08cedd106a67c3a7796345a049722d7e83475323790f24076d8ac46ef44dba2a5e2d3feabf9957a5f5d7adec86c395","name":"hva_data@2.geojson","type":"application/geo+json","lastModified":1753955565480.491,"size":154011},{"id":"575ceb9d2366b3839fc151b638b44317dc643a7e4d35803273a0a4842727e88aebc2107e7e9177640b4acd8ad1ceef40bbb85e1896eb3d1c019448e699dd3b61","href":"https://static.observableusercontent.com/files/575ceb9d2366b3839fc151b638b44317dc643a7e4d35803273a0a4842727e88aebc2107e7e9177640b4acd8ad1ceef40bbb85e1896eb3d1c019448e699dd3b61","name":"toimipaikat_data_250807@3.geojson","type":"application/geo+json","lastModified":1755158955324.517,"size":490270},{"id":"4a7a9eb9cb084333f8baa50f31022a495f096e178ef18830217582828234de8b7793e6d29e1b6114dd120aa1f378fe961e650937ac60fb51df138d0e36a69f50","href":"https://static.observableusercontent.com/files/4a7a9eb9cb084333f8baa50f31022a495f096e178ef18830217582828234de8b7793e6d29e1b6114dd120aa1f378fe961e650937ac60fb51df138d0e36a69f50","name":"OSMB-9a8a3121c3b6cf3f9db1e40a6883f3755eb9524e.geojson","type":"application/geo+json","lastModified":1759241083681.792,"size":348968}] 29:{"id":"314e10de6df79f6a","slug":null,"title":"Julkiset terveysasemat ja yksityiset lääkäriasemat kartalla","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-06-25T11:07:11.919Z","update_time":"$D2025-10-01T12:21:46.994Z","view_time":null,"first_public_time":"$D2025-07-29T09:28:02.235Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"654abf273ee0c4dd","login":"healthdatavisualization","name":"HealthDataVisualization","avatar_url":"https://avatars-next.observableusercontent.com/1ca306f7fb059a64561d355d31dd0df9a24d20b712e59163882c7aabbc59f87d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":938,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a7dc566b8f7627a","login":"sotedatalab","name":"Kivimakialex","avatar_url":"https://avatars-next.observableusercontent.com/c6d0f2632ca8ff781ea05b3150733731825904a2f9d35f6e7acf34276ba33a18","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"654abf273ee0c4dd","login":"healthdatavisualization","name":"HealthDataVisualization","avatar_url":"https://avatars-next.observableusercontent.com/1ca306f7fb059a64561d355d31dd0df9a24d20b712e59163882c7aabbc59f87d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"5a7dc566b8f7627a","login":"sotedatalab","name":"Kivimakialex","avatar_url":"https://avatars-next.observableusercontent.com/c6d0f2632ca8ff781ea05b3150733731825904a2f9d35f6e7acf34276ba33a18","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Julkiset terveysasemat ja yksityiset lääkäriasemat kartalla","cells":[{"id":0,"value":"# Julkiset terveysasemat ja yksityiset lääkäriasemat kartalla","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"proj4 = require(\"proj4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"proj4.defs(\"EPSG:3067\",\"+proj=utm +zone=35 +ellps=GRS80 +units=m +no_defs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"proj3067 = \"+proj=tmerc +lat_0=0 +lon_0=27 +k=0.9996 \\\n+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"d3 = require(\"d3@7\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"OSM = FileAttachment(\"OSMB-9a8a3121c3b6cf3f9db1e40a6883f3755eb9524e.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"private_clinics = FileAttachment(\"finland_private_health_stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"muni_data = FileAttachment(\"munies_data.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"hva_data = FileAttachment(\"hva_data@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"hva_borders = FileAttachment(\"hyvinvointialuerajat_2023.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"clinics = FileAttachment(\"toimipaikat_data_250807@3.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"colorScale = d3.scaleOrdinal()\n .domain([1, 2, 3])\n .range([\"#29254d\", \"#af94fc\", \"#A2D88C\"]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":" // Import d3-tile for raster tiles\ntileModule = await import(\"https://cdn.jsdelivr.net/npm/d3-tile@1/+esm\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"resetButton = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"viewof selectedMunicipality = Inputs.select(\n [\"Suomi\", ...muni_data.features\n .map(d => d.properties.kuntanimi)\n .sort((a, b) => a.localeCompare(b))],\n { label: \"Etsi kunta:\", value: \"Suomi\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"viewof selectedHva = Inputs.select(\n [\"Suomi\", ...hva_borders.features\n .map(d => d.properties.nimi)\n .sort((a, b) => a.localeCompare(b))],\n { label: \"Etsi hyvinvointialue:\", value: \"Suomi\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null