ajaykumarakula00@gmail.com

activity8_task1

question-4

A bubble chart compares beverage manufacturers, plotting glucose levels along the x-axis against ratings on the y-axis. Each bubble’s radius represents calorie content, while its color identifies the manufacturer brand. The chart includes interactive tooltips on mouseover and a legend for both bubble size and color categories. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom` to render the SVG elements; the data is loaded from a CSV file and animated through hover transitions.

task-4

This animated bubble chart visualizes the correlation between engine torque, horsepower, and highway MPG across 31 car makes. Each circle encodes horsepower on the x-axis, torque on the y-axis, and highway MPG through both bubble size and color. The visualization uses D3.js (v7) with SVG rendering, featuring an interactive tooltip that displays the car make on hover. The code includes a legend for bubble size and categorical color mapping, with data loaded from a CSV file via `d3.csv`.

task-4

question-3

This example visualizes a scatter plot of height and weight data, with points colored by category using skyblue, lightgreen, and orange. The SVG rendering uses D3 v7 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to axes and draw circles. The code loads data from a GitHub Gist URL and applies a custom parsing function to convert numeric fields. Axis labels are styled with green Times New Roman text, and the plot fills the browser window.

TASK-3

This example demonstrates a scatter plot of the Iris dataset, showing sepal length against petal length with points shaped by species. The visualization loads the CSV data from a GitHub repository and uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render axes and points. A custom legend displays the three species using different symbol shapes, while the code exercises local ES6 module imports alongside D3’s bundled version. The chart rescales to fit the viewport dimensions on load.

question-2

A horizontal stacked bar chart displays the percentage distribution of product categories across rating levels, from "Below 4" to "Above 8," with each bar partitioned into colored segments. The visualization uses D3.js v7 to import data from a CSV file, applying `d3.stack` for cumulative bars, `d3.scaleBand` for the category axis, and `d3.scaleOrdinal` for color encoding. Interactive tooltips reveal exact percentages on hover, triggered by mouse events, while the SVG rendering includes custom axis labels and a legend.

activity8_task2

A stacked bar chart visualizes the proportional ratings of five movie genres (Action, Adventure, Comedy, Drama) across five rating categories (action, comedy, drama, thriller, horror). Each horizontal bar is segmented by category, with segment lengths proportional to the percentage values from a CSV file. The chart uses D3 v7’s stack, scaleOrdinal, scaleLinear, and scaleBand APIs, rendered as SVG rectangles with hover tooltips showing exact percentages. Axes are drawn with d3.axisLeft and d3.axisBottom, and the visualization includes a legend and title.

task-2

This example greets visitors with a bold, D3-powered message on a plain web page. It demonstrates modular JavaScript development within a D3 visualization environment by importing the `select` function from D3 v5 and a custom string from a local ES6 module. The page’s styling comes from an external CSS file, while the text content is rendered into a designated HTML div. The code highlights basic D3 DOM manipulation and local module imports without any data processing or complex charts.

task-2

ACTIVITY8_task1

This example displays a horizontal bar chart of country populations for 2020, with each country labeled on the y-axis and population values on the x-axis. The visualization uses React with D3 v5, employing d3.scaleBand for the categorical axis, d3.scaleLinear for the quantitative axis, and d3.format to abbreviate large numbers (e.g., converting billions to "B"). Data loads asynchronously via a custom useData hook, while custom AxisBottom, AxisLeft, and Marks components render the SVG elements. Styling includes green bars, blue tick lines, and a Poppins font family.

task-1

A horizontal bar chart ranks the population in 2020 for 30 countries, with bars extending from a common left baseline. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. `AxisBottom` and `AxisLeft` render tick marks and labels, while `Marks` draws SVG rectangles with tooltips. Data loads from a CSV via D3's `csv` function, with populations multiplied by 1000. The chart uses the Poppins font and custom CSS for styling.

question1.2

This example displays a horizontal bar chart of population data for 20 countries in 2010. The visualization uses React with D3 v5 scale functions, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The bars are rendered as SVG rectangles, with axes created through custom components that map D3 scales to JSX elements. The chart loads CSV data from a GitHub gist, formats population values using the D3 `format` function, and includes a tooltip showing the formatted value for each bar.

question.1.1

This example shows a horizontal bar chart of population data for ten countries in the year 2000, sorted by country name. The visualization uses D3 v5 scales and SVG rendering within a React component, with the AxisBottom and AxisLeft components generating ticks and the Marks component drawing each bar. Population values are formatted using D3’s `format` function with the suffix replaced from 'G' to 'B'. The data is loaded from a CSV file via D3’s `csv` function, and tooltips display the formatted population on hover.

ACTIVITY8_TASK1

This example displays a horizontal bar chart ranking the 2020 populations of 30 countries, drawn from a CSV file with D3’s `csv` loader. React components render SVG axes (`AxisBottom`, `AxisLeft`) and rectangle marks, with scales mapping population values to bar widths. D3 v5 provides the scale functions and tick formatting, while JSON tooltips on each bar reveal the exact population figure. The chart uses a simple, clean layout with labeled axes to compare relative population sizes across nations.