3f:null 40:["$","title",null,{"children":"Seattle Airbnb study | Hugo Tessier | Observable"}] 46:Tf9c,{ // ---------- Create container const main = DOM.element('div', { style: `position:relative; display:flex; align-items: flex-start`}); const container = DOM.element('div', { style: `width:${width*.8}px;height:${width/2}px;` }); yield main; // ---------- Create map const map = L.map(container).setView([47.62, -122.3], 11); // -- default map // let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors', // minZoom: 11, // maxZoom: 15, // }).addTo(map); // -- grey map const osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors', minZoom: 11, maxZoom: 17, }).addTo(map); // ---------- Create svg L.svg({clickable:true}).addTo(map)// we have to make the svg layer clickable const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select('svg').attr("pointer-events", "auto"); // ---------- Create circles const Dots = svg.selectAll('circle') .attr("class", "Dots") .data(seattle_listings) .join('circle') .attr("class", "pin") .attr("cx", d => map.latLngToLayerPoint([d.latitude,d.longitude]).x) .attr("cy", d => map.latLngToLayerPoint([d.latitude,d.longitude]).y) .attr("r", map.getZoom()-8); // ---------- Create tooltip var selected = false; // is a listing selected const tooltipContent = (d) => ` ${d.name}
${d.description.substring(0,200)}...
See listing

Price: $${d.price}/night
Room type: ${d.room_type}
Number of guests: ${d.guests_included}
Area: ${d.area} `; const tooltip = html` `; // ---------- Interactions // -- Update circles const update = () => { Dots .attr("cx", d => map.latLngToLayerPoint([d.latitude,d.longitude]).x) .attr("cy", d => map.latLngToLayerPoint([d.latitude,d.longitude]).y) .attr("r", d => map.getZoom()-8) d3.selectAll('.unselected') .attr("r", d => map.getZoom()-10) } map.on("zoomend", update) // -- Hover and click-in Dots.on('mouseenter', function(event, d) { if (!selected){ d3.select(this) .transition().duration(150) .attr('r', map.getZoom()-6); d3.selectAll(`#map-tooltip`) .style('visibility', 'visible') .select('#value') .html(tooltipContent(d)); } }) .on('mouseout', function(event, d) { if (!selected){ d3.select(this) .transition().duration(150) .attr('r', map.getZoom()-8) d3.selectAll(`#map-tooltip`) .style('visibility', 'hidden') } }) .on('click', function(event, d) { if(!selected){ Dots.classed('unselected', i => i!==d); d3.selectAll('.unselected') .transition().duration(150) .style('fill', 'grey') .attr('r', map.getZoom()-10); d3.selectAll(`#map-tooltip`) .style('visibility', 'visible') setTimeout(() => {selected = !selected}, 10); } }); // -- Click out container.addEventListener('click', function (event) { if(selected){ Dots.classed('unselected', false) .transition().duration(150) .style('fill', "#EF5B5D") .attr('r', map.getZoom()-8); d3.selectAll(`#map-tooltip`) .style('visibility', 'hidden'); selected = false; } }); main.append(container) main.append(tooltip) }47:T46c3,{ let dataset = [...seattle_listings]; // 🛑🛑🛑 --------- VARIABLE INITIALIZATION const height = width/2; const number_bins = 65; let principal_accessor = d => null let secondary_accessor = d => null // ----------------------------------------------- // 🛑🛑🛑 --------- HTML ELEMENTS // ----------------------------------------------- const map_selector = DOM.element('div', {style: `height:${height*.7-20}px; background:white;`}); const selector_1 = html` `; const selector_2 = html` `; const hist_1 = DOM.element('div', {style: `width:${width*.5*.80 - 20}px; height:${height*.15 - 20}px; background:white;`}); const central = DOM.element('div', {style: `width:${width*.5*.80 - 20}px; height:${height*.80- 20}px; background:white;`}); const hist_2 = DOM.element('div', {style: `width:${height*.15 - 20}px; height:${height*.80- 20}px; background:white;`}); const neighbor = DOM.element('div', {style: `height:${height*.6-20}px; background:white;`}); const donut = DOM.element('div', {style: `height:${height*.4-20}px; background:white;`}); yield html`

Area selector

${map_selector}

Horizontal axis

${selector_1}

Vertical axis

${selector_2}

${hist_1}${central}${hist_2}

${donut}${neighbor}

`; // ----------------------------------------------- // 🛑🛑🛑 --------- MAP SELECTOR 🗺 // ----------------------------------------------- let hover = false; // is an area hovered let selected = false; // is an area selected let selected_area = null // the selected area const svg_map_selector = d3.create('svg') .attr('width', map_selector.offsetWidth) .attr('height', map_selector.offsetHeight) .style("cursor", "crosshair"); const projection = d3.geoMercator() .center([-122.34, 47.615]) .scale(150*map_selector.offsetHeight) .translate([map_selector.offsetWidth/2, map_selector.offsetHeight/2]) // -- Draw the tiles const tiles = svg_map_selector .selectAll("tile") .data(seattle_areas.features) .enter() .append("path") .attr("class", "tile") .attr("d", d3.geoPath().projection(projection)) .attr("fill", "grey") .style("opacity", .6) .style("stroke", "white"); // ---- Selection const focusOn = function(d){ tiles .classed("unselected-tiles", i => {return i.properties.name !== d.properties.name}) d3.selectAll('.unselected-tiles') .transition() .style("opacity", .2); } const focusOff = function(){ tiles .classed("unselected-tiles", false) .transition() .style("opacity", .6); } // tiles.on('mouseenter', function(event, d){ if(!selected){ selected_area = d.properties.name; focusOn(d); hover = true; update_map(); update_donut(); update_central(); update_x(selector_1.value); update_y(selector_2.value); } }) .on('mouseout', function(event, d){ if(!selected){ focusOff(); hover = false setTimeout(() => { if(!hover){ selected_area = null; update_map(); update_donut(); update_central(); update_x(selector_1.value); update_y(selector_2.value); } }); } }) .on('click', function(event, d){ if(!selected){ focusOn(d) setTimeout(() => {selected = !selected;}, 10); } }); // --------- Click out map_selector.addEventListener('click', function (event) { if(selected){ selected_area = null; focusOff(); update_map(); update_donut(); update_central(); update_x(selector_1.value); update_y(selector_2.value); selected = false; } }); map_selector.append(svg_map_selector.node()) // ----------------------------------------------- // 🛑🛑🛑 --------- CENTRAL SCATTER PLOT 📉 // ----------------------------------------------- const svg_central = d3.create('svg') .attr("width", central.offsetWidth) .attr("height", central.offsetHeight); // ---- Scales const xScale = d3.scaleLinear() .range([10, central.offsetWidth - 40]); const yScale = d3.scaleLinear() .range([central.offsetHeight-10, 40]); // ---- Axes const xAxis = d3.axisTop(xScale); const xAxisGroup = svg_central.append('g').attr('transform', `translate(0, ${40})`).call(xAxis) const yAxis = d3.axisRight(yScale); const yAxisGroup = svg_central.append('g').attr('transform', `translate(${central.offsetWidth-40},0)`).call(yAxis) // ---- Labels const x_label = svg_central.append("text").attr("class", "label") .attr("x", central.offsetWidth/2) .attr("y", 12); const y_label = svg_central.append("text").attr("class", "label") .attr("x", central.offsetHeight/2) .attr("y", -central.offsetWidth+8) .attr("transform", "rotate(90)"); // ---- Clip path svg_central.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("x", 10) .attr("y", 40) .attr("width", central.offsetWidth - 50) .attr("height", central.offsetHeight-50); let circles_g = svg_central.append("g") .attr("clip-path", "url(#clip)") // ---- Circles const circles = circles_g.selectAll('circle') .data(dataset, d => d.index) .join(enter => enter .append('circle') .attr('cx', d => xScale(0)) .attr('cy', d => yScale(0)) .attr('r', (d, i) => 3) .attr('fill', '#EF5B5D') .attr('opacity', .2) .transition() .attr('cx', d => xScale(principal_accessor(d))) .attr('cy', d => yScale(secondary_accessor(d))) ); // ---- Update central const update_central = function(){ // -- Update circles circles .data(dataset, d => d.index) .transition() .attr('cx', d => xScale(principal_accessor(d))) .attr('cy', d => yScale(secondary_accessor(d))) .attr('fill', d => (selected_area===null)? "#EF5B5D":((selected_area===d.area)?"#EF5B5D":"grey") ) .attr('opacity', d => (selected_area===null)? .2:((selected_area===d.area)?.4:.01) ) xAxisGroup.call(xAxis.scale(xScale)); yAxisGroup.call(yAxis.scale(yScale)); // -- Update zoom state if (is_zoomed) canvas.transition().call(zoom.transform, d3.zoomIdentity); setTimeout(() => {is_zoomed = false}, 400); } central.append(svg_central.node()) // ----------------------------------------------- // 🛑🛑🛑 --------- HORIZONTAL HISTOGRAM 📉 // ----------------------------------------------- const svg_hist1 = d3.create('svg') .attr('width', hist_1.offsetWidth) .attr('height', hist_1.offsetHeight); // Histogram const histogram1 = d3.histogram() .domain(xScale.domain()) .thresholds(xScale.ticks(number_bins)); // Scales const scale_hist1 = d3.scaleLinear() .range([hist_1.offsetHeight-5, 10]); // ----- Update histogram const update_x = function(val){ principal_accessor = get_accessor(val); const label = get_label(val); xScale.domain(extent_by(dataset, principal_accessor)); x_lim = xScale.domain() x_label.text(label) update_central(); //-- Update histogram generator histogram1 .value(d => bin_value(d, principal_accessor, selected_area)) .domain(xScale.domain()) .thresholds(xScale.ticks(number_bins)); const bins1 = histogram1(dataset); // -- Update scales scale_hist1 .domain([0, d3.max(bins1, d => d.length)]); // -- Update rectangles svg_hist1.selectAll("rect") .data(bins1) .join(enter => enter .append("rect") .attr("x", d => xScale(d.x0) ) .attr("y", d => scale_hist1(d.length)) .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - 1]) ) .attr("height", d => scale_hist1(0)-scale_hist1(d.length) ) .style("fill", "#EF5B5D"), update => update .transition() .attr("x", d => xScale(d.x0) ) .attr("y", d => scale_hist1(d.length)) .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - 1]) ) .attr("height", d => scale_hist1(0)-scale_hist1(d.length) ) ); // -- Update axis xAxisGroup.transition().call(xAxis); } d3.select(selector_1).on('change', () => { update_x(selector_1.value); }); hist_1.append(svg_hist1.node()) // ----------------------------------------------- // 🛑🛑🛑 --------- VERTICAL HISTOGRAM 📉 // ----------------------------------------------- const svg_hist2 = d3.create('svg') .attr('width', hist_2.offsetWidth) .attr('height', hist_2.offsetHeight); // Histogram const histogram2 = d3.histogram() .domain(yScale.domain()) .thresholds(yScale.ticks(number_bins)); // Scales const scale_hist2 = d3.scaleLinear() .range([5, hist_2.offsetWidth - 10]); // ----- Update histogram const update_y = function(val){ secondary_accessor = get_accessor(val); const label = get_label(val); yScale.domain(extent_by(dataset, secondary_accessor)); y_lim = yScale.domain() y_label.text(label) update_central(); //-- Update histogram generator histogram2 .value(d => bin_value(d, secondary_accessor, selected_area)) .domain(yScale.domain()) .thresholds(yScale.ticks(number_bins)); const bins2 = histogram2(dataset); // -- Update scales scale_hist2 .domain([0, d3.max(bins2, d => d.length)]); // -- Create rectangles svg_hist2.selectAll("rect") .data(bins2, (d,i) => i) .join(enter => enter .append("rect") .attr("x", d => scale_hist2(0)) .attr("y", d => yScale(d.x1)) .attr("width", d => scale_hist2(d.length) - scale_hist2(0) ) .attr("height", d => d3.max([0, yScale(d.x0) - yScale(d.x1) - 1 ]) ) .style("fill", "#EF5B5D"), update => update .transition() .attr("x", d => scale_hist2(0)) .attr("y", d => yScale(d.x1)) .attr("width", d => scale_hist2(d.length) - scale_hist2(0) ) .attr("height", d => d3.max([0, yScale(d.x0) - yScale(d.x1) - 1 ]) ) ); // -- Update axis yAxisGroup.transition().call(yAxis); } d3.select(selector_2).on('change', () => { update_y(selector_2.value); }); hist_2.append(svg_hist2.node()) // ----------------------------------------------- // 🛑🛑🛑 --------- DONUT 🍩 // ----------------------------------------------- let x_lim = [null, null] let y_lim = [null, null] // ---- Create SVG const svg_donut = d3.create('svg') .attr('width', donut.offsetWidth) .attr('height', donut.offsetHeight) // ---- Pie & Arc element const pie = d3.pie() .startAngle(0) .endAngle(360) .sort((a,b) => -1); const arc = d3.arc() .innerRadius(donut.offsetHeight/2-40) .outerRadius(donut.offsetHeight/2-20); const arc_mask = d3.arc() .innerRadius(0) .outerRadius(donut.offsetHeight); // ---- Create donut svg_donut.append('path') .attr('transform', `translate(${donut.offsetWidth/2}, ${donut.offsetHeight/2})`) .attr("fill", "#EF5B5D") .attr('d', arc(pie([1])[0])); // ---- Create donut mask const mask = svg_donut.append('path') .attr('transform', `translate(${donut.offsetWidth/2}, ${donut.offsetHeight/2})`) .attr('fill', "white"); // ---- Create text const text_1_donut = svg_donut.append('text') .attr('x', donut.offsetWidth/2).attr('y', donut.offsetHeight/2) .style('text-anchor', 'middle').style('font-size', '26pt') const text_2_donut = svg_donut.append('text') .attr('x', donut.offsetWidth/2).attr('y', donut.offsetHeight/2 + 24) .style('text-anchor', 'middle').style('font-size', '10pt') // ---- Update function const update_donut = function(){ const n_total_listings = dataset.length const n_selected_listings = dataset .filter(d => (selected_area===null)?true:(d.area === selected_area)) .filter(d => (x_lim[0] <= principal_accessor(d)) && (principal_accessor(d) <= x_lim[1]) ) .filter(d => (y_lim[0] <= secondary_accessor(d)) && (secondary_accessor(d) <= y_lim[1]) ) .length const percentage = n_selected_listings/n_total_listings; // -- update mask mask .attr('d', arc_mask(pie([1-percentage, percentage])[0])); // -- update text text_1_donut.text(d3.format(".0%")(percentage)); text_2_donut.text(`${n_selected_listings} listings`); } donut.append(svg_donut.node()) // 🛑🛑🛑 --------- 🗾 NEIGHBORHOOD // ---- Initialization const svg_neighbor = d3.create('svg') .attr('width', neighbor.offsetWidth) .attr('height', neighbor.offsetHeight); const projection2 = d3.geoMercator(); const text_map = svg_neighbor .append('text') .attr('x', neighbor.offsetWidth/2) .attr('y', 20) .style('font-size', '14pt') .style('text-anchor', 'middle') .text('test'); // ---- Update const update_map = function(){ // -- Update text text_map.text((selected_area===null)?"":selected_area); // -- Update area data let neighbor_data = {...seattle_areas}; neighbor_data.features = neighbor_data.features.filter(d => d.properties.name === selected_area); // -- Update area path projection2.fitExtent([[20, 40], [neighbor.offsetWidth-20, neighbor.offsetHeight-40]], neighbor_data); svg_neighbor.selectAll('path') .data(neighbor_data.features, d => "") .join(enter => enter .append("path") .attr("class", "tile") .style("opacity", 0) .style("fill", "#CCC") .style("stroke-opacity", .6) .style("stroke", "grey") .transition() .style("opacity", 1) .attr("d", d3.geoPath().projection(projection2)), update => update .transition() .style("opacity", 1) .attr("d", d3.geoPath().projection(projection2)), remove => remove .transition() .style("opacity", 0) ); } neighbor.append(svg_neighbor.node()) // 🛑🛑🛑 --------- 🔎 ZOOM let is_zoomed = false; // -- create zoom const zoom = d3.zoom() .scaleExtent([1, 20]) .translateExtent([[10, 40], [central.offsetWidth-40, central.offsetHeight-10]]) .extent([[10, 40], [central.offsetWidth-40, central.offsetHeight-10]]) .on("zoom", zoomed); // -- zoom canvas const canvas = svg_central.append("rect") .attr("width", central.offsetWidth-50) .attr("height", central.offsetHeight-50) .style("fill", "none") .style("cursor", "move") .style("pointer-events", "all") .attr('transform', 'translate(' + 10 + ',' + 40 + ')') .call(zoom); // -- zoom function function zoomed({transform}) { is_zoomed = true; // update axes const new_xScale = transform.rescaleX(xScale); const new_yScale = transform.rescaleY(yScale); xAxisGroup.call(xAxis.scale(new_xScale)); yAxisGroup.call(yAxis.scale(new_yScale)); // update circles circles.data(dataset, d => d.index) .attr('cx', d => new_xScale(principal_accessor(d))) .attr('cy', d => new_yScale(secondary_accessor(d))); // update donut x_lim = new_xScale.domain() y_lim = new_yScale.domain() update_donut() // update hist1 svg_hist1.selectAll("rect") .data(histogram1(dataset)) .attr("x", d => new_xScale(d.x0)) .attr("y", d => scale_hist1(d.length)) .attr("width", d => d3.max([0, new_xScale(d.x1) - new_xScale(d.x0) - 1]) ) .attr("height", d => scale_hist1(0)-scale_hist1(d.length) ) // update hist2 svg_hist2.selectAll("rect") .data(histogram2(dataset)) .attr("x", d => scale_hist2(0)) .attr("y", d => new_yScale(d.x1)) .attr("width", d => scale_hist2(d.length) - scale_hist2(0) ) .attr("height", d => d3.max([0, new_yScale(d.x0) - new_yScale(d.x1) - 1 ]) ) } // 🛑🛑🛑 --------- DASHBOARD INITIALIZATION update_central(); update_x(selector_1.value) update_y(selector_2.value) update_donut() update_map(); }48:T439,By focusing on the neighborhoods, we can observe that there are fewer listings in the Southern and Northern areas of the city than in the center and that they are less expensive. The Central, Lake Union, East, and Downtown areas cumulate 50% of the listings which may signify that there are the ones with a higher demand and that they may be the one to focus on for a touristic journey. The fare ranges between $20 and $100 per guest per night for the most neighborhood. Queen Anne, Lake Union, and Downtown are a bit more expensive than the average as the histogram gets shifted to higher values. By looking at the price per guest versus the average review score, we can observe that even if these areas are more expensive they aren't rated the best. Areas such as the Central and East have better scores. Even if there are fewer listings, West Seattle also seems to be a good option for cheaper prices and good rates. Finally, depending on the number of people to travel Downtown seems to have less options for groups bigger than two compared to Lake Union, East, and Central. 49:[{"id":"addff4b66a0160da615890f2750005671a8fd815bcef0d2cb4861f1765de326c58034b942f5fd0aff78bb89e7c20af3fadd2009a328fba543c609947578e4383","href":"https://static.observableusercontent.com/files/addff4b66a0160da615890f2750005671a8fd815bcef0d2cb4861f1765de326c58034b942f5fd0aff78bb89e7c20af3fadd2009a328fba543c609947578e4383","name":"seattle_areas.geojson","type":"application/geo+json","lastModified":1638760959656.021,"size":758601},{"id":"eb5994bb3606bb2fbc7e25b5d65bbba9c9818c8c367d15283b9dde52de2a3ad39d3c6f00d8acaad9306a9c82ae144b92833f1bbebd55d62863406b0860e433f1","href":"https://static.observableusercontent.com/files/eb5994bb3606bb2fbc7e25b5d65bbba9c9818c8c367d15283b9dde52de2a3ad39d3c6f00d8acaad9306a9c82ae144b92833f1bbebd55d62863406b0860e433f1","name":"seattle_listings@1.json","type":"application/json","lastModified":1638761139670.59,"size":3726957}] 44:{"id":"7ec8ded51484e021","slug":"dataviz-project3","title":"Seattle Airbnb study","thumbnail":"e71f6127772013555e665726ed7473e7158eace0a65b0fea0233598e2256b2a3","access_level":"public","create_time":"$D2021-11-16T14:21:14.492Z","update_time":"$D2021-12-06T23:35:43.890Z","view_time":null,"first_public_time":"$D2021-12-06T23:36:28.783Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7dabc650f4184c3e","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":"starter_2024","bio":"","following":false},"version":1667,"publish_version":1667,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b196d68f3f41bcf","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8b196d68f3f41bcf","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seattle Airbnb study","cells":[{"id":0,"value":"# Seattle Airbnb study","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"After having spent a lot of time on the Airbnb application while traveling as an exchange student in the United States, I have decided to work on a tool that would help me make my decision on the best place to book an apartment in a city. \n\nThis time, my journey will take place in Seattle, WA, and this study aims to study the dynamics of Airbnb in the city. The data set used is composed of thousands of Airbnb listings from 2016 and contains information about the price, the location, the type of listing, the average review rating, the number of reviews, the number of guests, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1433,"value":"---\n## Exploratory map\n\nAs listed before, there is a lot of information to show at once. To begin the exploration, let's represent the data in its most instinctive form with an interactive map representing the listings in their locations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"We can observe that the density of listings depends on the neighborhood. It seems that there are more offers in the Downtown, Central, and East areas than in the rest of the city. It may mean that these places are the more touristic and worth exploration for my booking. But what about their price, their ratings? \n\nDespite its exploratory ability, this map can't help study the dynamics and trends of the Airbnb market in Seattle. The information about a listing is only displayed alone and the comparison between the listings is difficult. Furthermore, the some of the listings are outdated. To use this dataset for my search, I may not focus on the particular listings but more on the pattern and trends I can extract from an overall view of the data.\n\nThen, some questions still remain: what is the average price in the city? Is it varying with the neighborhood? Where are the best-rated locations?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1437,"value":"---\n## Which is the best area to stay?\nTo answer these last questions let's go through a dashboard that focuses on the exploration of the quantitative variables of the listings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"***Note:*** *try to zoom on the scatter chart, change the axis, and select the city areas.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1542,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1577,"value":"## Conclusion\n\nIn conclusion, finding a listing that corresponds to one's criteria is important for a successful journey. This study aimed to identify the dynamics of the areas in the city of Seattle. For my next trip, I will probably focus my search on the Central and East areas and will also take a look at West Seattle listings. Finally, this study was based on my criteria but a booker may draw his own conclusion based on his needs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"---\n\n### Source\nListings data: [https://www.kaggle.com/airbnb/seattle?select=listings.csv](https://www.kaggle.com/airbnb/seattle?select=listings.csv)\n\nArea boundaries: [https://github.com/seattleio/seattle-boundaries-data](https://github.com/seattleio/seattle-boundaries-data)\n\n---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"seattle_listings = FileAttachment(\"seattle_listings@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"seattle_areas = await FileAttachment(\"seattle_areas.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"get_accessor = function(val){\n return {\n price: d => d.price/d.guests_included,\n review_score: d => d.review_scores_rating,\n n_review: d => d.number_of_reviews,\n n_review_monthly: d => d.reviews_per_month,\n host_acceptance: d => d.host_acceptance_rate,\n guests_included: d => d.guests_included,\n longitude: d => d.longitude,\n latitude: d => d.latitude\n }[val];\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"get_label = function(val){\n return {\n price: \"Price per guest\",\n review_score: \"Review score\",\n n_review: \"Number of reviews\",\n n_review_monthly: \"Number of reviews per month\",\n host_acceptance: \"Host acceptance rate\",\n guests_included: \"Number of guests\",\n longitude: \"Longitude\",\n latitude: \"Latitude\"\n }[val];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"function extent_by(data, accessor, padding=0.02) {\n var range = d3.extent(data, accessor)\n var offset = (range[1] - range[0])*padding\n return [range[0] - offset, range[1] + offset]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"bin_value = (d, acc, area) => {\n if (area===null){\n return acc(d);\n }\n return (d.area === area)?acc(d):null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"L = require('leaflet@1.3.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"