vishu.valandas@gmail.com

Activity71

This example shows a gradient-filled area chart of sales over time, using D3 v7. It loads data from a CSV file hosted on GitHub Gist and renders the visualization as an SVG. The code uses `d3.area` to generate the area path, `d3.scaleLinear` for both axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks. A custom `linearGradient` with two color stops fills the area, and the chart includes labeled x- and y-axes. The page also imports a local ES6 module to demonstrate modular code.

Nov 7, 2024

Question1

A scatterplot visualizes the Iris dataset, comparing petal length against petal width while encoding sepal dimensions and species through circle properties. Each point's fill color distinguishes three species (setosa, versicolor, virginica), while the circle's `rx` and `ry` attributes reflect sepal length and width, respectively. The visualization loads data via `d3.csv`, maps values through `scaleLinear` with `extent` domains, and renders axes using `axisLeft` and `axisBottom`. The code uses D3 v6's selection and data-join methods (`selectAll`, `join`) to append SVG circles.

Oct 23, 2024

Question 2

A stacked bar chart depicts the survival rates for Titanic passengers, segmented by gender and categorized into "Survived" and "Not Survived." The chart uses horizontally stacked bars, with gender on the y-axis and percentage on the x-axis, and includes an interactive tooltip that displays the exact percentage on hover, while also highlighting the bar segment. The visualization is built with D3 v7, utilizing `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and the `d3.stack` function to manage the data aggregation and layout.

Question4

This scatterplot compares countries by GDP per capita (x-axis) and Life Ladder score (y-axis), using the World Happiness Report dataset. Each circle encodes social support through its radius and healthy life expectancy through a blue sequential color scale (d3.scaleSequential). The chart renders as SVG, with axes via d3.axisBottom and d3.axisLeft, plus hover interactions that enlarge points. A gradient legend displays the color mapping, while tooltips (title elements) reveal detailed country-year values.

Question1

A bubble chart displays the correlation between average horsepower, torque, and highway MPG across car makes. Using D3 v7, it reads data from a CSV file and renders SVG circles positioned by the x and y axes, with circle size encoding highway MPG and color mapping to car make via `d3.scaleOrdinal` and `d3.interpolateTurbo`. Interactive tooltips appear on mouseover. Legends show MPG ranges and make colors.

Question3

This example visualizes cancer data as a scatterplot, plotting tumor radius mean on the x-axis against texture mean on the y-axis. Each point is colored green for benign diagnoses and red for malignant ones, based on the dataset’s Diagnosis field. The code loads CSV data via `d3.csv` from a GitHub raw URL, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart. Rendering is done with SVG circles, with axes and labels appended directly to the SVG container.

shape

This interactive scatter plot displays the Iris dataset, showing sepal length against petal length with a point's shape encoding its species. The visualization includes axes, axis labels, and a custom legend for the shape encoding. It uses D3 v7, specifically `scaleLinear` for scaling, `scaleOrdinal` for the shape mapping, and `symbolGenerator.type().size()` to draw the points. Data is loaded from a GitHub-hosted CSV and parsed via `csvParse`. The chart dynamically updates based on the window size.

Task2 Question 1

This visualization displays the stacked percentages of iris flower characteristics, broken down by passenger ID, as horizontal bars. The chart uses D3.js (v7) with an SVG renderer, employing the `d3.stack()` function to create the stacked segments and `d3.scaleOrdinal()` for color mapping. It reads data directly from a passed dataset, calculating scales with `d3.scaleLinear()` for the x-axis and `d3.scaleBand()` for the categorical y-axis, and includes hover interactions that reduce rectangle opacity.

Question1

This example displays a stacked bar chart of population by country, segmented by religion, with an interactive color legend that highlights corresponding chart segments on hover. It loads data from a CSV file and uses D3 v5 APIs including `scaleOrdinal`, `schemeCategory10`, and `select`, while relying on `observeResize` from `@curran/responsive-axes` for responsive sizing. The visualization is built through local ES6 modules that separate the chart, legend, and data-parsing logic, with population values converted to millions for readability.

Question1

This example demonstrates a minimal D3.js setup that renders a static text message. It shows how to load D3 from a CDN and use ES6 modules to import local code. The page uses `d3.select` to target a `div` element and set its text content to a string imported from a separate module. The styling is applied via a linked CSS file, which centers the message and sets its font size. The visualization is purely declarative, with no dynamic data or interactive behavior.

Task2

This stacked bar chart visualizes movie ratings across different genres, breaking down each genre's proportion into five rating categories from below 5.0 to above 8.5. The chart uses horizontal bars with color-coded segments representing each rating range, allowing viewers to compare rating distributions across genres like Documentary, Comedy, and Drama. The visualization loads data from a local CSV file and renders the stacked bars using D3.js v7, employing d3.stack(), d3.scaleBand(), and d3.scaleLinear() to construct the chart. Hover interactions dim individual segments to highlight specific rating ranges.

Activity 6 Task2

This stacked bar chart shows the percentage distribution of rating levels within different movie genres, with each genre represented as a horizontal bar divided into colored segments. The visualization uses D3.js (v7) with an SVG rendering, applying `d3.scaleLinear`, `d3.scaleBand`, and `d3.stack` to process the data, while a custom tooltip displays exact percentages on hover. The color scale maps five distinct rating categories, and the chart includes axis labels and a legend to clarify the genre-to-rating relationship.

Fork of Stacked Movie ratings

This stacked bar chart visualizes the percentage distribution of movie ratings across different genres, with each bar segmented by rating level. The chart uses a horizontal layout where genre categories are on the y-axis and percentages on the x-axis, with hover interactions displaying exact values via tooltips. The visualization is built with D3.js v7, using `d3.scaleOrdinal` for color mapping, `d3.scaleBand` for y-axis positioning, and `d3.axisBottom` for the x-axis. Data is processed through `d3.stack` to create the stacked segments, and SVG is used for rendering.

Activity 6

This example displays a horizontal bar chart comparing the 2010 populations of 20 countries, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The visualization renders as SVG, with custom `AxisBottom` and `AxisLeft` components generating ticks, and `Marks` creating rectangles with tooltips formatted using `d3.format`.

Activity 6_task1

This bar chart displays the population of ten countries in the year 2000. The visualization uses React with D3 v5 to load CSV data from a GitHub repository, scale the bars using `scaleBand` and `scaleLinear`, and render the chart as SVG. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw axes and rectangles, with tooltips formatted using D3's `format`. The chart includes a labeled x-axis and uses a Poppins font.

Fork of buddha

A vibrant, abstract SVG composition layers hundreds of randomly generated, semi-transparent polygons over a single large Buddha path. The polygons, colored with extreme RGB values and rotated 45 degrees, create a chaotic, kaleidoscopic effect against a black background. The code uses React to render SVG elements, mapping over nested arrays to generate shapes, while the Buddha outline is drawn with a detailed `path` element using a fixed transform.

Fork of Fork of buddha

The visualization displays four overlapping Buddha silhouettes, each rendered in a different color, layered on top of one another to create a composite, translucent effect. The paths are drawn using SVG `<path>` elements with complex Bézier curve data, scaled and translated via `transform` attributes. The React code constructs the SVG canvas, while the styling uses a background image and black backdrop. The rendering relies on React and ReactDOM, with each Buddha path defined by an extensive `d` attribute string.

Fork of buddha

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of overlapping Buddha outlines is rendered in black, while a dense cluster of semi-transparent, randomly colored circles is scattered across the canvas. The visualization is built with React and rendered as an SVG, using nested `map` functions to generate the circles and a complex SVG `path` for the Buddha figure. The circle colors are determined by `Math.random()` calls, and the figure is transformed and scaled, creating a layered, chaotic composition.