john-guerra · November 15, 2018 15:51
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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="http://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>
diff --git a/Temperaturas_Medias.csv b/Temperaturas_Medias.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!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="http://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>