{ const target = html `

Seleccione el año a comparar= 2019

` Promise.all([ d3.csv("https://gist.githubusercontent.com/jairocollante/520ebda905d34948d4ea336e186e93bc/raw/8f22846992f746cfaa63022f012af4406728a7cc/TRM_historico.csv"), d3.csv("https://gist.githubusercontent.com/jairocollante/3fcc22967b45ecc6066fcb2f15cc5cc1/raw/8f880d2e1553644c926758df0b5ca9e5fd7b8e53/inflacion_historico.csv"), ]).then(function(data) { dataFilter(data) } ); function dataFilter(datasource){ let dataTRM = convertToDateTRM(datasource[0]).filter(function(d){ return !isNaN(d.indice) }); let dataINF = convertToDateINF(datasource[1]).filter(function(d){ return !isNaN(d.indice) }); drawGraphics(datasource,dataTRM, dataINF); } function dataFilterYear(datasource,year){ let dataTRM = convertToDateTRM(datasource[0]).filter(function(d){ return !isNaN(d.indice) }); let dataINF = convertToDateINF(datasource[1]).filter(function(d){ return !isNaN(d.indice) }); if(year!=0){ dataTRM = dataTRM.filter(function(d){ return d.periodo.getFullYear() == year }); dataINF = dataINF.filter(function(d){return d.periodo.getFullYear() == year }); } drawGraphics(datasource,dataTRM, dataINF); } function drawGraphics(datasource,dataTRM, dataINF){ var margin = {top: 50, right: 150, bottom: 50, left: 50}, width = 900, height = 500; console.log("dataTRM"); console.log(dataTRM); let minDate = d3.min(dataTRM, d=> d.periodo); let maxDate = d3.max(dataTRM, d=> d.periodo); console.log(minDate); console.log(maxDate); let minIndice = d3.min(dataTRM, d=> d.indice); let maxIndice = d3.max(dataTRM, d=> d.indice); console.log(minIndice); console.log(maxIndice); console.log("dataINF"); console.log(dataINF); minDate = d3.min(dataINF, d=> d.periodo); maxDate = d3.max(dataINF, d=> d.periodo); console.log(minDate); console.log(maxDate); minIndice = d3.min(dataINF, d=> d.indice); maxIndice = d3.max(dataINF, d=> d.indice); console.log(minIndice); console.log(maxIndice); var x = d3.scaleTime().range([0, width-margin.right]); x.domain(d3.extent(dataTRM, function(d) { return d.periodo; })); //x.domain([minDate,maxDate.setDate( maxDate.getDate() + 120)]); var y = d3.scaleLinear().range([height, 0]); y.domain([0,35]); d3.select(target).select("#container").select("svg").remove(); var svg = d3.select(target).select("#container").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var xAxis_woy = d3.axisBottom(x).tickFormat(d3.timeFormat("%Y%m")); var xAxis = svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis_woy); var yAxis = svg.append("g").call(d3.axisLeft(y)); var valuelineTRM = d3.line() .x(function(d) { return x(d.periodo); }) .y(function(d) { return y(d.indice); }) .curve(d3.curveMonotoneX); //*/ var valuelineINF = d3.line() .x(function(d) { return x(d.periodo); }) .y(function(d) { return y(d.indice); }) .curve(d3.curveMonotoneX); //*/ let path1 = svg.append("path") .datum(dataTRM) .attr("class", "line") //pointlines .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", valuelineTRM);//*/ let path2 = svg.append("path") .datum(dataINF) .attr("class", "line") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", valuelineINF);//*/ svg.selectAll(".dot") .data(dataINF) .enter() .append("circle") .attr("class", "dot") .attr("cx", function(d) { return x(d.periodo) }) .attr("cy", function(d) { return y(d.indice) }) .attr("r", 2) .attr("fill", "blue") .on('mouseover', function(d) { tipINF.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { tipINF.hide(); d3.select(this).style('opacity', 1) }); //*/ svg.selectAll("path") .data(dataTRM) .enter() .append("circle") // Uses the enter().append() method .attr("class", "dot") // Assign a class for styling .attr("cx", function(d) { return x(d.periodo) }) .attr("cy", function(d) { return y(d.indice) }) .attr("r", 1.5) .attr("fill", "chartreuse") .on('mouseover', function(e) { tipTRM.show(e, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(e) { tipTRM.hide(); d3.select(this).style('opacity', 1) }) //*/ var tipTRM = d3tip().attr('class', 'd3-tip').direction('e').offset([0,5]) .html(function(d) { var tf = d3.timeFormat("%d/%m/%Y"); var content = "" + "Datos" + "
"; content +=`

Fecha:	` + tf((d.periodo)) + `
TRM:	` + d3.format(".2f")(d.indice*100) + `

`; return content; }); svg.call(tipTRM); //*/ var tipINF = d3tip().attr('class', 'd3-tip').direction('e').offset([0,5]) .html(function(d) { var tf = d3.timeFormat("%d/%m/%Y"); var content = "" + "Datos" + "
"; content +=`

Fecha:	` + tf((d.periodo)) + `
Inflación:	` + d3.format(".2f")(d.indice) + `

`; return content; }); svg.call(tipINF); //*/ svg.append("text") .attr("transform", "translate(" + (margin.left-40) + "," + (-20) + ")") .attr("dy", ".70em") .attr("text-anchor", "start") .attr("font-size",15) .style("fill", "chartreuse") .text("TRM = Tasa de Cambio Representativa del Mercado"); svg.append("text") .attr("transform", "translate(" + (margin.left-40) + "," + (-5) + ")") .attr("dy", ".70em") .attr("text-anchor", "start") .attr("font-size",15) .style("fill", "blue") .text("Inflación = Diferencia del IPC"); /* var zoom = d3.zoom() .scaleExtent([.5, 10]) // This control how much you can unzoom (x0.5) and zoom (x20) .extent([[0, 0], [width, height]]) .on("zoom", updateChart); svg.append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') .call(zoom); function updateChart() { // recover the new scale var newX = d3.event.transform.rescaleX(x); var newY = d3.event.transform.rescaleY(y); // update axes with these new boundaries xAxis.call(d3.axisBottom(newX)) yAxis.call(d3.axisLeft(newY)) // update circle position svg.selectAll("path") .attr('cx', function(d) {return newX(d.periodo)}) .attr('cy', function(d) {return newY(d.indice)}); }//*/ d3.select(target).select("#porcent").on("change", function() { d3.select("#nPorcent").text(this.value); d3.select("#porcent").property("value", this.value) textInputPorcent(datasource,this.value); }); d3.select(target).select("#todos").on("click", function() { textInputPorcent(datasource,0); }); } function textInputPorcent(datasource,value){ d3.select("#nPorcent").text(value); d3.select("#porcent").property("value", value); dataFilterYear(datasource,value); } return target; }