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	3283
2	Pirkanmaa	Tampere	2711
3	Uusimaa	Espoo	1887
4	Varsinais-Suomi	Turku	1611
5	Uusimaa	Tuusula	740
6	Pirkanmaa	Nokia	483
7	Pirkanmaa	Kangasala	418
8	Pohjois-Savo	Kuopio	386
9	Pirkanmaa	Pirkkala	202
10	Uusimaa	Sipoo	171
11	Uusimaa	Lohja	151
12	Uusimaa	Kirkkonummi	129
13	Varsinais-Suomi	Kaarina	124
14	Varsinais-Suomi	Naantali	111
15	Lappi	Inari	77
16	Uusimaa	Kerava	75
17	Satakunta	Pori	75
18	Varsinais-Suomi	Raisio	67
19	Ahvenanmaa	Jomala	65
20	Pirkanmaa	Orivesi	58
21	Päijät-Häme	Heinola	53
22	Uusimaa	Porvoo	53
23	Keski-Suomi	Muurame	50
24	Pirkanmaa	Hämeenkyrö	43
25	Uusimaa	Hyvinkää	43
26	Etelä-Savo	Mäntyharju	42
27	Päijät-Häme	Hollola	41
28	Pirkanmaa	Vesilahti	40
29	Uusimaa	Inkoo	36
30	Pirkanmaa	Akaa	34
31	Pohjois-Karjala	Ilomantsi	34
32	Uusimaa	Hanko	27
33	Keski-Pohjanmaa	Kannus	26
34	Pohjois-Savo	Tuusniemi	26
35	Päijät-Häme	Iitti	25
36	Etelä-Pohjanmaa	Ilmajoki	25
37	Keski-Suomi	Uurainen	25
38	Pohjois-Pohjanmaa	Ii	23
39	Uusimaa	Siuntio	23
40	Pohjois-Pohjanmaa	Vaala	23
41	Etelä-Savo	Hirvensalmi	22
42	Pohjois-Savo	Leppävirta	22
43	Etelä-Karjala	Ruokolahti	21
44	Pohjois-Pohjanmaa	Siikalatva	21
45	Etelä-Savo	Sulkava	20
46	Pohjois-Pohjanmaa	Kempele	19
47	Varsinais-Suomi	Kustavi	19
48	Lappi	Sodankylä	19
49	Keski-Pohjanmaa	Perho	18
50	Etelä-Savo	Puumala	17

Kuntien välinen nettomuutto - viimeiset 12kk, top20

Juupajoki on sijalla 184, tarkasteltaessa kuntien välistä nettomuuttoa viimeisen 12kk aikana. Kuntien välinen nettomuuttolukema on -30. Maakuntavertailussa (Pirkanmaa) Juupajoki on sijalla 18.

Väestönmuutokset - Väestöennakko

Ennakkotiedot

Ennakkotietojen (2024M12) perusteella väkiluku on laskenut -0.24 % (2024M11: -0.24 %). Uusin väestön ennakkotieto on 1666 (edell. lukema 1670). Vuoden alusta (2023: 1708) väkiluku on laskenut -2.46 %.

Vuosi	Ennakkotieto
2021	NA
2022	NA
2023	NA
2024M01*	1703
2024M02*	1699
2024M03*	1700
2024M04*	1694
2024M05*	1696
2024M06*	1690
2024M07*	1685
2024M08*	1675
2024M09*	1672
2024M10*	1674
2024M11*	1670
2024M12*	1666

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.	2024M12*	Muutos-%
1	Pohjanmaa	Kaskinen	1208	1240	2.65
2	Uusimaa	Espoo	314024	321031	2.23
3	Uusimaa	Tuusula	41338	42238	2.18
4	Pirkanmaa	Tampere	255050	260358	2.08
5	Varsinais-Suomi	Turku	201863	206035	2.07
6	Pohjanmaa	Vaasa	68956	70374	2.06
7	Varsinais-Suomi	Kustavi	949	967	1.90
8	Ahvenanmaa	Jomala	5697	5794	1.70
9	Uusimaa	Vantaa	247443	251405	1.60
10	Ahvenanmaa	Eckerö	942	957	1.59
11	Varsinais-Suomi	Raisio	25331	25717	1.52
12	Uusimaa	Helsinki	674500	684589	1.50
13	Pirkanmaa	Kangasala	33473	33966	1.47
14	Pirkanmaa	Nokia	35647	36171	1.47
15	Lappi	Inari	7127	7226	1.39
16	Ahvenanmaa	Lumparland	366	371	1.37
17	Pohjois-Savo	Kuopio	124021	125668	1.33
18	Pirkanmaa	Pirkkala	20763	21034	1.31
19	Keski-Suomi	Luhanka	702	711	1.28
20	Uusimaa	Kirkkonummi	41154	41660	1.23
21	Ahvenanmaa	Geta	509	515	1.18
22	Keski-Suomi	Uurainen	3615	3655	1.11
23	Keski-Suomi	Jyväskylä	147746	149269	1.03
24	Pirkanmaa	Vesilahti	4469	4515	1.03
25	Uusimaa	Sipoo	22595	22823	1.01
26	Uusimaa	Porvoo	51289	51753	0.90
27	Ahvenanmaa	Kökar	225	227	0.89
28	Pohjois-Karjala	Joensuu	78062	78743	0.87
29	Uusimaa	Järvenpää	46490	46866	0.81
30	Etelä-Savo	Pieksämäki	17050	17186	0.80
31	Ahvenanmaa	Maarianhamina - Mariehamn	11812	11898	0.73
32	Pohjois-Pohjanmaa	Oulu	214633	216194	0.73
33	Pohjois-Pohjanmaa	Kempele	19514	19652	0.71
34	Uusimaa	Kerava	38211	38476	0.69
35	Lappi	Rovaniemi	65286	65738	0.69
36	Pirkanmaa	Valkeakoski	20694	20837	0.69
37	Satakunta	Kankaanpää	12394	12478	0.68
38	Etelä-Pohjanmaa	Seinäjoki	66160	66610	0.68
39	Etelä-Pohjanmaa	Ilmajoki	12343	12426	0.67
40	Pohjanmaa	Luoto	5843	5881	0.65
41	Varsinais-Suomi	Kaarina	36339	36563	0.62
42	Ahvenanmaa	Sund	995	1001	0.60
43	Keski-Suomi	Laukaa	18762	18873	0.59
44	Kanta-Häme	Riihimäki	28483	28650	0.59
45	Päijät-Häme	Lahti	120693	121383	0.57
46	Varsinais-Suomi	Laitila	8441	8488	0.56
47	Varsinais-Suomi	Naantali	19999	20108	0.55
48	Pohjois-Karjala	Outokumpu	6409	6444	0.55
49	Uusimaa	Nurmijärvi	44785	45026	0.54
50	Etelä-Karjala	Lappeenranta	72988	73369	0.52

Väkiluvun muutos-% edellisvuoden lopusta

Juupajoki on sijalla 293, tarkasteltaessa väkiluvun muutosta edellisvuoden lopusta kuntien kesken. Viimeisin ennakkotietolukema on 1666 (muutos-% edellisen vuoden loppuun: -2.46). Maakuntavertailussa (Pirkanmaa) Juupajoki on sijalla 21.

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	2371	172	7.25	280	11.81	1475	62.21	322	13.58	122	5.15
2001	2308	159	6.89	275	11.92	1436	62.22	316	13.69	122	5.29
2002	2248	147	6.54	272	12.10	1382	61.48	315	14.01	132	5.87
2003	2252	154	6.84	266	11.81	1375	61.06	325	14.43	132	5.86
2004	2275	170	7.47	266	11.69	1377	60.53	331	14.55	131	5.76
2005	2224	163	7.33	247	11.11	1354	60.88	330	14.84	130	5.85
2006	2205	158	7.17	245	11.11	1336	60.59	340	15.42	126	5.71
2007	2206	165	7.48	229	10.38	1337	60.61	338	15.32	137	6.21
2008	2173	161	7.41	219	10.08	1304	60.01	343	15.78	146	6.72
2009	2116	150	7.09	222	10.49	1262	59.64	340	16.07	142	6.71
2010	2094	137	6.54	224	10.70	1247	59.55	346	16.52	140	6.69
2011	2046	137	6.70	208	10.17	1207	58.99	350	17.11	144	7.04
2012	2023	140	6.92	214	10.58	1165	57.59	363	17.94	141	6.97
2013	2039	143	7.01	205	10.05	1172	57.48	381	18.69	138	6.77
2014	2033	159	7.82	201	9.89	1134	55.78	401	19.72	138	6.79
2015	1988	140	7.04	206	10.36	1104	55.53	397	19.97	141	7.09
2016	1957	129	6.59	204	10.42	1071	54.73	405	20.69	148	7.56
2017	1904	128	6.72	196	10.29	1008	52.94	418	21.95	154	8.09
2018	1884	121	6.42	194	10.30	990	52.55	424	22.51	155	8.23
2019	1844	95	5.15	191	10.36	975	52.87	427	23.16	156	8.46
2020	1800	89	4.94	185	10.28	941	52.28	425	23.61	160	8.89
2021	1786	78	4.37	180	10.08	950	53.19	422	23.63	156	8.73
2022	1768	80	4.52	182	10.29	934	52.83	424	23.98	148	8.37
2023	1708	78	4.57	174	10.19	878	51.41	438	25.64	140	8.20
2024M12*	1666	66	3.96	158	9.48	851	51.08	450	27.01	141	8.46

Väestökehityksen muutos - 5 ikäluokkaa

0-6-vuotiaat

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

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M12* yhteensä 9.48. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.81 (2022) ja -0.71 (2023)

16-64-vuotiaat

Ikäluokka 16-64-vuotiaat on suurin kooltaan. Tämän ryhmän prosenttiosuus kokonaisuudesta oli 2024M12* yhteensä 51.08. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -1.75 (2022) ja -0.33 (2023)

65-79-vuotiaat

Ikäluokka 65-79-vuotiaat oli kooltaan 2024M12* yhteensä 27.01. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 3.03 (2022) ja 1.37 (2023)

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M12* yhteensä 8.46. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.09 (2022) ja 0.26 (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	2371	172	7.25	280	11.81	114	4.81	1361	57.40	322	13.58	122	5.15
2001	2308	159	6.89	275	11.92	105	4.55	1331	57.67	316	13.69	122	5.29
2002	2248	147	6.54	272	12.10	98	4.36	1284	57.12	315	14.01	132	5.87
2003	2252	154	6.84	266	11.81	81	3.60	1294	57.46	325	14.43	132	5.86
2004	2275	170	7.47	266	11.69	75	3.30	1302	57.23	331	14.55	131	5.76
2005	2224	163	7.33	247	11.11	91	4.09	1263	56.79	330	14.84	130	5.85
2006	2205	158	7.17	245	11.11	89	4.04	1247	56.55	340	15.42	126	5.71
2007	2206	165	7.48	229	10.38	87	3.94	1250	56.66	338	15.32	137	6.21
2008	2173	161	7.41	219	10.08	85	3.91	1219	56.10	343	15.78	146	6.72
2009	2116	150	7.09	222	10.49	78	3.69	1184	55.95	340	16.07	142	6.71
2010	2094	137	6.54	224	10.70	74	3.53	1173	56.02	346	16.52	140	6.69
2011	2046	137	6.70	208	10.17	61	2.98	1146	56.01	350	17.11	144	7.04
2012	2023	140	6.92	214	10.58	68	3.36	1097	54.23	363	17.94	141	6.97
2013	2039	143	7.01	205	10.05	68	3.33	1104	54.14	381	18.69	138	6.77
2014	2033	159	7.82	201	9.89	71	3.49	1063	52.29	401	19.72	138	6.79
2015	1988	140	7.04	206	10.36	63	3.17	1041	52.36	397	19.97	141	7.09
2016	1957	129	6.59	204	10.42	55	2.81	1016	51.92	405	20.69	148	7.56
2017	1904	128	6.72	196	10.29	52	2.73	956	50.21	418	21.95	154	8.09
2018	1884	121	6.42	194	10.30	52	2.76	938	49.79	424	22.51	155	8.23
2019	1844	95	5.15	191	10.36	62	3.36	913	49.51	427	23.16	156	8.46
2020	1800	89	4.94	185	10.28	55	3.06	886	49.22	425	23.61	160	8.89
2021	1786	78	4.37	180	10.08	67	3.75	883	49.44	422	23.63	156	8.73
2022	1768	80	4.52	182	10.29	54	3.05	880	49.77	424	23.98	148	8.37
2023	1708	78	4.57	174	10.19	50	2.93	828	48.48	438	25.64	140	8.20
2024M12*	1666	66	3.96	158	9.48	45	2.70	806	48.38	450	27.01	141	8.46

Väestökehityksen muutos - 6 ikäluokkaa

0-6-vuotiaat

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

7-15-vuotiaat

7-15-vuotiaiden %-osuus oli 2024M12* yhteensä 9.48. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.81 (2022) ja -0.71 (2023)

16-18-vuotiaat

16-18-vuotiaiden prosenttiosuus kokonaisuudesta oli 2024M12* yhteensä 2.7. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut -0.35 (2022) ja -0.23 (2023)

18-64-vuotiaat

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

65-79-vuotiaat

Ikäluokka 65-79-vuotiaat oli kooltaan 2024M12* yhteensä 27.01. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 3.03 (2022) ja 1.37 (2023)

80+-vuotiaat

80+-vuotiaiden %-osuus oli 2024M12* yhteensä 8.46. Edellisvuosiin 2022 ja 2023 verrattuna, muutosta on tullut 0.09 (2022) ja 0.26 (2023)