jampani921@gmail.com

DV_project_phase_3

This visualization displays the change in worker counts for various companies from 2014 INC data, using vertical bars colored in steel blue. Hovering over a bar turns it dark orange and triggers a tooltip showing the company name and worker difference. The chart is built with D3.js v7, using `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rects for bars, with tooltip interactivity controlled through mouse events and CSS opacity transitions.

Fork of Pie Chart

This example displays mortality rates across US states using a pie chart, with each slice representing a state’s death count and a legend listing state names alongside their numeric values. It loads CSV data from a GitHub gist, parses it with the `csv` function from D3 v5, and renders the chart as SVG. The visualization uses `pie` to compute slice angles, `arc` to generate path geometry, and `scaleOrdinal` to map states to a fixed color palette. Slice labels are positioned using `arc.centroid`, and the legend is built manually with appended `rect` and `text` elements.

Activity-7.1_Q2

A mobile phone price area chart visualizes monthly cost trends over time. The D3 v5 code (using `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis`) renders smooth lines and gray shaded regions beneath them, with labeled axes for month and cost. Data is loaded from a CSV file via `csv` and parsed with `d3.timeParse`. Axes include gridlines via `tickSize`, and the SVG output uses styled paths with bold tick labels.

Activity-7.1_Q1

This D3.js pie chart visualizes year-to-date auto sales by brand, with a legend conveying each brand’s percentage share and sales in thousands. Built with D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()`, it loads CSV data from a GitHub gist via the `csv()` function. The SVG rendering uses a categorical color palette and fixed positioning for the chart and legend.

Activity_7.1

This pie chart visualizes the distribution of total sales across product categories from an autosales CSV dataset, with each slice’s percentage and value in thousands shown in a side legend. The chart uses D3 v7’s `pie` and `arc` generators to compute and draw the segments, while `scaleOrdinal` assigns distinct colors. Data is loaded asynchronously via `d3.csv`, and sales strings are cleaned by removing dollar signs and commas before calculating totals and percentages.

Activity7.1

Activity 6_question4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 20 car makes. Each bubble’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and make respectively. Built with d3.v7, it renders scalable vector graphics (SVG) circles with a black tooltip that appears on mouseover showing the make. The visualization employs d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for scales and color, with static legends for size and categorical colors.

Activity 6_task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes, with each bubble representing a make. The chart plots horsepower on the x-axis and torque on the y-axis, while bubble size encodes highway MPG and color distinguishes car brands. Built with D3 v7, the visualization includes an SVG-based tooltip that displays the make name on mouseover, along with a size legend for MPG values and color legend for brands. Data comes from a CSV file, and the tooltip responds to mouse events for interactive exploration.

Activity 6_task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across various car makes, with each circle's position representing horsepower and torque, its size encoding MPG, and its color distinguishing the manufacturer. Built with D3 v7, the visualization uses scales like `d3.scaleLinear` for axes and bubble radius, and `d3.scaleOrdinal` with an interpolated Turbo colormap for categorical colors. Interactive tooltips appear on mouseover, and a legend displays both the MPG size scale and color categories. Data comes from the `bubblechart.csv` file, rendered as SVG elements with animated opacity transitions.

Activity 6_question 3_task 1

A scatter plot visualizes wine quality against free and total sulfur dioxide concentrations. Each point uses a distinct color and shape to encode wine quality ratings from 1 to 10, with a legend mapping symbols to quality levels. The visualization loads a CSV from a GitHub repository, processes the data, and renders an SVG using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` for custom point markers defined per quality value.

Fork of Activity 6_task 1

This example shows a horizontal bar chart comparing population sizes across 30 countries for the year 2020. The visualization loads data from a CSV file using the `useData` hook and `d3.csv`, then renders the bars with SVG rectangles in a React component. The chart includes labeled axes with formatted tick values using `d3.format`, a title, and a tooltip that displays each country's population on hover. The code demonstrates the integration of React with D3 scales such as `scaleBand` and `scaleLinear`, along with reusable axis and mark components.

Activity 6_task 3

This scatter plot visualizes the Iris dataset, showing petal length against petal width for individual flowers, with points colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV, map values to screen coordinates, and render an SVG with labeled axes. Each circle’s radius is fixed at five pixels, though the code also computes sepal dimensions as additional metadata.

Activity 6_task 3.2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. Each data point appears as a distinct symbol shape corresponding to the iris species, with a legend identifying the species categories. The implementation uses D3 v7 APIs including `scaleLinear` for axes, `scaleOrdinal` for shape encoding, `symbol` for rendering marks, and asynchronous `csvParse` to load data from a remote CSV file. Custom modules handle axis generation and the shape legend with pattern-matched transitions.

Fork of Activity 6_Question 2_task 1

A stacked bar chart shows the percentage distribution of movie ratings across seven gaming genres, with five rating tiers ranging from "Below5.0" to "Above8.5." Hovering over any bar segment displays a tooltip with the exact percentage for that genre and rating level. The visualization uses d3.csv to load data, d3.stack for stacking, d3.scaleBand and d3.scaleLinear for axes, and d3.scaleOrdinal for color mapping. An interactive legend and a bottom axis labeled "Percentage" support the chart.

Fork of Activity 6_Question 2_task 1

This stacked bar chart shows the percentage distribution of movie ratings across seven gaming genres, with each bar segment representing a rating band from “Below 5.0” to “Above 8.5.” The visualization makes the impact of genre on ratings immediately apparent, such as Simulation’s relatively higher share of top ratings. Hovering over any segment reveals an exact percentage via a tooltip. The chart uses D3 v7’s `d3.stack` and `scaleBand` to position the bars, with data loaded from a local CSV file and rendered as SVG elements with interactive mouse events.

Activity 6_task 2

This stacked bar chart visualizes the impact of movie genre on IMDb ratings, with horizontal bars representing the proportion of films in each rating category per genre. The chart uses D3 v7 with the `d3.stack()` API to create stacked segments, `d3.scaleOrdinal()` for color encoding, and `d3.scaleBand()` for genre positioning. Interactive tooltips display precise rating percentages on hover via mouse events. Data comes from a local CSV file containing genre and rating distribution percentages.

Activity 6_task 2

A stacked bar chart displays the distribution of IMDb ratings across six movie genres, with proportions segmented into five rating bands from below 5.0 to above 8.5. The visualization uses d3.stack and d3.scaleOrdinal to aggregate the CSV data, rendering horizontal bars with an SVG. Interactive tooltips, implemented via mouse events and appended HTML divs, show exact percentages for each genre-rating combination on hover. d3.axisBottom and d3.axisLeft structure the percentage and genre axes.

Fork of Activity 6_Question1_task2

This visualization shows a horizontal bar chart comparing the populations of 20 countries in 2010. Each bar’s length corresponds to the population value, with a blue axis line and tick marks, green bars, and a labeled x-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while the `csv` function loads data from a remote GitHub URL. Tooltips display formatted population values via the `format` function.

Fork of Activity 6_Question1_task1

This interactive bar chart displays the 2000 population figures for ten countries, using a horizontal layout with blue tick lines and green bars. Built with React and D3 v5, it loads CSV data from a GitHub repository and renders the chart as SVG. The visualization uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components handling the drawing. Native SVG `<title>` elements provide tooltips, while tick formatting converts raw numbers into abbreviated units like "B" for billions.

Activity 6_task 1

This example displays a horizontal bar chart ranking the populations of up to 30 countries for the year 2020, using green bars with blue axis ticks. The visualization is rendered as an SVG within a React application, leveraging D3 v5 methods such as `scaleBand`, `scaleLinear`, and `csv` to fetch and format data from a remote GitHub dataset. The code demonstrates modular imports from D3 and local ES6 modules, and tooltips appear on hover via a `<title>` element.

6 Buddha

The visualization displays six overlapping Buddha silhouettes, each rendered as a violet SVG path with a white stroke, positioned across a 960 by 1000 canvas and set against a floral background image. Built with React and ReactDOM, the SVG paths use predefined coordinate data that is scaled and translated via transform attributes to create the layered composition, with the background loaded from an external CSS URL.

5 Buddhas

Five Buddhas is a generative SVG artwork built with React, creating a dense, overlapping composition of 8000 randomly placed polygons. The piece uses nested `Array.map` calls to generate a chaotic field of rotated, semi-transparent shapes with randomly assigned RGB colors, layered to form a vibrant, abstract field. A single detailed Buddha path is overlaid at the center, scaled and translated, contrasting organic linework against the geometric noise. The visualization leverages React and ReactDOM to declaratively render all SVG elements, with randomness sourced from `Math.random()` for both position, color, and rotation values.