bharatchowdarypotluri@my.unt.edu

Activity 7.1 Question 1.1

This example shows a pie chart of programming language market shares, with percentage labels on each slice and a color-coded legend beside the chart. It loads data from a GitHub Gist URL using `d3.json`, then applies `d3.pie` and `d3.arc` to compute and draw the arcs as SVG paths. The visualization uses a `d3.scaleOrdinal` with `d3.schemeCategory10` for colors and positions legend items manually within the same SVG group.

Nov 7, 2024

Activity06 Question 4.9

This bubble chart visualizes the correlation between price, battery life, and weight for various smart devices. Each circle's x-position maps to price, the y-position to battery life, and the radius to weight, with color encoding the device brand. The visualization uses D3 v7 to create an SVG, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and `d3.axisBottom`/`d3.axisLeft` for axis ticks. Data is loaded from a local CSV file, and a legend explains the weight scale and brand colors.

Oct 25, 2024

Activity06_Task04

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, positioned by its horsepower and torque values, with bubble size encoding highway MPG and color distinguishing makes. The visualization uses D3.js v7 to create SVG elements with linear scales for axes and bubble sizing, an ordinal color scale, and interactive tooltips on mouseover. A legend shows both size categories and color-coded make labels. The data comes from the provided bubblechart.csv file.

Activity06 Question 3.6

This scatter plot visualizes the relationship between horsepower and highway MPG for vehicles, with each point colored by the vehicle's make. The visualization uses D3 v6 to load CSV data, apply linear scales for both axes, and render the plot as an SVG. Users can hover over individual points to see the make via a tooltip, which also highlights the selected point with a black border. The chart includes labeled axes for Highway MPG and Horsepower.

Activity06Task3.2

This example visualizes the Iris flower dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with different plant species distinguished by distinct filled symbols. The visualization uses D3.js v7, leveraging `scaleLinear` and `scaleOrdinal` to map data dimensions to chart coordinates and symbol shapes. It loads data from a remote CSV file, computes axis scales, and renders axes with labels via custom `axisLeft` and `axisBottom` utilities. A shape legend, generated using `symbol`, displays the species categories alongside the plot.

Activity06Task3.1

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates and render SVG circles with a fixed radius. Data is loaded asynchronously from a CSV file hosted on GitHub via `d3.csv`, with additional sepal measurements parsed but not directly plotted. The chart fills the browser window and includes rotated axis labels for clarity.

Activity06 Question 2.3

This stacked bar chart visualizes the distribution of IMDb-style movie ratings across six modes of transportation, with each bar segmented into five rating categories from “below 5.0” to “above 8.5.” Using D3 v7’s `d3.stack` and `d3.scaleBand`, the SVG rendering encodes each category’s proportion as a colored segment, with a legend inferred from the categorical color scale. Hovering over any segment triggers an opacity change and displays a tooltip showing the exact percentage, formatted via `d3.format`. The chart includes axes, gridlines, and titles, with data loaded from a local CSV file.

Activity06_Task02

A stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating bracket from "below 5.0" to "above 8.5." The visualization uses D3 v7's `d3.stack()` to compute stacked series from CSV data, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the categorical y-axis. Hover interactions trigger a tooltip showing the exact percentage for each genre-rating combination, rendered as SVG with axes formatted via `d3.axisLeft` and `d3.axisBottom`.

Activity06 Q.1.2

This example displays a horizontal bar chart of the top 20 countries by population in 2010, using a responsive SVG rendered through React. The code builds scales with d3.scaleBand and d3.scaleLinear, loads CSV data via d3.csv, and formats axis ticks with d3.format. Custom React components (AxisBottom, AxisLeft, Marks) generate the chart elements, with hover tooltips provided by SVG title tags.

Activity06 Q.1.1

A horizontal bar chart displays the populations of ten countries in the year 2000, sorted by country name. The chart uses React and D3 v5, with SVG rendering. Population values are loaded from a remote CSV file and formatted using D3’s `format` function, converting values to billions. The bar lengths encode population via `d3.scaleLinear`, while country categories use `d3.scaleBand`.

Activity06_Task01

This chart displays the 2020 population of 30 countries using a horizontal bar chart rendered with SVG. It loads data from a CSV file and asks the D3 module imports specialized functions like `scaleBand`, `scaleLinear`, `max`, and `format`, paired with a tick formatter that converts billions to a compact label. The React framework binds the data through a custom hook, while `AxisBottom`, `AxisLeft`, and `Marks` components generate the axes and green bars. Tooltips provide formatted population values on hover.

Fork of Activity06_Task01

This example shows a horizontal bar chart of the populations of 30 countries in 2020. It is rendered as SVG with React, using D3’s scaleBand for the categorical y-axis and scaleLinear for the x-axis. Axis ticks and tick labels are generated by custom components; the bars carry tooltips with formatted population values via a D3 `title` element. Data loads from a remote CSV using D3’s `csv` function.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Six overlapping Buddha silhouettes, rendered as violet SVG paths, overlap against a photographic background of green flowers. Each path is a scaled and translated copy of the same base shape, drawn with React and ReactDOM, using the `path` element's `d` attribute for geometry and `transform` for positioning. The repeated layers create a dense, colorful composition that visually echoes the source image of the flower field.

Oct 19, 2024