2b:null 2c:["$","title",null,{"children":"EA Colores exploratorio | José M. Zavala González | Observable"}] 31:[] 2f:{"id":"e960a1842cc524b5","slug":null,"title":"EA Colores exploratorio","thumbnail":"85ead56051941d043fdddf0737e18c4b72baf062ca8a77032563b2d39c606a73","access_level":"public","create_time":"$D2023-11-27T17:33:37.576Z","update_time":"$D2023-11-27T21:41:09.288Z","view_time":null,"first_public_time":"$D2023-11-27T17:33:37.576Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"247b19faa48b7d89","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":"starter_2024"},"version":106,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":null}],"members":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6747c4e5c0f5d653","slug":"espacios-abiertos","title":"Espacios Abiertos","owner":{"id":"247b19faa48b7d89","login":"jzavala-gonzalez","name":"José M. Zavala González"}},"type":"notebook","body":{"title":"EA Colores exploratorio","cells":[{"id":0,"value":"# EA Colores exploratorio\n\nUna libreta para explorar como podemos usar colores para gráficos y visualizaciones de datos en Espacios Abiertos. La idea es mirar contrastes y experimentar con códigos para realizar esto en otras libretas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"EA_COLORES_MAP","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"htl.html`\n

\nBlue\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chroma.contrast('red', 'white')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Contraste WCAG con blanco\n\nLos gráficos deben tener cierto contraste con el blanco que tiende ser el color de fondo de las paginas web y de los papers de research. Ver para referencia [\"WCAG Contrast Ratio\" notebook](https://observablehq.com/@mbostock/wcag-contrast-ratio) y los guidelines oficiales referenciados ahi. En resumen, colores en gráficos deberían tener al menos un contraste de 3.0 con su color de fondo y los textos deberian ser 4.5 o más.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"\n \n \n \n \n \n \n \n \n \n \n \n ${d3.sort(colores_info, d => -d.contrast_white).map(d => d.name).map(colornombre => {\n let colorhex = EA_COLORES_MAP[colornombre];\n let colorhtml = get_colorhtml(colornombre, colorhex);\n let white_contrast = chroma.contrast(colorhex, 'white').toFixed(2);\n return htl.html`\n \n \n \n \n \n `\n })}\n \n \n

Color	Contraste con blanco	Pasa para gráficos	Pasa para texto	Ejemplo
${colorhtml}	${white_contrast}	${white_contrast >= 3.0 ? '✅' : '❌'}	${white_contrast >= 4.5 ? '✅' : '❌'}	\n Ejemplo\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"## Contraste APCA\n\nAlternativamente, hay grupos que dicen que WCAG calcula contraste de manera inconsistente, dandole precedencia a combinaciones de colores que no contrastan tanto comparado a otras alternativas que da menor puntuación. Ver [este artículo](https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/) de Datawrapper para más contexto.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"colores_info = {\n let data = []\n EA_COLORES_NOMBRES.forEach(d => {\n let info = {}\n info['name'] = d\n info['hex'] = EA_COLORES_MAP[d]\n info['contrast_white'] = chroma.contrast(info['hex'], 'white')\n\n data.push(info)\n })\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"Contraste indica que solo 'INDIGO', 'BROWN', 'DARK GREY' y quizas 'VIOLET' son aptos para elementos gráficos mientras que ninguno puede ser usado como color de texto con blanco de fondo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"viewof color_select = Inputs.select(EA_COLORES_NOMBRES, {label: \"Prueba un color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\", fill: EA_COLORES_MAP[color_select]})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Contraste entre colores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"get_colorhtml('blue', 'blue')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function get_colorhtml(color_name, color_css) {\n return htl.html`\n

\n${color_name}\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"chroma('#A1F880').darken().hex(); // #6EC551","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"EA_COLORES_NOMBRES","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"# Apéndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"chroma = require(\"chroma-js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {EA_COLORES_NOMBRES, EA_COLORES_MAP} from \"22dc6182207c44c8\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"