penumutchu.manobhiram@gmail.com

TASK9_QUESTION2

This example displays an area chart that visualizes the relationship between height (in feet) on the x-axis and the number of people on the y-axis. The code loads a CSV dataset from a GitHub URL using d3.csv, parses numeric fields, and renders an SVG chart with linear scales for both axes. A gradient-filled area path is generated using d3.area, with axis labels added via d3.axisBottom and d3.axisLeft. The visualization uses D3 v7 and custom CSS styling for the chart container.

Apr 22, 2024

QUESTION1_TASK9

This visualization displays a pie chart representing the population of various U.S. states, with each slice labeled in millions and accompanied by a legend. The code uses D3 v5 within VizHub, loading data from a CSV via `d3.csv`, then rendering arcs with `d3.arc` and `pie()` to generate segments. Colors are assigned through `scaleOrdinal`, and the SVG output includes interactive text and legend elements. The example demonstrates the use of local ES6 modules and D3 imports from UNPKG.

Apr 22, 2024

TASK-9

An animated scatterplot of the Iris flower dataset cycles through four measurement axes every few seconds. The visualization uses D3 v6 to load CSV data and render SVG circles colored by species (setosa, versicolor, virginica). A reusable `scatterPlot` module builds scales and axes via `scaleLinear`, `axisLeft`, and `axisBottom`. The code updates the x-axis mapping with `setInterval` while preserving a legend and rotating axis labels.

Apr 21, 2024

2_Question

This example visualizes car brand specifications as a stacked bar chart, where each bar represents a vehicle make and is divided into three colored segments for horsepower, torque, and highway MPG. The chart uses d3.stack() to compute stacked series from the CSV data, with d3.scaleBand positioning makes along the y-axis and d3.scaleLinear mapping values to the x-axis. Hovering over any segment triggers a tooltip displaying the specific spec type and value, while the chart includes axes with labels and a title rendered using SVG.

Apr 11, 2024

4_Question

This interactive bubble chart visualizes the correlation between sepal length, sepal width, and petal length for three iris species. Circles are positioned by sepal dimensions, with size and color encoding petal length and species. The visualization uses D3.js v7 with SVG rendering, scaling axes, and a tooltip that appears on hover. A legend identifies species colors, and the code demonstrates local ES6 module imports alongside D3’s CSV data loading and scale functions.

Apr 11, 2024

3_Question

A scatter plot displays car information from a CSV file, with horsepower on the x-axis, torque on the y-axis, and highway MPG encoded as circle radius. Data points are colored by vehicle make using `d3.scaleOrdinal` with `schemeCategory10`, and each point is labeled with its make. The visualization loads data asynchronously via `d3.csv` and renders axes with `d3.axisBottom` and `d3.axisLeft`. HTML text elements provide axis labels and a title.

Activity6_Task2

This example displays a stacked bar chart of IMDb movie ratings across six genres, showing the percentage distribution of ratings within categories such as below 5.0, 5.0-6.5, and up to above 8.5. The visualization reads from a CSV file and uses d3.stack, d3.scaleOrdinal, d3.scaleBand, and d3.axisBottom to render the SVG. Each rectangle responds to mouseover events, displaying a tooltip with the exact percentage for that genre and rating bracket. The chart includes a title, axis labels, and a color legend.

Activity6_Task-1

This interactive horizontal bar chart displays the 2010 population estimates for a selection of countries, ranked along the y-axis with bars extending along the x-axis. It uses React to render an SVG graphic, built on D3 v5. The chart fetches its data from a CSV file via `d3.csv`, using `d3.scaleBand` and `d3.scaleLinear` to map country names and population values. Bar tooltips and axis labels are formatted with `d3.format`'s `.2s` notation, converting values like 'G' to 'B'.

Activity6_Task1

This horizontal bar chart displays the population of ten countries for the year 2000, sorted alphabetically. Using React and D3 v5, the chart renders SVG bars via scaleBand and scaleLinear, with axis components built from D3’s tick and scale utilities. Population values are loaded from a remote CSV file, formatted using d3.format, and displayed with native tooltips.

Activity6_TasK1

This visualization displays the 30 most populous countries in 2020 as a horizontal bar chart. It loads population data from a GitHub-hosted CSV file, with population values computed by multiplying the '2020' column by 1000. The chart is rendered using React and D3 v5, with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.format for axis tick labels. SVG rectangles represent each bar, and tooltips show formatted population values.

Apr 9, 2024

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each bubble’s position encodes horsepower and torque on the x- and y-axes, while its size encodes highway MPG. A color scale and legend map makes to distinct hues. Built with D3 v7, the SVG visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo`, with interactive tooltips on hover. Data comes from the local `bubblechart.csv` file.

Activity6_Task_3.2

This example demonstrates a scatter plot that visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis while using different symbol shapes to distinguish species. The visualization is built with D3 v7, importing specific functions like `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft` from the d3 module. Data loads asynchronously from a CSV file hosted on GitHub, is parsed with `csvParse`, and rendered as SVG paths. A custom legend module shows the shape-to-species mapping, with axes and labels added programmatically.

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x- and y-axes while coloring each point by species. It uses D3 v6’s `select`, `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to load the data, compute scales, and render SVG circles with per-species fill colors. The chart also labels axes with petal and sepal measurements, showing relationships within the sample.

Question2

This example uses D3.js to create a stacked percentage bar chart that compares IMDb rating distributions across different genres, using country data as a categorical axis. The visualization calculates stacked proportions for each genre, with a color scale assigned to rating categories. D3’s stack and scaleOrdinal functions handle the data transformation and color mapping, while the SVG rendering uses axis and tooltip elements to show percentage values on hover.