Skip to content
Snippets Groups Projects
Select Git revision
  • master
1 result

graficas.js

Blame
    • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    graficas.js 9.04 KiB 
    
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;


function grafica1(){
  if(document.getElementById("Tasa_de_paro").checked){
    var svg = d3.select("#grafica1")
      .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 + ")");  



  d3.csv("paro.csv",
    function(d){
      return { periodo : d.periodo, total : d.total }
    },
  

    function(data) {

      var x = d3.scaleLinear()
        .domain([2006,2019])
        .range([ 0, width ]);
      svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      var y = d3.scaleLinear()
        .domain( [0, 40])
        .range([ height, 0 ]);
      svg.append("g")
        .call(d3.axisLeft(y));

      svg.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
          .x(function(d) { return x(d.periodo) })
          .y(function(d) { return y(d.total) })
          )

      //Interaccion
      var Tooltip = d3.select("#grafica1")
        .append("div")
        .style("opacity", 0)
        .attr("class", "tooltip")
        .style("background-color", "white")
        .style("border", "solid")
        .style("border-width", "2px")
        .style("border-radius", "5px")
        .style("padding", "5px")

        var mouseover = function(d) {
          Tooltip
            .style("opacity", 1)
        }
        var mousemove = function(d) {
          Tooltip
            .html("Paro: " + d.total+"%")
            .style("left", (d3.mouse(this)[0]+70) + "px")
            .style("top", (d3.mouse(this)[1]) + "px")
        }
            var mouseleave = function(d) {
          Tooltip
            .style("opacity", 0)
        }

    // Puntos
      svg
        .append("g")
        .selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
          .attr("class", "myCircle")
          .attr("cx", function(d) { return x(d.periodo) } )
          .attr("cy", function(d) { return y(d.total) } )
          .attr("r", 8)
          .attr("stroke", "#3b83bd")
          .attr("stroke-width", 3)
          .attr("fill", "white")
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseleave", mouseleave)
  })}
  else{
    d3.select("svg").remove();
  }
}



//Grafica 2

function grafica2(){
  d3.select("#grafica2").remove();
  var newDiv = document.createElement("div");
  newDiv.setAttribute("id","grafica2");
  document.body.insertBefore(newDiv,document.getElementById("grafica3"));
  d3.select("#grafica3").remove();
  var svg2 = d3.select("#grafica2")
    .append("svg")
      .attr("width", 800 + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

  d3.csv("salarios.csv", function(data) {

      var allGroup = ["salariomedio", "smi"]

      var dataReady = allGroup.map(function(grpName) {
        return {
          name: grpName,
          values: data.map(function(d) {
            return {anio: d.anio, value: +d[grpName]};
          })
        };
      });

      var myColor = d3.scaleOrdinal()
        .domain(allGroup)
        .range(d3.schemeSet2);

      var x = d3.scaleLinear()
        .domain([2006,2019])
        .range([ 0, width ]);
      svg2.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

          var y = d3.scaleLinear()
        .domain( [0,30000])
        .range([ height, 0 ]);
      svg2.append("g")
        .call(d3.axisLeft(y));
      
      var line = d3.line()
        .x(function(d) { return x(+d.anio) })
        .y(function(d) { return y(+d.value) })

      svg2.selectAll("myLines")
        .data(dataReady)
        .enter()
        .append("path")
          .attr("d", function(d){ return line(d.values) } )
          .attr("stroke", function(d){ return myColor(d.name) })
          .style("stroke-width", 4)
          .style("fill", "none")



          var Tooltip = d3.select("#grafica2")
          .append("div")
          .style("opacity", 0)
          .attr("class", "tooltip")
          .style("background-color", "white")
          .style("border", "solid")
          .style("border-width", "2px")
          .style("border-radius", "5px")
          .style("padding", "5px")
  
          var mouseover = function(d) {
            Tooltip
              .style("opacity", 1)
          }
          var mousemove = function(d) {
            Tooltip
              .html("Salario: " + d.value+"€")
          }
          var mouseleave = function(d) {
            Tooltip
              .style("opacity", 0)
          }

      svg2
        .selectAll("myDots")
        .data(dataReady)
        .enter()
          .append('g')
          .style("fill", function(d){ return myColor(d.name) })
        .selectAll("myPoints")
        .data(function(d){ return d.values })
        .enter()
        .append("circle")
          .attr("class", "myCircle")
          .attr("cx", function(d) { return x(d.anio) } )
          .attr("cy", function(d) { return y(d.value) } )
          .attr("r", 3)
          .attr("stroke", function(d){ return myColor(d.name) })
          .attr("stroke-width", 3)
          .attr("fill", "white")
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseleave", mouseleave)

      svg2
        .selectAll("myLabels")
        .data(dataReady)
        .enter()
          .append('g')
              .append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
            .attr("transform", function(d) { return "translate(" + x(d.value.anio) + "," + y(d.value.value) + ")"; }) 
            .attr("x", 12) 
            .text(function(d) { return d.name; })
            .style("fill", function(d){ return myColor(d.name) })
            .style("font-size", 15)
 
  })
}

function grafica3(){
  
      var svg3 = d3.select("#grafica3")
        .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 + ")");  
    d3.csv("ipc.csv",
  
      function(d){
        return { periodo : d.periodo, total : d.total }
      },
    
      function(data) {
  
        var x = d3.scaleLinear()
          .domain([2006,2019])
          .range([ 0, width ]);
        svg3.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));
  
        var y = d3.scaleLinear()
          .domain( [70,110])
          .range([ height, 0 ]);
        svg3.append("g")
          .call(d3.axisLeft(y));
  
     
        svg3.append("path")
          .datum(data)
          .attr("fill", "none")
          .attr("stroke", "black")
          .attr("stroke-width", 1.5)
          .attr("d", d3.line()
            .x(function(d) { return x(d.periodo) })
            .y(function(d) { return y(d.total) })
            )
  
        var Tooltip = d3.select("#grafica3")
          .append("div")
          .style("opacity", 0)
          .attr("class", "tooltip")
          .style("background-color", "white")
          .style("border", "solid")
          .style("border-width", "2px")
          .style("border-radius", "5px")
          .style("padding", "5px")
  
          var mouseover = function(d) {
            Tooltip
              .style("opacity", 1)
          }
          var mousemove = function(d) {
            Tooltip
              .html("IPC: " + d.total)
              .style("left", (d3.mouse(this)[0]+70) + "px")
                  .style("top", (d3.mouse(this)[1]) + "px")
          }
          var mouseleave = function(d) {
            Tooltip
              .style("opacity", 0)
          }
  
        svg3
          .append("g")
          .selectAll("dot")
          .data(data)
          .enter()
          .append("circle")
            .attr("class", "myCircle")
            .attr("cx", function(d) { return x(d.periodo) } )
            .attr("cy", function(d) { return y(d.total) } )
            .attr("r", 8)
            .attr("stroke", "#3b83bd")
            .attr("stroke-width", 3)
            .attr("fill", "white")
            .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseleave", mouseleave)
    })
  }

var graf1 = d3.select(grafica1());
var graf3 = d3.select(grafica3());
document.getElementById("menu").onchange = function() {
  if(this.selectedIndex==0){
    
   
    var newDiv = document.createElement("div");
    newDiv.setAttribute("id","grafica3");
    document.body.insertBefore(newDiv, document.getElementById("grafica2"));
    d3.select("#grafica2").remove();
    graf3=grafica3();
  }else if(this.selectedIndex==1){
    graf3=grafica2();
  }else{

  }
}