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	Uusimaa	Helsinki	2705
2	Pirkanmaa	Tampere	2641
3	Uusimaa	Espoo	1945
4	Varsinais-Suomi	Turku	1694
5	Uusimaa	Tuusula	903
6	Pirkanmaa	Kangasala	492
7	Pirkanmaa	Nokia	491
8	Pohjois-Savo	Kuopio	423
9	Pohjois-Pohjanmaa	Oulu	248
10	Uusimaa	Sipoo	190
11	Pirkanmaa	Pirkkala	182
12	Uusimaa	Kirkkonummi	175
13	Satakunta	Pori	136
14	Varsinais-Suomi	Kaarina	134
15	Varsinais-Suomi	Naantali	121
16	Uusimaa	Lohja	115
17	Päijät-Häme	Heinola	80
18	Ahvenanmaa	Jomala	78
19	Uusimaa	Hyvinkää	64
20	Etelä-Pohjanmaa	Seinäjoki	62
21	Lappi	Inari	60
22	Pirkanmaa	Hämeenkyrö	59
23	Pohjois-Pohjanmaa	Ii	52
24	Lappi	Sodankylä	46
25	Uusimaa	Porvoo	44
26	Varsinais-Suomi	Lieto	43
27	Keski-Suomi	Muurame	43
28	Uusimaa	Hanko	38
29	Lappi	Kittilä	38
30	Pirkanmaa	Orivesi	35
31	Satakunta	Pomarkku	31
32	Etelä-Savo	Puumala	31
33	Pirkanmaa	Akaa	30
34	Pirkanmaa	Vesilahti	27
35	Ahvenanmaa	Finström	24
36	Päijät-Häme	Iitti	23
37	Keski-Suomi	Luhanka	22
38	Etelä-Savo	Sulkava	22
39	Satakunta	Nakkila	21
40	Etelä-Karjala	Parikkala	20
41	Pohjois-Savo	Tuusniemi	20
42	Keski-Pohjanmaa	Veteli	20
43	Etelä-Savo	Hirvensalmi	19
44	Pirkanmaa	Lempäälä	18
45	Uusimaa	Nurmijärvi	18
46	Keski-Suomi	Uurainen	18
47	Etelä-Karjala	Ruokolahti	16
48	Ahvenanmaa	Sund	16
49	Päijät-Häme	Sysmä	16
50	Pohjois-Savo	Tervo	16

Kuntien välinen nettomuutto - viimeiset 12kk, top20

Parkano on sijalla 149, tarkasteltaessa kuntien välistä nettomuuttoa viimeisen 12kk aikana. Kuntien välinen nettomuuttolukema on -17. Maakuntavertailussa (Pirkanmaa) Parkano on sijalla 14.

Väestönmuutokset - Väestöennakko

Ennakkotiedot

Ennakkotietojen (2024M09) perusteella väkiluku on laskenut -0.13 % (2024M08: -0.39 %). Uusin väestön ennakkotieto on 6092 (edell. lukema 6100). Vuoden alusta (2023: 6123) väkiluku on laskenut -0.51 %.

Vuosi	Ennakkotieto
2018	NA
2019	NA
2020	NA
2021	NA
2022	NA
2023	NA
2024M01*	6130
2024M02*	6131
2024M03*	6119
2024M04*	6124
2024M05*	6121
2024M06*	6126
2024M07*	6124
2024M08*	6100
2024M09*	6092

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.	2024M09*	Muutos-%
1	Pohjanmaa	Kaskinen	1208	1241	2.73
2	Ahvenanmaa	Sund	995	1014	1.91
3	Varsinais-Suomi	Turku	201863	205434	1.77
4	Pirkanmaa	Tampere	255050	259531	1.76
5	Ahvenanmaa	Sottunga	115	117	1.74
6	Pohjanmaa	Vaasa	68956	70118	1.69
7	Ahvenanmaa	Brändö	436	443	1.61
8	Uusimaa	Espoo	314024	319002	1.59
9	Uusimaa	Tuusula	41338	41993	1.58
10	Ahvenanmaa	Jomala	5697	5772	1.32
11	Uusimaa	Vantaa	247443	250398	1.19
12	Uusimaa	Helsinki	674500	682434	1.18
13	Ahvenanmaa	Eckerö	942	953	1.17
14	Pirkanmaa	Nokia	35647	36053	1.14
15	Pirkanmaa	Kangasala	33473	33849	1.12
16	Varsinais-Suomi	Vehmaa	2245	2270	1.11
17	Pohjois-Savo	Kuopio	124021	125316	1.04
18	Pirkanmaa	Pirkkala	20763	20949	0.90
19	Uusimaa	Sipoo	22595	22795	0.89
20	Uusimaa	Kirkkonummi	41154	41503	0.85
21	Pohjois-Pohjanmaa	Pyhäntä	1646	1660	0.85
22	Keski-Suomi	Jyväskylä	147746	148984	0.84
23	Varsinais-Suomi	Raisio	25331	25543	0.84
24	Ahvenanmaa	Geta	509	513	0.79
25	Pirkanmaa	Vesilahti	4469	4504	0.78
26	Pohjanmaa	Luoto	5843	5888	0.77
27	Etelä-Savo	Pieksämäki	17050	17178	0.75
28	Uusimaa	Porvoo	51289	51660	0.72
29	Keski-Suomi	Uurainen	3615	3641	0.72
30	Pohjois-Karjala	Joensuu	78062	78602	0.69
31	Satakunta	Kankaanpää	12394	12476	0.66
32	Ahvenanmaa	Lemland	2127	2141	0.66
33	Pohjois-Pohjanmaa	Oulu	214633	215978	0.63
34	Uusimaa	Järvenpää	46490	46767	0.60
35	Keski-Suomi	Joutsa	4079	4103	0.59
36	Etelä-Karjala	Lappeenranta	72988	73415	0.59
37	Pirkanmaa	Lempäälä	24711	24855	0.58
38	Kanta-Häme	Riihimäki	28483	28649	0.58
39	Etelä-Pohjanmaa	Seinäjoki	66160	66531	0.56
40	Päijät-Häme	Lahti	120693	121307	0.51
41	Satakunta	Pomarkku	1943	1953	0.51
42	Ahvenanmaa	Finström	2610	2623	0.50
43	Pohjois-Pohjanmaa	Ii	9766	9815	0.50
44	Uusimaa	Siuntio	6158	6188	0.49
45	Pirkanmaa	Valkeakoski	20694	20793	0.48
46	Varsinais-Suomi	Kaarina	36339	36507	0.46
47	Varsinais-Suomi	Laitila	8441	8479	0.45
48	Keski-Suomi	Luhanka	702	705	0.43
49	Lappi	Rovaniemi	65286	65558	0.42
50	Varsinais-Suomi	Naantali	19999	20080	0.41

Väkiluvun muutos-% edellisvuoden lopusta

Parkano on sijalla 153, tarkasteltaessa väkiluvun muutosta edellisvuoden lopusta kuntien kesken. Viimeisin ennakkotietolukema on 6092 (muutos-% edellisen vuoden loppuun: -0.51). Maakuntavertailussa (Pirkanmaa) Parkano on sijalla 14.

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	7807	538	6.89	841	10.77	5015	64.24	1109	14.21	304	3.89
2001	7758	522	6.73	830	10.70	4970	64.06	1121	14.45	315	4.06
2002	7620	491	6.44	814	10.68	4888	64.15	1084	14.23	343	4.50
2003	7499	471	6.28	797	10.63	4779	63.73	1090	14.54	362	4.83
2004	7471	492	6.59	740	9.90	4734	63.37	1131	15.14	374	5.01
2005	7340	485	6.61	716	9.75	4631	63.09	1117	15.22	391	5.33
2006	7213	455	6.31	718	9.95	4491	62.26	1143	15.85	406	5.63
2007	7132	448	6.28	710	9.96	4406	61.78	1156	16.21	412	5.78
2008	7115	444	6.24	700	9.84	4385	61.63	1154	16.22	432	6.07
2009	7069	467	6.61	670	9.48	4335	61.32	1158	16.38	439	6.21
2010	6978	469	6.72	631	9.04	4233	60.66	1184	16.97	461	6.61
2011	6982	463	6.63	637	9.12	4157	59.54	1241	17.77	484	6.93
2012	6918	447	6.46	643	9.29	4045	58.47	1297	18.75	486	7.03
2013	6836	448	6.55	638	9.33	3909	57.18	1341	19.62	500	7.31
2014	6808	432	6.35	644	9.46	3837	56.36	1388	20.39	507	7.45
2015	6766	424	6.27	641	9.47	3765	55.65	1430	21.14	506	7.48
2016	6692	410	6.13	637	9.52	3670	54.84	1462	21.85	513	7.67
2017	6562	376	5.73	609	9.28	3575	54.48	1487	22.66	515	7.85
2018	6469	358	5.53	607	9.38	3445	53.25	1533	23.70	526	8.13
2019	6404	370	5.78	589	9.20	3353	52.36	1555	24.28	537	8.39
2020	6352	367	5.78	569	8.96	3299	51.94	1590	25.03	527	8.30
2021	6286	355	5.65	560	8.91	3224	51.29	1587	25.25	560	8.91
2022	6240	327	5.24	570	9.13	3183	51.01	1606	25.74	554	8.88
2023	6123	308	5.03	552	9.02	3102	50.66	1612	26.33	549	8.97
2024M09*	6092	295	4.84	537	8.81	3103	50.94	1607	26.38	550	9.03

Väestökehityksen muutos - 5 ikäluokkaa

0-6-vuotiaat

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

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M09* yhteensä 8.81. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.32 (2022) ja -0.21 (2023)

16-64-vuotiaat

Ikäluokka 16-64-vuotiaat on suurin kooltaan. Tämän ryhmän prosenttiosuus kokonaisuudesta oli 2024M09* yhteensä 50.94. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.07 (2022) ja 0.28 (2023)

65-79-vuotiaat

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

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M09* yhteensä 9.03. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.15 (2022) ja 0.06 (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	7807	538	6.89	841	10.77	388	4.97	4627	59.27	1109	14.21	304	3.89
2001	7758	522	6.73	830	10.70	361	4.65	4609	59.41	1121	14.45	315	4.06
2002	7620	491	6.44	814	10.68	329	4.32	4559	59.83	1084	14.23	343	4.50
2003	7499	471	6.28	797	10.63	284	3.79	4495	59.94	1090	14.54	362	4.83
2004	7471	492	6.59	740	9.90	299	4.00	4435	59.36	1131	15.14	374	5.01
2005	7340	485	6.61	716	9.75	273	3.72	4358	59.37	1117	15.22	391	5.33
2006	7213	455	6.31	718	9.95	270	3.74	4221	58.52	1143	15.85	406	5.63
2007	7132	448	6.28	710	9.96	233	3.27	4173	58.51	1156	16.21	412	5.78
2008	7115	444	6.24	700	9.84	247	3.47	4138	58.16	1154	16.22	432	6.07
2009	7069	467	6.61	670	9.48	249	3.52	4086	57.80	1158	16.38	439	6.21
2010	6978	469	6.72	631	9.04	268	3.84	3965	56.82	1184	16.97	461	6.61
2011	6982	463	6.63	637	9.12	266	3.81	3891	55.73	1241	17.77	484	6.93
2012	6918	447	6.46	643	9.29	235	3.40	3810	55.07	1297	18.75	486	7.03
2013	6836	448	6.55	638	9.33	203	2.97	3706	54.21	1341	19.62	500	7.31
2014	6808	432	6.35	644	9.46	199	2.92	3638	53.44	1388	20.39	507	7.45
2015	6766	424	6.27	641	9.47	222	3.28	3543	52.36	1430	21.14	506	7.48
2016	6692	410	6.13	637	9.52	215	3.21	3455	51.63	1462	21.85	513	7.67
2017	6562	376	5.73	609	9.28	209	3.19	3366	51.30	1487	22.66	515	7.85
2018	6469	358	5.53	607	9.38	177	2.74	3268	50.52	1533	23.70	526	8.13
2019	6404	370	5.78	589	9.20	173	2.70	3180	49.66	1555	24.28	537	8.39
2020	6352	367	5.78	569	8.96	180	2.83	3119	49.10	1590	25.03	527	8.30
2021	6286	355	5.65	560	8.91	191	3.04	3033	48.25	1587	25.25	560	8.91
2022	6240	327	5.24	570	9.13	192	3.08	2991	47.93	1606	25.74	554	8.88
2023	6123	308	5.03	552	9.02	182	2.97	2920	47.69	1612	26.33	549	8.97
2024M09*	6092	295	4.84	537	8.81	186	3.05	2917	47.88	1607	26.38	550	9.03

Väestökehityksen muutos - 6 ikäluokkaa

0-6-vuotiaat

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

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M09* yhteensä 8.81. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.32 (2022) ja -0.21 (2023)

16-18-vuotiaat

16-18-vuotiaiden prosenttiosuus kokonaisuudesta oli 2024M09* yhteensä 3.05. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.03 (2022) ja 0.08 (2023)

18-64-vuotiaat

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

65-79-vuotiaat

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

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M09* yhteensä 9.03. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.15 (2022) ja 0.06 (2023)