25:["$","title",null,{"children":"Histograma rentas de edificios en riesgo de demolición | Newtral Data | Observable"}] 49:Tbfb,histograma = { const containerWidth = Math.min(900, window.innerWidth - 40); // margen lateral para móviles const height = 500; const margin = {top: 60, right: 30, bottom: 60, left: 60}; const svg = d3.create("svg") .attr("viewBox", `0 0 ${containerWidth} ${height}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") .style("height", "auto") .style("display", "block") .style("margin", "auto"); const valoresFiltrados = rentasData.filter(d => d >= 5000 && d <= 25000); const x = d3.scaleLinear() .domain([5000, 25000]) .nice() .range([margin.left, containerWidth - margin.right]); const bins = d3.histogram() .domain(x.domain()) .thresholds(30)(valoresFiltrados); const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]); const tooltip = d3.select("body").append("div").attr("class", "tooltip"); svg.append("g") .selectAll("rect") .data(bins) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("y", d => y(d.length)) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("height", d => y(0) - y(d.length)) .attr("fill", "#01f3b3") .on("mouseenter", (event, d) => { tooltip.style("opacity", 1) .html(` Rango: ${formatNumber(d.x0)} - ${formatNumber(d.x1)} €
Cantidad de edificios: ${formatNumber(d.length)} `); }) .on("mousemove", event => { tooltip.style("top", (event.pageY - 40) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseleave", () => { tooltip.style("opacity", 0); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(formatNumber)) .selectAll("text") .style("font-size", "12px"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(formatNumber)) .selectAll("text") .style("font-size", "12px"); svg.append("text") .attr("x", containerWidth / 2) .attr("y", margin.top / 3) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-family", "sans-serif") .style("font-weight", "bold") .text(tituloHistograma); const meanValue = d3.mean(valoresFiltrados); svg.append("line") .attr("x1", x(meanValue)) .attr("x2", x(meanValue)) .attr("y1", height - margin.bottom) .attr("y2", margin.top) .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5") .on("mouseenter", () => { tooltip.style("opacity", 1) .html(`Media: ${formatNumber(meanValue)} €`); }) .on("mousemove", event => { tooltip.style("top", (event.pageY - 40) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseleave", () => { tooltip.style("opacity", 0); }); return svg.node(); }4a:[{"id":"205fe0eae5d378b18f380f818ee1b98178c47b74ff4dda8daaab8c35d7b0031b366ec077080adb2c45bbaae59a5dd4946eb07ae41432b022a8fbf20f2b3281aa","href":"https://static.observableusercontent.com/files/205fe0eae5d378b18f380f818ee1b98178c47b74ff4dda8daaab8c35d7b0031b366ec077080adb2c45bbaae59a5dd4946eb07ae41432b022a8fbf20f2b3281aa","name":"renta2.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1751897109778.073,"size":208350},{"id":"3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","href":"https://static.observableusercontent.com/files/3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","name":"newtral_logo.png","type":"image/png","lastModified":1751898453268.28,"size":1409}] 29:{"id":"c2ac641525ab40bb","slug":null,"title":"Histograma rentas de edificios en riesgo de demolición","thumbnail":"f9b1fb38ba37098957dbe6861bcccf092e375c100d037878a37bb8c20e27beb4","access_level":"public","create_time":"$D2025-07-07T13:48:56.801Z","update_time":"$D2025-07-23T11:07:41.590Z","view_time":null,"first_public_time":"$D2025-07-07T14:15:07.221Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false},"version":164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false}],"members":[{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Histograma rentas de edificios en riesgo de demolición","cells":[{"id":124,"value":"

Histograma rentas de edificios en riesgo de demolición

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"xlsx = require(\"xlsx@0.18.5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"localeES = d3.formatLocale({\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"€\", \"\"]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"formatNumber = localeES.format(\",.0f\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"formatDecimal = localeES.format(\",.2f\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"rentasData = {\n const file = await FileAttachment(\"renta2.xlsx\").arrayBuffer();\n const workbook = xlsx.read(file, { type: \"array\" });\n const sheetName = workbook.SheetNames[0];\n const sheet = workbook.Sheets[sheetName];\n return xlsx.utils.sheet_to_json(sheet, { header: 1 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"meanValue = d3.mean(rentasData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"valores = rentasData\n .map(fila => +fila[1])\n .filter(v => !isNaN(v))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof tituloHistograma = Inputs.text({ label: \"Título del histograma\", value: \"Distribución de la renta media por persona en las secciones censales con edificios en riesgo de demolición\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"estilos = html `\n

\n NewtralData\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null