D3 Examples - Joy plot Temperatures

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Temperaturas en Cundinamarca</title>
</head>
<body>
  <h1>Temperaturas en Cundinamarca</h1>
  <svg id="chart"></svg>
  <a href="https://www.datos.gov.co/Ambiente-y-Desarrollo-Sostenible/Temperaturas-Medias/6te7-njc8">Según datos de la CAR</a>
​
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
/* global d3 */
​
​
d3.csv("Temperaturas_Medias.csv")
  .then( csv => {
​
    let flatCsv = [];
    csv.forEach(d => {
      d["AÑO"] = +d["AÑO"];
      d.temps = ["ENERO","FEBRERO","MARZO","ABRIL",
        "MAYO","JUNIO", "JULIO", "AGOSTO",
        "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE"]
        .map( (m,i) => flatCsv.push({
          temp:+d[m],
          date:new Date(d["AÑO"], i),
          city:d.MUNICIPIO
        }));
    });
​
    csv = flatCsv.sort((a,b) =>
      d3.ascending(a.date, b.date)
    ).filter(d => d.temp);
​
​
    const data = d3.nest()
      .key(d => d.city)
      .entries(csv);
​
    const width= 960,
      height = 400,
      overlap = 4,
      margin = ({top: 40, right: 130, bottom: 40, left: 10}),
      x = d3.scaleTime()
        .domain([
          d3.min(data, d => d3.min(d.values.map(e => e.date))),
          d3.max(data, d => d3.max(d.values.map(e => e.date)))
        ])
        .range([0, width - margin.left - margin.right]),
      y = d3.scalePoint()
        .domain(data.map((d) => d.key))
        .range([0, height - margin.top - margin.bottom]),
      z = d3.scaleLinear()
        .domain([
          d3.min(data, d => d3.min(d.values.map(e=> e.temp) )),
          d3.max(data, d => d3.max(d.values.map(e=> e.temp) ))
        ])
        .range([0, -overlap * y.step()]),
      xAxis = g => g
        .attr("transform", `translate(0,${height - margin.bottom - margin.top + 20})`)
        .call(d3.axisBottom(x))
        .call(g => g.select(".domain").remove())
        .call(g => g.select(".tick:first-of-type text").append("tspan").attr("x", width-margin.left-margin.right-20).text("AÑO")),
      yAxis = g => g
        .attr("transform", `translate(${width - margin.left - margin.right}, 0)`)
        .call(d3.axisRight(y))
        .call(g => g.select(".domain").remove()),
        // .call(g => g.select(".tick:first-of-type text").append("tspan").attr("x", 10).text(" ms"))
      area = d3.area()
        .defined(d => !isNaN(d.temp)&& d.temp!==0)
        .x((d) => x(d.date))
        .y0(0)
        .y1(d => z(d.temp)),
      line = area.lineY1();
​
​
​
​
    const svg = d3.select("#chart")
      .attr("width", width )
      .attr("height", height)
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);
​
    const serie = svg.append("g")
      .selectAll("g")
      .data(data)
      .enter().append("g")
        .attr("transform", (d) => `translate(0,${y(d.key) + 1})`);
​
    serie.append("path")
        .attr("fill", "#4caf5087")
        .attr("d", d =>
          area(d.values));
​
    serie.append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("d", d => line(d.values));
​
    svg.append("g")
        .call(xAxis);
    svg.append("g")
        .call(yAxis);
​
​
});
​
​
  </script>
​
</body>
</html>
    