pslharika@gmail.com

Project

Project

This example demonstrates loading D3 from a CDN and using ES6 module imports to render a centered “Hello VizHub!” message. It imports the `select` function from D3 to set the text of a `div` element, and imports a `message` constant from a local module. The page includes a CSS file for styling the text and relies on D3 v5 loaded via UNPKG, with a bundled JavaScript file executing the imports.

Project

This example demonstrates loading D3 from a CDN and using ES6 module imports to render a centered “Hello VizHub!” message. It imports the `select` function from D3 to set the text of a `div` element, and imports a `message` constant from a local module. The page includes a CSS file for styling the text and relies on D3 v5 loaded via UNPKG, with a bundled JavaScript file executing the imports.

Project

This example demonstrates loading D3 from a CDN and using ES6 module imports to render a centered “Hello VizHub!” message. It imports the `select` function from D3 to set the text of a `div` element, and imports a `message` constant from a local module. The page includes a CSS file for styling the text and relies on D3 v5 loaded via UNPKG, with a bundled JavaScript file executing the imports.

Project

Project

Assignment2 Question2

This area chart visualizes the relationship between age and weight using a steel blue filled region beneath a line path. The visualization loads CSV data from an external GitHub URL and renders it as an SVG, with age plotted on the x-axis and weight on the y-axis. The code uses d3.csvParse to process the data, d3.scaleLinear for both axes, and d3.area to generate the chart’s filled shape. Axis labels and a chart title clarify the variables, while the data is sorted by age before rendering to ensure a coherent curve.

Assignment2 Question1

Assignment 2

Fork of Activity6_Question4

Activity6 Question4

A bubble chart displays electronics products with screen size on the x-axis, price on the y-axis, and horizontal resolution scaled to bubble radius using `d3.scaleLinear`. Built with d3.v7 and rendered as SVG circles, each bubble is green with red strokes at 50% opacity. Mouse events trigger tooltips showing brand, resolution, processor speed, and price. Data loads from `bubblechart.csv`, and animations occur through D3 transitions on tooltip opacity.

Activity6-Question2

This stacked bar chart shows the percentage distribution of five rating levels (from "below 2.0" to "above 5.0") across ten chocolate brands, revealing how each brand’s ratings are spread. The chart uses a horizontal layout with a linear x-axis for percentages and a banded y-axis for genres, with each bar segment color-coded by rating level. Written in D3 v7, it relies on `d3.stack` to generate stacked data, `d3.scaleOrdinal` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. Interactive tooltips display exact percentages on mouseover, using D3’s selection and event handling. Data comes from a local CSV file.

Activity 6 Question3

Activity6 Task4

Activity6 Task3.2

Fork of Activity6- Task3

Activity6- Task3

This example visualizes the Iris dataset with a scatter plot comparing petal length on the x-axis against petal width on the y-axis, coloring each point by species (setosa, versicolor, virginica) via a switch function. The chart also encodes sepal length and width as the rx and ry attributes of each circle, creating elliptical markers. It loads CSV data using d3.csv, applies linear scales with d3.scaleLinear, and renders axes with d3.axisLeft and d3.axisBottom. The SVG output also includes rotated axis labels for clarity.

Activity 6-Task2

Activity6 Task1

This example displays a horizontal bar chart of 2020 population data for 30 countries, with bars colored light green and a blue axis line. It renders as a React application using D3 v5 to scale and format the population values (e.g., converting gigabytes to billions in tick labels). Data is loaded from a remote CSV file, and the chart is drawn using SVG rectangles. The code explicitly uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.csv` to process and visualize the dataset.

Activity6-Question1(2)

Activity6-Question1(1)

Activity6 Task1Question1

A horizontal bar chart displays the populations of ten countries in the year 2000, sorted by country name. Each bar’s length encodes the population value, with a tooltip showing the formatted number on hover. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for scales, SVG rectangles for marks, and axes rendered from custom React components. Data is loaded from a CSV file via D3’s `csv` method, and population values are formatted using D3’s `format` function.

Fork of Activity_6 Task1

Fork of Activity 6-Task1Question1

Activity 6-Task1

Activity_6 Task1

Fork of 6 Buddhas with background image

6 Buddhas with background image

Six overlapping Buddha silhouettes are arranged on top of a floral background image. Each Buddha is drawn as an SVG path filled with a different color, with the `fill` and `stroke` properties applied directly in the React component. The visualization uses React 16.10 to render the SVG elements, with each path transformed via the `transform` attribute to position and scale the repeated shape.

5 Buddhas

5 Buddhas

5 Buddhas

2 Buddas