2b:null 2c:["$","title",null,{"children":"Ecualización de histogramas | José M. Zavala González | Observable"}] 31:T7b2,{ const width = 650; const height = 600; const side_pct = .20; const bot_pct = .20; const dotsize = 2.5; const strokescale = 1.2; const pickups_span = pickups_extent[1] - pickups_extent[0]; const side_span = (side_pct * pickups_span) / ( 1 - side_pct ); const bot_span = (bot_pct * 1) / (1 - bot_pct); return Plot.plot({ width, height, marginLeft: 40, x: { label: 'pickups', domain: [pickups_extent[0]-side_span, pickups_span] }, y: { domain: [0-bot_span,1], ticks: [-.5, .5], tickFormat: d => 'Colors\nused', fontWeight: 'bold', }, marks: [ Plot.ruleY([0]), //Plot.ruleX([pickups_extent[0]]), Plot.ruleY([1]), Plot.ruleX([pickups_extent[1]]), Plot.rectY(grid.data, Plot.binX({ // y: 'count', y: darr => darr.length / grid.num_data, }, {x: 'pickup', tip: true, // channels: {'y': 'count'} } )), Plot.ruleX(value_counts_array, {x: "x", stroke: d => chosen_colorscale(d.x), tip: false, strokeWidth: 2., y1: -bot_span, y2: 0, }), Plot.dot(value_counts_array,{ x: 'x', y: d => chosen_domainscale(d.x), fill: 'black', r: dotsize*strokescale, }), Plot.dot(value_counts_array,{ x: 'x', y: d => chosen_domainscale(d.x), fill: d => chosen_colorscale(d.x), r: dotsize, }), Plot.raster({fill: (x,y) => d3[`interpolate${colorScheme}`](y), x1: pickups_extent[0]-side_span, x2: pickups_extent[0], y1: 0, y2: 1, opacity: 0.10, }), Plot.ruleY(value_counts_array, {y: d => chosen_domainscale(d.x), stroke: d => chosen_colorscale(d.x), tip: false, strokeWidth: 2., x1: pickups_extent[0]-side_span, x2: pickups_extent[0], }), ] }) }32:T425,schemeMap = { return { "categorical": [ "Accent", "Category10", "Dark2", "Paired", "Pastel1", "Pastel2", "Set1", "Set2", "Set3", "Tableau10" ], "diverging": [ "BrBG", "PRGn", "PiYG", "PuOr", "RdBu", "RdGy", "RdYlBu", "RdYlGn", "Spectral" ], "reversedDiverging": [ "BuRd", "BuYlRd" ], "singleHue": [ "Blues", "Greens", "Greys", "Oranges", "Purples", "Reds" ], "multiHue": [ "Turbo", "Viridis", "Magma", "Inferno", "Plasma", "Cividis", "CubeHelix", "Warm", "Cool", "BuGn", "BuPu", "GnBu", "OrRd", "PuBu", "PuBuGn", "PuRd", "RdPu", "YlGn", "YlGnBu", "YlOrBr", "YlOrRd" ], "cyclical": [ "Rainbow", "Sinebow" ] } }33:[{"id":"a2bd2b734f3d706b290dd0b217d3b125384f44570b3b9be27c51d9b10bb7ec3112d0548188027fe3f57568af46769b440c6dc432069711d22b8ff3302ce4e25c","href":"https://static.observableusercontent.com/files/a2bd2b734f3d706b290dd0b217d3b125384f44570b3b9be27c51d9b10bb7ec3112d0548188027fe3f57568af46769b440c6dc432069711d22b8ff3302ce4e25c","name":"pickupAny.json","type":"application/json","lastModified":1692757234695.42,"size":853842},{"id":"5750388018dc131a24e697e0b385f2d8f8bacd73f347ecd2fff6f9ce3e9cbfe24e32ef0b3209a0958e8544e03ca74297a7b7e5de6f902dd7f03b4853eec8f629","href":"https://static.observableusercontent.com/files/5750388018dc131a24e697e0b385f2d8f8bacd73f347ecd2fff6f9ce3e9cbfe24e32ef0b3209a0958e8544e03ca74297a7b7e5de6f902dd7f03b4853eec8f629","name":"pickupAny@1.json","type":"application/json","lastModified":1692989681765.101,"size":1775061}] 2f:{"id":"f422aad6d4b15cfb","slug":null,"title":"Ecualización de histogramas","thumbnail":"1c190af4cebb90594f0e5644e62409a8434186c1e7a4468a05fe0a6a7901272a","access_level":"public","create_time":"$D2023-08-23T02:18:46.427Z","update_time":"$D2023-08-25T21:17:28.405Z","view_time":null,"first_public_time":"$D2023-08-23T02:18:46.427Z","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":601,"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":null,"type":"notebook","body":{"title":"Ecualización de histogramas","cells":[{"id":0,"value":"# Ecualización de histogramas\n\nPara derramarle color a todo 🌈","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"\n\n \n \n \n \n

\n ${plt_linear}\n

\n ${plt_custom}\n

\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"viewof schemeType = Inputs.radio(Object.keys(schemeMap).filter(\n d => d != 'reversedDiverging'\n), {label: \"Elige el tipo de escala de color:\", value: 'multiHue'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof colorScheme = Inputs.select(schemeMap[schemeType], {label: \"Elige esquema de color:\", value: 'Viridis'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"ramp(colorScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof interptype = Inputs.select(['linear', 'log', 'equalized'], {label: \"Elige una interpolación:\", value: 'equalized'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"## Resumen\n\nMuchas veces los datos que graficamos usando color tienen outliers. Pero outliers biien lejos de lo normal. Si usamos una interpolación linear como de costumbre, pues queda un mapa como el de la izquierda. Podemos interpolar con log en vez y alivia el problema pero aun quedan colores sin usar. Mientras más colores vemos, más podemos aprender sobre la distribución de los datos.\n\nEcualización de histogramas es una técnica para usar colores al mismo ritmo que graficamos datos. La imagen final pinta cada color equitativamente en el canvas. Los puntos con menor valor son igual de visibles que aquellos con el mayor valor. Sirve muy bien para distinguir visualmente donde estan los pedazos, aunque perdemos la intuición numérica.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"Plot.plot({\n height: 200,\n marginLeft: 80,\n x: {\n label: 'pickups'\n },\n y: {\n domain: [-1,1],\n ticks: [-.5, .5],\n tickFormat: d => d < 0 ? `Transformed\\ncolorscale\\n(${interptype})` : `${colorScheme}\\ncolorscale\\n(linear)`,\n fontWeight: 'bold',\n },\n marks: [\n Plot.ruleX(value_counts_array, {x: \"x\", stroke: d => chosen_colorscale(d.x), tip: true, strokeWidth: 2.5}),\n Plot.raster({fill: (x,y) => d3[`interpolate${colorScheme}`](linear_domainscale(x)), x1: pickups_extent[0], x2: pickups_extent[1], y1: 0, y2: 1}),\n \n ]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"plt_linear = {\n // const chosen_colorscale = linear_colorscale;\n \n return Plot.plot({\n style: 'rect {fill: black;}',\n width: width / 2,\n x: {axis: false},\n y: {axis: false},\n color: {\n // range: colors,\n // type: 'log',\n // legend: true,\n \n },\n // color: linear_colorscale,\n aspectRatio: 1,\n // color: {label: \"Elevation (m)\", legend: true},\n marks: [\n Plot.rect(\n [{\n x1:0,y1:0,\n x2: grid.width, y2:grid.height,\n }],\n {fill: 'black'}\n ),\n Plot.raster(\n grid.data,\n {width: grid.width,\n height: grid.height,\n x: 'x',\n y: 'y',\n // fill: 'pickup',\n // fill: d => interptype === 'linear' ? d.pickup : Math.log10(d.pickup),\n fill: d => linear_colorscale(d.pickup),\n \n })\n ]\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"plt_custom = {\n // const chosen_colorscale = linear_colorscale;\n \n return Plot.plot({\n style: 'rect {fill: black;}',\n width: width / 2,\n x: {axis: false},\n y: {axis: false},\n color: {\n // range: colors,\n // type: 'log',\n // legend: true,\n \n },\n // color: linear_colorscale,\n aspectRatio: 1,\n // color: {label: \"Elevation (m)\", legend: true},\n marks: [\n Plot.rect(\n [{\n x1:0,y1:0,\n x2: grid.width, y2:grid.height,\n }],\n {fill: 'black'}\n ),\n Plot.raster(\n grid.data,\n {width: grid.width,\n height: grid.height,\n x: 'x',\n y: 'y',\n // fill: 'pickup',\n // fill: d => interptype === 'linear' ? d.pickup : Math.log10(d.pickup),\n fill: d => chosen_colorscale(d.pickup),\n \n })\n ]\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"interptype","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"d3[`interpolate${colorScheme}`](0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"import {ramp} from \"@d3/color-schemes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"// chosen_colorscale = interptype === 'linear' ? linear_colorscale : log_colorscale;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"chosen_colorscale = d => d3[`interpolate${colorScheme}`](chosen_domainscale(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"chosen_domainscale = {\n switch(interptype) {\n case 'linear':\n return linear_domainscale;\n case 'log':\n return log_domainscale;\n case 'equalized':\n return equalized_domainscale;\n default:\n return linear_domainscale;\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"d3.extent(value_counts_array, d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"// linear_colorscale = d3.scaleQuantize()\n// .domain(pickups_extent)\n// .range(colors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"linear_colorscale = d => d3[`interpolate${colorScheme}`](linear_domainscale(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"linear_domainscale = d3.scaleLinear().domain(pickups_extent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"log_domainscale = d3.scaleLog().domain(pickups_extent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"get_cdf(grid.data.map(d => d.pickup))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"function get_cdf(data) {\n const pdf = {};\n const cdf = {};\n const unique_values = Array.from(new Set(data)).sort((a,b) => a-b);\n\n // const rolling_sum\n for (let x of data) {\n pdf[x] = pdf[x] ? pdf[x]+1 : 1\n }\n\n let rolling_sum = 0;\n for (let xu of unique_values) {\n rolling_sum += pdf[xu];\n cdf[xu] = rolling_sum;\n }\n return cdf\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"equalized_domainscale = get_equalized_domainscale(grid.data.map(d => d.pickup))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"function get_equalized_domainscale(data) {\n const num_obs = data.length;\n const cdf = get_cdf(data);\n const cdf_min = d3.min( Object.values(cdf) )\n \n return (d) => {\n return (cdf[d] - cdf_min)/(num_obs - cdf_min);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"log_colorscale = d3.scaleLog()\n .domain(pickups_extent)\n .range(colors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"colorScheme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"ncolors = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// function capitalize(str) {\n// return str.charAt(0).toUpperCase() + str.slice(1);\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// capitalize(colorScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"d3[`scheme${colorScheme}`]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"colors = get_colors(colorScheme)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function get_colors(name) {\n let canvas;\n let colors;\n let dark;\n if (d3[`scheme${name}`] && d3[`scheme${name}`][ncolors]) {\n colors = d3[`scheme${name}`][ncolors];\n dark = d3.lab(colors[0]).l < 50;\n } else if (d3[`scheme${name}`] && schemeType === 'categorical') {\n return d3[`scheme${name}`];\n } else {\n const interpolate = d3[`interpolate${name}`];\n colors = [];\n dark = d3.lab(interpolate(0)).l < 50;\n for (let i = 0; i < ncolors; ++i) {\n colors.push(d3.rgb(interpolate(i / (ncolors - 1))).hex());\n }\n }\n return colors\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"schemeMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// import {schemes} from \"@observablehq/plot-cheatsheets-colors\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"[...Array(10).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"value_counts = {\n const dataarr = grid.data.map(d => d.pickup);\n const counts = {};\n\n for (let x of dataarr) {\n counts[x] = counts[x] ? counts[x]+1 : 1;\n }\n return counts\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"value_counts_array = Object.keys(value_counts).map(d => {\n return {x: +d, y: value_counts[d], ypct: value_counts[d]/grid.num_data}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"observed_values = Object.keys(value_counts).map(d => +d).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"cdf_counts = {\n const cdf_counts = {};\n let rolling_sum = 0;\n\n for (let x of observed_values) {\n rolling_sum += value_counts[x];\n cdf_counts[x] = rolling_sum;\n }\n\n return cdf_counts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"cdf_array = observed_values.map(d => {\n return {x: d, y: cdf_counts[d], ypct: cdf_counts[d]/grid.num_data}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Plot.plot({\n title: 'Pickups accumulated',\n x: {\n label: '...at or under these pickups'\n },\n y: {\n label: 'Total areas...'\n },\n marginLeft: 70,\n marks: [\n // Plot.rectY(grid.data, Plot.binX({y: 'count'}, {x: 'pickup'})),\n Plot.lineY(cdf_array, { x: \"x\", y: \"y\", tip: false }),\n Plot.dot(cdf_array, { x: \"x\", y: \"y\", tip: true,\n channels: {'y': 'wowY', x: 'wowX'}\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"Plot.plot({\n title: 'Pickups per area',\n marginLeft: 60,\n x: {\n label: '...with these pickup9s'\n },\n y: {\n label: 'Total areas...'\n },\n marks: [\n Plot.rectY(grid.data, Plot.binX({\n // y: 'count',\n y: darr => darr.length / grid.num_data,\n },\n {x: 'pickup', tip: true,\n // channels: {'y': 'count'}\n }\n )),\n // Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"Plot.binX({y: 'count'},\n {x: 'pickup', tip: true,\n // channels: {'y': 'count'}\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n \n return Plot.plot({\n title: 'Data can change very unevenly',\n subtitle: 'yikes',\n color: {\n legend: true,\n },\n x: {\n label: '...at or under these pickups'\n },\n y: {\n label: 'Percent of areas...',\n tickFormat: '.0%',\n },\n marginLeft: 70,\n marks: [\n // Plot.rectY(grid.data, Plot.binX({y: 'count'}, {x: 'pickup'})),\n Plot.ruleY([0]),\n Plot.lineY(cdf_array, { x: \"x\", y: \"ypct\", tip: false }),\n Plot.dot(cdf_array, { x: \"x\", y: \"ypct\", tip: true,\n channels: {'y': 'y', x: 'wowX'}\n }),\n ]\n})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Apendice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"pickupany = FileAttachment(\"pickupAny@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"pickups_extent = d3.extent(cdf_array.map(d => d.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"grid = {\n return {\n data: pickupany,\n num_data: pickupany.length,\n width: 1000,\n height: 1000,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"