Select Git revision
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{
}
}