2d:null 2e:["$","title",null,{"children":"Rental Decision Maker For Tenants In Bay Area | Zhenghao Lin | Observable"}] 33:T460,----- ## Topic Introduction ----- To sum it up, I will do a housing analysis in Bay Area under different prerequisites and make a decision maker where the user can select the condition they care about most and see the best zip code area for them to rent a home. To help renters navigate through the complexities of finding the most suitable area to live in San Francisco Bay Area, a study was conducted to determine the ideal location in San Francisco Bay Area based on several factors. This study aimed to provide renters with a comprehensive overview of the different neighborhoods and cities in the region, their rental prices, safety, and other important metrics that impact the quality of life. The study aims to provide renters with valuable insights that can inform their decision-making process by analyzing various data sources, including rental rates, crime statistics, traffic patterns, and other relevant metrics. Ultimately, the findings of this study will help renters in San Francisco Bay Area make informed decisions on where to live, based on their specific needs, preferences, and budget constraints.34:T9aa,----- ## Example Made-up insights ----- 1. *Insight 1*: In the Bay Area, among areas with minimal public transportation and a minimum median annual household income of $80,000, zip code 95112 is the most affordable one for tenants. * *Consideration*: 1. I need to visualize the average rent on the map. 2. I will need to filter out the areas with at least 1 BART accessibility and above the designated average household income. 3. I need to customize the color to make it different than other maps. 2. *Insight 2*: In the Bay Area, among areas with designated public transportation accessibility, median annual household income, rent range, and selling price range, zip code 95112 has the best cost-effectiveness for tenants. * *Consideration*: 1. I will need to define cost-effectiveness. 2. I will need to filter out the data from all aspects. 3. I need to know the approximate value range of each attribute for creating filters. 4. I need to visualize the cost-effectiveness. 5. I need to customize the color to make it different than other maps. 3. *Insight 3*: In the Bay Area, for tenants who care most about cost-effectiveness, zip code 95112, 95113, 95114, 95115, 95116 are the best 5 choices. * *Consideration*: 1. I will need to sort all the areas by each attribute and store their ranking. 2. I will need to take the highest-ranked one as the recommended one and only visualize the recommended ones. 3. I need to customize the color to make it different than other maps. 4. *Insight 4*: For tenants in the Bay Area, $1,500 is a too-low budget for renting a house, while 2500 is a more reasonable budget. * *Consideration*: 1. I will need to quantify the reasonable budget to analyze the median rents in all areas. 2. I will need to identify whether the user's budget is reasonable by comparing it with average rents in all areas. 3. It is better if I allow the user to select the attribute they care the most. 5. *Insight 5*: In the Bay Area, the zip code area 95112 has the advantage of economical and best public transportation accessibility among all areas. * *Consideration*: 1. The zip code areas need to be ranked based on their respective abilities in various aspects. 2. It's necessary to visualize the abilities of a zip code area in various aspects on a single chart.35:T41a,----- ## Dataset Source ----- ### BART official route and station information - **Description**: The dataset is acquired by querying from the Legacy APIs provided by BART official - **Availability:** Static - **Time frame of Data:** Newest roadmap in 2023 - **Source**: [Link]("https://api.bart.gov/docs/stn/stns.aspx") ### San Francsico Bay Area Zip Codes Shapefile - **Availability:** Static - **Time frame of Data:** Newest zipcodes in 2023 - **Description**: Bay Area ZIP Code Areas shapefile offered by SF government - **Source**: [Link](https://catalog.data.gov/dataset/bay-area-zip-codes/resource/014a99ef-77e0-4d5e-a737-64fb488d8296?inner_span=True) ### California Median Household Income Zip Code Rank - **Availability:** Static - **Time frame of Data:** Based on ACS 2010-2014 data - **Description**: California Median Household Income Zip Code Rank Based on ACS 2010-2014 data - **Source**: [Link](http://www.usa.com/rank/california-state--median-household-income--zip-code-rank.htm?hl=&hlst=&wist=&yr=9000&dis=&sb=ASC&plow=&phigh=&ps=#)36:T749,----- ## Data Abstraction (What) ----- **From Original Dataset** 1. Zillow Observed Rent Index By Zip Codes * Dataset Type: Table * Attributes used: * RegionName * Attribute Type - Categorical * 1/31/2022 ...... 1/31/2023 * Attribute Type - Quantitative * Orientation: Sequential 2. Zillow Home Value Index By Zip Codes * Dataset Type: Table * Attributes used: * RegionName * Attribute Type - Categorical * 1/31/2022 ...... 1/31/2023 * Attribute Type - Quantitative * Orientation: Sequential 3. BART Stations * Dataset Type: Table * Attributes used: * name * Attribute Type - Categorical * abbr * Attribute Type - Categorical * zipcode * Attribute Type - Categorical 4. BART Routes * Dataset Type: Table * Attributes used: * config.station * Attribute Type - Categorical * 5. Zip Code Shapefile * Dataset Type: Geometry * Attributes used: * features * Attribute Type: Quantitative * Orientation: Diverging 6. Median Household Income * Dataset Type: Table * Attributes used: * Median Household Income * Attribute Type: Quantitative * Orientation: Sequential * Population * Attribute Type: Quantitative * Orientation: Sequential **Derived Attributes:** 1. Price/Rent Ratio - Attribute Type: Quantitative - Orientation: Sequential 2. The number of BART stations - Attribute Type: Quantitative - Orientation: Sequential 3. Rankings of Median Household Income, Average Selling Price, Average Rent, Cost-Effectiveness, BART Route Count - Attribute Type: Ordinal - Orientation: Sequential 37:T549,----- ## Task Abstraction (Why) ----- - Task 1: Compare the rents between zip areas which satisfy the given range of BART routes and median income to find the most expensive and most affordable ones. **[Compare, Outliers]** - Task 2: Compare the rents between zip areas which satisfy the given range of BART routes, median income, rent, and selling price to find the ones with the greatest cost-effectiveness. **[Compare, Outliers]** - Task 3: According to the given number or how many recommendations the user wants to see on the map, locate the recommended ones on the map and display why it is recommended. **[Identify, Extremes]** - Task 4: Identify whether an expected value for an attribute is reasonable by comparing the proportion of the aggregate population of Bay Area people living in areas with lower and higher conditions. **[Identify, Extremes]** - Task 5: Display the detailed attribute values and rankings of the specific zip area designated by the user. **[Summarize, Features]** - Subtask 1: Draw the shape of each zip code area and identify the topology between zip areas to help the user know the geographical information of a specific zip area. **[Identify, Shape/Topology]** - Subtask 2: Calculate the cost-effectiveness, rankings of every attribute, and the number of BART stations in each zip area. **[Summarize, Distribution]**38:T9c4,----- ## How I visualize ----- ### Idiom 1 - **Marks:** Area - **Channel**: - Color: rents by zip area - Task: T1 & Subtask1 - Arrange: Separate - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information. - Effectiveness: Since the X and Y axis are used to express the location and shapes of zip areas, the most effective channel there left for quantitative rents is the color channel. ### Idiom 2: - **Marks:** Area - **Channel**: - Color: rents by zip area - Task: T2 & Subtask1 - Arrange: Cost-effectiveness - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information. - Effectiveness: Since the X and Y axis are used to express the location and shapes of zip areas, the most effective channel there left for quantitative cost-effectiveness is the color channel. ### Idiom 3: - **Marks:** Area - **Channel**: - Color: the designated attribute of TOP X areas - Task: T3 & Subtask1 - Arrange: Separate - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information. - Effectiveness: Since the X and Y axis are used to express the location and shapes of zip areas, the most effective channel there left for quantitative value is the color channel. ### Idiom 4: - **Marks:** Area - **Channel**: - angle: ratio of population below and above the given condition - Task: T4 - Arrange: Separate - Expressiveness: A pie chart is the most expressive one for the ratio presentation task. - Effectiveness: The angle is the most effective channel for a pie chart. ### Idiom 5: - **Marks:** Area - **Channel**: Position - Color: Ranking percentage of each attribute in all zip areas of the target zip area - Task: T5 - Arrange: Separate - Expressiveness: Since we need to display the proportion of multiple attributes at the same time. And they are all percentage data, visualizing them on the same bar chart can let the user know what the advantages and disadvantages are for that area. - Effectiveness: The position on a chart is the most effective among all channels for ordered attributes.39:T41a,chart2 = ChoroplethMap(overallStatistics, { // if no value is passsed, it will look for the first quant property, area in this case // if no id is passed, it will assume that the features contain the properties height: 600, width: 600, interpolator: d3.interpolate("#FFFFFF", filter2[6]), strokeWidth: 0.1, tooltip: (d) => d.properties["zip"], value: (d) => { if ( d.properties["routesCount"] >= filter2[1] && d.properties["routesCount"] <= filter2[2] ) { if (d.properties["medianHouseholdIncome"] > filter2[4]) { if ( d.properties["averageRent"] >= filter2[8] && d.properties["averageRent"] <= filter2[9] ) { if ( d.properties["averageSellingPrice"] >= filter2[11] && d.properties["averageSellingPrice"] <= filter2[12] ) { return d.properties["costEffectiveness"]; } } } } return 0; }, colorLegendOptions: { title: "Cost-Effectiveness (Ratio of Selling Price To Rent)" } })3a:T41b,chart3 = ChoroplethMap(overallStatistics, { // if no value is passsed, it will look for the first quant property, area in this case // if no id is passed, it will assume that the features contain the properties height: 600, width: 600, interpolator: d3.interpolate("#FFFFFF", filter3[4]), strokeWidth: 0.1, tooltip: (d) => d.properties["zip"], value: (d) => { switch (filter3[1]) { case "Luxury (Rent)": if (d.properties["averageRentRanking"] <= filter3[2]) { return d.properties["averageRent"]; } break; case "Luxury (Selling)": if (d.properties["averageSellingPriceRanking"] <= filter3[2]) { return d.properties["averageSellingPrice"]; } break; case "Cost-Effectiveness": if (d.properties["costEffectivenessRanking"] <= filter3[2]) { return d.properties["costEffectiveness"]; } break; default: console.log("Invalid value"); } return 0; }, colorLegendOptions: { title: filter3[1] } })3b:T6b9,chart4 = { // Population living in areas with the condition lower than the given let populationBelowCondition = 0; let condition = filter4[2]; // Map the selected string to actual variable name const stringToVariableNameMap = { "Average Rent": "averageRent", "Routes Count": "routesCount", "Median Household Income": "medianHouseholdIncome", "Cost Effectiveness": "costEffectiveness", "Average Selling Price": "averageSellingPrice" }; const variableName = stringToVariableNameMap[filter4[1]]; for (let feature of overallStatistics.features) { if (feature.properties[variableName] < condition) { populationBelowCondition += feature.properties.population; } } // Population living in areas with the condition higher than the given let populationAboveCondition = 0; for (let feature of overallStatistics.features) { if (feature.properties[variableName] >= condition) { populationAboveCondition += feature.properties.population; } } let totalPopulation = populationBelowCondition + populationAboveCondition; let populationBelowConditionRatio = (populationBelowCondition / totalPopulation) * 100; populationBelowConditionRatio = populationBelowConditionRatio.toFixed(2); let populationAboveConditionRatio = (populationAboveCondition / totalPopulation) * 100; populationAboveConditionRatio = populationAboveConditionRatio.toFixed(2); let chart = PieChart( [ { name: "Greater Than", value: populationAboveConditionRatio }, { name: "Less Than", value: populationBelowConditionRatio } ], { name: (d) => d.name, value: (d) => d.value, width, height: 500 } ); return chart; }3c:T54b,----- ## Most Valuable Actual Insights ----- 1. In the western Bay Area, among areas with any public transportation and a minimum median annual household income of 100,000, zip codes 94010, 94002, and 94062 are the most affordable ones for tenants who are not reliant on public transportation. 2. In the Bay Area, among areas with at least $100,000 median annual household income, and within the rent range between 0 - 3000, zip code 94010 has the best cost-effectiveness for tenants, which means tenants can rent a house for under 3000 in here where the selling price is over $2,300,000. 3. In the Bay Area, for tenants who care most about cost-effectiveness, zip codes 94010, 94062, 94301, 94306, and 95030 are the best 5 choices. 4. For tenants in the Bay Area, $2000 is too low for the expectation of average rent, while $2950 is a more reasonable budget. 5. To sum it up, for a tenant like me, who prefers to live in the western or southern part of the SF Bay Area, has a comparatively low budget and is not reliant on public transportation, the best choice for renting a new home is zip code 94010. This area has a relatively affordable rent price (close to the Bay Area average), no public transportation (which implies better safety), great median local household income (TOP 15%), and great housing conditions (with TOP 3% average selling price).3d:Tfe5,overallStatistics = { for (let i = 0; i < bayAreaGeoJSON.features.length; i++) { const feature = bayAreaGeoJSON.features[i]; const zip = feature.properties.zip; const incomeInfo = taxableIncomeByZipcode.find((info) => info.Zip === zip); if (incomeInfo) { feature.properties.medianHouseholdIncome = incomeInfo.MedianHouseholdIncome; feature.properties.population = incomeInfo.Population; } else { // if zip not included, set values to 0 feature.properties.medianHouseholdIncome = 0; feature.properties.population = 0; } } // Merge BART station counts to overall statistics for (let i = 0; i < bayAreaGeoJSON.features.length; i++) { const feature = bayAreaGeoJSON.features[i]; const zip = feature.properties.zip; const accessibilityInfo = bartstationaccessibility.find( (info) => info.zipCode === zip ); if (accessibilityInfo) { feature.properties.routesCount = accessibilityInfo.routesCount; } else { feature.properties.routesCount = 0; } } // Merge sellingPriceByZip for (let i = 0; i < sellingPriceByZip.length; i++) { const zip = sellingPriceByZip[i].Zip; const averagePrice = sellingPriceByZip[i].averagePrice; for (let j = 0; j < bayAreaGeoJSON.features.length; j++) { const feature = bayAreaGeoJSON.features[j]; if (feature.properties.zip === zip) { feature.properties.averageSellingPrice = parseInt(averagePrice); break; } } } // Merge rentByZip for (let i = 0; i < rentByZip.length; i++) { const zip = rentByZip[i].Zip; const averagePrice = rentByZip[i].averagePrice; for (let j = 0; j < bayAreaGeoJSON.features.length; j++) { const feature = bayAreaGeoJSON.features[j]; if (feature.properties.zip === zip) { feature.properties.averageRent = parseInt(averagePrice); break; } } } // Set averageSellingPrice & averageRent 0 if corresponding zip does not exist for (let i = 0; i < bayAreaGeoJSON.features.length; i++) { const feature = bayAreaGeoJSON.features[i]; if (!feature.properties.hasOwnProperty("averageSellingPrice")) { feature.properties.averageSellingPrice = 0; } if (!feature.properties.hasOwnProperty("averageRent")) { feature.properties.averageRent = 0; } } for (let i = 0; i < bayAreaGeoJSON.features.length; i++) { const feature = bayAreaGeoJSON.features[i]; const { averageRent, averageSellingPrice } = feature.properties; if (averageRent && averageSellingPrice) { feature.properties.costEffectiveness = Math.round( averageSellingPrice / averageRent ); } else { feature.properties.costEffectiveness = 0; } } function calculateRankings(data, property) { // from great to less const sortedData = data.sort( (a, b) => b.properties[property] - a.properties[property] ); sortedData.forEach((zipData, index) => { const rankingKey = `${property}Ranking`; zipData.properties[rankingKey] = index + 1; }); } function calculateReverseRankings(data, property) { // from less to great const sortedData = data.sort( (a, b) => a.properties[property] - b.properties[property] ); sortedData.forEach((zipData, index) => { const rankingKey = `${property}ReverseRanking`; zipData.properties[rankingKey] = index + 1; }); } calculateRankings(bayAreaGeoJSON.features, "population"); calculateRankings(bayAreaGeoJSON.features, "routesCount"); calculateRankings(bayAreaGeoJSON.features, "medianHouseholdIncome"); calculateRankings(bayAreaGeoJSON.features, "averageSellingPrice"); calculateReverseRankings(bayAreaGeoJSON.features, "averageSellingPrice"); calculateRankings(bayAreaGeoJSON.features, "averageRent"); calculateReverseRankings(bayAreaGeoJSON.features, "averageRent"); calculateRankings(bayAreaGeoJSON.features, "costEffectiveness"); calculateReverseRankings(bayAreaGeoJSON.features, "costEffectiveness"); return bayAreaGeoJSON; }3e:[{"id":"159585b9017ded5880db6cc3fb6cc0ba7daa62e58d1c2c6b3852faa4351d0b5685abdf8c128fcf2a4c5d1b0506380b578be21ced4e0279bc4956e3a967705625","href":"https://static.observableusercontent.com/files/159585b9017ded5880db6cc3fb6cc0ba7daa62e58d1c2c6b3852faa4351d0b5685abdf8c128fcf2a4c5d1b0506380b578be21ced4e0279bc4956e3a967705625","name":"Zip_zori_sm_month-2.csv","type":"text/csv","lastModified":1681904279029.121,"size":1182801},{"id":"194846604a715a75baf9c38445c401571ada81aca1c31ec9043ace552657c0399239a10d647eea1b680130ccffef6e598df99d7fa07b29eb9a09ecc153eeec6d","href":"https://static.observableusercontent.com/files/194846604a715a75baf9c38445c401571ada81aca1c31ec9043ace552657c0399239a10d647eea1b680130ccffef6e598df99d7fa07b29eb9a09ecc153eeec6d","name":"Zip_zhvi_uc_sfrcondo_tier_0-1.33_0.67_sm_sa_month (1).csv","type":"text/csv","lastModified":1681904286957.104,"size":6042478},{"id":"ab2d09bf0a6672944ca4bbcc31e6e5df0087f1c5a0569efc5b084935eed4549ce3e3e63f4c904b8c5a445a286ef2ffdcea94692cb08eb48443aa4ba0a9485312","href":"https://static.observableusercontent.com/files/ab2d09bf0a6672944ca4bbcc31e6e5df0087f1c5a0569efc5b084935eed4549ce3e3e63f4c904b8c5a445a286ef2ffdcea94692cb08eb48443aa4ba0a9485312","name":"CA_Median_Household_Income@1.csv","type":"text/csv","lastModified":1681899672310.111,"size":51197}] 31:{"id":"c6641f973d6c304b","slug":"rental-decision-maker-in-bay-area","title":"Rental Decision Maker For Tenants In Bay Area","thumbnail":"26217c06183321a60ca41aa74263978a5a698758395bd4676419082a5f204206","access_level":"public","create_time":"$D2023-04-05T18:55:03.262Z","update_time":"$D2023-04-30T19:56:14.155Z","view_time":null,"first_public_time":"$D2023-04-05T18:55:03.262Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e7d220f596a8e193","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":"starter_2024"},"version":807,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4526580224c72b33","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":null}],"members":[{"type":"individual","id":"4526580224c72b33","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Rental Decision Maker For Tenants In Bay Area","cells":[{"id":0,"value":"# Rental Decision Maker For Tenants In Bay Area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"-----\n## Users\n-----\n1. Tenants: Individuals looking for housing can use this analysis to identify areas with excellent BART accessibility and understand the rent prices in those locations, helping them make informed decisions when choosing a place to live.\n2. Real Estate Agents: Agents can use this analysis to provide clients with valuable insights on rent prices and BART accessibility in various neighborhoods, helping them better serve renters and property investors.\n3. Urban Planners: City and regional planners can utilize this analysis to identify areas where BART accessibility contributes to higher rental demand, and consider implementing policies or development projects that promote transit-oriented development and housing affordability.\n4. Researchers: Scholars studying urban planning, transportation, and housing markets can use this analysis to gain a deeper understanding of the dynamics between public transportation accessibility and rent prices in the San Francisco Bay Area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"-----\n## Usage & Workflow\n-----\n1. If you have no idea about the housing market in the Bay Area. Please use the piechart (idiom 4) first to find a reasonable expectation for average rent.\n2. After you have a basic understanding of the reasonable value range of each attribute, use idiom 1 to see the rent distribution in the Bay Area.\n3. Along with idiom 2, use idiom 3, the cost-effectiveness distribution to identify whether an area is recommended based on your constraints.\n4. Use idiom 4 to get a more clear recommendation by limiting how many of recommendations you want to see on the map.\n5. After you have some zip codes in which you are interested, use idiom 5 to take a further look at its detail to make the final comprehensive decision.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":647,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"-----\n## Visualization\n-----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"### Idiom 1: Rent Distribution Map With Customizable Limitations\n-----\nPurpose:\n- Display the rental distribution map of the Bay Area according to the given constraints.\n- An example conclusion you may derive from this visualization:\n - In the Bay Area, among areas with XXXXX public transportation and a minimum median annual household income of XXXXX, zip code XXXXX is the most XXXXX one for tenants.\n\n\nUsage:\n1. Set the filter.\n2. Set the color.\n3. View the rent distribution map, where color depth represents the value of the rent.\n4. Hover the mouse over the map to view the zip code of each specific zip area. You can zoom in and out of the map using the mouse scroll wheel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"viewof filter1 = Inputs.form([\n htl.html`

`,\n Inputs.range([0, 8], { value: 0, step: 1, label: \"Min BART Number\" }), // 1\n Inputs.range([0, 8], { value: 8, step: 1, label: \"Max BART Number\" }), // 2\n htl.html`

`,\n Inputs.range([0, 180000], {\n value: 0,\n step: 1000,\n label: \"Min Average Household Income\"\n }), // 4\n htl.html`

`,\n Inputs.color({ label: \"Color\", value: \"#ce1331\" }),\n htl.html`

`\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"chart1 = ChoroplethMap(overallStatistics, {\n // if no value is passsed, it will look for the first quant property, area in this case\n // if no id is passed, it will assume that the features contain the properties\n height: 600,\n width: 600,\n interpolator: d3.interpolate(\"#FFFFFF\", filter1[6]),\n strokeWidth: 0.1,\n tooltip: (d) => d.properties[\"zip\"],\n value: (d) => {\n if (\n d.properties[\"routesCount\"] >= filter1[1] &&\n d.properties[\"routesCount\"] <= filter1[2]\n ) {\n if (d.properties[\"medianHouseholdIncome\"] > filter1[4]) {\n return d.properties[\"averageRent\"];\n }\n }\n return 0;\n },\n colorLegendOptions: { title: \"Rent\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"-----\n### Idiom 2: Cost Effectiveness (Price-to-Rent Ratio) Distribution Map With Customizable Limitations\n-----\nPurpose:\n- Display the cost-effectiveness distribution map of the Bay Area according to the given constraints.\n- An example conclusion you may derive from this visualization:\n - In the Bay Area, among areas with XXXXX public transportation accessibility, median annual household income, rent range, and selling price range, zip code XXXXX has the XXXXX cost-effectiveness for tenants.\n\nUsage:\n1. Set the filter.\n2. Set the color.\n3. View the cost-effectiveness (ratio of selling price to rent ) distribution map, where color depth represents the value of the cost-effectiveness.\n4. Hover the mouse over the map to view the zip code of each specific zip area. You can zoom in and out of the map using the mouse scroll wheel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"viewof filter2 = Inputs.form([\n htl.html`

`,\n Inputs.range([0, 8], { value: 0, step: 1, label: \"Min BART Number\" }), // 1\n Inputs.range([0, 8], { value: 8, step: 1, label: \"Max BART Number\" }), // 2\n htl.html`

`,\n Inputs.range([0, 180000], {\n value: 0,\n step: 1000,\n label: \"Min Average Household Income\"\n }), // 4\n htl.html`

`,\n Inputs.color({ label: \"Color\", value: \"#2b00ff\" }), // 6\n htl.html`

`,\n Inputs.range([0, 10000], { value: 0, step: 100, label: \"Min Rent\" }), // 8\n Inputs.range([0, 10000], { value: 10000, step: 100, label: \"Max Rent\" }), // 9\n htl.html`

`,\n Inputs.range([0, 5000000], {\n value: 0,\n step: 10000,\n label: \"Min Selling Price\"\n }), // 11\n Inputs.range([0, 5000000], {\n value: 5000000,\n step: 10000,\n label: \"Max Selling Price\"\n }), // 12\n htl.html`

`\n])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"-----\n### Idiom 3: Top Recommendations Distribution Based On Given Condition\n-----\nPurpose:\n- Display the most recommended areas distribution map of the Bay Area according to the given focus.\n- An example conclusion you may derive from this visualization:\n - In the Bay Area, for tenants who care most about XXXXX, zip code XXXXX, XXXXX, XXXXX, XXXXX, XXXXX are the best XXXXX choices.\n\n\nUsage:\n1. Set the variables you are most concerned about.\n2. Set the number of Top recommendations you want to view.\n3. View the distribution map of recommended locations, where color depth represents the magnitude of the variables you are concerned about.\n4. Hover the mouse over the map to view the zip code of each specific zip area. You can zoom in and out of the map using the mouse scroll wheel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"viewof filter3 = Inputs.form([\n htl.html`

`,\n Inputs.select([\"Cost-Effectiveness\", \"Luxury (Selling)\"], {\n label: \"Category\"\n }), // 1\n Inputs.range([1, 50], { value: 5, step: 1, label: \"TOP\" }), // 2\n htl.html`

`,\n Inputs.color({ label: \"Color\", value: \"#fbff00\" }), // 4\n htl.html`

`\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"-----\n### Idiom 4: Population Ratio Of Two Parts Divided By Given Condition\n-----\nPurpose:\n- Display the population proportion in zip areas lower and higher than the given condition.\n- Please use this Piechart to instruct you find the reasonable value for setting the filters in the previous three idioms.\n- An example conclusion you may derive from this visualization:\n - For tenants in the Bay Area, XXXXX is an too-low/high XXXXX for XXXXX, while XXXXX is a more reasonable XXXXX.\n\n\n\nUsage:\n1. Set the variables you are most concerned about.\n2. Try entering the expected value.\n3. Determine whether your expectations are reasonable based on the pie chart. The blue and red sections represent the proportion of people, where blue represents the population residing in zip areas that are below the conditions you have set, and red represents the population residing in zip areas that are above the conditions you have set.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"viewof filter4 = Inputs.form([\n htl.html`

`,\n Inputs.select(\n [\n \"Average Rent\",\n \"Routes Count\",\n \"Median Household Income\",\n \"Cost Effectiveness\",\n \"Average Selling Price\"\n ],\n {\n label: \"Category\"\n }\n ), // 1\n Inputs.number({\n label: \"Value\",\n value: 0,\n placeholder: \"Please Enter A Number\"\n }), // 2\n htl.html`

`\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"-----\n### Idiom 5: Attributes Details of Target Zip Area\n-----\nPurpose:\n- Display the details of a specific zip area from all aspects.\n- The smaller percentage means ranked higher. \n- An example conclusion you may derive from this visualization:\n - In the Bay Area, the zip code area XXXXX has the advantage of XXXXX and the disadvantage of XXXXX among all areas.\n\nUsage:\n1. Select the zip code you are interested in from the dropdown menu.\n2. View the rankings of each attribute for that zip code. The percentage represents the ranking of the zip code in terms of that particular attribute among all zip areas. If extreme values such as 0% appear, it may be due to a lack of data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"viewof filter5 = {\n const zipCodes = overallStatistics.features.map(\n (feature) => feature.properties.zip\n );\n zipCodes.sort();\n let filter5 = Inputs.form([\n htl.html`

`,\n Inputs.select(zipCodes, {\n label: \"Zip Area\"\n }), // 1\n htl.html`

`\n ]);\n return filter5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"Average_Rent = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n).properties.averageRent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"Average_Selling_Price = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n).properties.averageSellingPrice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"Cost_Effectiveness = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n).properties.costEffectiveness","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"BART_Station_Number = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n).properties.routesCount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"Median_Household_Income = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n).properties.medianHouseholdIncome","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"chart5 = {\n const zipData = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n ).properties;\n const indicators = [\n {\n name: \"Rent Economical Ranking\",\n value: zipData.averageRentReverseRanking / 323\n },\n {\n name: \"BART Accessibility Ranking\",\n value: zipData.routesCountRanking / 323\n },\n {\n name: \"Median Household Income Ranking\",\n value: zipData.medianHouseholdIncomeRanking / 323\n },\n {\n name: \"Luxury Ranking (Selling Price)\",\n value: zipData.averageSellingPriceRanking / 323\n },\n {\n name: \"Cost-Effectiveness Ranking\",\n value: zipData.costEffectivenessRanking / 323\n }\n ];\n let chart = BarChart(indicators, {\n x: (d) => d.value,\n y: (d) => d.name,\n xFormat: \"%\",\n xLabel: \"Proportion →\",\n color: \"steelblue\",\n width,\n height: 300,\n marginLeft: 200\n });\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"-----\n## Data Preprocessing\n-----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"rawTaxableIncomeByZipcode = FileAttachment(\n \"CA_Median_Household_Income@1.csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"taxableIncomeByZipcode = {\n const arr = [];\n for (let i = 0; i < rawTaxableIncomeByZipcode.length; i++) {\n // get the current element object\n let element = rawTaxableIncomeByZipcode[i];\n\n // rename \"Median Household Income\" to \"MedianHouseholdIncome\"\n element.MedianHouseholdIncome = parseInt(\n element[\"Median Household Income\"].replace(/\\$|,/g, \"\")\n );\n delete element[\"Median Household Income\"];\n element.Population = Number(element.Population.replace(/,/g, \"\"));\n arr.push(element);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"sellingPriceByZipcodeByMonth = FileAttachment(\n \"Zip_zhvi_uc_sfrcondo_tier_0-1.33_0.67_sm_sa_month (1).csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"rentByZipcodeByMonth = FileAttachment(\"Zip_zori_sm_month-2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"sellingPriceByZip = {\n const res = sellingPriceByZipcodeByMonth;\n const filteredData = res\n .filter((data) => data.State === \"CA\")\n .map((data) => ({ ...data, Zip: data.RegionName }));\n\n filteredData.forEach((data) => {\n let totalPrice = 0;\n let count = 0;\n\n for (const key in data) {\n if (key.includes(\"/2022\") || key.includes(\"/2023\")) {\n const price = parseFloat(data[key]);\n if (!isNaN(price)) {\n totalPrice += price;\n count++;\n }\n }\n }\n\n const averagePrice = count > 0 ? totalPrice / count : 0;\n const roundedPrice = Math.round(averagePrice);\n data.averagePrice = roundedPrice;\n });\n\n return filteredData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"rentByZip = {\n const res = rentByZipcodeByMonth;\n const filteredData = res\n .filter((data) => data.State === \"CA\")\n .map((data) => ({ ...data, Zip: data.RegionName }));\n\n filteredData.forEach((data) => {\n let totalPrice = 0;\n let count = 0;\n\n for (const key in data) {\n if (key.includes(\"/2022\") || key.includes(\"/2023\")) {\n const price = parseFloat(data[key]);\n if (!isNaN(price)) {\n totalPrice += price;\n count++;\n }\n }\n }\n\n const averagePrice = count > 0 ? totalPrice / count : 0;\n const roundedPrice = Math.round(averagePrice);\n data.averagePrice = roundedPrice;\n });\n\n return filteredData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"-----\n### Integrated statistical data is here:\n-----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"-----\n## Dependencies\n-----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"import { bayAreaGeoJSON } from \"@zhenghao-lin/hw7\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import { bartstationaccessibility } from \"@zhenghao-lin/hw7\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"import { ChoroplethMap } from \"bcf45090b3ba1513\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"import { PieChart } from \"@d3/pie-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"import { BarChart } from \"@d3/horizontal-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"