Build a responsive website called “NYC Neighborhood Pulse” using HTML, CSS, and JavaScript. The website should help residents and community board members understand which issues people report in their area and how those reports change over time.
NYC Open Data already supports searching, filtering, visualizing, and exporting datasets. I want to build a guided interface on top of those capabilities that combines linked visualizations, automatic time comparisons, and understandable explanations.
Data source
Use NYC Open Data’s 311 Service Requests from 2020 to Present.
Retrieve data through its public JSON endpoint. Relevant fields include unique_key, created_date, complaint_type, borough, community_board, status, latitude, and longitude. Display complaint_type as “Problem,” following the dataset’s current label.
Features
Guided question builder: Create a sentence-style interface: “Show [problem] in [borough/community board] during [the last 7, 30, or 90 days].” Populate location and problem options from the data. Default to the last 30 complete days using New York local dates, and display the exact date range.
Connected dashboard: Show the total number of requests, a daily trend chart, a bar chart of the most frequently reported problems, and an interactive map. Selecting a problem in the bar chart should update the other views. Display active filters as removable chips. Clicking a map marker should show the problem, date, and recorded status.
Automatic time comparison: Compare the selected period with the immediately preceding period of equal length, using identical filters. Show the difference in request counts and the percentage change. If the previous count is zero, explain that a percentage change cannot be calculated. Generate a short, template-based summary using the calculated results.
Data context: Include a clearly visible “About these numbers” panel with the source link, dataset update date when available, and retrieval time. Explain that 311 requests reflect reporting activity and do not measure every incident or establish neighborhood safety. Treat missing values as unknown. Requests without valid coordinates should remain in totals, with their omission from the map explained.
Save and share: Let users bookmark filter combinations in browser local storage, copy a URL that recreates the selected filters, and download the displayed summary tables as CSV.
Design and implementation
Use semantic HTML, responsive CSS, clear labels, readable typography, keyboard-accessible controls, and chart descriptions. Provide a table alternative to the map. On phones, stack the filters and visualizations vertically.
Use JavaScript to fetch and filter real data. Request aggregate results for totals and charts rather than downloading the entire dataset. Limit map markers to the latest 1,000 matching requests and clearly label this limit; dashboard totals must cover all matching requests. Include loading, empty-result, and error states.
Return index.html, styles.css, and script.js, plus brief instructions for running the website locally.