Pieza 9 de 64
Otra épocaPieza nº 0009 de 64

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
Captura de https://ine.es/
foto 1La portada de ine.es el 23 de septiembre de 2026: el Instituto Nacional de Estadística, con sus cinco indicadores de cabecera.Captura del 23 de septiembre de 2026, 10:13 (hora peninsular)

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».

Captura de https://ine.es/dynInfo/Infografia/TreeMapTabla/treemap.html?peso85451=3_16466&t=25333&rows=85456&cri85457=684699&geo=85455&tipodato=85457
foto 2La infografía del IPC en ine.es el 23 de septiembre de 2026, con los datos de agosto y sin pulsar nada. El morado del mapa sale de la escala que la página pide con el nombre d3.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
1de 8ine.es/menus/plantillas/infografias/js/treemap.jslínea 3 de 417
Copia
archivo
Guardado
8 sep 2026
Peso
13,9 kB
sha256
fd854b636529…
1// GLOBAL SCOPE
2configTreeMap={// asigno un color por defecto
3    schemaColor:"d3.interpolatePuOr",
4    rangeColor:[0.15,0.85],
5    criterioGeo:""
6}
1El arranque del fichero: el nombre de la función de color, guardado como texto, con su comentario al lado.

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.

2de 8ine.es/menus/plantillas/infografias/js/treemap.jslínea 334 de 417
Copia
archivo
Guardado
8 sep 2026
Peso
13,9 kB
sha256
fd854b636529…
331rango.min=datosOrdenados[0];
332var posDato=minimoDatos+((datosOrdenados.length%configTreeMap.intervalos>0)?1:0);
333rango.max=(posDato==1)?rango.min:(datosOrdenados[posDato]-pasoDecimal).toFixed(1);
334rango.color=eval(configTreeMap.schemaColor+'(escalaColor(0))');
335rngs[0]=rango;
336for(var k=1;k<numRangos-1;k++){
337    rango= new Object();
2El color del primer intervalo de la leyenda: nombre de función más paréntesis, a evaluar.

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.

3de 8ine.es/menus/plantillas/infografias/js/treemap.jslínea 349 de 417
Copia
archivo
Guardado
8 sep 2026
Peso
13,9 kB
sha256
fd854b636529…
346        rango= new Object();
347        rango.min=datosOrdenados[posDato];
348        rango.max=datosOrdenados[datosOrdenados.length-1];
349        rango.color=eval(configTreeMap.schemaColor+'(escalaColor(numRangos-1))');
350        rngs[numRangos-1]=rango;
351    }
352}
3El del último tramo, quince líneas después del primero. En medio, la misma línea dentro de un bucle.

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.

4de 8ine.es/menus/plantillas/infografias/js/treemapTabla.jslínea 879 de 1.237
Copia
archivo
Guardado
8 sep 2026
Peso
43,1 kB
sha256
d32b768e12a0…
876configTreeMap.rangeColor=rangoColor[1];
877configTreeMap.nodoToolTip.background=coloresInfografia[5];
878configTreeMap.color=coloresInfografia[4];
879configSerie.coloresSeries=[eval(color[1]+"(0.25)"),eval(color[1]+"(0.75)"),eval(color[1]+"(0.5)"),
880               eval(color[1]+"(1)"),eval(color[1]+"(0.15)"),eval(color[1]+"(0.85)"),
881               eval(color[1]+"(0.4)"), coloresInfografia[4]];
882configSerie.infoGraph.background=coloresInfografia[5];
4El principio de los colores de las gráficas. La lista sigue en las dos líneas siguientes con cuatro evaluaciones más, y poco más abajo hay otra igual con el otro nombre.

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.

5de 8ine.es/menus/plantillas/infografias/js/treemapTabla.jslínea 262 de 1.237
Copia
archivo
Guardado
8 sep 2026
Peso
43,1 kB
sha256
d32b768e12a0…
259function completarParametros(valorPeriodo){
260    configTreeMap.parametros.periodo=valorPeriodo;
261    configTreeMap.nodoToolTip.extraToolTip=config.selected.nombre;
262    eval("configTreeMap.parametros."+configTreeMap.criterioGeo+" = "+config.selected.tablavalor);
263}
264function completarConfig(valorPeriodo, valorTreemap){
265    config.dataMap=null;
5Una asignación entera escrita como texto y evaluada. Arriba, la misma operación hecha de la manera normal, dos líneas antes.
6de 8ine.es/dynInfo/Infografia/TreeMapTabla/treemap.htmllínea 269 de 372
Copia
archivo
Guardado
8 sep 2026
Peso
15,0 kB
sha256
35cfd43aaa11…
266// PREPARACIÓN DEL TREEMAP
267configTreeMap={
268    rangeColor:[[0.15,0.85],[0.15,0.85]][1],
269    criterioGeo:"cri85455",
270    nodoToolTip:{
271        extraToolTip:"Nacional"
272    },
6En la página del IPC, el identificador que acabará dentro de la sentencia evaluada. Lo escribe el servidor al generar la página.

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.

7de 8ine.es/menus/plantillas/infografias/js/territorialesIndex.jslínea 456 de 461
Copia
archivo
Guardado
8 sep 2026
Peso
15,7 kB
sha256
0e26551618f0…
453       config.callback(config);
454 }catch (e){
455   loading[config.divDestino]==null;
456   alert("Error en el proceso de pintado. " + e);
457 }
458}
7Las dos maneras de tratar un error, en seis líneas: el catch vacío y, tres más abajo, el que abre la ventana con el error dentro.

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.

8de 8ine.es/menus/plantillas/infografias/js/territorialesIndex.jslínea 225 de 461
Copia
archivo
Guardado
8 sep 2026
Peso
15,7 kB
sha256
0e26551618f0…
222});
223var numColors ;
224if(config.intervalos !=undefined)
225    numColors = eval(config.intervalos);
226else
227    numColors = Object.keys(getColorMap(config.idMapa)).length;
8Un número, evaluado como si pudiera ser otra cosa.

El Instituto Nacional de Estadística calcula el IPC con decimales y elige su color leyendo en voz alta la etiqueta del bote.

Lo que decimos
  • 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 en treemapTabla.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.interpolatePuOr por defecto y, en la página del IPC, d3.interpolatePurples y 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.
Lo que no decimos
  • 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.
Procedencia

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.

Desgobierno Digital · https://desgobiernodigital.com/piezas/ine-color-por-su-nombre/ · copia impresa de la edición generada el 19 de octubre de 2026 · Un proyecto de BQuant · correcciones: @Gsnchez