Gráficos y visualizaciones: Pirámides de Población Interactivas de La C.A. de euskadi

Descarga código

Este código se podrá pegar en la web del usuario

<div>
<p>Las pirámides interactivas son un instrumento que permite conocer la evolución de la población residente en la C.A. de Euskadi. </p>
<p>Estas pirámides utilizan diversas fuentes estadísticas: por un lado, los  recuentos de la población de la Actualización de la Población Municipal, sustituida luego por la Estadística Municipal de Habitantes, cuya fuente principal es el Padrón Municipal de Habitantes; por otro, las Proyecciones Demográficas, que son estimaciones de la población futura para la C.A. de Euskadi.</p>
<p><a href="https://www.eustat.eus/graficosJS-operaciones/ayuda-piramide/html/ayuda_c.asp"><img src="https://www.eustat.eus/images/ayudadiagrama.gif" border=0 alt="info" title="Ayuda en pdf"/></a></p>
</div>

</div>
	
	<meta http-equiv="X-UA-Compatible" content="IE=8,9" >
	<link class="include" rel="stylesheet" type="text/css" href="https://www.eustat.eus/graficosJS/jquery/jquery.jqplot.css" />
	<link rel="stylesheet" type="text/css" href="https://www.eustat.eus/graficosJS/jquery/jquery.jqplot.min.css"/>
	
	<link type="text/css" rel="stylesheet" href="https://www.eustat.eus/graficosJS/slider/jquery-ui.css">
	<link rel="stylesheet" href="https://www.eustat.eus/graficosJS-operaciones/css/EPP.css" type="text/css" />
	
	<link type="text/css" rel="stylesheet" href="https://www.eustat.eus/styles/indicadoresgraficos.css">

<script type="text/javascript" src="https://www.eustat.eus/graficosJS/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.eustat.eus/graficosJS/jquery/jquery.jqplot.js"></script>	
	<script src="https://www.eustat.eus/graficosJS/slider/jquery-ui.js"></script>

<input type="hidden" id="language" value="ES" name="language" />
						
							<div id="contenedor">
								<div id="sec1">
									<div id="sec1-top">
										<div id="titlePyramid"></div>
										<div id="agesChart"></div>
										<div id="agesRangeSlider" class="agesRangeSlider"></div>
										<div class="titleSideBottomPyramid">Unidades</div><div class="titleSideBottomPyramid">Unidades</div>
									</div>
									<div id="sec1-bottom">
										<div id="sec1-bottom-left">
											<fieldset class="animationFieldset">
												<legend class="titleLeft">Animación</legend>         
												<button class="controlButton" id="playButton"> <img src="https://www.eustat.eus/graficosJS/slider/img/play.png"/></button>              
												<button class="controlButton" id="pauseButton"> <img src="https://www.eustat.eus/graficosJS/slider/img/pause.png"/></button>  
												<label class="checkBoxTitle" id="errepikatuCheckBox"><input type="checkbox" id="repeatCheckBox" value="value"> Repetir</label>
												<div id="sliderVelWithMark">
													<div class="labelVel"><label>Lento</label> <label style="margin-left:100px;">Rápido</label></div>
													<div class="sliderVel" id="sliderVel"></div>
												</div>	
												<div class="containerRadioButton">
													<div class="radioButton"><input type="radio" id="ezerrezRadioButton" checked> No seguir nada</div>
													<div class="radioButton"><input type="radio" id="belaunaldiaRadioButton"> Seguir una generación </div>
													<div class="radioButton"><input type="radio" id="adinaRadioButton" > Seguir una edad</div>
												</div>						 
											</fieldset>
										</div>
										<div id="sec1-bottom-right">
											<div id="checkBoxAction">
												<div class="checkBoxClass"><input class="checkBoxClass" id="checkBoxExceso" type="checkbox" value="value"></div>
											</div>
											<div class="checkBoxTitle" id="checkBoxLabel"><label>Mostrar la diferencia entre hombres y mujeres</label></div>
											
											<div id="checkBoxAction">
												<div class="checkBoxClass"><input class="checkBoxClass" id="modifyAgesCheckBox" type="checkbox" value="value"></div>
											</div>
											<div class="checkBoxTitle" id="checkBoxLabel"><label>Mostrar y cambiar los tramos de edad</label></div>
											
											<div id="yearSlider"><div id="yearSliderTitle">Año</div><div id="yearSliderValue" style="margin-left:35px;"></div></div>
											<div class="sliderDates" id="sliderDates"></div>				
										</div>
									</div>
								</div>	
								<div id="sec2">
									<div class="selectedTerritory">
										<div class="titleLeft" id="titleTerritory">Zona geográfica </div>
										<select id="spinnerTerritory">
										</select>
										<select id="spinnerMunicipality">
										</select>
									</div>
									<div class="selectedYear">
										<div id="tooltipYear"></div>	
									</div>
									<div class="selectedDataTitles">					
										<div class="titleInfo">Población </div>
										<div class="titleInfo">Edad </div>
										<div class="titleInfo">Año de nacimiento </div>
										<div class="titleInfo">Mujeres </div>
										<div class="titleInfo">Hombres </div>
										<div class="titleInfo">Ratio de sexo (M/H) </div>
										<div class="titleInfo">Fecha de referencia </div>
										<div class="titleInfo">Tipo de datos </div>
									</div>
									<div class="selectedDataData">						
										<div class="tooltipDataData" id="tooltipTotal"></div>
										<div class="tooltipDataData" id="tooltipAge"></div><div class="tooltipDataData" id="tooltipAgePercent" ></div>
										<div class="tooltipDataData" id="tooltipBornData"></div>
										<div class="tooltipDataData"  id="tooltipFemale"></div><div class="tooltipDataData" id="tooltipFemalePercent"></div> 
										<div class="tooltipDataData"  id="tooltipMale"></div><div class="tooltipDataData" id="tooltipMalePercent"></div> 
										<div class="tooltipDataData"  id="tooltipRatio"></div>
										<div class="tooltipDataData"  id="tooltipErreferentziaData"></div>
										<div class="tooltipDataData"  id="tooltipDataType"></div>
									</div>	
									<div class="titleLeft" id="titleGroupAges">Grupos de edad </div>
									<table class="tableGroupAges" border="1">
										<tr> 
											<th rowspan="2" class="titleTableGroupAges" id="titleTableGroupAgesAge">Edad </th>
											<th rowspan="2" class="titleTableGroupAges" id="titleTableGroupAgesUnits">Unidades</th>
											<th colspan="3" class="titleTableGroupAges" id="titleTableGroupAgesPercent">%</th>
											<th rowspan="2" class="titleTableGroupAges" id="titleTableGroupAgesSexRatio">Ratio sexo</th>
										</tr>
										<tr> 
											<th class="titleTableGroupAges" id="titleTableGroupAgesTotal">Tot</th>
											<th class="titleTableGroupAges" id="titleTableGroupAgesFemales">Muj</th>
											<th class="titleTableGroupAges" id="titleTableGroupAgesMales">Hom</th>
										</tr>
										<tr> 
											<td class="titleRowTableGroupAges" id="titleBigGroupAge">≥ 65</td>
											<td class="valuesTableGroupAges" id="kopBigValue"></td>
											<td class="valuesTableGroupAges" id="ehunBigValue"></td>
											<td class="valuesTableGroupAges" id="ehunFemBigValue"></td>
											<td class="valuesTableGroupAges" id="ehunMalBigValue"></td>
											<td class="valuesTableGroupAges" id="sexuRatioaBigValue"></td>
										</tr>
										<tr> 
											<td class="titleRowTableGroupAges" id="titleMediumGroupAge">20-64</td>
											<td class="valuesTableGroupAges" id="kopMedValue"></td>
											<td class="valuesTableGroupAges" id="ehunMedValue"></td>
											<td class="valuesTableGroupAges" id="ehunFemMedValue"></td>
											<td class="valuesTableGroupAges" id="ehunMalMedValue"></td>
											<td class="valuesTableGroupAges" id="sexuRatioaMedValue"></td>
										</tr>
										<tr> 
											<td class="titleRowTableGroupAges" id="titleSmallGroupAge">≤19</td>
											<td class="valuesTableGroupAges" id="kopSmaValue"></td>
											<td class="valuesTableGroupAges" id="ehunSmaValue"></td>
											<td class="valuesTableGroupAges" id="ehunFemSmaValue"></td>
											<td class="valuesTableGroupAges" id="ehunMalSmaValue"></td>
											<td class="valuesTableGroupAges" id="sexuRatioaSmaValue"></td>
										</tr>
										<tr>
											<td class="titleTableGroupAges">Total</td>
											<td class="valuesTotalTableGroupAges" id="kopTotalValue"></td>
											<td class="valuesTotalTableGroupAges" id="ehunTotalValue"></td>
											<td class="valuesTotalTableGroupAges" id="ehunFemTotalValue"></td>
											<td class="valuesTotalTableGroupAges" id="ehunMalTotalValue"></td>
											<td class="valuesTotalTableGroupAges" id="sexuRatioaTotalValue"></td>								
										</tr>
									</table>			
									<div class="evolutionGraph">
										<div class="titleLeft"> Evolución de la población total</div>
										<div><label class="tooltip-item" id="evolutionYArdatza">Población</label></div>
										<div id="evolutionChart"></div>
									</div>
								</div>				
								
							
							</div>
 
								<div id="graphFoot"></div>

</div>						
						
						<script src="https://www.eustat.eus/graficosJS-operaciones/js/EPP.js" type="text/javascript"></script>
						<script src="https://www.eustat.eus/graficosJS-operaciones/data/EPP76-36.json" type="text/javascript"></script>
						<script src="https://www.eustat.eus/graficosJS-operaciones/data/EPP1012_Araba.json" type="text/javascript"></script>
						<script src="https://www.eustat.eus/graficosJS-operaciones/data/EPP1012_Bizkaia.json" type="text/javascript"></script>
						<script src="https://www.eustat.eus/graficosJS-operaciones/data/EPP1012_Gipuzkoa.json" type="text/javascript"></script>
						<script src="https://www.eustat.eus/graficosJS/js/eustat_pyramid.js" type="text/javascript"></script>
						
						
						
						
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.pyramidAxisRenderer.js"></script>
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.pyramidGridRenderer.min.js"></script> 
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.pyramidRenderer.js"></script>
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.canvasTextRenderer.min.js"></script>
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
						<script class="include" type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.browser.js"></script>
						<script type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
						<script type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.barRenderer.min.js"></script>
						<script type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.highlighter.js"></script>
						<script type="text/javascript" src="https://www.eustat.eus/graficosJS/plugins/jqplot.canvasOverlay.js"></script>

Tablas estadísticas

Notas de prensa

Gráficos y visualizaciones

Banco de datos

Informes y documentos

Microdatos

Metodología y calidad

Definiciones

Códigos y nomenclaturas

Cuestionarios

Calendario

Edad	Unidades	%			Ratio sexo
Edad	Unidades	Tot	Muj	Hom	Ratio sexo
≥ 65
20-64
≤19
Total