Avainsanat

Kuntien kuukausiraportti, väestö, yhteistyö, avoin lähdekoodi, Tilastokeskus, tietojohtaminen

d3 = require("d3@7")
//import {Legend} from "@d3/color-legend"

folderKunnat24TopoJSON = "./maps/Kunnat2024Topo.json"
kunnat2024topo = FileAttachmentDynamic(folderKunnat24TopoJSON).json()
mapTopoJSON = topojson.feature(kunnat2024topo, kunnat2024topo.objects.Kunnat2024_geo).features


folderMaakunnat24TopoJSON = "./maps/Maakunnat2024Topo.json"
maakunnat_2024_topo =  FileAttachmentDynamic(folderMaakunnat24TopoJSON).json()

FileAttachmentDynamic = function(filename) {
  return new Function("FileAttachment", `return FileAttachment("${filename}")`)(FileAttachment)
}

// Vaihdetaan tekstin väri
color = function(vari) {
  if(vari > 0){
      return "green"
    }else{
      return "red"
    }
}
// Pyöristys
pyoristys = function(n, places) {
  if (!places) return Math.round(n);
  const d = 10 ** places;
  return Math.round(n * d) / d;
}
//Euromerkintä
eurot = function(number) {
  return number.toLocaleString('fi-FI', { style: 'currency', currency: 'EUR',minimumFractionDigits: 0 });
}
// Euromuutoksen laskeminen kertoimella
muutoskerroin = function(x, y) {
  return (1+x/100)*y;
}
// Muutosprosentti
muutosprosentti = function(x, y) {
  return pyoristys(((x-y)/y)*100,1);
}
// Tuhatjakaja
tuhatjakaja = function(x) {
  return x/1000;
}
// Euromuutoksen laskeminen kertoimella
palkkakerroin = function(x, y) {
  return 100*((1+x/100)*(1+y/100)-1);
}
// Jako-osuuden asukaskerroin
asukaskerroin = function(x, y) {
  return (x/y);
}
// Jako-osuuden veroprosenttikerroin miinus1/miinus3 vuotta miinus 1 vuoden kerroin
veroprosenttikerroin = function(x, y) {
  return (x/y);
}
// Kunnan muok. kunnallisvero, alkuvuosi ja loppuvuosi 
kunnallisvero_muokkaus = function(kunnallisvero,asukaskerroin,veroprosentti) {
  return kunnallisvero*asukaskerroin*veroprosentti;
}

//Tekstimuutokset
fn_nousu_lasku_txt = function(arvo){
  if(arvo > 0) {
  return "kasvanut" 
  }
  else { 
  return "laskenut";
  }
}

//TARVITAAN KARTOISSA
serialize = {
  const xmlns = "http://www.w3.org/2000/xmlns/";
  const xlinkns = "http://www.w3.org/1999/xlink";
  const svgns = "http://www.w3.org/2000/svg";
  return function serialize(svg) {
    svg = svg.cloneNode(true);
    const fragment = window.location.href + "#";
    const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
    while (walker.nextNode()) {
      for (const attr of walker.currentNode.attributes) {
        if (attr.value.includes(fragment)) {
          attr.value = attr.value.replace(fragment, "#");
        }
      }
    }
    svg.setAttributeNS(xmlns, "xmlns", svgns);
    svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
    const serializer = new window.XMLSerializer;
    const string = serializer.serializeToString(svg);
    return new Blob([string], {type: "image/svg+xml"});
  };
}


function toSVG(chart) {
  if (chart.nodeName !== "FIGURE") {
    return chart;
  }

  // the chart needs to be in the body if we want to read values, positions, sizes…
  document.body.appendChild(chart);
  const [x0, y0, width, height] = getBounds([chart]);

  const nodes = [];

  for (const node of d3
    .select(chart)
    .selectChildren("h1,h2,h3,div,figcaption,svg")) {
    switch (node.nodeName.toLowerCase()) {
      case "div":
        {
          const children = d3.select(node).selectChildren("div,span");
          const height = getBounds([node, ...children])[3] + 2;
          const svg = d3
            .select(chart)
            .append("svg")
            .attr("width", width)
            .attr("height", height);
          nodes.push(svg.node());

          const swatches = svg
            .selectAll()
            .data(
              Array.from(children, (d) => {
                const svg = d3.select(d).select("svg").node();
                const bbox = svg.getBBox();
                return {
                  style: window.getComputedStyle(d),
                  svg,
                  width: bbox.width,
                  height: bbox.height,
                  text: d.textContent,
                  bounds: getBounds([d])
                };
              })
            )
            .join("g")
            .attr(
              "transform",
              (d) => `translate(${d.bounds[0] - x0},${10 + d.bounds[1] - y0})`
            );

          swatches
            .append((d) => d.svg) // "rect")
            .attr("width", (d) => d.width)
            .attr("height", (d) => d.height)
            .attr("y", (d) => `${-parseFloat(d.height) / 2}px`);
          swatches
            .append("text")
            .text((d) => d.text)
            .attr("x", (d) => d.width)
            .attr("dx", 5)
            .attr("dy", "0.38em")
            .attr("font-family", (d) => d.style.fontFamily)
            .attr("font-size", (d) => d.style.fontSize)
            .attr("fill", (d) => d.style.color);
        }
        break;
      case "figcaption":
      case "h1":
      case "h2":
      case "h3":
        {
          const svg = d3
            .select(chart)
            .append("svg")
            .attr("width", width)
            .attr("overflow", "visible");
          nodes.push(svg.node());

          const children = d3.select(node).selectChildren();

          let h = 0;
          for (const d of children.size() > 0
            ? children.selectChildren()
            : [node]) {
            const style = window.getComputedStyle(d);
            const t = svg
              .append("g")
              .attr("transform", `translate(0,${h})`)
              .append(() =>
                d3
                  .select(
                    Plot.text([d.textContent], {
                      text: (d) => d,
                      lineWidth:
                        (1.06 * parseFloat(style.width)) /
                        parseFloat(style.fontSize),
                      lineHeight: 1.2,
                      frameAnchor: "top-left"
                    }).plot()
                  )
                  .select("text")
                  .attr("font-family", style.fontFamily)
                  .attr("font-size", 1.08 * parseFloat(style.fontSize))
                  .attr("font-weight", style.fontWeight)
                  .attr("fill", style.color)
                  .node()
              );
            h += getBounds([t.node()])[3] + 4;
          }
          svg.attr("height", h);
        }
        break;
      case "svg":
        d3.select(chart).append(() => node);
        nodes.push(node);
        break;
    }
  }

  return serializeAll(nodes)
    .then((blob) => blob.text())
    .then((c) => {
      document.body.removeChild(chart);
      return Object.assign(svg`${c}`, chart);
    });
}


// Given an array of SVG elements, composites them into a single SVG element,
// and then serializes the result to a blob.
async function serializeAll(elements, {padding = 10} = {}) {
  const fragment = location.href + "#";
  let root;
  if (elements.length === 1) {
    root = elements[0].cloneNode(true); // optimize common case
  } else {
    const [ox, oy, dx, dy] = getBounds(elements);
    root = document.createElementNS(svgns, "svg");
    root.setAttribute("width", dx + 2 * padding);
    root.setAttribute("height", dy + 2 * padding);
    root.setAttribute("viewBox", [-padding, -padding, dx + 2 * padding, dy + 2 * padding]);
    for (const element of elements) {
      const svg = root.appendChild(element.cloneNode(true));
      const { x, y, width, height } = element.getBoundingClientRect();
      svg.setAttribute("x", x - ox);
      svg.setAttribute("y", y - oy);
      svg.setAttribute("width", width);
      svg.setAttribute("height", height);
    }
  }
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    for (const attr of node.attributes) {
      if (attr.value.includes(fragment)) {
        attr.value = attr.value.replace(fragment, "#");
      }
    }
  }
  root.setAttributeNS(xmlns, "xmlns", svgns);
  root.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
  const serializer = new XMLSerializer();
  const string = serializer.serializeToString(root);
  return new Blob([string], { type: "image/svg+xml" });
}


function getBounds(elements) {
  let x1 = Infinity;
  let y1 = x1;
  let x2 = -x1;
  let y2 = x2;
  for (const element of elements) {
    const { x, y, width, height } = element.getBoundingClientRect();
    if (x < x1) x1 = x;
    if (x + width > x2) x2 = x + width;
    if (y < y1) y1 = y;
    if (y + height > y2) y2 = y + height;
  }
  return [x1, y1, x2 - x1, y2 - y1];
}

// based on https://observablehq.com/@gka/cheap-fit-text-to-circle
function lines(text, targetWidth) {
  const CHAR_W = {
    "a":7,"B":8,"C":8,"c":6,"D":9,"f":4,"G":9,"H":9,"I":3,"i":3,"J":5,"j":3,"K":8,"k":6,
    "l":3,"M":11,"m":11,"N":9,"O":9,"P":8,"Q":9,"R":8,"r":4,"S":8,"s":6,"t":4,"U":9,"v":6,
    "W":11,"w":9,"x":6,"y":6,"z":5,".":2,",":2,":":2,";":2
  };
  function measureWidth(text) { return  d3.sum(text, char => CHAR_W[char] || CHAR_W["a"]) * 0.8; };

  const words = text.split(" ");
  let line;
  let lineWidth0 = Infinity;
  const lines = [];
  for (let i = 0, n = words.length; i < n; ++i) {
    let lineText1 = (line ? line.text + " " : "") + words[i];
    let lineWidth1 = measureWidth(lineText1);
    if ((lineWidth0 + lineWidth1) / 2 < targetWidth) {
      line.width = lineWidth0 = lineWidth1;
      line.text = lineText1;
    } else {
      lineWidth0 = measureWidth(words[i]);
      line = {width: lineWidth0, text: words[i]};
      lines.push(line);
    }
  }
  return lines;
}

xmlns = "http://www.w3.org/2000/xmlns/"

xlinkns = "http://www.w3.org/1999/xlink"

svgns = "http://www.w3.org/2000/svg"

function Legend(color, {
  title,
  tickSize = 6,
  width = 320, 
  height = 44 + tickSize,
  marginTop = 18,
  marginRight = 0,
  marginBottom = 16 + tickSize,
  marginLeft = 0,
  ticks = width / 64,
  tickFormat,
  tickValues
} = {}) {

  function ramp(color, n = 256) {
    const canvas = document.createElement("canvas");
    canvas.width = n;
    canvas.height = 1;
    const context = canvas.getContext("2d");
    for (let i = 0; i < n; ++i) {
      context.fillStyle = color(i / (n - 1));
      context.fillRect(i, 0, 1, 1);
    }
    return canvas;
  }

  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])
      .style("overflow", "visible")
      .style("display", "block");

  let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height);
  let x;

  // Continuous
  if (color.interpolate) {
    const n = Math.min(color.domain().length, color.range().length);

    x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n));

    svg.append("image")
        .attr("x", marginLeft)
        .attr("y", marginTop)
        .attr("width", width - marginLeft - marginRight)
        .attr("height", height - marginTop - marginBottom)
        .attr("preserveAspectRatio", "none")
        .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL());
  }

  // Sequential
  else if (color.interpolator) {
    x = Object.assign(color.copy()
        .interpolator(d3.interpolateRound(marginLeft, width - marginRight)),
        {range() { return [marginLeft, width - marginRight]; }});

    svg.append("image")
        .attr("x", marginLeft)
        .attr("y", marginTop)
        .attr("width", width - marginLeft - marginRight)
        .attr("height", height - marginTop - marginBottom)
        .attr("preserveAspectRatio", "none")
        .attr("xlink:href", ramp(color.interpolator()).toDataURL());

    // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
    if (!x.ticks) {
      if (tickValues === undefined) {
        const n = Math.round(ticks + 1);
        tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1)));
      }
      if (typeof tickFormat !== "function") {
        tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
      }
    }
  }

  // Threshold
  else if (color.invertExtent) {
    const thresholds
        = color.thresholds ? color.thresholds() // scaleQuantize
        : color.quantiles ? color.quantiles() // scaleQuantile
        : color.domain(); // scaleThreshold

    const thresholdFormat
        = tickFormat === undefined ? d => d
        : typeof tickFormat === "string" ? d3.format(tickFormat)
        : tickFormat;

    x = d3.scaleLinear()
        .domain([-1, color.range().length - 1])
        .rangeRound([marginLeft, width - marginRight]);

    svg.append("g")
      .selectAll("rect")
      .data(color.range())
      .join("rect")
        .attr("x", (d, i) => x(i - 1))
        .attr("y", marginTop)
        .attr("width", (d, i) => x(i) - x(i - 1))
        .attr("height", height - marginTop - marginBottom)
        .attr("fill", d => d);

    tickValues = d3.range(thresholds.length);
    tickFormat = i => thresholdFormat(thresholds[i], i);
  }

  // Ordinal
  else {
    x = d3.scaleBand()
        .domain(color.domain())
        .rangeRound([marginLeft, width - marginRight]);

    svg.append("g")
      .selectAll("rect")
      .data(color.domain())
      .join("rect")
        .attr("x", x)
        .attr("y", marginTop)
        .attr("width", Math.max(0, x.bandwidth() - 1))
        .attr("height", height - marginTop - marginBottom)
        .attr("fill", color);

    tickAdjust = () => {};
  }

  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x)
        .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined)
        .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined)
        .tickSize(tickSize)
        .tickValues(tickValues))
      .call(tickAdjust)
      .call(g => g.select(".domain").remove())
      .call(g => g.append("text")
        .attr("x", marginLeft)
        .attr("y", marginTop + marginBottom - height - 6)
        .attr("fill", "currentColor")
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .style("font-size", "12px")
        .attr("class", "title")
        .text(title));

  return svg.node();
}


function legend({color, ...options}) {
  return Legend(color, options);
}


// Copyright 2021, Observable Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/color-legend
function Swatches(color, {
  columns = null,
  format,
  unknown: formatUnknown,
  swatchSize = 15,
  swatchWidth = swatchSize,
  swatchHeight = swatchSize,
  marginLeft = 0
} = {}) {
  const id = `-swatches-${Math.random().toString(16).slice(2)}`;
  const unknown = formatUnknown == null ? undefined : color.unknown();
  const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown];
  const domain = color.domain().concat(unknowns);
  if (format === undefined) format = x => x === unknown ? formatUnknown : x;

  function entity(character) {
    return `&#${character.charCodeAt(0).toString()};`;
  }

  if (columns !== null) return htl.html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 12px sans-serif;">
  <style>

.${id}-item {
  break-inside: avoid;
  display: flex;
  align-items: center;
  padding-bottom: 1px;
}

.${id}-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}

.${id}-swatch {
  width: ${+swatchWidth}px;
  height: ${+swatchHeight}px;
  margin: 0 0.5em 0 0;
}

  </style>
  <div style=${{width: "100%", columns}}>${domain.map(value => {
    const label = `${format(value)}`;
    return htl.html`<div class=${id}-item>
      <div class=${id}-swatch style=${{background: color(value)}}></div>
      <div class=${id}-label title=${label}>${label}</div>
    </div>`;
  })}
  </div>
</div>`;

  return htl.html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; font: 12px sans-serif;">
  <style>

.${id} {
  display: inline-flex;
  align-items: center;
  margin-right: 1em;
}

.${id}::before {
  content: "";
  width: ${+swatchWidth}px;
  height: ${+swatchHeight}px;
  margin-right: 0.5em;
  background: var(--color);
}

  </style>
  <div>${domain.map(value => htl.html`<span class="${id}" style="--color: ${color(value)}">${format(value)}</span>`)}</div>`;
}

function swatches({color, ...options}) {
  return Swatches(color, options);
}

chart_map_d3 = function(data, mapTopoJSON, color, colorBorder, txtTitle, chart_width, chart_height) {

  const projection = d3.geoMercator()
  .scale(1200)
  //.center([40, 67.5])
  .center([40, 67.3])
  .translate([400, 220])
  const path = d3.geoPath().projection(projection);
  const format = d => `${d}%`;
  
  //Määritellään tähän muuttujat CSV:stä!!!!!!
  const valuemap = new Map(data.map(d => [d.id, d.muutos]));
  
  //Määritellään maakunnat
  const maakuntamesh = topojson.mesh(maakunnat_2024_topo, maakunnat_2024_topo.objects.maakunnat_2024, (a, b) => a !== b);
  
  const zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on("zoom", zoomed);

  const svg = d3.create("svg")
      .attr("width", 900)
      .attr("height", 650)
      .attr("viewBox", [0, 0, 900, 650])
      .on("click", reset);
      
  const g = svg.append("g")
      .attr("transform", "translate(20,35)")
      .append(() => Legend(color, {title: txtTitle, width: 260}));

  g.append("g")
    .selectAll("path")
    .data(mapTopoJSON)
    .join("path")
      .attr("fill", d => color(valuemap.get(d.properties.kunta))) 
      .attr("d", path)
    .append("title")
      .text(d => `${d.properties.name},\n(${d.properties.nimi_2}),\n${valuemap.get(d.properties.kunta)}`);
      
  g.append("path")
      .datum(maakuntamesh)
      .attr("fill", "none")
      .attr("stroke", colorBorder)
      .attr("stroke-linejoin", "round")
      .attr("d", path);
      
   svg.call(zoom);
   

  function reset() {
    // states.transition().style("fill", null);
    svg.transition().duration(750).call(
      zoom.transform,
      d3.zoomIdentity,
      d3.zoomTransform(svg.node()).invert([chart_width / 2, chart_height / 2])
    );
  }

  function zoomed(event) {
    const {transform} = event;
    g.attr("transform", transform);
    g.attr("stroke-width", 1 / transform.k);
  }     
      
  return svg.node();
}

chart_chord_d3 = function(data, title_txt_chord, chart_width, chart_height) {

  var sum_target;
  var sum_source;
  let vari;
  var sum_yht;
  
  const margin = ({top: 20, right: 20, bottom: 0, left: 50});
  const width = 300;
  const height = width;
  const innerRadius = Math.min(width, height) * .3 - 40;
  const outerRadius = innerRadius + 15;
  
  
  const chord = d3.chordDirected()
    .padAngle(0.5 / innerRadius)
    .sortSubgroups(d3.ascending)
    .sortChords(d3.ascending);
    
  const ribbon = d3.ribbon()
    .radius(innerRadius - 1)
    .padAngle(0.5 / innerRadius);
    
  const rename = name => name.substring(name.indexOf(".") + 1, name.lastIndexOf("."))
  const names = Array.from(new Set(data.flatMap(d => [d.source, d.target]))).sort(d3.ascending);
  
  function matriisi(names) {
    const index = new Map(names.map((name, i) => [name, i]));
    const matrix = Array.from(index, () => new Array(names.length).fill(0));
    for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += value;
    return matrix;
  }

 const matrix = matriisi(names)
  
 const arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)

  //TÄSTÄ ALKAA PIIRROS
  
  const zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on("zoom", zoomed);
  
  const svg = d3.create("svg")
      .attr("viewBox", [-width / 2, -height / 2.5, width, height]);

  const chords = chord(matrix);
  
  const group = svg.append("g")
      .attr("font-size", 3)
      .attr("font-family", "Century Gothic")
    .selectAll("g")
    .data(chords.groups)
    .join("g");

  group.append("path")
      .attr("fill", d => {
           sum_target = d3.sum(chords, c => (c.target.index === d.index) * c.target.value);
           sum_source = d3.sum(chords, c => (c.source.index === d.index) * c.source.value);
           sum_yht = sum_target-sum_source;
            if (sum_yht > 0) { 
              vari = "#009651"
              return vari 
            }
            else if (sum_yht == 0) { 
              vari = "#28336C"
              return vari 
            }
            else    { 
              vari = "#DE232F" 
              return vari 
            }
        })
      .attr("d", arc);

  group.append("text")
      .each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
      .attr("dy", "0.35em")
      .attr("transform", d => `
        rotate(${(d.angle * 180 / Math.PI - 90)})
        translate(${outerRadius + 6})
        ${d.angle > Math.PI ? "rotate(180)" : ""}
      `)
      .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
      //.text(d => names[d.index])
      .text(d => (d.index >= 3) ? names[d.index] : "")
      .attr("fill", d => {
           sum_target = d3.sum(chords, c => (c.target.index === d.index) * c.target.value);
           sum_source = d3.sum(chords, c => (c.source.index === d.index) * c.source.value);
           sum_yht = sum_target-sum_source;
            if (sum_yht > 0) { 
              vari = "#009651"
              return vari
            }
            else if (sum_yht == 0) { 
              vari = "#28336C"
              return vari 
            }
            else    { 
              vari = "#DE232F" 
              return vari 
            }
        });

  group.append("title")
      .text(d => `${names[d.index]} 

${d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} lähtee →
${d3.sum(chords, c => (c.target.index === d.index) * c.source.value)} tulee ←
${d3.sum(chords, c => (c.target.index === d.index) * c.target.value)- d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} netto =`);  

  svg.append("g")
      .attr("fill-opacity", 0.75)
    .selectAll("path")
    .data(chords)
    .join("path")
      .style("mix-blend-mode", "multiply")
          .attr("fill", d => {
           sum_target = d3.sum(chords, c => (c.target.index === d.index) * c.target.value);
           sum_source = d3.sum(chords, c => (c.source.index === d.index) * c.source.value);
           sum_yht = sum_target-sum_source;
            if (sum_yht > 0) { 
              vari = "#009651"
              return vari 
            }
            else if (sum_yht == 0) { 
              vari = "#28336C"
              return vari 
            }
            else    { 
              vari = "#DE232F" 
              return vari 
            }
        })
      .attr("d", ribbon)
    .append("title")
      .text(d => `${names[d.source.index]} --> ${names[d.target.index]} ${d.source.value}`);
      
      
  svg.call(zoom);
   

  function reset() {
    // states.transition().style("fill", null);
    svg.transition().duration(750).call(
      zoom.transform,
      d3.zoomIdentity,
      d3.zoomTransform(svg.node()).invert([chart_width / 2, chart_height / 2])
    );
  }

  function zoomed(event) {
    const {transform} = event;
    svg.attr("transform", transform);
    svg.attr("stroke-width", 1 / transform.k);
  }    

  return svg.node();


}

Väestönmuutokset

Kuntien välinen nettomuutto - viimeiset 12kk

Voit tarkistella karttaa tarkemmin pyörittämällä hiiren rullanäppäintä.

data_migr = (await FileAttachmentDynamic(migrBetwMuniMapCSV).csv()).map((d) => (d.muutos = +d.muutos, d))

//Väritetään kartta
mapInterpolateRdBu_migr = d3.scaleDiverging([-150, 0, 150], d3.interpolatePiYG);

borderColorDark_migr = "#525252";

//Piirretään kartta
chart_map_d3(data_migr, mapTopoJSON, mapInterpolateRdBu_migr, borderColorDark_migr, title_txt_map_migr,chart_width_migr,chart_height_migr)

DOM.download(() => serialize(chart_map_d3(data_migr, mapTopoJSON, mapInterpolateRdBu_migr, borderColorDark_migr, title_txt_map_migr,chart_width_migr,chart_height_migr)), title_txt_map_migr, "Save as SVG")

Kuntien välinen nettomuutto - viimeiset 12kk

Sija	Maakunta	Kunta	Kuntien välinen nettomuutto
1	Pirkanmaa	Tampere	2756
2	Uusimaa	Helsinki	2689
3	Varsinais-Suomi	Turku	1743
4	Uusimaa	Espoo	1731
5	Uusimaa	Tuusula	888
6	Pohjois-Savo	Kuopio	532
7	Pirkanmaa	Kangasala	459
8	Pirkanmaa	Nokia	405
9	Uusimaa	Kirkkonummi	199
10	Pirkanmaa	Pirkkala	192
11	Uusimaa	Sipoo	185
12	Varsinais-Suomi	Naantali	164
13	Pohjois-Pohjanmaa	Oulu	143
14	Varsinais-Suomi	Kaarina	121
15	Uusimaa	Lohja	110
16	Satakunta	Pori	94
17	Ahvenanmaa	Jomala	69
18	Lappi	Inari	63
19	Lappi	Sodankylä	60
20	Päijät-Häme	Heinola	59
21	Uusimaa	Hyvinkää	58
22	Keski-Suomi	Muurame	49
23	Pirkanmaa	Hämeenkyrö	48
24	Pirkanmaa	Orivesi	47
25	Pirkanmaa	Akaa	37
26	Pirkanmaa	Lempäälä	33
27	Uusimaa	Inkoo	32
28	Pirkanmaa	Vesilahti	32
29	Päijät-Häme	Iitti	31
30	Varsinais-Suomi	Raisio	31
31	Uusimaa	Siuntio	28
32	Ahvenanmaa	Finström	27
33	Pohjois-Savo	Tuusniemi	24
34	Pohjois-Pohjanmaa	Ii	23
35	Pohjois-Pohjanmaa	Kempele	20
36	Etelä-Savo	Mäntyharju	20
37	Etelä-Savo	Puumala	20
38	Päijät-Häme	Sysmä	20
39	Keski-Pohjanmaa	Perho	19
40	Keski-Suomi	Uurainen	19
41	Lappi	Enontekiö	18
42	Etelä-Savo	Hirvensalmi	18
43	Varsinais-Suomi	Kustavi	18
44	Etelä-Savo	Sulkava	18
45	Uusimaa	Hanko	17
46	Kanta-Häme	Hattula	17
47	Keski-Pohjanmaa	Kannus	17
48	Uusimaa	Kauniainen	17
49	Uusimaa	Porvoo	17
50	Varsinais-Suomi	Lieto	16

Kuntien välinen nettomuutto - viimeiset 12kk, top20

Kangasala on sijalla 7, tarkasteltaessa kuntien välistä nettomuuttoa viimeisen 12kk aikana. Kuntien välinen nettomuuttolukema on 459. Maakuntavertailussa (Pirkanmaa) Kangasala on sijalla 2.

Väestönmuutokset - Väestöennakko

Ennakkotiedot

Ennakkotietojen (2024M10) perusteella väkiluku on kasvanut 0.12 % (2024M09: 0.09 %). Uusin väestön ennakkotieto on 33905 (edell. lukema 33863). Vuoden alusta (2023: 33473) väkiluku on kasvanut 1.29 %.

Vuosi	Ennakkotieto
2019	NA
2020	NA
2021	NA
2022	NA
2023	NA
2024M01*	33524
2024M02*	33602
2024M03*	33628
2024M04*	33671
2024M05*	33723
2024M06*	33752
2024M07*	33809
2024M08*	33832
2024M09*	33863
2024M10*	33905

Väkiluvun muutos-% vuoden 2023 lopusta

Voit tarkistella kartaa lähemmin pyörittämällä hiiren rullanäppäintä.

data = (await FileAttachmentDynamic(populationMapCSV).csv()).map((d) => (d.muutos = +d.muutos, d))

//Väritetään kartta
//mapInterpolateRdBu = d3.scaleDiverging([domain_min, 0, domain_max], d3.interpolateRdBu);
mapInterpolateRdBu = d3.scaleDiverging([-1.5, 0, 1.5], d3.interpolatePiYG);

borderColorDark = "#525252";

//Piirretään kartta
chart_map_d3(data, mapTopoJSON, mapInterpolateRdBu, borderColorDark, title_txt_map,chart_width,chart_height)

DOM.download(() => serialize(chart_map_d3(data, mapTopoJSON, mapInterpolateRdBu, borderColorDark, title_txt_map,chart_width,chart_height)), title_txt_map, "Save as SVG")

Väkiluvun muutos-% edellisvuoden lopusta

Sija	Maakunta	Kunta	Väestö 31.12.	2024M10*	Muutos-%
1	Pohjanmaa	Kaskinen	1208	1246	3.15
2	Pohjanmaa	Vaasa	68956	70382	2.07
3	Ahvenanmaa	Brändö	436	445	2.06
4	Varsinais-Suomi	Turku	201863	205949	2.02
5	Pirkanmaa	Tampere	255050	260051	1.96
6	Uusimaa	Tuusula	41338	42112	1.87
7	Uusimaa	Espoo	314024	319811	1.84
8	Uusimaa	Vantaa	247443	251070	1.47
9	Ahvenanmaa	Geta	509	516	1.38
10	Uusimaa	Helsinki	674500	683669	1.36
11	Pirkanmaa	Kangasala	33473	33905	1.29
12	Pohjois-Savo	Kuopio	124021	125597	1.27
13	Ahvenanmaa	Jomala	5697	5768	1.25
14	Pirkanmaa	Nokia	35647	36083	1.22
15	Ahvenanmaa	Sund	995	1007	1.21
16	Pirkanmaa	Pirkkala	20763	20996	1.12
17	Uusimaa	Kirkkonummi	41154	41610	1.11
18	Ahvenanmaa	Eckerö	942	952	1.06
19	Varsinais-Suomi	Raisio	25331	25595	1.04
20	Ahvenanmaa	Finström	2610	2637	1.03
21	Keski-Suomi	Jyväskylä	147746	149263	1.03
22	Etelä-Savo	Pieksämäki	17050	17213	0.96
23	Pohjois-Karjala	Joensuu	78062	78764	0.90
24	Keski-Suomi	Joutsa	4079	4115	0.88
25	Pirkanmaa	Vesilahti	4469	4508	0.87
26	Uusimaa	Sipoo	22595	22789	0.86
27	Keski-Suomi	Uurainen	3615	3646	0.86
28	Uusimaa	Porvoo	51289	51698	0.80
29	Pohjois-Pohjanmaa	Oulu	214633	216174	0.72
30	Satakunta	Kankaanpää	12394	12481	0.70
31	Etelä-Karjala	Lappeenranta	72988	73481	0.68
32	Uusimaa	Järvenpää	46490	46795	0.66
33	Pirkanmaa	Lempäälä	24711	24875	0.66
34	Ahvenanmaa	Maarianhamina - Mariehamn	11812	11888	0.64
35	Kanta-Häme	Riihimäki	28483	28663	0.63
36	Päijät-Häme	Lahti	120693	121447	0.62
37	Uusimaa	Kerava	38211	38444	0.61
38	Ahvenanmaa	Lemland	2127	2140	0.61
39	Etelä-Pohjanmaa	Seinäjoki	66160	66556	0.60
40	Lappi	Rovaniemi	65286	65673	0.59
41	Pirkanmaa	Valkeakoski	20694	20816	0.59
42	Keski-Suomi	Laukaa	18762	18869	0.57
43	Pohjanmaa	Luoto	5843	5876	0.56
44	Varsinais-Suomi	Kaarina	36339	36538	0.55
45	Pohjois-Pohjanmaa	Pyhäntä	1646	1655	0.55
46	Varsinais-Suomi	Naantali	19999	20107	0.54
47	Uusimaa	Inkoo	5379	5407	0.52
48	Varsinais-Suomi	Laitila	8441	8482	0.49
49	Pohjois-Karjala	Outokumpu	6409	6440	0.48
50	Keski-Pohjanmaa	Perho	2578	2590	0.47

Väkiluvun muutos-% edellisvuoden lopusta

Kangasala on sijalla 11, tarkasteltaessa väkiluvun muutosta edellisvuoden lopusta kuntien kesken. Viimeisin ennakkotietolukema on 33905 (muutos-% edellisen vuoden loppuun: 1.29). Maakuntavertailussa (Pirkanmaa) Kangasala on sijalla 2.

Väestönmuutokset - Väestöennakko, viisi ikäluokkaa

Vuosi	Yhteensä	0-6	0-6 %	7-15	7-15 %	16-64	16-64 %	65-79	65-79 %	80+	80+ %
2000	25630	2203	8.60	3288	12.83	16686	65.10	2661	10.38	792	3.09
2001	25922	2220	8.56	3339	12.88	16841	64.97	2730	10.53	792	3.06
2002	26341	2251	8.55	3380	12.83	17104	64.93	2798	10.62	808	3.07
2003	26778	2285	8.53	3442	12.85	17304	64.62	2926	10.93	821	3.07
2004	27303	2451	8.98	3393	12.43	17588	64.42	3036	11.12	835	3.06
2005	27927	2596	9.30	3432	12.29	17950	64.27	3067	10.98	882	3.16
2006	28407	2725	9.59	3421	12.04	18139	63.85	3195	11.25	927	3.26
2007	28809	2860	9.93	3380	11.73	18340	63.66	3243	11.26	986	3.42
2008	29282	2970	10.14	3392	11.58	18531	63.28	3334	11.39	1055	3.60
2009	29522	3013	10.21	3440	11.65	18566	62.89	3409	11.55	1094	3.71
2010	29675	3037	10.23	3426	11.55	18560	62.54	3506	11.81	1146	3.86
2011	29891	2978	9.96	3518	11.77	18502	61.90	3724	12.46	1169	3.91
2012	30126	2951	9.80	3540	11.75	18496	61.40	3938	13.07	1201	3.99
2013	30345	2895	9.54	3662	12.07	18404	60.65	4124	13.59	1260	4.15
2014	30471	2827	9.28	3736	12.26	18317	60.11	4326	14.20	1265	4.15
2015	30607	2772	9.06	3790	12.38	18309	59.82	4454	14.55	1282	4.19
2016	31190	2779	8.91	3911	12.54	18560	59.51	4570	14.65	1370	4.39
2017	31437	2708	8.61	3967	12.62	18639	59.29	4726	15.03	1397	4.44
2018	31676	2641	8.34	3979	12.56	18743	59.17	4824	15.23	1489	4.70
2019	31868	2557	8.02	4026	12.63	18745	58.82	4970	15.60	1570	4.93
2020	32214	2495	7.75	4012	12.45	18965	58.87	5110	15.86	1632	5.07
2021	32622	2521	7.73	3978	12.19	19270	59.07	5137	15.75	1716	5.26
2022	32959	2488	7.55	3987	12.10	19521	59.23	5201	15.78	1762	5.35
2023	33473	2424	7.24	3997	11.94	19961	59.63	5282	15.78	1809	5.40
2024M10*	33905	2441	7.20	3956	11.67	20270	59.78	5366	15.83	1872	5.52

Väestökehityksen muutos - 5 ikäluokkaa

0-6-vuotiaat

Ikäluokkien kehitystä aikaisempiin vuosiin vertailtaessa 0-6-vuotiaiden %-osuus oli 2024M10* yhteensä 7.2. Jos verrataan lukemaa kahteen edellisvuoteen 2022 ja 2023, muutosta on tullut -0.35 (2022) ja -0.04 (2023)

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M10* yhteensä 11.67. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.43 (2022) ja -0.27 (2023)

16-64-vuotiaat

Ikäluokka 16-64-vuotiaat on suurin kooltaan. Tämän ryhmän prosenttiosuus kokonaisuudesta oli 2024M10* yhteensä 59.78. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.55 (2022) ja 0.15 (2023)

65-79-vuotiaat

Ikäluokka 65-79-vuotiaat oli kooltaan 2024M10* yhteensä 15.83. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.05 (2022) ja 0.05 (2023)

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M10* yhteensä 5.52. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.17 (2022) ja 0.12 (2023)

Väestönmuutokset - Väestöennakko, kuusi ikäluokkaa

Vuosi	Yhteensä	0-6	0-6 %	7-15	7-15 %	16-18	16-18 %	19-64	19-64 %	65-79	65-79 %	80+	80+ %
2000	25630	2203	8.60	3288	12.83	1086	4.24	15600	60.87	2661	10.38	792	3.09
2001	25922	2220	8.56	3339	12.88	1052	4.06	15789	60.91	2730	10.53	792	3.06
2002	26341	2251	8.55	3380	12.83	1004	3.81	16100	61.12	2798	10.62	808	3.07
2003	26778	2285	8.53	3442	12.85	976	3.64	16328	60.98	2926	10.93	821	3.07
2004	27303	2451	8.98	3393	12.43	1016	3.72	16572	60.70	3036	11.12	835	3.06
2005	27927	2596	9.30	3432	12.29	1058	3.79	16892	60.49	3067	10.98	882	3.16
2006	28407	2725	9.59	3421	12.04	1079	3.80	17060	60.06	3195	11.25	927	3.26
2007	28809	2860	9.93	3380	11.73	1101	3.82	17239	59.84	3243	11.26	986	3.42
2008	29282	2970	10.14	3392	11.58	1138	3.89	17393	59.40	3334	11.39	1055	3.60
2009	29522	3013	10.21	3440	11.65	1145	3.88	17421	59.01	3409	11.55	1094	3.71
2010	29675	3037	10.23	3426	11.55	1156	3.90	17404	58.65	3506	11.81	1146	3.86
2011	29891	2978	9.96	3518	11.77	1148	3.84	17354	58.06	3724	12.46	1169	3.91
2012	30126	2951	9.80	3540	11.75	1178	3.91	17318	57.49	3938	13.07	1201	3.99
2013	30345	2895	9.54	3662	12.07	1084	3.57	17320	57.08	4124	13.59	1260	4.15
2014	30471	2827	9.28	3736	12.26	1055	3.46	17262	56.65	4326	14.20	1265	4.15
2015	30607	2772	9.06	3790	12.38	1044	3.41	17265	56.41	4454	14.55	1282	4.19
2016	31190	2779	8.91	3911	12.54	1087	3.49	17473	56.02	4570	14.65	1370	4.39
2017	31437	2708	8.61	3967	12.62	1101	3.50	17538	55.79	4726	15.03	1397	4.44
2018	31676	2641	8.34	3979	12.56	1124	3.55	17619	55.62	4824	15.23	1489	4.70
2019	31868	2557	8.02	4026	12.63	1170	3.67	17575	55.15	4970	15.60	1570	4.93
2020	32214	2495	7.75	4012	12.45	1233	3.83	17732	55.04	5110	15.86	1632	5.07
2021	32622	2521	7.73	3978	12.19	1258	3.86	18012	55.21	5137	15.75	1716	5.26
2022	32959	2488	7.55	3987	12.10	1291	3.92	18230	55.31	5201	15.78	1762	5.35
2023	33473	2424	7.24	3997	11.94	1349	4.03	18612	55.60	5282	15.78	1809	5.40
2024M10*	33905	2441	7.20	3956	11.67	1379	4.07	18891	55.72	5366	15.83	1872	5.52

Väestökehityksen muutos - 6 ikäluokkaa

0-6-vuotiaat

Ikäluokkien kehitystä aikaisempiin vuosiin vertailtaessa 0-6-vuotiaiden %-osuus oli 2024M10* yhteensä 7.2. Jos verrataan lukemaa kahteen edellisvuoteen 2022 ja 2023, muutosta on tullut -0.35 (2022) ja -0.04 (2023)

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M10* yhteensä 11.67. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.43 (2022) ja -0.27 (2023)

16-18-vuotiaat

16-18-vuotiaiden prosenttiosuus kokonaisuudesta oli 2024M10* yhteensä 4.07. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.15 (2022) ja 0.04 (2023)

18-64-vuotiaat

Ikäluokka 18-64-vuotiaat on suurin kooltaan. Tämän ryhmän prosenttiosuus kokonaisuudesta oli 2024M10* yhteensä 59.78. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut **** (2022) ja **** (2023)

65-79-vuotiaat

Ikäluokka 65-79-vuotiaat oli kooltaan 2024M10* yhteensä 15.83. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.05 (2022) ja 0.05 (2023)

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M10* yhteensä 5.52. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.17 (2022) ja 0.12 (2023)