jojongo15342@gmail.com

Final Project

This scatter plot displays insurance charges against patient age, with points colored by a user-selected attribute such as smoker status, sex, region, BMI category, or number of children. A legend updates dynamically, and linear regression lines are calculated for each color group to reveal trends. Built with React and D3.js (d3.v7), the visualization uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the chart from the `data.csv` file.

Prototype 4

This interactive scatter plot displays insurance charges against age, with a color selector allowing viewers to group data by smoker status, sex, region, BMI category, or number of children. Built with React and D3.js v7, the visualization uses a d3.scaleOrdinal with schemeCategory10 for coloring, and draws best-fit regression lines per group. A legend and radio-button controls filter the categorical coloring.

BMI Prototype

This scatterplot visualizes insurance charges based on age, with each point colored by BMI category (underweight, normal, overweight, obese). The React app loads data from a CSV file, uses d3 scales and axes to map age and charges, and renders colored circles with d3's join operation. A hover tooltip displays age, BMI, and charges, while a legend explains the color categories. The chart uses d3.scaleLinear for both axes and d3.axisBottom/axisLeft for tick marks.

Children Prototype

This scatterplot shows insurance charges plotted against age, with each point colored by the number of children the insured person has. The visualization uses a categorical color scheme to distinguish between zero and five children, and includes an interactive tooltip that displays age, children count, and charges on hover. The chart is built with React and D3.js, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `selectAll().join()` to render the circles. Data is loaded from a CSV file containing insurance records.

Medical Insurance Box Plots

Medical Insurance Bar Chart

This grouped bar chart visualizes average medical insurance charges across four U.S. regions, broken down by the number of children covered. The chart uses d3.scaleBand for grouped positioning and d3.scaleLinear for the y-axis, with pastel colors distinguishing regions. Data is loaded from a CSV file and aggregated in JavaScript, while tooltips display exact values on hover. The visualization is built using d3.v7 within a React-compatible unidirectional data flow pattern via d3-rosetta's `one` and `createStateField` utilities.

Prototype 1

Iterated Medical Insurance Cost Scatterplot

This chart visualizes medical insurance costs by plotting age against charges for individual patients. Each point is colored by smoking status, with red circles representing smokers and green representing non-smokers, making the higher charges associated with smoking immediately apparent. The visualization is built with a React component using D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render an SVG scatterplot. Data is loaded asynchronously from a CSV file using D3's `csv` method.

Medical Insurance Cost Scatterplot

This scatterplot visualizes the relationship between patient age and medical insurance charges across over 1,000 records from a Kaggle dataset. Each green circle represents an individual, with age plotted on the x-axis and charges on the y-axis, revealing a general upward trend in costs with age. The React app loads data from a CSV file using d3.csv, then the viz.js module applies d3.scaleLinear and d3.extent to map values to screen coordinates, rendering circles with d3’s selection and join methods.

Medical Insurance Cost Scatterplot

A scatterplot displays individual medical insurance records from a CSV dataset, plotting each person's age on the x-axis against their insurance charges on the y-axis. All points render as steelblue circles with a fixed radius of 5 pixels. The visualization uses React with d3.v7, leveraging `scaleLinear` and `extent` to compute the axes, and a `data` join to bind the CSV rows to `circle` elements in the SVG.

Medical Insurance Cost Scatterplot

This scatterplot displays the relationship between age and income, with each point representing an individual from a medical insurance cost dataset. The visualization shows how income distribution varies across different ages, using blue and red circles to distinguish income levels. Built with React and D3 v7, the code uses `scaleLinear` to map the data domains, `axisBottom` and `axisLeft` for the axes, and the `join` pattern to bind data to SVG circles. The data is loaded from a CSV file containing insurance records.

Sports Car Prices Dataset

This example loads a sports car dataset and displays its raw contents as a formatted JSON preview. The visualization fetches a CSV file containing 1,000 rows of car specifications (make, model, year, engine size, horsepower, torque, 0-60 time, and price) using the Fetch API and parses it with `d3.csvParse`. The parsed data is stored in a state object managed through a custom `setState` function, while D3's `select` and `join` operations render the data in a `<pre>` element. The page updates reactively whenever the state changes, initially showing "LOADING" before the data arrives.

Adult Income Prediction Dataset

The visualization loads the Adult Income Prediction Dataset from a CSV file and displays the raw parsed data as JSON in a preformatted text block. It demonstrates loading and parsing a large dataset with D3.js v7, using the `csvParse` method to convert the CSV string into an array of objects. The view initially shows a loading state before fetching the data, then renders the parsed dataset structure. The example highlights basic data ingestion and state management with D3 selections and a custom state object.

IMDb Worst 250 Movies

This visualization displays the raw dataset of IMDb’s 250 worst-rated movies as a formatted JSON preview. It loads a CSV file with movie attributes like title, year, duration, genre, and rating using `fetch` and parses it with `d3.csvParse`. The current state is managed via a `setState` callback, and D3’s `select` and `join` methods render the parsed data into a `<pre>` element for inspection. The example demonstrates a minimal data-loading pattern with D3 v7, showing the transition from undefined state to a structured array of movie objects.

Adult Income Prediction Dataset

This visualization displays the Adult Income Prediction Dataset, showing raw CSV data loaded from a local file as JSON-formatted text. The dataset contains demographic and employment attributes for over 32,000 adults from the 1994 US Census, including age, education, occupation, and income level. The code uses D3 v7’s `csvParse` to parse the data, `select` for DOM manipulation, and a state-based rendering pattern with `fetch` to asynchronously load the CSV before displaying it.

John Ngo Circles

A collection of opaque, overlapping circles in varied sizes and colors is drawn against a solid background, creating a layered composition. The circles are positioned at fixed coordinates, with several concentric rings centered on the same point at different radii. The visualization is rendered as an SVG using D3 v7, with the `select`, `join`, and `attr` methods binding static data directly to circle elements. The code defines the chart size from the container's client dimensions and applies a uniform opacity to all shapes.