rishithagovini99@gmail.com

Analyzing crash data by operator

Survival rates in airplane crash

Fork of Circles with D3

This example renders a set of seven translucent, colorful circles on a light green SVG background, each with a fixed position, radius, and hex color. The visualization, built with D3 v3, uses the `select`, `selectAll`, `data`, and `join` methods within an `index.js` module to bind an array of circle objects to SVG `<circle>` elements. It sets the `cx`, `cy`, `r`, `fill`, and `opacity` attributes directly, with a uniform opacity value of 0.708. The layout is static, with no interaction or animation, and the data is hardcoded in the script.

Area chart

This area chart displays Nike Runner sales from 2000 to 2024, with the x-axis representing time and the y-axis showing sales volume. The visualization uses D3 v6 to load CSV data from a GitHub repository, employing `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` to render a steelblue filled path. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while SVG text elements label the chart title, x-axis ("Year"), and y-axis ("Sales"). The data is parsed with `d3.timeParse` before being passed to the area generator.

Piechart_Assignment2

This example shows the distribution of wind speeds across cities using a pie chart, categorizing values into three ranges: 0-10, 10-15, and above 15. The visualization loads a CSV dataset from a GitHub repository using `fetch` and `d3.csvParse`, then aggregates the data. It renders an SVG pie chart with `d3.pie()` and `d3.arc()`, applying custom colors via `d3.scaleOrdinal`. Labels are placed at arc centroids using `path.centroid`, and an HTML legend is built dynamically beneath the chart.

Activity6_Question4

This animated bubble chart visualizes the relationship between runs scored, lifespan, and medals won for ten named players. Each circle’s x-position corresponds to runs, y-position to lifespan, while its radius encodes medals won and its color identifies the player. Built with D3 v7, the chart reads from a local CSV and renders as SVG, featuring interactive tooltips on hover that display the player’s exact stats. A categorical color legend maps each player to a distinct hue, and all axes are labeled with linear scales.

Activity6_Task3

This D3.js visualization displays the Iris dataset as a scatter plot, mapping sepal and petal dimensions for three iris species. The plot uses colored circles to represent each sample, with petal length and width for positioning while also encoding sepal measurements. The code loads the dataset via the `d3.csv` API, applies `d3.scaleLinear` for axis scaling, and renders with SVG. The chart includes axes, a title, and uses a color-coded legend for species.

Activity6_Task3.2

Activity6_Question3.2

A scatter plot displays World Cup cricket records, mapping total matches on the x-axis against runs scored on the y-axis for each player. Point shapes vary by country using d3.symbol with an ordinal scale, encoding nationality through distinct geometric forms. The visualization uses d3.csv to load external data, d3.scaleLinear for axes, and renders an SVG with axisBottom and axisLeft for reference.

Activity6_Question3.1

Activity6_Question2

This stacked bar chart shows the percentage distribution of five rating levels across seven restaurants, using horizontally oriented bars where each segment represents a rating category. The visualization employs d3.stack() to compute stacked series from CSV data, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Color encoding via d3.scaleOrdinal distinguishes rating bins, while mouseover events trigger tooltip displays showing exact percentage values. The SVG rendering includes axis labels, a title, and grid lines, with data sourced from dataQ2.csv.

Activity6_population2

Activity6_population

This bar chart displays the population of ten countries in the year 2000, with horizontal bars representing each nation’s population size. The visualization uses React to render SVG elements, while D3 v5 handles data loading, scaling, and axis generation through `scaleBand`, `scaleLinear`, and custom `AxisBottom` and `AxisLeft` components. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format`, and displayed with tooltips showing the precise figures.

Activity 6

This visualization displays the populations of 30 countries in 2020 using a horizontal bar chart, where each bar represents a country and its length is proportional to the population value. The chart includes labeled axes for countries and population, with population values formatted in a compact notation (e.g., "B" for billions). The visualization is built using React and D3 v5, with D3's `scaleBand` and `scaleLinear` functions handling the categorical and numerical scales. SVG rectangles are used to render the bars, and tooltips provide exact population values on hover. The data is loaded from a remote CSV file and processed using D3's `csv` function.

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across various car makes. The x-axis shows horsepower, the y-axis torque, and bubble size encodes highway MPG, with colors representing different manufacturers. Built with d3.v7, it uses scaleLinear for axes and bubble sizing, scaleOrdinal with interpolateTurbo for color mapping, and includes interactive tooltips via mouseover events. A legend displays the bubble size scale and color categories. Data comes from the included bubblechart.csv file.

Activity6_Q2.3

This stacked bar chart displays the percentage distribution of IMDb rating levels (below 5.0 to above 8.5) across six movie genres. The horizontal bars show proportions totaling 100% for each genre, with hover interactions triggering tooltips that reveal exact percentages per rating category. Using D3 v7's `d3.stack()` and `scaleOrdinal`, the visualization renders SVG rectangles with color-coded segments. The data from `data.csv` is mapped to a linear x-scale and band y-scale, while the legend and axis labels clarify the rating groups and percentage values.

Activity6_Task2

This stacked bar chart shows the percentage of IMDb ratings within each movie genre, highlighting how rating distributions vary across Documentary, Drama, Comedy, Romance, Animation, and Action. Each genre’s horizontal bar is divided into five rating-level segments, with hover pop-ups displaying exact percentages. Built with d3.v7 and rendered as SVG, the visualization uses d3.stack() to compute stacked series, d3.scaleOrdinal for color encoding, d3.scaleBand for genres, and d3.scaleLinear for percentages. The data is loaded from a CSV file containing genre and rating-level proportions.

Activity6_Task2

This example demonstrates a minimal D3.js visualization that renders a static text message centered on a webpage. The code imports the `select` function from D3 to target the HTML element with the id `message`, then sets its text content using a string imported from a local ES6 module, `myMessage.js`. The styling is handled entirely through an external CSS file, which sets the font size and alignment. The visualization relies on D3 v5 loaded via UNPKG, and the rendering approach is a simple DOM text update rather than a graphical chart.

Activity 6

Fork of 6 Buddhas

The visualization displays six overlapping Buddha silhouettes, each rendered as a violet-filled SVG path with a white stroke, creating a layered, translucent composition. The paths are rotated and scaled within separate `<g>` groups, producing a stacked, almost mandala-like arrangement against a background image of green flowers. It uses React and ReactDOM to construct the SVG scene, with the Buddha shape defined by a long, encoded path string. The code includes a cubic function and an array, but these do not visibly affect the drawing.

6 Buddhas

The visualization displays six faceless Buddha figures, each formed by a single continuous, intricate path. The paths are drawn with a thick black stroke on a black background, making the shapes visible through the contrast of their outlines. The artwork is a fork of an original piece, rendered in a web browser using React and ReactDOM. The code generates the SVG elements dynamically, mapping arrays to create circles and the complex Buddha path data, which is manually defined within the source.

5 Buddhas

The visualization presents five overlapping Buddha silhouettes rendered in vibrant, randomized colors against a black background. It uses React to structure the SVG scene, layering multiple copies of the same path shape with varying transformations. The code generates thousands of small, randomly positioned polygons with `Math.random()`-based coordinates and fill values, while React maps over nested arrays to produce the visual complexity. The primary Buddha path is drawn using an SVG `path` element, scaled and translated to compose the meditative composition.