Skip to content
Snippets Groups Projects
Commit 17f46c1d authored by mariasa's avatar mariasa
Browse files

Upload New File

parent d203a74d
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 156 additions and 0 deletions
js/main.js 0 → 100644
+ 156
− 0
View file @ 17f46c1d
/*--
María Sánchez Villanueva.
Proeycto de Visualizacion: Contratos en CyL.
Diseño y Evaluación de Sistemas Interactivos - Curso 22/23 -
--------------------------------------------------------------
Punto de entrada a la página.
--*/
/**
* Cuando se carga la página
*/
$(document).ready(function () {
let provincias = ["Ávila", "Burgos", "León", "Palencia", "Salamanca", "Segovia", "Soria", "Valladolid", "Zamora"];
var tipoContratoTab1 = 0;
var tipoContratoTab2 = 0;
var anno = 2018;
var fechas_selected = ["01-2018", "02-2018", "03-2018", "04-2018", "05-2018", "06-2018", "07-2018", "08-2018", "09-2018", "10-2018", "11-2018", "12-2018",
"01-2019", "02-2019", "03-2019", "04-2019", "05-2019", "06-2019", "07-2019", "08-2019", "09-2019", "10-2019", "11-2019", "12-2019",
"01-2020", "02-2020", "03-2020", "04-2020", "05-2020", "06-2020", "07-2020", "08-2020", "09-2020", "10-2020", "11-2020", "12-2020",
"01-2021", "02-2021", "03-2021","04-2021", "05-2021", "06-2021", "07-2021", "08-2021", "09-2021", "10-2021", "11-2021", "12-2021"];
// Manejador de tabs
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function () {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + t + 'C').fadeIn('slow');
// Cargamos cada tab solo cuando está seleccionada, no antes
switch (t) {
case "tab1":
d3.select("#serie").selectAll("svg").remove();
dibujarGrafico1(provincias, tipoContratoTab1, fechas_selected);
break;
case "tab2":
d3.select("#mapa").selectAll("svg").remove();
dibujarGrafico2(anno, tipoContratoTab2);
break;
}
}
});
// El tab1 se carga al principio dado que se empieza por él
d3.select("#serie").selectAll("svg").remove();
dibujarGrafico1(provincias, tipoContratoTab1, fechas_selected);
// Gráfico 1
// Para la selección de las provincias de line chart
$("input[type=checkbox]").change(function () {
if (this.checked) {
provincias.push(this.name);
} else {
provincias.splice(provincias.indexOf(this.name), 1);
}
d3.select("#serie").selectAll("svg").remove();
dibujarGrafico1(provincias, tipoContratoTab1, fechas_selected);
});
// Para seleccionar el tipo de contrato
$("input[type=radio][name=tipoContratoTab1]").change(function () {
tipoContratoTab1 = parseInt($(this).val());
d3.select("#serie").selectAll("svg").remove();
dibujarGrafico1(provincias, tipoContratoTab1, fechas_selected);
});
// Para seleccionar las fechas.
var tooltip = d3.select('#container-slider').append('div')
.style("position", "absolute")
.style("visibility", "hidden")
.style("padding", "3px")
.style("margin-top", "4px")
.style("height", "20px")
.style("background-color", "lightgrey")
.style("opacity", "1")
.style("stroke", "black")
.style("border-style", "solid")
.style("border-width", "1px")
.style("text-align", "center")
.style("color", "black")
.style("font-size", "small")
.text("");
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 47,
values: [ 0, 47 ],
labels: "hola",
slide: function(event, ui) {
tooltip.transition()
.duration(100)
var fechas = ["01-2018", "02-2018", "03-2018", "04-2018", "05-2018", "06-2018", "07-2018", "08-2018", "09-2018", "10-2018", "11-2018", "12-2018",
"01-2019", "02-2019", "03-2019", "04-2019", "05-2019", "06-2019", "07-2019", "08-2019", "09-2019", "10-2019", "11-2019", "12-2019",
"01-2020", "02-2020", "03-2020", "04-2020", "05-2020", "06-2020", "07-2020", "08-2020", "09-2020", "10-2020", "11-2020", "12-2020",
"01-2021", "02-2021", "03-2021","04-2021", "05-2021", "06-2021", "07-2021", "08-2021", "09-2021", "10-2021", "11-2021", "12-2021"];
//console.log(event.pageY -45);
tooltip.html(fechas[ui.values[ui.handleIndex]] );
tooltip.style("visibility", "visible")
.style("left", (event.pageX) + "px")
.style("top", 660 + "px" )
},
change: function( event, ui ) {
tooltip.transition()
.duration(100)
.style("visibility", "hidden");
var fechas = ["01-2018", "02-2018", "03-2018", "04-2018", "05-2018", "06-2018", "07-2018", "08-2018", "09-2018", "10-2018", "11-2018", "12-2018",
"01-2019", "02-2019", "03-2019", "04-2019", "05-2019", "06-2019", "07-2019", "08-2019", "09-2019", "10-2019", "11-2019", "12-2019",
"01-2020", "02-2020", "03-2020", "04-2020", "05-2020", "06-2020", "07-2020", "08-2020", "09-2020", "10-2020", "11-2020", "12-2020",
"01-2021", "02-2021", "03-2021","04-2021", "05-2021", "06-2021", "07-2021", "08-2021", "09-2021", "10-2021", "11-2021", "12-2021"];
fechas_selected = fechas.slice(ui.values[0], ui.values[1]+1);
d3.select('#rangoFechas').text("del " + fechas_selected[0] + " al " + fechas_selected.slice(-1)[0]);
d3.select("#serie").selectAll("svg").remove();
dibujarGrafico1(provincias, tipoContratoTab1, fechas_selected);
},
});
// Gráfico 2
// Selección del año a mostrar en mapa
$("select").on('change', function () {
d3.select("#mapa").selectAll("svg").remove();
anno = this.value;
dibujarGrafico2(anno, tipoContratoTab2);
});
// Para seleccionar el tipo de contrato
$("input[type=radio][name=tipoContratoTab2]").change(function () {
tipoContratoTab2 = parseInt($(this).val());
d3.select("#mapa").selectAll("svg").remove();
dibujarGrafico2(anno, tipoContratoTab2);
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment