S

Srihith Reddy Gaddam

@SrihithReddy26·24 public vizzes

Loading thumbnail…

Activity 4_Task 4 Question

This interactive bubble chart displays the relationship between university research scores and international student rates, with each bubble colored by geographic region. The visualization makes it easy to compare regional clusters and identify institutions with high international diversity alongside strong research output. Loading data from a CSV file, the chart uses a D3 SVG rendering approach with linear scales for the x and y axes, a square-root scale for bubble sizing, and an ordinal color scale using the `d3.schemeSet2` palette. Interactive tooltips appear on mouseover, and the chart includes axis labels and a categorical legend.

Loading thumbnail…

Activity 6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with highway MPG and its color distinguishes the car brand. The visualization uses D3 v7 with SVG rendering and includes interactive tooltips that display the car make on hover. A legend shows the bubble-size scale for MPG values and color-coded dots for each manufacturer. The chart reads from a CSV dataset and employs the `d3.scaleOrdinal` and `d3.scaleLinear` APIs for color and size encoding.

Loading thumbnail…

Activity 6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with highway MPG and its color distinguishes the car brand. The visualization uses D3 v7 with SVG rendering and includes interactive tooltips that display the car make on hover. A legend shows the bubble-size scale for MPG values and color-coded dots for each manufacturer. The chart reads from a CSV dataset and employs the `d3.scaleOrdinal` and `d3.scaleLinear` APIs for color and size encoding.

Loading thumbnail…

Activity 6_Task 3 Question

This scatter plot visualizes employee health data by plotting cholesterol level against body mass index, with each point colored and shaped to distinguish between healthy and unhealthy health statuses. The visualization uses D3.js v7 with SVG rendering, where the x-axis represents cholesterol levels and the y-axis represents BMI. The code employs d3.scaleLinear for axis scaling, d3.symbol with different symbol types for the two health categories, and d3.axisBottom/axisLeft for the axes. A custom tooltip displays additional attributes like age and blood pressure on hover, with data loaded from a remote CSV file. The legend identifies the healthy and unhealthy categories using distinct colors and shapes.

Loading thumbnail…

Activity 6_Task 3.2

This interactive scatter plot visualizes the relationship between sepal length (x-axis) and petal length (y-axis) for 150 iris flowers, using distinct shapes to differentiate the three iris species. The visualization employs D3’s `scaleLinear` for continuous axes, `scaleOrdinal` with `symbolsFill` to map species to shapes, and custom axes and legend modules. It uses D3’s `csvParse` to load the Iris dataset, and the `symbol` API generates the scatter plot markers and legend symbols. The rendering is implemented with D3’s join pattern to efficiently create and update SVG elements.

Loading thumbnail…

Activity 6_Task 3.1

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and petal width across three Iris species. The visualization uses D3.js (v7) to render SVG circles colored by species, with axes labeled in centimeters and a legend identifying each species. Hovering over a data point enlarges the circle and displays a tooltip with the exact measurements and species name. The code loads CSV data from a GitHub gist and uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and d3.axisBottom/d3.axisLeft for the coordinate axes.

Loading thumbnail…

Activity 6_Task 2 Question

This stacked bar chart shows the percentage distribution of sales across four product categories—Books, Toys, Kitchenware, and Sports—broken down by the North, South, East, and West regions. Using d3.stack and d3.scaleOrdinal, the SVG visualization groups color-coded segments for each region, with axes formatted as percentages and a legend identifying region colors. The data comes from a hardcoded JavaScript array, rendered with d3.axisBottom and d3.axisLeft, and includes interactive tooltips via appended title elements.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" on a percentage scale. The visualization uses d3.stack() to compute the stacked segments, d3.scaleBand() for the genre categories, and d3.scaleLinear() for the percentage axis. Hovering over a segment reveals the exact percentage for that rating category via a tooltip. Data comes from a CSV file containing genre-by-rating percentage values.

Loading thumbnail…

Activity 6_Q2

A horizontal bar chart displays the 2010 populations of the top 20 countries, sorted from largest to smallest. The visualization uses a D3 scaleBand for the categorical y-axis and a scaleLinear for the numerical x-axis, with population values formatted using the D3 `format` function to abbreviate large numbers. React functional components render the SVG axes and marks, with a native SVG `<title>` element providing hover tooltips. Data is loaded asynchronously from a CSV file via the `d3.csv` method, filtering and sorting the dataset before rendering the bars.

Loading thumbnail…

Activity 6_Q1

This visualization shows the top 10 most populous countries in the year 2000 as a horizontal bar chart, using a React component structure with D3 v5 for data processing and SVG rendering. The code downloads CSV data via `d3.csv`, parses the population column, and sorts to select the top 10 countries. React renders SVG elements including axes (`AxisBottom`, `AxisLeft`) and rectangle marks (`Marks`), with D3’s `scaleBand` and `scaleLinear` mapping countries and population values, and a tooltip showing formatted population via `d3.format`.

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name, using SVG rendered via React. The chart loads CSV data from a GitHub gist, multiplies the 2020 value by 1000, and maps it to a linear scale, while countries are positioned with a band scale. Axes are built with custom React components (AxisBottom, AxisLeft), and a marks component renders each bar with a native tooltip. The code uses d3.scaleBand, d3.scaleLinear, and d3.format for tick labels.

Loading thumbnail…

activity 6_Q1

A horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order. The chart uses React components with D3 v7 scales (d3.scaleLinear and d3.scaleBand) to map population values and country names to SVG rectangles. Data is fetched from a CSV file via d3.csv, with a fallback dataset if the fetch fails. Axes show population in millions, and the bars use a teal fill with rounded corners.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order. The visualization uses a linear x-scale for population values and a band y-scale for country names, with teal bars rendered as SVG rectangles in a React component. Data is loaded via `d3.csvParse` from a GitHub gist, with axis ticks formatted in millions. The code demonstrates React state management with `useState` and `useEffect` hooks alongside D3’s `scaleLinear` and `scaleBand` APIs.

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart of population data for several countries, sorted by the categorical country field on the y-axis and using a quantitative population scale on the x-axis. The visualization renders rectangles as bars, with their height fixed to the band width of the categorical scale and their width proportional to the population values. The implementation relies on D3.js functions such as `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand` to construct the axes and layout. The data is fetched from a URL via `fetch` and processed in a `useData` helper function, though the chart itself is drawn using standard SVG `rect` elements appended through a `join` operation. The code demonstrates a basic bar-chart construction with explicit scaling and axis generation.

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population in 2000 for the ten most populous countries, sorted in descending order. The visualization uses D3 v7 to load CSV data via `d3.csv` with `autoType`, and renders horizontal bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with tick labels formatted using `d3.format('~s')`. The SVG output is styled with Poppins font and palegreen bars.

Loading thumbnail…

activity 6_Task 1

This visualization is a horizontal bar chart showing the population of each country in 2020. The bars are rendered as pale green rectangles using D3’s `scaleLinear` for the x-axis and a band scale for the y-axis, with axis components built from custom `AxisBottom` and `AxisLeft` modules. Data is loaded asynchronously from a CSV file via `d3.csv` with `autoType` to infer numeric values. The chart uses an SVG rendering approach with a Poppins font and lightsteelblue tick marks, updating the display by removing and redrawing all elements on each data load.

Loading thumbnail…

Activity-7_Question-2

This area chart displays monthly temperature trends in New York City from 2015 to 2023, revealing a clear seasonal pattern with warm summers and cold winters. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.area` with a monotone X curve to create the smooth filled region. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse` for the monthly dates.

Loading thumbnail…

Activity-7.1_Q1

This D3.js visualization displays global smartphone market share as a pie chart, showing the proportion of users for each brand. The chart uses a custom color palette to distinguish brands and includes a legend listing each brand alongside its corresponding color. The code aggregates user counts by brand using `d3.rollup` and `d3.sum`, then renders the pie with `d3.pie` and `d3.arc` within an SVG. A custom `pieChart` function provides a fluent API for setting dimensions, data, and labels, making the chart configurable. The data is loaded from a remote CSV file containing smartphone usage statistics.

Loading thumbnail…

Activity6_Task2

This visualization shows the distribution of IMDb movie ratings across seven genres, using a stacked horizontal bar chart where each bar segment represents the proportion of movies falling into five rating categories from "below 5.0" to "above 8.5." The chart uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` with a custom color palette, rendering as SVG with axes from `d3.axisBottom` and `d3.axisLeft`. Interactive tooltips display exact percentages on mouseover, and the data comes from a CSV file with genre-proportion pairs.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart ranks countries by their 2020 population, with bars sorted in descending order and displayed with a steelblue fill. The visualization uses a D3.js scaleBand for the categorical y-axis and a scaleLinear for the numeric x-axis, with the bottom axis formatted to abbreviate large numbers (e.g., billions as "B"). The React-based code loads CSV data via `d3.csv`, converts the population field to numbers, sorts it, and renders the chart using React.createElement for SVG elements, styled with the Poppins font and a custom margin layout.

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the populations of the top thirty most populous countries for 2020. Constructed with D3.js v6, the visualization sorts data in descending order and renders it as an SVG. Horizontal bars and axes are generated using D3's scaleBand and scaleLinear, with axes crafted via axisBottom and axisLeft. The data is loaded from a remote CSV file.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the 2020 populations of the first 30 countries from a CSV file fetched via `d3.csv`. Rendered as an SVG using React, the visualization maps country names on the y-axis using `d3.scaleBand` and population values on the x-axis via `d3.scaleLinear`. Light green bars represent each nation’s population, with axis ticks generated by custom `AxisBottom` and `AxisLeft` components. The chart’s x-axis labels are formatted in millions, and the data loading handles asynchronous fetching with `useData`.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, using light-green bars sorted by country name. The visualization is built with React and SVG, and leverages D3.js scale functions (`scaleLinear` and `scaleBand`) to map population values and country categories to pixel coordinates. The data is loaded from a remote CSV using D3's `csv` method, with axes rendered by custom `AxisBottom` and `AxisLeft` components.

Loading thumbnail…

activity 6_Task 1

This example shows a minimal React-based scatterplot built with D3.js v5, rendering green circular marks along an axes grid. The visualization uses d3-selection to append SVG elements, with blue tick lines and gray tick labels styled via CSS. The chart displays data points positioned through linear scales, though the underlying data file is not explicitly referenced in the visible code. The page includes a header message, and the rendering approach relies on React’s production build alongside D3’s modular API for DOM manipulation.