G

gnanendra097@gmail.com

@gnanendraprasad·17 public vizzes

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays the total number of dead and missing migrants per month as a histogram, with time on the x-axis and death counts on the y-axis. The chart uses D3’s `scaleTime`, `scaleLinear`, and `bin` (via `histogram`) functions to aggregate the data into monthly bins, while `sum` computes each bin’s total. Built with React, it renders SVG bars with tooltips showing exact counts, drawing from the Missing Migrants Dataset. Axes are generated separately using custom components for bottom and left ticks.

Loading thumbnail…

Map Covid

This map visualization displays total COVID-19 deaths by country on a world map using a sequential blue color scale. The code employs d3.geoMercator, d3.geoPath, and topojson to render country boundaries from the world-110m.json dataset, while loading COVID-19 data from a local array. A legend with a linear gradient and d3.axisBottom communicates the quantitative range. The SVG is generated dynamically via d3.select and append methods, with missing country data represented in gray fallback color.

Loading thumbnail…

Assignment 2 Area Chart

This example presents a stacked area chart displaying population data across multiple countries. The visualization uses D3.js v6 to load CSV data, stack series with d3.stack, and render areas with d3.area, while d3.scaleBand and d3.scaleLinear position the categorical and numeric axes. The SVG output includes axis labels, a color-coded legend, and numeric value labels atop each segment. A d3.scaleOrdinal with the schemeCategory10 palette assigns distinct colors to each population category.

Loading thumbnail…

Assignment 2 Pie Chart

This D3.js pie chart displays the distribution of land areas by country, using a categorical color scheme and white strokes to separate slices. The chart labels each slice with its country name at the centroid, and includes a legend positioned to the right. The visualization renders as SVG, with data pulled from a remote CSV file. The code uses `d3.scaleOrdinal`, `d3.pie`, `d3.arc`, and `d3.csv` to construct the chart, while labels and axis titles are positioned via SVG transforms.

Loading thumbnail…

Fork of A9 - GPT

This proportional symbols map displays transportation costs across US states, with each state symbolized by a circle sized according to its cost value. The ten most expensive states appear in brown while others are grey, and hovering over a circle reveals a tooltip with the state name and exact cost. Built with React and d3.v3, the visualization uses d3.geo.path and topojson to render state boundaries, while d3.scale.sqrt maps data values to circle radii. The code loads geoJSON population data from Minnesota Public Radio and CSV cost data, then renders an SVG map with an animated legend showing costs from 50 to 200.

Loading thumbnail…

Activity6_Task1

This visualization shows the top 30 countries by population in 2020 using a horizontal bar chart built with React and D3 v5. Each bar’s length encodes population via a linear scale (`d3.scaleLinear`), while countries are positioned along a band scale (`d3.scaleBand`). The code fetches CSV data from a GitHub repository, formats population values, and renders SVG rectangles with tooltips. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks, with axis tick formatting converting values to billions using `d3.format`.

Loading thumbnail…

Activity6_Question1.1

This example shows total population by country for the year 2000 as a horizontal bar chart, with country names along the vertical axis and population amounts along the horizontal axis. The bars are colored green, and hovering reveals a native tooltip with the formatted population value. Data comes from a CSV file loaded asynchronously via d3.csv, which then selects the top ten countries. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for the axes, and d3.format for abbreviating tick labels with "B" for billions.

Loading thumbnail…

Activity6_Question1.2

This bar chart displays the population of 20 countries for the year 2010, ranked from largest to smallest along a horizontal axis. The visualization uses React with D3 v5 to render SVG elements, leveraging `d3.csv` for data loading from a GitHub repository and `d3.scaleBand` and `d3.scaleLinear` for positioning. Tick marks are styled in blue, with bars filled in light green. A tooltip appears on hover via the SVG `<title>` element, and the axis label is formatted using `d3.format`.

Loading thumbnail…

Acitvity6_Tutorial2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" as proportions of total films. The visualization uses d3.stack() to compute the stacked segments, d3.scaleBand() for the genre categories, and d3.scaleLinear() for the percentage axis on a logarithmic-free linear scale. Hovering over any segment reveals a tooltip displaying the exact percentage for that genre and rating range. The data comes from a CSV file containing genre-wise rating proportions, rendered as SVG rectangles with a color scale distinguishing each rating band.

Loading thumbnail…

Activity6_question2

This stacked horizontal bar chart displays sales totals for five store locations, broken down by product categories including clothing, equipment, and accessories. The visualization uses d3.stack() to compute the segmented bar series and d3.scaleLinear and d3.scaleBand for positioning. Rendered as SVG with D3 v7, the chart includes interactive tooltips that display precise numeric values when hovering over each segment. Category colors are assigned via d3.scaleOrdinal, and axis labels and legends are manually added.

Loading thumbnail…

Activity6_Tutorial3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three species, with each point colored by species (skyblue, lightgreen, or orange) and sized by sepal dimensions. The visualization uses D3 v6's `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create scaled axes and map data coordinates to SVG circle elements. The chart renders within a full-window SVG, with green axis labels and a red title, highlighting species clusters across the petal measurements.

Loading thumbnail…

Activity6_Tutorial3.2

This scatter plot visualizes the relationship between sepal length and petal length in the Iris dataset, using different point shapes to distinguish between species. The chart maps the data from a CSV file fetched at runtime, rendering each flower as a symbol on a linear scale, with a separate legend identifying the species. It is built with D3 v7, using `scaleLinear` for axes, `scaleOrdinal` for shape encoding, `symbolsFill` for the point symbols, and custom functions like `axes` and `shapeLegend` for layout.

Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes U.S. honey production across states for 1998-1999, plotting average yield per colony on the x-axis and total production on the y-axis. Circle size encodes colony count, while color distinguishes states using a scaleOrdinal with interpolated colors from d3.interpolateTurbo. Built with d3.v7 rendering SVG, the chart includes axis labels, a color-coded legend, and hover tooltips displaying state names. Data is loaded from a CSV file using d3.csv, with circles styled for opacity changes on mouseover.

Loading thumbnail…

Question 3 - 6 Buddhas

Six Buddha silhouettes overlap in a decorative, flower-patterned composition. The visualization maps each point in a 30-element array to a nested set of three `bgd` elements with random color and position values, creating a dense, abstract pixel-like field. The Buddha shapes are rendered as SVG `<path>` elements with complex `d` coordinates inside a React component, while the background image and blue border are styled in the HTML. The entire scene is built with React 16 and SVG, using random fill colors for the scattered background objects.

Loading thumbnail…

5 Buddhas

Five Buddha silhouettes overlap in a layered composition against a black background. The app generates a grid of 441 randomly positioned, rotated polygons with varied RGB fill colors, rendered as SVG shapes via React’s `ReactDOM` and JSX mapping. A detailed Buddha path is then scaled and translated into the center using SVG `<path>` and `<g>` transform attributes, with React managing component state and rendering.

Loading thumbnail…

Activity6_Tutorial4

This bubble chart visualizes correlations between average horsepower, torque, and highway MPG for 31 car makes, using bubble size to encode MPG and color to distinguish brands. It reads data from a CSV file and renders circles via D3 v7’s SVG API, with interactive tooltips triggered by mouse events. The visualization includes axis labels, a size legend for MPG, and a color category legend, all positioned within an SVG canvas using D3 scales and ordinal color mapping.

Loading thumbnail…

Activity6_Question3

This example shows a scatter plot of the candy dataset, mapping sugar percentage on the x-axis and win percentage on the y-axis. Each circle is colored red or blue depending on whether the candy contains chocolate. The visualization uses D3 v6 with SVG rendering, loading data from a GitHub-hosted CSV file. It applies `scaleLinear` for both axes, `extent` to set domains, and `axisLeft` and `axisBottom` for tick marks, along with explicit axis labels.