H

haneesh@gctc.in

@Haneesh-Reddy·16 public vizzes

Loading thumbnail…

Final project

This visualization presents a comparative view of the global COVID-19 pandemic through two side-by-side choropleth maps. One map displays the monthly incidence rate of new COVID-19 cases per 100,000 inhabitants, using a red sequential color scale, while the other shows the vaccination rate using a green scale. Both maps feature a play button and a draggable slider to animate through time from January 2020 to May 2021. The geographic data is rendered using the `d3.geoPath` projection with Natural Earth and TopoJSON, and the temporal data is sourced from Our World in Data.

Loading thumbnail…

Assignemnt 2 question 2

This area chart displays the total population of India from 2010 onward, with the year on the x-axis and population count on the y-axis. The visualization is rendered as an SVG using D3.js v7, pulling data from a CSV file hosted on GitHub. It constructs a linear x-scale and y-scale, then draws a steel-blue area path using the `d3.area()` API. Axis ticks and labels are added via `d3.axisBottom` and `d3.axisLeft`, with the chart sized at 800 by 400 pixels.

Loading thumbnail…

Assignment Question 1

This pie chart visualizes the number of vehicles seized in different U.S. states, with each state represented by a colored slice and labeled with its value in thousands. The chart is rendered as an SVG using D3 v5, pulling data from a raw GitHub CSV file. The code employs D3’s `pie`, `arc`, `scaleOrdinal`, and `select` APIs to generate the arcs, color mapping, and a corresponding legend with state names and values.

Loading thumbnail…

Assignment 2

An interactive scatter plot displays the Iris dataset, animating through different pairings of sepal and petal measurements while coloring points by species. The code uses D3.js with `csv` for data loading, `scaleLinear` and `extent` for axes, and `axisLeft`/`axisBottom` for ticks. A `setInterval` cycles the x-axis variable among four columns, while the scatterPlot module handles updates. SVG circles, custom labels, and a color legend render the visualization.

Loading thumbnail…

Activity 6 Question 4

This bubble plot visualizes the relationship between alcohol and tobacco use across U.S. states, with circle size encoding state population and color intensity representing alcohol use rates per 1,000 people. Built with D3 v7, it loads CSV data from a GitHub repository and renders an SVG scatterplot using `d3.scaleLinear` for positioning, sizing, and coloring, along with `d3.axisBottom` and `d3.axisLeft` for axes. Tooltips provide detailed values for each state via appended `title` elements.

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. Built with D3 v7, it renders SVG circles positioned by linear scales, includes tooltips on mouseover, and provides a legend for both bubble size and color. The data comes from a CSV file loaded via d3.csv, with colors assigned using d3.scaleOrdinal and the interpolateTurbo color scheme.

Loading thumbnail…

Activity6_Question

This scatter plot shows the relationship between matches played and runs scored for Test cricket players, with each point colored by the player's country using a categorical color scale. The visualization uses D3 v6 to load a CSV dataset, map data to scaled x/y coordinates with `scaleLinear`, and render circles as SVG marks. Axis labels, ticks, and grid lines are generated using `axisBottom` and `axisLeft`, while the overall layout adapts to the browser window dimensions.

Loading thumbnail…

Activity6_Task3.1

This example visualizes the Iris dataset as a scatter plot, mapping sepal length and petal length along the x- and y-axes while encoding species using distinct symbol shapes. The plot includes a custom shape legend and axis labels, with the data loaded from a remote CSV file. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, and `symbol` from the `d3` module to position points and generate shapes. Axes and legend are created through reusable local ES6 modules, `axes.js` and `shapeLegend.js`, which import functions like `axisLeft` and `axisBottom` from D3.

Loading thumbnail…

Activity6_Task3

A scatter plot of the Iris dataset displays petal length against petal width, with circles colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The plot also encodes sepal length and width as circle radii (`rx`, `ry`), creating elliptical marks. The visualization loads data via `d3.csv`, scales axes with `scaleLinear` and `extent`, renders SVG circles via `selectAll` and `join`, and adds axes with `axisLeft` and `axisBottom`. Axis labels are rotated text elements. Data is sourced from a GitHub-hosted CSV file.

Loading thumbnail…

Acticity 7 tutorial2

This example shows a stacked bar chart comparing average horsepower, torque, and highway MPG for several car makes, using an ordinal color scale and a legend to distinguish the three metrics. It renders the chart as an SVG and relies on D3.js version 7 APIs including `d3.stack` for data stacking, `d3.scaleBand` for categorical positioning, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` with rotated labels to handle long axis text. The data is embedded directly in the script rather than loaded from an external file.

Loading thumbnail…

Activity6_Task2

This example uses a stacked horizontal bar chart to compare the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range from below 5.0 to above 8.5. The visualization, rendered as SVG, loads data from a local CSV file and uses D3 v7’s `d3.stack()` to create stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisLeft()` and `d3.axisBottom()` for axes. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination.

Loading thumbnail…

Task 1b

This example shows a horizontal bar chart of the 2010 populations of 20 countries. The chart uses SVG for rendering, with a React front-end. It loads data from a CSV file hosted on GitHub and uses D3 v5 for scaling, formatting, and calculating the layout. The visualization highlights D3's `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `format` for tick labels. A tooltip appears when hovering over each bar, displaying the population value. The chart is styled with CSS rules for tick marks and bar colors.

Loading thumbnail…

Task 1 a

This example displays a horizontal bar chart of population data for ten countries in the year 2000, with the bars sorted by country name. The visualization uses React to render SVG elements, with D3 v5 scales and formatting applied through `scaleBand`, `scaleLinear`, and `format`. The data is loaded from a CSV file using `d3.csv`, and axes are custom components built from SVG `<g>` elements. Hovering over a bar reveals a native tooltip with the formatted population value.

Loading thumbnail…

Activity 6

A bar chart displays 2020 population estimates for 30 countries, with country names on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `csv` to load external data, and `format` to abbreviate tick labels. SVG rectangles render the bars, with tooltips via the `<title>` element.

Loading thumbnail…

5 buddhas

Five overlapping Buddha silhouettes are drawn in bright, randomized colors across a black background. The piece uses React and ReactDOM to generate nested SVG polygons, with each polygon’s position, rotation, and fill color determined by the `Math.random` function. The central Buddha shape is defined by a large SVG path element, while the surrounding polygons are rendered through nested array maps, creating a dense, abstract visual field. The output is rendered as raw SVG within a fixed 960×1000 viewport.

Loading thumbnail…

6 buddhas

Six overlapping golden Buddha silhouettes form a meditative mandala against a photograph of green flowers. The SVG shapes are layered with semitransparent fills in varying RGB colors, created through nested array maps in React. The composition uses a fixed 1000-by-1000 viewBox with random positioning and scaling, while the background image comes from an external URL.