Skip to main content
Log in
B

Bhargav Reddy

@abhargav0021·13 public vizzes

Loading thumbnail…

Fork of D3 Starter

This example visualizes world population data from a 2024 Kaggle dataset using a choropleth map. The map displays each country’s population with a blue color scale, from light (low) to dark (high), based on the `Population 2024` column, while countries without data appear gray. The visualization is built with D3 v7 and TopoJSON, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render geographic features. It loads world map geometry from the world-atlas package and the CSV dataset, then employs `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors. Interactive tooltips display exact population figures on mouseover, and a graticule and legend provide spatial and color context.

Nov 10, 2025
Loading thumbnail…

Fork of D3 Starter

A force-directed network graph visualizes simplified global trade partnerships among eight countries, with nodes colored by region (Americas, Asia, Europe). The D3 v7 `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` computes layouts; SVG circles, lines, and text render countries, links, and labels. The `drag` function enables interactive repositioning by fixing node coordinates during a drag.

Nov 10, 2025
Loading thumbnail…

Fork of D3 Starter

This example shows a hierarchical tree of food categories, with Fruits, Vegetables, Grains, and Proteins branching into individual items. It uses d3.hierarchy and d3.tree to compute the layout, then renders links with d3.linkHorizontal and nodes as SVG circles and text labels. The data is embedded as a JavaScript object, and the visualization uses d3.v7 with an SVG rendering approach, assigning distinct colors to each category and its child nodes.

Nov 10, 2025
Loading thumbnail…

Assignment q4

This area chart shows the average reading score for students grouped by their parental level of education, ordered from “some high school” to “master’s degree.” The visualization uses d3.v7 and SVG rendering, with d3.csv to load the dataset, d3.rollups and d3.mean to aggregate scores, and d3.scalePoint with d3.area and d3.line to draw the filled area and outline. Interactive tooltips appear on hover over each data point.

Oct 28, 2025
Loading thumbnail…

Assignment q3

This visualization shows the average reading score for students grouped by their parents' highest level of education, from some high school through master's degrees. The D3.v7 line chart uses d3.scalePoint and d3.scaleLinear for axes, with d3.mean aggregation to compute the averages. Interactive tooltips appear on hover for each data point. The chart renders as an SVG, sourced from the "StudentsPerformance 2.csv" file, highlighting the relationship between parental education and student performance in reading.

Oct 28, 2025
Loading thumbnail…

Assignment q2

This visualization displays a pie chart comparing average total scores by gender, computed from the StudentsPerformance 2.csv dataset. It uses D3 v7’s `d3.pie` and `d3.arc` to generate slices, with each gender’s average of math, reading, and writing scores aggregated via `d3.group` and `d3.mean`. The SVG rendering includes animated slice transitions through `transition.attrTween`, hover tooltips, and a legend, with a blue-red color scale distinguishing male and female results.

Oct 27, 2025
Loading thumbnail…

Assignment Q1

A reusable scatter plot compares math and reading scores, with each student’s gender indicated by color. The visualization uses D3 v7’s `d3.csv` and `d3.autoType` to load the data, `scaleLinear` for axes, and `scaleOrdinal` for color mapping. Hovering reveals a tooltip with gender and scores, while an adjacent legend clarifies the encoding. The plot is rendered as SVG circles with `mouseover` and `mouseout` event handlers, demonstrating a modular chart-building pattern common in D3 examples.

Oct 27, 2025
Loading thumbnail…

Assignment 6

This multi-series line chart visualizes yearly average global temperatures from 1948 to 2023, comparing maximum, mean, and minimum temperature trends using three colored lines (red, blue, and green). The visualization aggregates daily temperature records from a CSV file by year using d3.rollup, then renders the aggregated data as an SVG with d3.line and curveMonotoneX. Points are sampled every fifth year as markers, with axes implemented via d3.axisBottom and d3.axisLeft. A legend identifies each metric, and the chart includes axis labels and a descriptive title.

Oct 19, 2025
Loading thumbnail…

Assignment 6

This D3.js v7 visualization combines a bar chart of daily maximum temperatures with a monotone-smoothed line chart of mean temperatures from a 1948 weather dataset. Orange bars encode the maximum temperature values against the left y-axis, while the blue line uses the right y-axis for the mean temperature readings. The chart renders as an SVG using `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.axisRight`, and `d3.line` with `d3.curveMonotoneX`, displaying years along the bottom axis.

Oct 19, 2025
Loading thumbnail…

Assignment 6

This scatter plot shows the relationship between horsepower and miles per gallon for a dataset of automobiles, with each car represented as a blue semi-transparent dot. The visualization uses D3 v7 to load the CSV file, parse numeric values, and scale the data linearly along both axes. Points are rendered as SVG circles, with axes and labels generated using `d3.axisBottom`, `d3.axisLeft`, and appended text elements. The chart includes a title and axis labels for horsepower and MPG, with missing values filtered out before plotting.

Oct 19, 2025
Loading thumbnail…

Assignment 6

This bar chart shows total sales aggregated by product line, using a simple grouped bar layout where each bar’s height encodes the summed sales value. The chart is built with D3 v7, loading data from a CSV file and using `d3.rollup` to group and sum sales per product category. SVG rectangles are scaled with `d3.scaleBand` and `d3.scaleLinear`, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The title and rotated x-axis labels complete the visualization, rendered entirely in SVG.

Oct 17, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This is a React and D3.js bar chart that visualizes letter frequency data from a CSV file (seven letters with associated counts). The chart displays teal bars, and clicking a bar highlights it by changing its color and opacity while dimming others. Built with React 19 and D3 v7, the code uses D3 scales (`scaleBand`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and selections with the `.join()` pattern to render the interactive SVG. State management tracks the selected letter, triggering re-renders upon user interaction.

Oct 17, 2025
Loading thumbnail…

Bhargav-Assignment 5

This example displays a static summary of a CSV dataset about fruits, showing the file size, row count, and column count. It fetches the data from a GitHub-hosted CSV file using the Fetch API, parses it with `d3.csvParse`, and renders a simple SVG circle labeled "Fruits" with D3 v7. The page also logs data metrics to the console and presents them in a styled HTML summary box.

Oct 5, 2025