Sample Charts D3 - 1D #36
Description
Assigned To: Hande
Overview
The purpose of the site is to provide visual data for stakeholders and internal leadership for Boston's Higher Ground. Your task here will be to create the line and bar charts for the site!
Task
You’ll create a small prototype page that displays sample data visualizations using D3.js.
The data should be pulled from a local static JSON file and rendered into SVG-based charts.
Since the data is confidential, we will be creating sample data visualizations using D3.js for now.
The data should be pulled from a local static JSON file and rendered into SVG-based charts.
You do not need to integrate Salesforce or add advanced filtering in this ticket – the focus is to successfully set up and render the line and bar charts using D3 syntax and conventions. Take a look at the Figma to view the charts that you will be creating. Then, get started!
Task Breakdown:
- Retrieve data from the database
- Housing Charts (some of these are already done!)
- School Charts
Retrieve data from the database
To start you off, the getAllData() function has already been written for you. This function retrieves all of the data from the Drizzle ORM (sample_data table) and returns an array of objects, with all the fields described in the schema (src/lib/schema.ts).
Charts
Now you can build the charts! For this ticket you will be using [D3.js] (https://d3js.org/getting-started) to build the graphs. The data should be pulled from a local static JSON file and rendered into SVG-based charts. Reference src/app/d3-demo/page.tsx as an example.
Housing Charts
Number of family intakes: number of families can be calculated by getting the number of entries, intake date is intakeDate in sample_data
Families Housed Over Time
School Chart
Wait Times by School: Wait time is the difference between the dateHoused and intakeDate
Here are some things to keep in mind:
- Keep your code modular — separate chart setup, update, and data loading logic.
- Be mindful of D3’s update pattern (enter–update–exit).
- Use SVG elements instead of relying on HTML/CSS for chart rendering.
- The goal is to understand the D3 syntax and flow, not to make it pixel-perfect.
- Try to use consistent sizing, padding, and color palette for reusability later.
Resources:
src/app/d3-demo/page.tsx- D3 Getting Started: https://d3js.org/getting-started
- Observable D3 Tutorials: https://observablehq.com/@d3
- D3 Scales and Axes Overview: https://observablehq.com/@d3/learn-d3-scales
- Example datasets: https://datahub.io/core
Please message Jennifer with questions on tickets, Amitav with bugs, and Fatima with design questions. Happy Coding!