The concept of the “15-minute city” emphasizes a urban development model in which residents can access most, if not all, of their everyday needs within a 15-minute walk or bike ride from their homes. This approach seeks to counter the challenges of suburban sprawl by fostering more compact, efficient, and sustainable urban environments.
Before beginning development a prototype of the web UI was done in figma to ascertain the divisions of the webpage.
The resultant and developed UI was divided into sidebar and the main viewer bar on the right. The sidebar contains the title and description of the web and the functions, underneath that is the metrics bar that includes the programs that the 15mins city evaluates and a visualization bar that reads the amount of each program within the radius. The inputs beneath that contains the 3 main inputs, 5mins, 10mins and 15mins. And then the compute button which activates the functions is in blue at the bottom left of the page. The address bar on the bottom right is used to select the location for the analysis, due to the amount of data required by open street map to allow for selection of any location, we decided to hard code the location for this demo.
The computed function shows the result from the analysis, and displays the plan of the area selected with the programs color coded, made possible using three-js.
