2e:null 2f:["$","title",null,{"children":"Student Housing in Stockholm (2020) | Daynex | Observable"}] 34:[{"id":"c63ab8a0dae97d058b9fd3614ff1c72e01dbaca5b265f901389d9be2f8dbd3925df0f4f633ad568e2780f598585c0466cd8de2d88bcf1b8977dccbc6fe2719a9","href":"https://static.observableusercontent.com/files/c63ab8a0dae97d058b9fd3614ff1c72e01dbaca5b265f901389d9be2f8dbd3925df0f4f633ad568e2780f598585c0466cd8de2d88bcf1b8977dccbc6fe2719a9","name":"bf_data_2020.json","type":"application/json","lastModified":1616356522610.536,"size":1058693}] 32:{"id":"1f631cd88fd7ac9d","slug":"student-housing-in-stockholm","title":"Student Housing in Stockholm (2020)","thumbnail":"feaf706f4a120d00ba85c8bfd33dd1a06e20af7a7ee72af29d75a26bb6fa551a","access_level":"public","create_time":"$D2021-03-20T11:02:19.125Z","update_time":"$D2021-11-29T17:47:21.101Z","view_time":null,"first_public_time":"$D2021-03-21T21:04:30.578Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"2b2a8f4da11f74ac","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":"starter_2024"},"version":981,"publish_version":981,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null}],"members":[{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7ffb575bc3b5f08a","slug":"data-activism","title":"Analysis","owner":{"id":"2b2a8f4da11f74ac","login":"daynex","name":"Daynex"}},"type":"notebook","body":{"title":"Student Housing in Stockholm (2020)","cells":[{"id":0,"value":"md`\n# Student Housing in Stockholm (2020)\n\nThis is my first observable notebook and D3 project. I really love observable and hoiw fun and easy it is to work with data viz. For the complete, pure and fully interactive visualization of the student housing situation in Stockholm please visit our project website here.\n\n**Credits** go to my awesome teammates Anna, Ella, Kristina and Nike who were invaluable in building the tool found in the link which this notebook uses as a foundation.\n\n**💬 Comment** with your feedback and ideas.\n\n**❤️ Like** and **🔗 Share**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"chart = {\n const svg = d3.create(\"svg\")\n\n svg\n .style(\"background-color\", \"white\")\n .attr(\"height\", dimensions.height)\n .attr(\"width\", dimensions.width)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 15);\n \n svg.call(bubbles)\n\n svg.call(xAxis)\n svg.call(xLabel)\n\n svg.call(yAxis)\n svg.call(yLabel)\n \n return svg.node()\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"md\n`\n## Interact\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"viewof xVariable = Select(\n ['average_queue_days', 'average_monthly_rent', 'average_square_meters'],\n {\n format: key => variableKeyToLabelName(key),\n label: 'X-axis'\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"viewof yVariable = Select(\n ['average_monthly_rent', 'average_queue_days', 'average_square_meters'],\n {\n format: key => variableKeyToLabelName(key),\n label: 'Y-axis'\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"viewof useColors = Toggle({ value: true, label: 'Colorful Bubbles' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"md\n`\n## Legend\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"// TODO: Work in Progress... Add legend to explain what is encoded into the Color and circle size?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"md\n`\nCircle Size corresponds to the size of the apartment.\nThe color indicates the type of apartment.\n- Dark Orange: Corridor Room\n- Light Purplel: 1 Room Apartment\n- Yellow: 2 Room Apartment\n- Dark Purplel: 3 Room Apartment\n- Pink: 4 Room Apartment\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"md\n`\nWhat are **Required Queue Days**?:\n> _The Stockholm Housing Agency (Bostadsförmedlingen) acts as an agent, helping you to find vacant rental apartments in the Stockholm region._ **Apartments are allocated on the basis of the time spent in the housing queue**_. To apply for an apartment, you must first register for the housing queue._ \n\nAs stated by Bostads Förmedlingen (Swedish Housing Agency), where you can read more about this concept.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`\n# Implementation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md\n`\n### SVG Specs\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"dimensions = ({\n width: 950,\n height: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"margin = ({\n top: 25,\n right: 25,\n bottom: 50,\n left: 75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md\n`\n### Bubbles\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"bubbles = svgContainer => {\n svgContainer\n .selectAll('circle')\n .data(apartment_groups)\n .enter()\n .append('circle')\n\n .attr('cx', apt => xScale(apt[xVariable]))\n .attr('cy', apt => yScale(apt[yVariable]))\n .attr('r', apt => radiusScale(apt.average_square_meters))\n\n .style('fill', apt => (useColors ? getColor(apt.group_type) : '#7b8387'))\n .style('opacity', 0.8)\n .style('stroke', 'black')\n .style('stroke-opacity', 0.3)\n .style('stroke-width', 0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"md\n`\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"xScale = d3\n .scaleLinear()\n .domain([0, d3.max(apartment_groups.map(apt => apt[xVariable])) * 1.1])\n .range([margin.left, dimensions.width - margin.right])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(apartment_groups.map(apt => apt[yVariable])) * 1.1])\n .range([dimensions.height - margin.bottom, margin.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"radiusScale = d3\n .scaleSqrt()\n .domain([0, d3.max(apartments.map(apt => apt.square_meters))])\n .range([0, MAX_RADIUS])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"md`\n**Note to those less familiar with d3 and data visualization:**\n\nIn the above visualization we encode the apartment size (m²) into circle. It might be intriguing to at first simply increase the radius with the size of the apartment but this would be misleading. We therefore need to make sure that we don't scale the radius of the circles linearily with the size of an apartment. We know that the radius is related to the area in a square root function, hence our use of scaleSqrt for the scaling.\n\n${tex`r = \\sqrt{\\frac{A}{\\pi}}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md\n`\n### X- and Y-Axis\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"xAxis = svgContainer => {\n const axis = d3.axisBottom().scale(xScale);\n\n svgContainer\n .append('g')\n .attr('transform', `translate(0, ${dimensions.height - margin.bottom})`)\n .call(axis);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"xLabel = svgContainer => {\n svgContainer\n .append('text')\n .attr(\n 'transform',\n `translate(${dimensions.width / 2}, ${dimensions.height - 5})`\n )\n .style('text-anchor', 'middle')\n .text(variableKeyToLabelName(xVariable));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"yAxis = svgContainer => {\n const axis = d3.axisLeft().scale(yScale);\n\n svgContainer\n .append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(axis);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"yLabel = svgContainer => {\n svgContainer\n .append('text')\n .attr('y', 20)\n .attr('x', -dimensions.height / 2)\n .attr('transform', 'rotate(-90)')\n .style('text-anchor', 'middle')\n .text(variableKeyToLabelName(yVariable));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"variableKeyToLabelName = key => {\n switch (key) {\n case 'average_queue_days':\n return 'Required Queue Days';\n case 'average_monthly_rent':\n return 'Monthly Rent (SEK)';\n case 'average_square_meters':\n return 'Apartment Size (m²)';\n default:\n return 'Unkown Variable';\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\n## Data Processing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"getColor = apartmentType => {\n switch (apartmentType) {\n case 'Corridor Room':\n return '#E66101';\n case '1 Room Apartment':\n return '#B2ABD2';\n case '2 Room Apartment':\n return '#FDB863';\n case '3 Room Apartment':\n return '#5e3c99';\n case '4 Room Apartment':\n return '#FDADAB';\n default:\n return 'black';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md\n`\n### Constants & Settings\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"MAX_RADIUS = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`\n# Data\n\nData Source: Bostads Förmedlingen (Swedish Housing Agency)\n\nThe data results from the sources list of all apartments which were rented out to students during the year of 2020 in the Stockholm Area. The means, that this does **not include all student apartments** in Stockholm since many of them didn'T change tenant during 2020. It is also possible, that a single apartment is recorded multiple times if it change tenantes more than once during that year.\n\nThere are 3 different types of entities:\n- Housing Complexes\n- Apartments (the original Starting Point)\n- Apartment Groups.\n\n\n\n_Note: The units are added for clarity and are not part of the data set_\n\n### Housing Complex\n\nA housing complex is often just 1 building but due to the nature of student housing it can somethimes be a complex of several houses, hence the name.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"housing_complex_table = table(\n housing_complexes.slice(0, 2).map(house => ({\n Address: md`**${house.address}**`,\n Coordinate: md`\n**Latitude:** ${house.coordinate.latitude.toFixed(7)}°\n\n**Longitude:** ${house.coordinate.longitude.toFixed(7)}°`,\n Apartments: md`_Array_`,\n ApartmentGroups: md`_Array_`\n })),\n { title: 'Housing Complex (Example)' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`## Apartments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"apartments_table = table(\n apartments.slice(10, 14).map(apartment => ({\n Address: html`${apartment.address}`,\n 'Area Name': html`${apartment.area_name}`,\n Rooms: html`${apartment.room_count}`,\n 'Monthly Rent': html`${apartment.monthly_rent} €/month`,\n 'Queue Days': html`${apartment.queue_days} days`,\n Size: html`${apartment.square_meters} m²`\n })),\n { title: 'Apartments (Example)' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`\n## Apartment Groups\n\nApartment Groups are just the result of taking all apartments in a housing complex which have the same number of rooms and then averaging their attributes, such as rent, and size.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"apartment_groups_table = table(\n apartment_groups.slice(0, 4).map(apartment => ({\n 'Number of Apartments': html`${apartment.apartment_count}`,\n Type: html`${apartment.group_type}`,\n 'Average Monthly Rent': html`${apartment.average_monthly_rent.toFixed(\n 0\n )} €/month`,\n 'Average Queue Days': html`${apartment.average_queue_days.toFixed(\n 0\n )} days`,\n 'Average Size': html`${apartment.average_square_meters.toFixed(\n 0\n )} m²`\n })),\n { title: 'Apartment Groups (Example)' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"housing_complexes = FileAttachment('bf_data_2020.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"apartments = {\n var apartments = [];\n housing_complexes.forEach(\n house => (apartments = apartments.concat(house.apartments))\n );\n\n return apartments;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"apartment_groups = {\n var apartment_groups = [];\n housing_complexes.forEach(\n house =>\n (apartment_groups = apartment_groups.concat(house.apartment_groups))\n );\n\n return apartment_groups;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {table} from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"import {Toggle, Range, Select} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"