El color se pide por su nombre
En la web del INE, la infografía del IPC pinta cada grupo de productos de un color según cuánto ha cambiado su precio en un año. Para sacar ese color, el programa escribe en un texto el nombre de la función que lo fabrica, le pega un paréntesis y le pide al navegador que lea ese texto como si fuera programa. La orden que lo hace se llama eval, y los cuatro ficheros de las infografías la usan 31 veces, la mayoría para esto.
- Dominio
- ine.es
- Guardado
- 08 SEP 2026
- Comprobado en vivo
- 15 SEP 2026
- Citas
- 8 en 4 ficheros guardados
- Lectura
- unos 4 min

La página del IPC le pasa al programa dos nombres escritos entre comillas: «d3.interpolatePurples» para el mapa y «d3.interpolateOranges» para los bloques. Los dos son nombres de funciones de D3, trozos de programa que reciben un número y devuelven un tono, uno de una escala de morados y otro de una de naranjas. La página los apunta como quien apunta un teléfono en un papel. Si no dijera nada, el programa de los bloques tiene su propio nombre de reserva en las primeras líneas de treemap.js, d3.interpolatePuOr, la escala que va del morado al naranja, con el comentario del autor al lado: «asigno un color por defecto».

interpolatePurples; el naranja de los bloques, de d3.interpolateOranges. Recuadrado, el mapa de bloques, con su leyenda de tres tramos.Captura del 23 de septiembre de 2026, 13:36 (hora peninsular) · el recuadro es nuestro- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 13,9 kB
- sha256
- fd854b636529…
| 1 | // GLOBAL SCOPE |
| 2 | configTreeMap={// asigno un color por defecto |
| 3 | schemaColor:" |
| 4 | rangeColor:[0.15,0.85], |
| 5 | criterioGeo:"" |
| 6 | } |
| 7 | // TREEMAP VARIABLES |
| 8 | var margin={ |
| 9 | top:30, |
| 10 | right: 0, |
| 11 | bottom: 0, |
| 12 | left:0 |
| 13 | }, |
| 14 | width=100, |
Más de trescientas líneas más abajo hay que usar ese nombre, y aquí llega el gesto que da título a la pieza. El programa toma el texto con el nombre de la función, le añade otro texto con el paréntesis y el número que quiere convertir en color, y le pasa el resultado a eval. Eval es la orden con la que JavaScript coge una cadena de caracteres y la ejecuta como si fuera programa. Es como escribir en un papel “llama a este número” y dárselo a otro para que lo lea y marque, en vez de marcarlo uno mismo.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 13,9 kB
- sha256
- fd854b636529…
| 323 | numRangos= |
| 324 | var escalaColor = d3.scaleLinear() |
| 325 | .domain([0,numRangos-1]) |
| 326 | . |
| 327 | // division entera |
| 328 | var rngs=new Array(numRangos); |
| 329 | // primer intervalo |
| 330 | var rango= new Object(); |
| 331 | rango.min= |
| 332 | var posDato= |
| 333 | rango.max= |
| 334 | rango. |
| 335 | rngs[0]=rango; |
| 336 | for(var k=1;k<numRangos-1;k++){ |
| 337 | rango= new Object(); |
| 338 | rango.min= |
| 339 | posDato+= |
| 340 | rango.max= |
| 341 | rango. |
| 342 | rngs[k]=rango; |
| 343 | } |
| 344 | // último intervalo |
| 345 | if(numRangos>1){ |
Y no ocurre una vez. En quince líneas aparece tres veces, para los tramos de la leyenda, la tabla que dice qué significa cada color: una para el primer tramo, otra para los de en medio, dentro de un bucle que la repite para cada uno, y otra para el último. Las tres construyen la misma cadena con el mismo nombre de función y las tres la mandan a evaluar, cada una con su número de tramo pegado detrás. Más abajo, para la otra forma de leyenda, la de tres tramos que se ve en la foto, hay otras tres iguales.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 13,9 kB
- sha256
- fd854b636529…
| 338 | rango.min= |
| 339 | posDato+= |
| 340 | rango.max= |
| 341 | rango. |
| 342 | rngs[k]=rango; |
| 343 | } |
| 344 | // último intervalo |
| 345 | if(numRangos>1){ |
| 346 | rango= new Object(); |
| 347 | rango.min= |
| 348 | rango.max= |
| 349 | rango. |
| 350 | rngs[numRangos-1]=rango; |
| 351 | } |
| 352 | } |
| 353 | else{ |
| 354 | var informacionValue = { |
| 355 | max: |
| 356 | min: |
| 357 | maxDecimal:0 |
| 358 | }; |
| 359 | configTreeMap. |
| 360 | if(d.data.dato!="n.d."){ |
La función que recibe los dos nombres de la página del IPC hace catorce evaluaciones seguidas, dos filas de siete, para sacar los colores de las gráficas de líneas. Una fila con cada nombre y, en las dos, los mismos números pegados detrás: 0.25, 0.75, 0.5, 1, 0.15, 0.85 y 0.4. Cada evaluación pide un tono de la misma escala, más claro o más oscuro según el número. Son catorce veces el mismo gesto, escrito a mano uno detrás de otro, en dos listas que se leen como una tabla de multiplicar.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 43,1 kB
- sha256
- d32b768e12a0…
| 868 | } |
| 869 | configSerie. |
| 870 | } |
| 871 | function personalizarColores(color, coloresInfografia, rangoColor){ |
| 872 | $(' |
| 873 | coloresInfografia[0]); |
| 874 | $(' |
| 875 | configTreeMap. |
| 876 | configTreeMap. |
| 877 | configTreeMap. |
| 878 | configTreeMap. |
| 879 | configSerie. |
| 880 | eval(color[1]+"(1)"), |
| 881 | eval(color[1]+"(0.4)"), coloresInfografia[4]]; |
| 882 | configSerie. |
| 883 | configSerie. |
| 884 | configSerie. |
| 885 | configSerie. |
| 886 | eval(color[0]+"(1)"), |
| 887 | eval(color[0]+"(0.4)"), coloresInfografia[2]]; |
| 888 | configSerie. |
| 889 | completar |
| 890 | config. |
JavaScript tiene otra forma de pedir una función por su nombre: escribir ese nombre entre corchetes detrás de la librería que la contiene. Así no hace falta convertir ningún texto en programa, y está en el lenguaje desde el principio. Contando los cuatro ficheros de infografías del INE, hay 31 llamadas a eval, 23 de ellas en un mismo fichero, y la mayoría piden un color de esta manera. El fichero de las catorce llama igual, por su nombre y con eval, a las funciones que dibujan los puntos de las gráficas.
No todas piden un color. Para guardar la zona elegida en el mapa, el conjunto nacional, una comunidad o una provincia, el programa arma como texto una asignación completa, la orden que guarda un valor en su sitio: el nombre del objeto, un punto, el identificador del criterio, un igual y el valor seleccionado. Ese identificador viene escrito en la propia página, que el servidor genera con el número interno de la variable, cri85455. La frase entera se manda a eval dos líneas después de guardar el periodo de la manera normal.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 43,1 kB
- sha256
- d32b768e12a0…
| 251 | else{ |
| 252 | fila. |
| 253 | . |
| 254 | .attr("id",rows[k].idRow); |
| 255 | } |
| 256 | } |
| 257 | } |
| 258 | // FUNCIONES QUE GESTIONAN UN TREEMAP EN D3 |
| 259 | function completar |
| 260 | configTreeMap. |
| 261 | configTreeMap. |
| 262 | eval(" |
| 263 | } |
| 264 | function completar |
| 265 | config.dataMap=null; |
| 266 | config. |
| 267 | var auxAnnyo= |
| 268 | var termino= |
| 269 | config. |
| 270 | config. |
| 271 | } |
| 272 | function cambiar |
| 273 | if(isNivel3){ |
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 15,0 kB
- sha256
- 35cfd43aaa11…
| 258 | visibleMayor= |
| 259 | if(visibleMenor) $(" |
| 260 | if(visibleMayor) $(" |
| 261 | $(" |
| 262 | |
| 263 | if(0==0 && 3>1) $(" |
| 264 | isAvance=(1==1); |
| 265 | |
| 266 | // PREPARACIÓN DEL TREEMAP |
| 267 | configTreeMap={ |
| 268 | rangeColor: |
| 269 | criterioGeo:"cri85455", |
| 270 | nodoToolTip:{ |
| 271 | extraToolTip:"Nacional" |
| 272 | }, |
| 273 | urlJson:" |
| 274 | division:18, |
| 275 | parametros:{ // parametros a enviar |
| 276 | oper: 25, |
| 277 | t: "25333", |
| 278 | isPx:"false", |
| 279 | L:HM_L, |
| 280 | geo:85455, |
El fichero que pinta los mapas de otra infografía, la de estadísticas territoriales, tiene en seis líneas las dos maneras opuestas de tratar un error. Primero un catch vacío, el bloque que recoge los errores y aquí no hace nada con ellos: si algo falla ahí dentro, nadie se entera. Tres líneas después, el catch que envuelve el pintado del mapa hace lo contrario. Le abre al visitante una ventana del navegador con el texto «Error en el proceso de pintado» seguido del error tal cual, con el mensaje técnico con que el navegador lo describe.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 15,7 kB
- sha256
- 0e26551618f0…
| 445 | refreshRate: 'auto', |
| 446 | fit: false, |
| 447 | center: false, |
| 448 | beforePan: beforePan |
| 449 | }); |
| 450 | } |
| 451 | }catch (e){} |
| 452 | if (config. |
| 453 | config.callback(config); |
| 454 | }catch (e){ |
| 455 | loading[config. |
| 456 | alert("Error en el proceso de pintado. " + e); |
| 457 | } |
| 458 | } |
La última evaluación es la más modesta. Para saber cuántos colores tiene la leyenda, el programa coge el número de intervalos de su propia configuración y lo pasa por eval, que devuelve el mismo número. Si no está definido, dos líneas más abajo se calcula contando los colores de la paleta del mapa. El mismo renglón está en el cuarto fichero, el que pinta el mapa del IPC. El 23 de septiembre, los cuatro ficheros que sirve ine.es eran idénticos, byte a byte, a los que guardamos el 8.
- Copia
- archivo
- Guardado
- 8 sep 2026
- Peso
- 15,7 kB
- sha256
- 0e26551618f0…
| 214 | var vals = []; |
| 215 | $. |
| 216 | if(!value.secreto && value.val!=null) vals.push( value.val); |
| 217 | }); |
| 218 | vals.sort(function(a, b){return a-b}); |
| 219 | var arrayOrdenado= []; |
| 220 | $.each(vals, function(i, el){ |
| 221 | if($.inArray(el, arrayOrdenado) === -1) arrayOrdenado.push(el); |
| 222 | }); |
| 223 | var numColors ; |
| 224 | if(config.intervalos !=undefined) |
| 225 | numColors = eval(config.intervalos); |
| 226 | else |
| 227 | numColors = Object. |
| 228 | |
| 229 | if(numColors==undefined) numColors = Object. |
| 230 | |
| 231 | if (config. |
| 232 | if (color |
| 233 | colorMap[config.idMapa] = paleta_ |
| 234 | } |
| 235 | else |
| 236 | colorMapDefault = paleta_ |
El Instituto Nacional de Estadística calcula el IPC con decimales y elige su color leyendo en voz alta la etiqueta del bote.
- Los cuatro ficheros de JavaScript de las infografías de ine.es que guardamos el 8 de septiembre (treemap.js,
treemapTabla.js,territorialesIndex.js y visualV4INE.js) contienen 31 llamadas a eval: 23 entreemapTabla.js, 6 en treemap.js y una en cada uno de los otros dos. - La mayoría sirven para llamar a una función de color cuyo nombre llega como texto: d3.
interpolatePuOrpor defecto y, en la página del IPC, d3.interpolatePurplesy d3.interpolateOranges, que la propia página escribe. - Otras llaman del mismo modo a las funciones que dibujan los puntos de las gráficas; una arma una sentencia de asignación con el identificador del criterio geográfico que la página trae escrito; las dos restantes evalúan un número.
- El fichero que pinta los mapas territoriales tiene un catch vacío y, tres líneas después, otro que enseña el error al visitante en una ventana del navegador.
- El 23 de septiembre de 2026 los cuatro ficheros que sirve ine.es eran idénticos, byte a byte, a los guardados, y la página del IPC seguía pidiendo sus dos escalas por su nombre.
- No decimos que nadie pueda aprovechar esos eval: los valores que se evalúan salen de la configuración que el propio INE escribe en la página y de los datos que descarga de su propio servidor, y ninguno sale de la dirección del navegador (en estos ficheros la dirección solo se lee para el enlace de compartir en Twitter y para saber el protocolo).
- No lo hemos probado ni lo vamos a probar: descargamos los ficheros, que son públicos, y los leímos.
- Tampoco decimos que la infografía funcione mal: funciona, y se ve bien.
De dónde sale cada cita
Cada trozo de código de esta ficha está en un fichero guardado tal como lo entregó el servidor, con su huella (sha256) y su hora. Las citas entre «» se comprueban por programa contra ese fichero antes de publicar.
- https://ine.es/menus/plantillas/infografias/js/treemap.js8 de septiembre de 2026, 05:14archivosha256 fd854b636529a36bb1826ca205633025727c27f7f9b91eff1bbe0ad957bcf796
- https://ine.es/menus/plantillas/infografias/js/treemap.js15 de septiembre de 2026, 07:55en vivo · byte a byte igualsha256 fd854b636529a36bb1826ca205633025727c27f7f9b91eff1bbe0ad957bcf796
- https://ine.es/menus/plantillas/infografias/js/treemapTabla.js8 de septiembre de 2026, 05:14archivosha256 d32b768e12a06eed7c9e36c77867915602b6cc96e281df3747f4e4f7f8b44ed9
- https://ine.es/menus/plantillas/infografias/js/treemapTabla.js15 de septiembre de 2026, 07:55en vivo · byte a byte igualsha256 d32b768e12a06eed7c9e36c77867915602b6cc96e281df3747f4e4f7f8b44ed9
- https://ine.es/dynInfo/Infografia/TreeMapTabla/treemap.html?peso85451=3_16466&t=25333&rows=85456&cri85457=684699&geo=85455&tipodato=854578 de septiembre de 2026, 05:13archivosha256 35cfd43aaa11f4c80409e0c5bbc024be4c64a1e9a4c8e1d056fc5c8ea7f0401d
- https://ine.es/menus/plantillas/infografias/js/territorialesIndex.js8 de septiembre de 2026, 05:12archivosha256 0e26551618f051f2cf266cef8c0e9d00df688aa1b329c733fe1082ca64f96d2e
- https://ine.es/menus/plantillas/infografias/js/territorialesIndex.js15 de septiembre de 2026, 07:55en vivo · byte a byte igualsha256 0e26551618f051f2cf266cef8c0e9d00df688aa1b329c733fe1082ca64f96d2e