2d:null 2e:["$","title",null,{"children":"Rental Decision Maker For Tenants In Bay Area | Zhenghao Lin | Observable"}] 33:T454,## 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:T99e,## 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:T40f,## 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:T737,## Data Abstraction **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:T4f7,## Task Abstraction (Why) - Task 1: Limit the range by BART routes and median income. Visualize rents by color channel, and identify the deepest colored one. **[Lookup, Outliers]** - Task 2: Limit the range by all possible conditions. Visualize cost-effectiveness by color channel, and identify the deepest colored one. **[Lookup, Outliers]** - Task 3: Select whether the user needs to filter by cost-effectiveness, rent, or selling price. Locate the TOP 5 or more zip areas in the Bay Area with expected conditions. **[Locate, Features]** - Task 4: Let the user set the limitation. Calculate the population living in areas with lower than and greater than the given limit. Visualize a pie chart to show the proportion of both groups. So that we know whether the limitation is reasonable. **[Identify, Extremes]** - Task 5: Set the target zip. Calculate the ranking of all attributes of the area and visualize it using a bar chart. So that we can evaluate how good the attributes are in an area. **[Identify, Features]** - Subtask 1: Visualize the shapes of all zip areas on the SF Bay Area map. **[Present, Shape]** - Subtask 2: Calculate the cost-effectiveness, rankings of every attribute, and the number of BART stations in each zip area. **[Derive, Distribution]**38:T52f,{ // Population living in areas with the condition lower than the given let populationBelowCondition = 0; let condition = filter4[2]; for (let feature of overallStatistics.features) { if (feature.properties.averageRent < 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.averageRent >= 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; }39: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; }3a:[{"id":"ab2d09bf0a6672944ca4bbcc31e6e5df0087f1c5a0569efc5b084935eed4549ce3e3e63f4c904b8c5a445a286ef2ffdcea94692cb08eb48443aa4ba0a9485312","href":"https://static.observableusercontent.com/files/ab2d09bf0a6672944ca4bbcc31e6e5df0087f1c5a0569efc5b084935eed4549ce3e3e63f4c904b8c5a445a286ef2ffdcea94692cb08eb48443aa4ba0a9485312","name":"CA_Median_Household_Income@1.csv","type":"text/csv","lastModified":1682338646577.734,"size":51197},{"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":1682338646577.734,"size":6042478},{"id":"159585b9017ded5880db6cc3fb6cc0ba7daa62e58d1c2c6b3852faa4351d0b5685abdf8c128fcf2a4c5d1b0506380b578be21ced4e0279bc4956e3a967705625","href":"https://static.observableusercontent.com/files/159585b9017ded5880db6cc3fb6cc0ba7daa62e58d1c2c6b3852faa4351d0b5685abdf8c128fcf2a4c5d1b0506380b578be21ced4e0279bc4956e3a967705625","name":"Zip_zori_sm_month-2.csv","type":"text/csv","lastModified":1682338646577.734,"size":1182801}] 31:{"id":"1d618d3963fcdf3b","slug":"progress-report","title":"Rental Decision Maker For Tenants In Bay Area","thumbnail":"9806cf33a405e51705d0fc45f1b90ba628a0b6d1c4155b91b46ff76338e3e72e","access_level":"public","create_time":"$D2023-04-24T12:17:26.577Z","update_time":"$D2023-04-24T12:17:26.577Z","view_time":null,"first_public_time":"$D2023-04-24T12:17:26.577Z","has_unpublished_edits":null,"fork":{"id":"c6641f973d6c304b","slug":"rental-decision-maker-in-bay-area","title":"Rental Decision Maker For Tenants In Bay Area","owner":{"id":"e7d220f596a8e193","login":"zhenghao-lin","name":"Zhenghao Lin"}},"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":613,"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":0,"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":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":206,"value":"## Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"### Insight 1: Rent Distribution Map With Customizable Limitations\n- **Marks:** Area\n- Channel:\n - Color: rents by zip area\n - Task: T1 & Subtask1\n - Arrange: Separate\n - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information.\n - 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.","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":"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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"### Insight 2: Cost Effectiveness (Price-to-Rent Ratio) Distribution Map With Customizable Limitations\n- **Marks:** Area\n- Channel:\n - Color: rents by zip area\n - Task: T2 & Subtask1\n - Arrange: Cost-effectiveness\n - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information.\n - 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.","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":"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\", filter2[6]),\n strokeWidth: 0.1,\n tooltip: (d) => d.properties[\"zip\"],\n value: (d) => {\n if (\n d.properties[\"routesCount\"] >= filter2[1] &&\n d.properties[\"routesCount\"] <= filter2[2]\n ) {\n if (d.properties[\"medianHouseholdIncome\"] > filter2[4]) {\n if (\n d.properties[\"averageRent\"] >= filter2[8] &&\n d.properties[\"averageRent\"] <= filter2[9]\n ) {\n if (\n d.properties[\"averageSellingPrice\"] >= filter2[11] &&\n d.properties[\"averageSellingPrice\"] <= filter2[12]\n ) {\n return d.properties[\"costEffectiveness\"];\n }\n }\n }\n }\n return 0;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"### Insight 3: Top Recommendations Distribution Based On Given Condition\n- **Marks:** Area\n- Channel:\n - Color: the designated attribute of TOP X areas\n - Task: T3 & Subtask1\n - Arrange: Separate\n - Expressiveness: The zip areas contain location information that is important for tenants. Only a map can visualize the data without losing location information.\n - 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.","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(\n [\"Cost-Effectiveness\", \"Rent Expensiveness\", \"Luxury (Selling)\"],\n {\n label: \"Category\"\n }\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":"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\", filter3[4]),\n strokeWidth: 0.1,\n tooltip: (d) => d.properties[\"zip\"],\n value: (d) => {\n switch (filter3[1]) {\n case \"Luxury (Rent)\":\n if (d.properties[\"averageRentRanking\"] <= filter3[2]) {\n return d.properties[\"averageRent\"];\n }\n break;\n case \"Luxury (Selling)\":\n if (d.properties[\"averageSellingPriceRanking\"] <= filter3[2]) {\n return d.properties[\"averageSellingPrice\"];\n }\n break;\n case \"Cost-Effectiveness\":\n if (d.properties[\"costEffectivenessRanking\"] <= filter3[2]) {\n return d.properties[\"costEffectiveness\"];\n }\n break;\n default:\n console.log(\"Invalid value\");\n }\n return 0;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"### Insight4: Population Ratio Of Two Parts Divided By Given Condition\n- **Marks:** Area\n- Channel:\n - angle: ratio of population below and above the given condition\n - Task: T4\n - Arrange: Separate\n - Expressiveness: A pie chart is the most expressive one for the ratio presentation task.\n - Effectiveness: The angle is the most effective channel for a pie chart.","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":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"### Insight 5: Attributes Details of Target Zip Area\n- **Marks:** Area\n- Channel: Position\n - Color: Ranking percentage of each attribute in all zip areas of the target zip area\n - Task: T5\n - Arrange: Separate\n - 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.\n - Effectiveness: The position on a chart is the most effective among all channels for ordered attributes.","pinned":true,"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 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":498,"value":"chart = {\n const zipData = overallStatistics.features.find(\n (feature) => feature.properties.zip === filter5[1]\n ).properties;\n const indicators = [\n {\n name: \"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.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"## Data Preprocessing","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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"## Dependencies","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":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"