2b:null 2c:["$","title",null,{"children":"Visualización de la Información - Trabajo Práctico Final | InfoVisNico | Observable"}] 31:T410,{ let counter = 0; // Contador const limit = 1000; // Límite de iteraciones data_origen.forEach(punto => { if (counter >= limit) return; // Detener si se alcanza el límite // Crear un ícono personalizado const icono = L.divIcon({ className: "custom-marker", // Clase CSS personalizada html: `

`, iconSize: [20, 20], iconAnchor: [10, 10], // Centrar el ícono }); // Agregar el marcador con el ícono dinámico L.marker([punto.latitud, punto.longitud], { icon: icono }) .addTo(map.map) // Usa `map.map` para acceder al mapa creado .bindPopup(`

Barrio: ${punto.neighbourhood}

Precio Promedio: $${punto.precio_promedio}

`); counter++; // Incrementar el contador }); }32:T430,{ let counter = 0; // Contador const limit = 1000; // Límite de iteraciones data_origen.forEach(punto => { const ancho = punto.publicaciones < 100 ? 30 : 150 if (counter >= limit) return; // Detener si se alcanza el límite // Crear un marcador con un número L.marker([punto.latitud, punto.longitud], { icon: L.divIcon({ className: 'custom-icon', // Clase personalizada para el estilo html: `

${punto.publicaciones}

`, iconSize: [150, 150], // Tamaño del marcador iconAnchor: [25, 25] // Anclaje del icono para que esté centrado }) }).addTo(map_cantidad.map); counter++; // Incrementar el contador }); }33:T50c,viewof cellPlot = { // Agrupar por barrio y tipo de habitación const grouped = d3.rollup( data.filter(d => d.price !== ""), // Filtrar datos con precios válidos v => d3.mean(v, d => d.price), // Calcular el promedio de precio d => d.neighbourhood, // Agrupar por barrio d => d.room_type // Luego agrupar por tipo de habitación ); // Convertir el agrupamiento en un array para usarlo con Plot const groupedData = Array.from(grouped, ([neighbourhood, roomTypes]) => Array.from(roomTypes, ([roomType, price]) => ({ neighbourhood, room_type: roomType, price })) ).flat(); return Plot.plot({ marginLeft: 100, marginBottom: 150, color: { type: "linear", scheme: "Reds", // Escala de color legend: true, label: "Precio Promedio" }, marks: [ Plot.cell(groupedData, { x: "room_type", // Ahora tipo de habitación en el eje X y: "neighbourhood", // Barrio en el eje Y fill: "price", // Usar el precio promedio como color title: d => `Precio promedio: ${d.price?.toFixed(2) || "N/A"}` }) ], x: { label: "Tipo de Habitación", tickRotate: 0 }, y: { label: "Barrio" } }); }34:T5da,histogramView2 = { const groupedData = d3.flatRollup( data, v => v.length, d => d.neighbourhood, d => d.room_type ).map(([neighbourhood, room_type, frequency]) => ({ neighbourhood, room_type, frequency })); const totalFrequencyByNeighbourhood = d3.rollup(groupedData, v => d3.sum(v, d => d.frequency), d => d.neighbourhood ); const sortedNeighbourhoods = Array.from(totalFrequencyByNeighbourhood.entries()) .sort((a, b) => b[1] - a[1]) .map(d => d[0]) const top10Neighbourhoods = sortedNeighbourhoods.slice(0, neighborhoodAmount); const filteredGroupedData = groupedData.filter(d => top10Neighbourhoods.includes(d.neighbourhood)); const orderedGroupedData = filteredGroupedData.sort((a, b) => { const idxA = top10Neighbourhoods.indexOf(a.neighbourhood); const idxB = top10Neighbourhoods.indexOf(b.neighbourhood); return idxA - idxB; }); return Plot.plot({ marks: [ Plot.barY(orderedGroupedData, { x: "neighbourhood", y: "frequency", fill: "room_type", title: d => `${d.room_type}: ${d.frequency} publicaciones`, }), Plot.ruleY([0]) ], x: { label: "Barrio", type: "band", domain: top10Neighbourhoods, padding: 0.1 }, y: { label: "Frecuencia", grid: true }, color: { legend: true, scheme: "Set3" }, width: 800, height: 400, marginLeft: 100, marginBottom: 50 }); }35:[] 2f:{"id":"405eef724e3d730a","slug":null,"title":"Visualización de la Información - Trabajo Práctico Final","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-12-07T13:00:55.440Z","update_time":"$D2024-12-07T13:25:31.949Z","view_time":null,"first_public_time":"$D2024-12-07T13:24:20.811Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0c1abb28de1f2fb1","login":"infovisnico","name":"InfoVisNico","avatar_url":"https://avatars-next.observableusercontent.com/5e7277438eb178477cc4558b9c55532bfc4ea12ab9604868378a5d2feda8dbd8","tier":"starter_2024"},"version":480,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"347267b21c5f00dd","login":"nico-mlicotta","name":"Nico Mlicotta","avatar_url":"https://avatars-next.observableusercontent.com/906596ea83a431960d971065458dcea352062aef5df72cfde67226625eea62b7","tier":null}],"members":[{"type":"team","id":"0c1abb28de1f2fb1","login":"infovisnico","name":"InfoVisNico","avatar_url":"https://avatars-next.observableusercontent.com/5e7277438eb178477cc4558b9c55532bfc4ea12ab9604868378a5d2feda8dbd8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"347267b21c5f00dd","login":"nico-mlicotta","name":"Nico Mlicotta","avatar_url":"https://avatars-next.observableusercontent.com/906596ea83a431960d971065458dcea352062aef5df72cfde67226625eea62b7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualización de la Información - Trabajo Práctico Final","cells":[{"id":0,"value":"# Visualización de la Información - Trabajo Práctico Final\n\n\nIntegrantes:\n\n* Matias Venditti\n* Nicolás Mlicotta\n\n## Preguntas Planteadas:\n\n1. ¿Dónde se ubican las publicaciones con mayores precios?\n2. ¿Suele influir la cantidad de habitaciones/ambientes en el precio de una publicación?\n3. ¿Cuántas publicaciones suele manejar un host?\n4. ¿Cuáles son los barrios/zonas que cuentan con mayor disponibilidad?\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"geojson = await d3.json(\"https://nicomlicottads.github.io/ecd2024b/tpfinal/barrios.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"data_origen = d3.csv(\"https://nicomlicottads.github.io/ecd2024b/tpfinal/df_agrupado_barrios_colores_precios_publicaciones.csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data_ = d3.csv(\"https://mvenditti-itba.github.io/ecd2024b/data/listings.csv\", d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"data = data_.filter((d) => d.price < 200000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"# ¿Qué barrios tienen los precios más altos?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"map = {\n const container = htl.html`

`; // Contenedor del mapa\n const map = L.map(container).setView([-34.58, -58.42], 13); // Coordenadas iniciales\n \n // Agregar capa base\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n L.geoJSON(geojson).addTo(map);\n \n return Object.assign(container, { map }); // Retorna el contenedor con la referencia al mapa\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"hexView = {\n const cleanedData = data\n .filter(d => d.price !== \"\" && d.longitude !== \"\" && d.latitude !== \"\")\n .map(d => ({\n longitude: +d.longitude,\n latitude: +d.latitude,\n price: +d.price\n }))\n .filter(d => !isNaN(d.longitude) && !isNaN(d.latitude) && !isNaN(d.price));\n \n return Plot.plot({\n height: 600,\n width: 800,\n color: {\n scheme: \"Turbo\",\n legend: true,\n label: \"Precio Promedio\"\n },\n marks: [\n Plot.hexagon(\n cleanedData,\n Plot.hexbin({fill: \"count\"}, {x: \"longitude\", y: \"latitude\", fill: d => d.price})\n )\n ],\n x: {\n label: \"Longitud\"\n },\n y: {\n label: \"Latitud\"\n }\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"# Zonas con Precios mas Exclusivos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"view = {\n const grouped = d3.rollup(\n data,\n v => d3.mean(v, d => d.price),\n d => d.neighbourhood\n );\n\n const groupedData = Array.from(grouped, ([neighbourhood, price]) => ({ neighbourhood, price }))\n .sort((a, b) => b.price - a.price)\n .slice(0, range);\n \n return Plot.plot({\n marginBottom: 50,\n marginLeft: 150,\n color: {\n scheme: \"Spectral\",\n legend: false\n },\n marks: [\n Plot.barX(groupedData, {\n x: \"price\",\n sort: {y: \"x\", reverse: true},\n y: \"neighbourhood\",\n fill: \"neighbourhood\",\n title: d => `${d.price}`\n })\n ],\n y: {\n label: \"Barrio/Zona\"\n },\n x: {\n label: \"Precio Promedio\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"# Precio según Cantidad de Ambientes y Tipo de Propiedad\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"# ¿Qué barrios tienen mayor cantidad de publicaciones?\nCon el siguiente gráfico podemos manejar un mejor entendimiento de la disposición geográfica de las publicaciones en nuestro Dataset de Airbnb.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"map_cantidad = {\n const container = htl.html`

`; // Contenedor del mapa\n const map = L.map(container).setView([-34.58, -58.42], 13); // Coordenadas iniciales\n \n // Agregar capa base\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n L.geoJSON(geojson).addTo(map);\n \n return Object.assign(container, { map }); // Retorna el contenedor con la referencia al mapa\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof range = Inputs.range([10, 30], {label: \"Amount\", step: 1, value: 15})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"viewof maxWidth = Inputs.range([1000, 2000], {label: \"MaxWidth\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"# Barrios Con Mayor Disponibilidad","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"viewof neighborhoodAmount = Inputs.range([0, 30], {label: \"Cant Barrios\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"# Hosts con Mayor Cantidad de Publicaciones","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"viewof hostAmount = Inputs.range([0, 30], {label: \"HostAmount\", step: 1, value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof topList = {\n const grouped = d3.rollup(\n data,\n v => v.length,\n d => d.host_id\n );\n\n const groupedData = Array.from(grouped, ([host_id, count]) => ({ host_id, count }))\n .sort((a, b) => b.count - a.count)\n .slice(0, hostAmount);\n \n return Plot.plot({\n marginBottom: 50,\n marginLeft: 150,\n color: {\n scheme: \"Spectral\",\n legend: false\n },\n marks: [\n Plot.barX(groupedData, {\n x: \"count\",\n sort: {y: \"x\", reverse: true},\n y: \"host_id\",\n fill: \"host_id\",\n title: d => `${d.count}`\n })\n ],\n y: {\n label: \"Hosts\"\n },\n x: {\n label: \"Numero de Publicaciones\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"