Skip to main content
Log in
G

galijawaharnath@gmail.com

@JAWAHARNATHGALI·16 public vizzes

Loading thumbnail…

Activity_7.1 Q2

This example visualizes perceived stress scale (PSS) scores for individual participants using an area chart. It loads data from a remote CSV file via `d3.csv`, maps participant IDs to a band scale, and PSS scores to a linear scale for the y-axis. The chart renders as an SVG path generated by `d3.area()`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The layout includes rotated axis labels and a title, with styling provided by an external stylesheet.

Nov 7, 2024
Loading thumbnail…

question1act7

This example shows the distribution of Olympic medals by country using a pie chart, where each slice represents a country’s total medal count (Gold, Silver, and Bronze). The visualization uses d3.pie and d3.arc to compute and draw the chart, with d3.scaleOrdinal and d3.schemeCategory10 assigning distinct colors to each segment. A legend is appended using SVG rectangles and text, while the data is fetched from a CSV URL via d3.csv. The SVG canvas is 960 by 500 pixels, and the chart is centered within it.

Nov 6, 2024
Loading thumbnail…

act7.Q1

This pie chart visualizes the calories burned per 30 minutes across different target muscle groups, with each slice color-coded by muscle type and paired with a legend. The visualization uses D3 v5’s `pie` and `arc` generators to calculate slice angles and paths, while `scaleOrdinal` maps categorical muscle groups to a fixed color palette. Data is loaded asynchronously from a CSV file using `d3.csv`, and values are parsed as numbers before being aggregated. The SVG is centered on the page, with all chart elements rendered as SVG shapes.

Nov 6, 2024
Loading thumbnail…

act 7.1

This animated scatterplot explores the Iris dataset, cycling through four feature pairings on the axes every few seconds. Each point represents a flower, colored by species (setosa, versicolor, virginica) with a fixed legend and title. The visualization is built with D3.js, using `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` function. SVG elements are updated via `setInterval` to swap the x-axis variable, while separate circle elements encode the current marks and static legend shapes persist.

Nov 6, 2024
Loading thumbnail…

Act6_Q1.2

A horizontal bar chart displays the populations of 20 countries for the year 2010, sorted vertically by country name. The visualization uses React with D3 v5, loading CSV data from a GitHub repository via d3.csv and rendering SVG bars. The chart employs scaleBand for the categorical y-axis and scaleLinear for the numeric x-axis, with population values formatted using d3.format and native SVG <title> elements providing tooltips.

Oct 23, 2024
Loading thumbnail…

Act6_Q1.1

This horizontal bar chart displays population data for ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The visualization uses React components with D3 v5 scaleBand and scaleLinear to position bars, while custom AxisBottom and AxisLeft components render the tick marks. Data is loaded from a remote CSV file using D3’s csv method, with population values formatted using the format function to abbreviate large numbers. The SVG rendering includes tooltips via native title elements that show the exact population for each bar.

Oct 23, 2024
Loading thumbnail…

Act 6_Tutorial3_Question6

This scatter plot visualizes the relationship between Gold and Silver medal counts for countries in the 2024 Paralympics. Each point represents a country, with colors indicating performance tiers: gold for over 30 gold medals, silver for over 10, and dark blue for others. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV, and SVG circles include tooltips with country details.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each specimen and coloring points by species (setosa, versicolor, or virginica). It loads the data from a remote CSV file and renders an SVG chart using D3 version 6. The example uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the axes, while a custom marker function assigns categorical colors. The plot is responsive, filling the browser window and including rotated axis labels.

Oct 22, 2024
Loading thumbnail…

Act6_Q4.9

A bubble chart displays Paralympic medal counts by country, plotting total medals on the x-axis and gold medals on the y-axis. Circle size encodes total medals, while color distinguishes countries, with a legend listing all nations. The visualization uses D3 v7’s selection methods and scaleOrdinal for color mapping, plus linear scales for positioning and radius. Animated tooltips reveal silver and bronze counts on hover. Data comes from the provided CSV file, rendered as SVG circles with mouseover and mouseleave event handlers for interactivity.

Oct 22, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. The visualization uses D3.js v7 with SVG and animation, rendering circles whose x-position, y-position, and radius map to horsepower, torque, and MPG respectively. A color scale distinguishes makes, while the legend shows MPG values. Mouseover tooltips (custom HTML) reveal specific make names. The dataset comes from `bubblechart.csv`, and the code applies `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for coloring, and `d3.scaleOrdinal` for legend colors.

Oct 22, 2024
Loading thumbnail…

Act6_3.2

This scatter plot displays sepal length against petal length for Iris flowers, with species encoded by distinct marker shapes. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to map species to shapes. A custom shapeLegend component draws the legend using d3.symbol to generate the path data. The visualization loads data from an external iris.csv file, parses it with d3.csvParse, and renders the marks as SVG paths via d3.join, with complete axes and labels provided by d3.axisLeft and d3.axisBottom.

Oct 22, 2024
Loading thumbnail…

Act6_Q2

This visualization displays the top 10 countries by total Olympic medal count using a horizontal stacked bar chart. Each bar represents a country’s medal distribution across gold, silver, and bronze categories. Built with D3 v7, the code uses `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` to structure and color the data, while `d3.axisLeft` and `d3.axisBottom` render the axes. A hover tooltip shows exact medal counts per category. The data comes from the provided `paradata.csv` file.

Oct 22, 2024
Loading thumbnail…

Activity 6_Task2

This example visualizes the distribution of movie ratings across genres using a stacked horizontal bar chart. The chart, titled "Rating according to genres," displays the percentage of movies falling into five rating brackets (from below 5.0 to above 8.5) for each genre, sourced from a local CSV file. Built with D3 v7, the visualization uses `d3.stack()` to create stacked bars, `d3.scaleOrdinal()` for color coding, and `d3.scaleLinear()` for the x-axis. Interactive tooltips appear on hover, showing the exact percentage for each rating category within a genre.

Oct 22, 2024
Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, colored orange with black axes and axis labels. The visualization uses React with D3 v5 APIs including `scaleBand` and `scaleLinear` for scales, `csv` for data loading, and `format` for tick formatting. Data is fetched from a GitHub-hosted CSV file and rendered as SVG rectangles, with each bar showing a tooltip on hover.

Oct 22, 2024
Loading thumbnail…

6 Buddhas

Six meditative Buddha silhouettes overlap in a vertical column, each rendered as a dense, single continuous SVG path filled with a distinct color. The image presents a serene, patterned composition, with each figure layered slightly apart to create depth. Built with React, the visualization uses the ReactDOM API to render the SVG directly into the DOM. The code generates the paths from fixed coordinate data and applies CSS for a full-page floral background, while the color palette is defined statically within the SVG elements.

Oct 18, 2024
Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes render as a vibrant, multicolored SVG composition on a black background. The code generates thousands of randomly positioned, semi-transparent polygons with RGB fill values, creating a dense, chaotic pixel-like texture behind the central buddha paths. Built with React and ReactDOM, the visualization uses pure JavaScript `Math.random()` calls for placement and color generation, while the buddha shapes themselves are defined as SVG `<path>` elements with hardcoded coordinate data. Each polygon is rotated 45 degrees and scaled independently, producing an abstract, layered effect.

Oct 13, 2024