Krishna.

Activity 7_Q1

This interactive pie chart displays the distribution of movie ratings (G, PG, PG-13, R) across different genres. A dropdown menu allows viewers to toggle between individual rating classes or their total, with each genre represented as a colored slice whose angle encodes the count. The visualization uses D3 v7 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG, while `d3.csv` fetches data from a remote gist. Hovering over a slice reveals a tooltip with the genre and exact value.

Nov 2, 2025

Activity 7

This scatter plot visualizes the Iris dataset, showing sepal width on the x-axis against sepal length on the y-axis. Each point represents a flower sample, colored by species using d3.scaleOrdinal with d3.schemeSet2, while tooltips display species and measurement details on mouseover. The code uses d3.axisBottom and d3.axisLeft for axes, d3.extent for domain calculation, and loads data from a CSV file fetched via URL. Point markers are rendered as SVG circles with interactive event handlers.

Nov 2, 2025

Scatter Plot (Bubble Chart) with Custom Dataset

This bubble chart visualizes the relationship between horsepower and highway MPG for a custom car dataset, with circle size encoding torque. The visualization uses D3 v7 with an SVG rendering approach, loading CSV data from a gist URL. It employs d3.scaleLinear for both x and y axes, d3.scaleSqrt for bubble sizing, and d3.csv with d3.autoType for data parsing. Grid lines are generated using d3.axisBottom and d3.axisLeft with tickSize, while interactive tooltips are provided through SVG title elements on hover.

Scatter Plot with Color and Size

This scatter plot visualizes the Iris dataset, displaying petal length and width on the x- and y-axes while encoding sepal length through point size and species through color. The D3 v7 code uses `d3.csv` with `d3.autoType` to load data, then `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and `d3.scaleSqrt` to map a third continuous variable to circle radius. Hover tooltips provide exact values for all four measurements per flower.

Scatter Plots (Iris)

This example visualizes the classic Iris dataset, plotting sepal length against sepal width. Each dot is color-coded by species using D3's `scaleOrdinal`, with hover tooltips revealing exact measurements. The SVG chart is built with D3 v7, using `csv` and `autoType` to load and parse the remote data, `scaleLinear` for axes, and `axisBottom`/`axisLeft` for tick marks. The plot updates responsively to its container width, and the `title` element provides interactive detail.

Stacked Bar Chart (ratings by genre)

This example shows a 100% stacked bar chart of movie ratings (G, PG, PG-13, R) by genre, where each bar represents the proportion of ratings within a genre. The chart uses d3.csv with d3.autoType to load data, then normalizes counts to percentages and builds horizontal stacks via d3.scaleBand, d3.scaleLinear, and d3.stack. Rectangles are rendered in SVG with d3.select and .join, and axes are created with d3.axisBottom and d3.axisLeft, while a legend uses d3.scaleOrdinal for colors.

Bar Chart: Population of 20 countries in 2010

A horizontal bar chart ranks the 20 most populous countries in 2010, with each bar’s length proportional to population. The chart uses D3 v7’s `scaleLinear` and `scaleBand` to map population values and country names to pixels. Data is loaded from a CSV via `d3.csv`, processed with `d3.autoType`, and sorted using `d3.descending`. Bars are rendered as SVG `<rect>` elements with a hover color change, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Bar Chart

A horizontal bar chart displays the top 10 countries by population in the year 2000, with bars extending from a zero baseline. The chart loads a CSV dataset from a GitHub gist and uses D3 v7 to parse the data, sort it in descending order, and render the bars as SVG rectangles using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Hovering over a bar changes its fill color.

6 Buddha

Six Buddha renders a decorative arrangement of lotus-flower line drawings, each defined by a complex SVG path outlining the petals. Built with React and rendered as SVG, the visualization duplicates the same path data across multiple `<g>` groups, each positioned and scaled via distinct `transform` attributes to create a repeating pattern. The code uses React’s declarative `App` component and `ReactDOM` to inject the graphic, with the original path coordinates hardcoded in the `d` attribute, layered with stroke and fill styling for a bold, monochrome look.

Sep 30, 2025

ICE 7 - Question 3

This area chart shows the number of movie releases per year from 2010 to 2023, highlighting a noticeable drop in 2020. It uses D3.js v6 with SVG rendering, employing `d3.area()` and `d3.line()` with `d3.curveMonotoneX` to create a smooth filled area with an overlaid line. The chart includes circular data points, tick-formatted axes via `d3.axisBottom` and `d3.axisLeft`, and labels for both axes. The data is a hardcoded sample array of year-count pairs.

ICE 7 - Question 1

This interactive scatter plot visualizes the relationship between movie budgets and box office revenues, with points colored by genre. The visualization is built with D3.js v6 and uses a reusable scatterPlot function with configurable margins, scales, and labels. It employs d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for genre colors, and d3.axisBottom/axisLeft for ticks. Hovering over a circle triggers a tooltip that reveals the movie title, genre, budget, and revenue values.

ICE 7 - Question 2

A pie chart shows the distribution of movies across six genres, with each slice labeled and a legend displaying counts. The visualization is rendered as an SVG using D3 v6, employing `d3.pie()` to generate arc data and `d3.arc()` to draw the slices. Color encoding uses `d3.scaleOrdinal()` with `d3.schemeCategory10`. The code leverages D3's selection and data-binding methods to append paths and text, with labels positioned via arc centroids and a separate legend built from the input data array.

ICE-7-Assignment-7

This interactive scatter plot displays movie budgets versus box office revenue, with each circle colored by genre and featuring hover tooltips showing title, genre, and financial details. Built with D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and d3.axisBottom/axisLeft for tick marks. The reusable scatterPlot() function employs data joins and transition-based tooltip opacity changes. The animation aspect comes from interactive mouseover effects that enlarge circles and reveal rich metadata, rendering SVG elements within a bordered container.