Skip to main content
Log in
R

Ridhima Saxena

@ridhimasaxena·23 public vizzes

Loading thumbnail…

Smoking Status vs Age

This bar chart shows the relationship between age and smoking status (0 for non-smoker, 1 for smoker) across individuals in the CDC dataset, with bars colored by gender. The visualization uses a linear x-scale for age and a band scale for smoking status, rendering SVG rectangles via React components. It employs D3 v5 scales (scaleLinear, scaleBand, scaleOrdinal) and custom axis components (AxisBottom, AxisLeft) alongside a color legend, with data loaded through d3.csv.

Dec 9, 2021
Loading thumbnail…

Histogram of BMI by Age By Health Status

This histogram displays the average Body Mass Index across age groups for a selected health status. A dropdown menu toggles between Excellent, Very Good, Good, Fair, and Poor health categories, filtering the CDC dataset accordingly. The visualization uses D3 v7 with `d3.bin` to group ages and `scaleLinear` axes, rendered as SVG rectangles. React manages the component state, while BMI is calculated from weight and height using the formula weight/height² × 703. Axes include grid lines and rotated labels for readability.

Dec 9, 2021
Loading thumbnail…

Histogram of BMI by Age By Gender

This interactive visualization displays the relationship between age and average Body Mass Index (BMI) using a histogram, with a dropdown menu to switch between male and female data from the CDC dataset. The chart uses slanted-blue bars to show average BMI values within equal-width age bins. Built with React and D3.v7, it employs `scaleLinear`, `bin`, and `axisBottom`/`axisLeft` APIs to compute scales, bin the data, and render axes. The SVG graphic is generated declaratively, with BMI calculated from weight and height using the formula shown.

Dec 9, 2021
Loading thumbnail…

Scatterplot of Body Mass Index for Different Health Statuses

This scatterplot shows the relationship between age and body mass index for individuals, with colors indicating their general health status. The chart uses a React and SVG rendering pipeline with d3.v5's scaleLinear for the x and y axes and scaleOrdinal for the color mapping. Data comes from a CDC dataset loaded via d3.csv. Hovering over any point displays the age as tooltip text.

Dec 9, 2021
Loading thumbnail…

Weight/Weight Desired for Males and Females

This scatterplot shows the relationship between age and weight-to-desired-weight ratio for males and females, using semi-transparent circles colored by gender. The visualization loads CDC health data via `d3.csv` and renders it as an SVG with React components. Axes are built with custom `AxisBottom` and `AxisLeft` components using `d3.scaleLinear`, while a `d3.scaleOrdinal` color scale differentiates genders. A `ColorLegend` component displays the categorical color mapping, and each circle includes a native SVG `<title>` element for hover tooltips.

Dec 9, 2021
Loading thumbnail…

Scatterplot of Body Mass Index for Males and Females

This scatterplot displays the relationship between age and body mass index (BMI) for males and females, using data from a CDC dataset. Each point is colored by gender via a d3.scaleOrdinal, with BMI computed from weight and height. The visualization is built with React and d3.v5, rendering SVG circles, axes, and a color legend. Axes and marks are generated using scaleLinear and custom React components, with loading states handled asynchronously.

Dec 9, 2021
Loading thumbnail…

General Health vs Weight

This bar chart visualizes the relationship between general health ratings and weight using CDC survey data, with bars colored by gender. The visualization uses React to render SVG elements and D3 scales (scaleBand for health categories, scaleLinear for weight) to position marks. ColorLegend communicates gender encoding, while AxisBottom and AxisLeft components display tick marks. The chart highlights how weight distributions vary across self-reported health levels, with bars extending horizontally from zero to represent weight values for each health category.

Dec 9, 2021
Loading thumbnail…

Scatterplot of CDC Dataset describing Age (in Years) vs. Weight (in Pounds) for Males and Females

This scatterplot visualizes the relationship between age (in years) and weight (in pounds) for males and females from a CDC dataset. Points are colored by gender using `scaleOrdinal` with a color legend, and all circles render with 30% opacity to reveal overlapping data. The visualization uses React with D3 v5 scales (`scaleLinear`) to map data to SVG coordinates, with custom axis components for the bottom and left sides. Axes, titles, and labels are added as SVG text elements, while hover tooltips provide precise values via native SVG `<title>` elements.

Dec 8, 2021
Loading thumbnail…

Scatter Plot of CDC Data with Menus

This data visualization displays a scatter plot of U.S. CDC health data, allowing users to explore relationships between variables like age, weight, and exercise. The chart uses two dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with points updating via d3's transition API. The implementation leverages d3's scaleLinear and scalePoint for axis scaling, and the selection.join method for incremental rendering of circles and axes. The plot renders as SVG with a 1-second animated transition, using the CDC General Health dataset fetched via CSV.

Dec 5, 2021
Loading thumbnail…

Histogram of BMI by Age With Brushing

This visualization displays the average Body Mass Index (BMI) of individuals grouped by age, using data from the CDC dataset. A brush tool allows the user to select a range of ages on the horizontal axis, which then filters the data and re-renders the histogram to show more granular age bins for the selected range. The code uses D3 v7 APIs such as `scaleLinear`, `axisBottom`, `axisLeft`, `bin`, and `brushX` to create and update the SVG rendering. The visualization is built with React and displays the data as a series of rectangular bars, with the title "BMI By Age" and labeled axes.

Dec 3, 2021
Loading thumbnail…

Histogram of BMI by Age

This histogram displays the average Body Mass Index (BMI) of individuals binned by age, using data from a CDC dataset. The chart shows a general trend of BMI across age groups, with the average BMI per bin calculated from the raw weight and height values. The visualization is built with D3 v7, using `d3.bin` to group data, `d3.scaleLinear` for both axes, and SVG rendering. The axes and grid lines are styled via CSS, with the data aggregated and drawn as indigo rectangles.

Dec 3, 2021
Loading thumbnail…

Area Chart of BMI by Age

This visualization shows the relationship between age and Body Mass Index (BMI), displaying BMI as a filled area chart across age values. The chart uses a smooth curve (via d3.curveBasis) to connect data points, with the area filled in maroon, and includes labeled axes for Age and Body Mass Index. The data comes from a CDC dataset accessed through a public GitHub gist, with BMI calculated from height and weight fields using the formula weight (lb) / height (in)² × 703. The rendering uses d3.select, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.area, and d3.extent, all within an SVG canvas.

Nov 27, 2021
Loading thumbnail…

Line Plot of BMI vs Age

This visualization displays the relationship between age and weight from the CDC GenlHealth dataset, with each data point represented as a circle on a scatterplot. The axes are scaled linearly using `scaleLinear`, with extents calculated via `d3.extent`. Circles are appended to an SVG canvas using `selectAll` and `.join()`, with left and bottom axes generated through `axisLeft` and `axisBottom` functions. The chart fills the browser window, using the full viewport dimensions for width and height. Data loading is handled asynchronously through the `csv` function with a custom row parser that converts string values to numeric types.

Nov 27, 2021
Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through drop-down menus for the X and Y axes. Built with D3 v6, it uses the `d3.selection.join` API to animate transitions when axes change, with points smoothly moving to new positions over one second. The chart scales axes using either `d3.scaleLinear` for quantitative data or `d3.scalePoint` for categorical species, while SVG circles are rendered with opacity and the page includes custom menus from a reusable `menu` module.

Nov 3, 2021
Loading thumbnail…

CDC Dataset: Exercise vs. Weight

This D3.js scatterplot visualizes the relationship between exercise habits and body weight using CDC survey data, with each semi-transparent circle representing an individual. The x-axis maps binary exercise status (0 or 1), while the y-axis shows weight, though random jitter is added to x-coordinates to reveal data density. The visualization uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft/axisBottom for tick marks. Circle opacity is set to 0.1, creating darker regions where many overlapping points cluster, and the SVG canvas fills the entire browser window.

Oct 26, 2021
Loading thumbnail…

Bar Chart Using CDC Data Describing Height for Males vs. Females

This bar chart visualizes CDC data on height by gender, showing the distribution of heights for males versus females using horizontal bars. The chart is rendered with D3 v7’s `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for tick marks, and SVG rectangles for the bars. Data is loaded from a CSV file using `d3.csv` and processed to numeric values. The visualization uses a simple steelblue fill and a fixed margin layout.

Oct 26, 2021
Loading thumbnail…

Scatterplot of Breast Cancer

This scatterplot shows the relationship between clump thickness and cell size in the Breast Cancer dataset, with each point representing a sample. The code loads the CSV data from a GitHub gist using `d3.csv`, parses the numeric fields, and maps them to x and y positions via `d3.scaleLinear` with an auto-computed extent. Circles are rendered as SVG elements, and axes are added using `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with margins and a fixed point radius, demonstrating a basic D3 v6 data-joining workflow.

Oct 23, 2021
Loading thumbnail…

Scatterplot of Student Test Performances for Reading vs. Math Scores

This scatterplot displays the relationship between reading and math scores for individual students from the Student Test Performance dataset. Each circle represents a student, positioned by reading score on the x-axis and math score on the y-axis, revealing any correlation between the two subjects. The visualization uses D3 v6 with `d3.scaleLinear` for both axes, `d3.extent` to set domains from the data, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded asynchronously via `d3.csv`, and all marks are rendered as SVG circles.

Oct 23, 2021
Loading thumbnail…

Scatterplot of CDC Dataset describing Age (in Years) vs. Weight (in Pounds)

This D3.js scatterplot visualizes the relationship between age (in years) and weight (in pounds) using CDC health data. The plot encodes each individual as a circle, with x-coordinates representing age and y-coordinates representing weight, using linear scales for both axes. The visualization employs D3's `csv` loader to parse the remote dataset, `select` to manage the SVG container, and `scaleLinear` to map data values to screen coordinates. The code constructs the chart with `axisLeft` and `axisBottom`, and renders all data points as SVG circles.

Oct 23, 2021
Loading thumbnail…

Loading and Parsing the Breast Cancer Dataset

This example demonstrates the initial step of working with the breast cancer dataset by loading and parsing it, then displaying basic dataset statistics. The page shows the file size in kilobytes, the total number of rows, and the number of columns. It uses D3 v7’s `d3.csv` to fetch the CSV data from a GitHub gist URL, and `d3.csvFormat` to calculate the raw data size. The resulting metrics are rendered as plain text inside a `<pre>` element, providing a concise overview of the dataset’s structure.

Oct 23, 2021
Loading thumbnail…

Loading and Parsing the CDC Dataset

This example displays a text summary of a CDC health dataset’s size and structure, showing the file’s kilobyte count, row count, and column count in large type. After loading the CSV from a GitHub gist via `d3.csv`, it uses `d3.csvFormat` on the resulting parsed data to calculate its byte length, then writes the formatted message into a `<pre>` element using standard DOM manipulation. The code relies on D3 v7’s promise-based CSV loading and formatting APIs.

Oct 23, 2021
Loading thumbnail…

Loading and Parsing the Student Performances Dataset

This visualization demonstrates how to load and parse a CSV dataset of student exam performances from a Kaggle-sourced gist. It shows the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code uses `d3.csv` to fetch the remote CSV file, then calculates the size with `d3.csvFormat` and `.length`, and displays the results as large text in a `<pre>` element. The page relies on D3 v7 for data loading and formatting.

Oct 22, 2021
Loading thumbnail…

Beating Heart Visualization

This animated heart visualization displays a red heart shape that rhythmically beats against a blue rectangular background. Rendered as inline SVG, the heart path is defined using a cubic bezier path, while an SVG `<animateTransform>` element scales it repeatedly between sizes of 1 and 1.5 over a one-second cycle. The animation uses the `scale` transform type with specified keyframe values to create the pulsing effect, with no external JavaScript libraries or data sources involved.

Oct 22, 2021