Interaktivt koroplettkart over Norge med gjennomsnittlig boligpris per m² for alle kommuner. Data hentes automatisk fra SSB og oppdateres via en Novem-jobb.<\/p>

Pek<\/strong> på en kommune for å se navn og pris. Klikk<\/strong> for å flytte zoom-utsnittet til den valgte kommunen.<\/p>

Datainnhenting<\/h2>
Data hentes av fetch_data.py<\/code> fra to SSB-endepunkter:<\/p>
SSB tabell 06035<\/strong> (PxWebAPI) — gjennomsnittlig kvadratmeterpris per kommune, siste tilgjengelige kvartal<\/li> SSB KLASS 131<\/strong> (KLASS API) — kommunenavn på bokmål<\/li> <\/ul> Spørringen bruker JSON-stat2-formatet og henter alle 4-sifrede kommunekoder samtidig:<\/p> query = { "query": [ {"code": "Region", "selection": {"filter": "item", "values": all_codes}}, {"code": "Boligtype", "selection": {"filter": "item", "values": [alle_code]}}, {"code": "ContentsCode", "selection": {"filter": "item", "values": [price_code]}}, {"code": "Tid", "selection": {"filter": "item", "values": [latest_tid]}}, ], "response": {"format": "json-stat2"} } <\/code><\/pre> Kommunegrenser som SVG-stier<\/h2> Grensedataene kommer fra kommuner_S.topojson<\/code> (Kartverket\/GeoNorge). I stedet for å prosessere TopoJSON i nettleseren, er alle grensene forhånds-projisert til SVG-stier av generate_municipality_paths.py<\/code>.<\/p> Koordinatene dekodes fra delta-kodet TopoJSON og projiseres til et 760×900 px referanserom<\/strong> med Web Mercator:<\/p> def project(lon, lat): x = (lon - LON_MIN) \/ (LON_MAX - LON_MIN) * REF_W y = (1 - (merc_y(lat) - Y_MIN) \/ (Y_MAX - Y_MIN)) * REF_H return round(x), round(y) <\/code><\/pre> fetch_data.py<\/code> slår sammen SVG-stier, kommunenavn og SSB-priser til én CSV som pushes til plottet:<\/p> Kolonne<\/th> Eksempel<\/th> <\/tr> <\/thead> name<\/code><\/td> Oslo<\/td> <\/tr> kommunenummer<\/code><\/td> 0301<\/td> <\/tr> pris_kr_m2<\/code><\/td> 72 850<\/td> <\/tr> svg_path<\/code><\/td> M180 777L181 776…Z<\/code><\/td> <\/tr> <\/tbody> <\/table> Rendering (D3.js)<\/h2> Siden SVG-stiene allerede er projisert, skaleres de bare til tilgjengelig plass i nettleseren — ingen re-projeksjon nødvendig:<\/p> const scale = Math.min(plotW \/ REF_W, plotH \/ REF_H); const mapG = svg.append("g") .attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`); mapG.selectAll("path") .data(pathData) .join("path") .attr("d", d => d[2]) \/\/ SVG-sti direkte fra CSV .attr("fill", d => colorScale(priceMap.get(d[0]))); <\/code><\/pre> Fargene bruker kvadratrot-normalisering<\/strong> for å gi bedre kontrast i det vanlige prisintervallet:<\/p> function colorScale(price) { const t = (Math.sqrt(price) - sqrtMin) \/ (sqrtMax - sqrtMin); return interp(Math.max(0.08, Math.min(1, t))); } <\/code><\/pre> Klikk på en kommune beregner midtpunktet til <path><\/code>-elementet og animerer zoom-utsnittet dit:<\/p> .on("click", function(event, d) { const bbox = this.getBBox(); const cx = bbox.x + bbox.width \/ 2; const cy = bbox.y + bbox.height \/ 2; zoomG.transition().duration(450) .attr("transform", `translate(${ZOOM_SIZE\/2 - cx * ZOOM_DEFAULT}, ${ZOOM_SIZE\/2 - cy * ZOOM_DEFAULT}) scale(${ZOOM_DEFAULT})`); }); <\/code><\/pre> Tilpasning via CSS<\/h2> Farger og størrelser styres av CSS-variabler i custom.css<\/code> — ingen endringer i JS nødvendig:<\/p> --color-scheme-light: blues; \/* blues, plasma, viridis, inferno … *\/ --color-scheme-dark: plasma; --zoom-level: 3; --bg-light: #ffffff; --bg-dark: #0d1117; <\/code><\/pre> Datakilder: SSB PxWebAPI (tabell 06035) · SSB KLASS (klassifikasjon 131) · Kartverket\/GeoNorge via AnalyseABO<\/em><\/p>

Kolonne<\/th>	Eksempel<\/th> <\/tr> <\/thead>
`name<\/code><\/td>`	Oslo<\/td> <\/tr>
`kommunenummer<\/code><\/td>`	0301<\/td> <\/tr>
`pris_kr_m2<\/code><\/td>`	72 850<\/td> <\/tr>
`svg_path<\/code><\/td>`	M180 777L181 776…Z<\/code><\/td> <\/tr> <\/tbody> <\/table> Rendering (D3.js)<\/h2> Siden SVG-stiene allerede er projisert, skaleres de bare til tilgjengelig plass i nettleseren — ingen re-projeksjon nødvendig:<\/p> const scale = Math.min(plotW \/ REF_W, plotH \/ REF_H); const mapG = svg.append("g") .attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`); mapG.selectAll("path") .data(pathData) .join("path") .attr("d", d => d[2]) \/\/ SVG-sti direkte fra CSV .attr("fill", d => colorScale(priceMap.get(d[0]))); <\/code><\/pre> Fargene bruker kvadratrot-normalisering<\/strong> for å gi bedre kontrast i det vanlige prisintervallet:<\/p> function colorScale(price) { const t = (Math.sqrt(price) - sqrtMin) \/ (sqrtMax - sqrtMin); return interp(Math.max(0.08, Math.min(1, t))); } <\/code><\/pre> Klikk på en kommune beregner midtpunktet til <path><\/code>-elementet og animerer zoom-utsnittet dit:<\/p> .on("click", function(event, d) { const bbox = this.getBBox(); const cx = bbox.x + bbox.width \/ 2; const cy = bbox.y + bbox.height \/ 2; zoomG.transition().duration(450) .attr("transform", `translate(${ZOOM_SIZE\/2 - cx * ZOOM_DEFAULT}, ${ZOOM_SIZE\/2 - cy * ZOOM_DEFAULT}) scale(${ZOOM_DEFAULT})`); }); <\/code><\/pre> Tilpasning via CSS<\/h2> Farger og størrelser styres av CSS-variabler i custom.css<\/code> — ingen endringer i JS nødvendig:<\/p> --color-scheme-light: blues; \/* blues, plasma, viridis, inferno … *\/ --color-scheme-dark: plasma; --zoom-level: 3; --bg-light: #ffffff; --bg-dark: #0d1117; <\/code><\/pre> Datakilder: SSB PxWebAPI (tabell 06035) · SSB KLASS (klassifikasjon 131) · Kartverket\/GeoNorge via AnalyseABO<\/em><\/p>