Abhinay Peeta

Question-8

This example displays a static biodiversity collage image sourced from Defenders of Wildlife, presented within a styled card on a light background. The page uses plain JavaScript to create an `img` element and append it to a container, along with a caption. A click listener toggles a CSS class that applies a 1.05 scale transform, giving the image a subtle zoom effect. The layout is centered with flexbox, and the card includes a drop shadow and rounded corners.

Apr 28, 2025

Activity 7.1: Area Chart

This area chart visualizes the relationship between screen size and battery life for mobile devices, grouped by category. It uses stacked, semi-transparent areas with a monotone curve to show how battery life varies across screen sizes for each category. The visualization is built with D3 v7, loading CSV data from a GitHub gist and rendering as SVG. It includes axes for screen size and battery life, plus a legend, using `d3.area`, `d3.scaleLinear`, and `d3.schemeTableau10` for coloring.

Activity 7.1D3.JS

This D3.js v7 visualization presents a pie chart of vehicle types, using SVG rendering to display proportional slices of the data. It loads a CSV file from a GitHub gist and aggregates the records with `d3.rollup`, counting occurrences per vehicle type. The chart uses `d3.pie` and `d3.arc` to generate the paths, with `d3.scaleOrdinal` and `schemeTableau10` providing categorical colors. A legend is drawn manually, and tooltips are added via SVG `title` elements. The chart also includes axis labels as static text.

Fork of Activity 7.1D3.JS

This visualization shows a pie chart of vehicle types from a CSV dataset, with slice sizes representing the count of each vehicle type and a color-coded legend identifying the categories. It uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeTableau10` to generate and color the SVG paths, while `d3.rollup` aggregates the raw data. The chart includes axis labels and a title, with the underlying data fetched from a GitHub gist via `d3.csv`.

Activity - 7.1 Pie Chart

This pie chart shows the top 10 countries by deaths from air pollution in 2020, with each slice sized proportionally to death counts and labeled with values in thousands. A legend on the right pairs country names with their corresponding color swatches and death totals. The chart uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to compute slice geometry and assign colors, rendering as SVG with imported CSV data from a GitHub gist. Text labels are positioned using `arcGenerator.centroid()` for each segment.

Activity 7.1

This example displays a simple text message, "Hello VizHub!", centered on the page with a large font size. The code imports the `select` function from D3.js to target the `#message` div and sets its text content using the imported `message` string. It demonstrates a basic D3 selection and DOM manipulation pattern, with the message defined as an ES6 module export in `myMessage.js`. The styling is handled by external CSS, and the application runs entirely in the browser.

Fork of Task 1 Question 1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with the country names on the y-axis and population values on the x-axis. The chart fetches data from a CSV file on GitHub, processes it with the `csv` function from d3.v5, and renders the visualization as SVG. React components structure the chart elements, while `d3.scaleBand` and `d3.scaleLinear` handle the axes, and the tick marks are styled with a blue color.

Fork of Task 1

This chart displays the 2020 population of 30 countries as horizontal bars, scaled linearly by population and sorted by country name. The visualization uses React components with D3 scales (d3.scaleBand, d3.scaleLinear) to position and size SVG rectangles, while D3’s format function converts large numbers to billions (e.g., “B” suffix). Axes are custom React components drawing ticks and labels, with blue tick lines and light green bars. Population data is loaded as CSV from GitHub, processed in useData hook, and supports hover tooltips via SVG title elements.

Fork of Task 1 Question 1.2

This horizontal bar chart ranks 20 countries by 2010 population, with the bars extending from a shared origin and the country names on the y-axis. The chart uses D3 v5 for data loading, scaling, and formatting, and React for rendering SVG components. The red, green, and blue data is fetched from a remote CSV; the `d3.scaleBand` and `d3.scaleLinear` APIs drive the layout, while `d3.format` is used to abbreviate large numbers.

Fork of Fork of Task 1 Question 1.1

This example displays a horizontal bar chart of population data for 20 countries, sourced from a CSV file, with a bubble-like popup showing the population value. Built with React and D3 v5, the visualization uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG rectangles with axis labels and tick marks. The code imports `AxisBottom`, `AxisLeft`, and `Marks` components, with data loaded via `d3.csv` and formatted using `d3.format`.

Reusable Scatter plot Activity 8

This interactive scatter plot explores the Iris dataset, cycling through different feature pairings on the x-axis while keeping sepal length on the y-axis. D3's `csv` loader ingests remote data, with points colored by species. Animated via `setInterval`, the visualization updates the x-axis mapping and redraws the chart using a custom `scatterPlot` builder that leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom`. SVG rendering with embedded legends and titles provides a clear, self-contained exploration of the data's multivariate relationships.

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page using D3.js v6. The code selects an HTML div with the `#message` ID and sets its content to a string imported from a separate ES6 module. Styling is applied via an external CSS file, which sets the text alignment and font size. The visualization demonstrates a minimal integration of D3 selection methods with modular JavaScript and local stylesheets.

Apr 6, 2025

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius scales with highway MPG and its color distinguishes the make. Built with D3 v7, the SVG uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for color, and `d3.interpolateTurbo` for the palette. Interactive tooltips appear on mouseover, and a legend displays the MPG scale and make colors.

Mar 31, 2025

Activity 6

This example displays a static visualization of the text "Hello VizHub!" centered on the page, demonstrating a minimal D3.js integration. The page uses Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) to achieve its layout, with the `#message` div styled with a large font size and text alignment. The underlying code imports the `select` function from `d3` and assigns the message text through that selection, showing how D3 can manipulate DOM content. The visualization serves as a simple introductory template, highlighting the workflow of setting up a D3 environment with local modules.

Mar 31, 2025

Fork of Hello VizHub

Mar 31, 2025