malisettisaisumanth@gmail.com

Activity - 7_Question - 2

This area chart displays monthly sales data over time, with the date on the x-axis and sales figures on the y-axis. The visualization loads CSV data from a GitHub Gist, parses date strings using `d3.timeParse`, and renders a filled area path with a steelblue color. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.area` for the area generator, and `d3.axisBottom`/`d3.axisLeft` to draw the axes, all within an SVG container.

Apr 10, 2025

Activity - 7_task - 1

This animated scatter plot explores the Iris flower dataset, cycling through different feature pairings on the x-axis to reveal relationships between sepal and petal measurements. Points are colored by species (setosa, versicolor, virginica) and positioned using D3.js scales and axes from the `d3` library. The visualization updates every few seconds, re-rendering the plot with a new attribute on the horizontal axis while keeping the vertical axis fixed, allowing comparison across dimensions. The code uses D3’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the reusable scatter plot, with an SVG canvas and custom legend.

Apr 10, 2025

Activity-6_Question - 3.6

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth across three species. Each circle represents a penguin, colored purple, teal, or crimson by species, with a legend identifying the categories. The visualization uses d3.csv to load the data, d3.scaleLinear for the x and y axes, and d3.scaleOrdinal for the custom color mapping. Axes are rendered with d3.axisBottom and d3.axisLeft, while axis labels and circles are appended as SVG elements via d3-selection.

Activity - 6_Task-3.1

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three iris species. The visualization uses D3.js v7 to load CSV data from a GitHub source, then maps the measurements to SVG circles, with each species assigned a distinct color. Hovering over a point enlarges it and displays a tooltip with the exact measurements and species name. The chart includes labeled axes and a color-coded legend, all rendered as scalable vector graphics with an animated transition effect for the tooltip opacity.

Activity-6_task-3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and encoding species through point shape (circles, crosses, and diamonds) rather than color. The D3 v7 code constructs the plot using `scaleLinear` for axes and `scaleOrdinal` with `symbolCircle`, `symbolCross`, and `symbolDiamond` for the shape mapping. A custom legend uses the same shape scale to identify species, and the SVG output is rendered with labeled axes and margins accommodating the legend.

Activity-6_Question-4.9

This D3.js bubble chart plots 50 countries by GDP per capita on the x‑axis and life expectancy on the y‑axis. Each circle’s area is proportional to population, and color encodes geographic region. Hovering highlights a bubble and shows a tooltip with exact country statistics. The visualization uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radius, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG for rendering.

Activity-6_Question-4.9

This example demonstrates a simple text-based visualization that centers a greeting message on the screen using D3.js. The page renders a large, horizontally aligned “Hello VizHub!” message through the `select` and `.text` methods from D3 to set the content of a div element. The styling is handled via CSS, with the message displayed in 12em font size and centered using the `text-align` property. The code relies on an ES6 module to export the message string, which is then imported and applied in the main script. No dynamic data or complex visual encodings are present.

Activity-6_Task-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car manufacturers, with each bubble’s position representing horsepower and torque, while its size reflects MPG and color encodes the brand. Built with D3 v7, the visualization uses SVG scales for axes and bubble sizing, and includes interactive tooltips that display the manufacturer on hover. A dual legend shows both the MPG bubble-size scale and color-coded makes. Data is loaded from an external CSV file, and animation is not used beyond tooltip transitions.

Activity - 6_Question - 2.3

This stacked bar chart displays the average sepal and petal measurements for iris species from the provided CSV dataset. The visualization aggregates the raw data using `d3.nest()` and `d3.rollup()` to compute means per species, then renders four stacked segments per species using `d3.stack()`. Each segment’s height corresponds to its average measurement, with colors assigned via `d3.scaleOrdinal(d3.schemeCategory10)`. The chart uses D3 v5 with an SVG rendering approach, including axes generated through `d3.axisBottom()` and `d3.axisLeft()`.

Activity - 6_Task - 2

This stacked bar chart displays the distribution of IMDb movie ratings across six genres, showing the proportion of films in each rating bracket (from below 5.0 to above 8.5). The visualization uses d3.v7’s `d3.stack()` and `d3.scaleOrdinal()` to generate the stacked segments, with `d3.scaleBand()` for the genre categories and `d3.axisBottom()` for the percentage scale. Interactive tooltips reveal exact percentages on hover via `d3.select()` and mouse events, while the SVG rendering and custom fonts from Google Fonts style the chart.

Activity - 6_Question - 1.1

This bar chart displays the top ten most populous countries in the year 2000, sorted in descending order of population. The visualization uses D3.js v5 to load CSV data from a GitHub repository, scales both axes with `d3.scaleBand` and `d3.scaleLinear`, and renders the bars as SVG rectangles. Axis ticks and labels are generated using `d3.axisLeft` and `d3.axisBottom`, with population values formatted using `d3.format`.

Activity - 6_Question - 1.2

This bar chart visualizes the top 20 countries by population in 2010, sourced from a CSV file fetched via `d3.csv`. The chart uses a horizontal bar layout, with the `d3.scaleBand` y-axis for country names and a `d3.scaleLinear` x-axis for population values. Blue rectangles (`#4a90e2`) represent each country, with axes rendered using `d3.axisLeft` and `d3.axisBottom`, the latter formatted with `.tickFormat(d3.format('.2s'))`. Population data is sorted in descending order before slicing to the top 20.

Activity - 6_Task - 1

This horizontal bar chart displays the 30 most populous countries in 2020, using a diverging layout where bars extend rightward from a shared origin. The visualization sorts nations by population in descending order, with China and India leading at over 1.3 billion residents each. The chart uses D3 v7's `scaleLinear` for the population axis and `scaleBand` for categorical country labels, with bars rendered as SVG rectangles. Population values are loaded from a remote CSV file using `d3.csv` and formatted with the `d3.format` si-prefix, converting G to B for billions. Axes are styled by removing domains and adjusting tick marks, with light gray gridlines extending across the plot area.

Fork of Hello VizHub

This visualization displays the message “Hello VizHub!” in large, centered text on a plain background. It uses D3.js (version 6) and the `select` API to target the HTML `div` with the ID `message`, then sets its text content. The text is styled via an external CSS file, which applies a font size of 12em and center alignment. The example demonstrates a basic ES6 module structure, importing the message string from a separate JavaScript file and integrating it into the page.