hemanthdummy999@gmail.com

Pie Chart - Task 9

This pie chart visualizes total sales across six product categories, with each slice representing a category’s contribution to overall revenue. The chart is rendered on an HTML canvas element using Chart.js, which fetches CSV data from a remote GitHub gist. The code parses the file, extracting item categories and total sales values, then applies semi-transparent background colors and a border width to each slice. The chart is non-responsive, with a fixed 400×400 canvas size, and includes a title displayed above the visualization.

Apr 21, 2024

Fork of Activity6_Task2

This example shows a stacked bar chart of U.S. state population data across six age groups, with bars sorted by total population. Hovering over a bar segment displays a tooltip with the age group name and its population value. The visualization uses D3 v3 to create SVG bars and axes, with ordinal and linear scales for positioning. Data is loaded from a CSV file, and color encoding distinguishes the age categories.

Apr 11, 2024

Activity6_Task4

This interactive D3 bubble chart visualizes global population data from a `countries.csv` file, representing each country as a circle whose radius encodes population via a square-root scale. Users can switch between grouping modes—combining all countries, grouping by continent, anchoring at country centers, or sorting by population—and toggle between color-coded continents and country flag patterns. The visualization leverages `d3.forceSimulation` for physics-based layout, with dynamic translation of the continent legend and animated transitions between groupings, all rendered as SVG with event-driven mouseover tooltips displaying country names and formatted population values.

Activity6_Tutorial4

This bubble chart shows the correlation between average horsepower and torque across car makes, with bubble size encoding highway MPG and color distinguishing each manufacturer. The visualization includes interactive tooltips that display the car make on hover, alongside legends for both bubble size and color categories. Built with D3.js v7, the chart uses SVG rendering with scaleLinear for axes and bubble sizing, scaleOrdinal for color mapping, and d3.csv to load the dataset.

Activity6_Task3

A scatter plot of cereal nutritional data maps calories on the x-axis against protein content on the y-axis. Each dot represents a cereal type, colored by manufacturer, with a tooltip showing the cereal name and values on hover. The visualization uses D3 v3 scales, axes, and SVG circles, with data loaded from a local CSV file.

Activity6_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each point’s color encodes the iris species (setosa, versicolor, or virginica), while the sepal length and width are additionally used to scale each circle’s rx and ry attributes, creating elliptical markers. The code loads CSV data via `d3.csv`, uses `scaleLinear` with `extent` to set domains, and renders the visualization as SVG circles with `d3.axisLeft` and `d3.axisBottom` for labeled axes.

Activity6_Tutorial3.2

A scatter plot displays Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by shape. The chart loads CSV data via `fetch` and `csvParse`, then renders it using d3.v7 scales and symbols. It includes axes from `axisBottom` and `axisLeft`, plus a custom shape legend built with `scaleOrdinal` and `symbol` generators.

Activity6_Task2

This stacked bar chart visualizes IMDb movie rating distributions across six genres, with each bar segment representing the percentage of movies falling into rating brackets from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack()` to create the stacked layout, `d3.scaleBand()` for the genre axis, and `d3.scaleOrdinal()` with a custom color palette. Interactive tooltips appear on mouseover to display exact percentage values, formatted using `d3.format()`. The visualization is rendered as an SVG, with margins, axis labels, and styling defined via external CSS.

Fork of Fork of Activity 6_Task 1

This example displays a horizontal bar chart of the top 20 countries by 2010 population, using a CSV file loaded via `d3.csv`. It shows a population bar chart with a formatted x-axis that converts values to billions (e.g., "B") using `d3.format`. The visualization is built with React components (e.g., `AxisBottom`, `AxisLeft`, `Marks`) and renders SVGs using `d3.scaleBand` and `d3.scaleLinear`. The bars are styled with a light green fill (`#90ee90`), and hover tooltips are provided by SVG `<title>` elements.

Fork of Activity 6_Task 1

This interactive bar chart displays the population of the top 10 countries in the year 2000, with each country represented by a horizontal bar. The visualization uses a React framework with D3 v5 to render SVG elements. The code employs `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the CSV data is loaded asynchronously via `csv`. The chart features customizable axis components, a green color fill for bars, and tooltips showing population values formatted in SI notation.

Activity 6_Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, with green bars and blue axis ticks on an SVG canvas. The React code loads D3 v5 via UNPKG and uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis. Data is fetched from a CSV file using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. The visualization demonstrates modular ES6 imports for axes and marks, with tooltips showing exact population values on hover.