T

Tarshit Vupperla

@Tarshit·20 public vizzes

Loading thumbnail…

Activity 7_Q2

This visualization displays a stacked area chart of Netflix movies and TV shows, showing the distribution of content ratings across release years. The chart uses d3.area to create overlapping filled regions for each rating category, with each layer colored via d3.scaleOrdinal and d3.schemeCategory10. The code groups the CSV data from a GitHub repository using d3.rollups to count titles by year and rating, then renders SVG paths with axes generated by d3.axisBottom and d3.axisLeft. A legend maps colors to ratings, and the chart includes proper margins, labels, and tick formatting for readability.

Loading thumbnail…

Activity 7_Q1

This example visualizes the distribution of content ratings among Netflix titles, displaying a pie chart of rating categories with percentage labels and a color-coded legend. The chart is rendered as an SVG using D3 v6, loaded from UNPKG, with data fetched from a remote CSV via `d3.csv`. The code uses `d3.rollups` to count titles per rating, `d3.pie` and `d3.arc` to generate slices, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, while local ES6 modules are also demonstrated.

Loading thumbnail…

Activity 7

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. It displays sepal and petal measurements for three iris species, colored distinctively (skyblue, lightgreen, and orange). The visualization is built with React and D3.js, using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to generate axes. SVG circles represent data points, with dynamic x-value updates triggering re-renders. A legend and rotating axis labels accompany the animated transitions between petal width, sepal width, petal length, and sepal length.

Loading thumbnail…

Activity_6_Q4

This bubble chart visualizes the relationship between GDP, population, and economic growth for ten global cities. Each circle's x-position maps to GDP, y-position to population, and radius to growth rate, with individual city colors shown in a legend. The visualization uses D3 v7's `csv`, `scaleLinear`, and `scaleSqrt` functions to load the CSV data and map values. It renders to SVG with axis labels and tooltips, positioning the legend at the chart's right edge.

Loading thumbnail…

Activity_6_Task_4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble's position mapped to horsepower and torque axes while its radius encodes fuel efficiency. The color of each bubble distinguishes the car manufacturer. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and includes interactive tooltips that display the car make on mouseover. Data is loaded from a CSV file and rendered as SVG with animated hover effects.

Loading thumbnail…

Activity_6_Task_4

This bubble chart explores the correlation between average horsepower, torque, and highway MPG across 31 car makes. Using D3.js v7 with SVG rendering, each bubble's position encodes horsepower and torque, while its size and color represent highway MPG and brand identity, respectively. Interactive tooltips reveal the car make on hover, and a legend maps bubble sizes to MPG values. The visualization reads data from a local CSV file, utilizing D3 scales and ordinal color schemes.

Loading thumbnail…

Activity_6_Q3

A scatter plot displays quarterly car sales for five automakers—Tesla, Toyota, Ford, BMW, and Mercedes—from a CSV dataset. Each company’s sales trends are shown as colored circles positioned along a point scale for quarters and a linear scale for sales values. The visualization uses D3.js v7 with SVG rendering, d3.csv for data loading, d3.scalePoint and d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.axisBottom and d3.axisLeft for chart axes.

Loading thumbnail…

Activity_6_Task_3_2

This example displays a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by shape to represent different species, with a legend for the categorical variable. The visualization uses D3 version 7 libraries including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. It loads CSV data from a GitHub repository and renders the plot using D3's selection and join operations within an SVG container.

Loading thumbnail…

Activity_6_Task_3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored according to the flower's species. The visualization uses D3 v6, specifically leveraging the `csv`, `select`, `scaleLinear`, and `extent` functions to load and scale the data, and rendering with SVG circles. Axis labels are added using `axisLeft` and `axisBottom`, with the chart's dimensions adapting to the browser window.

Loading thumbnail…

Activity6_Q2

A stacked bar chart displays quarterly sales figures for five car brands—Tesla, Toyota, Ford, BMW, and Mercedes—from Q1 2022 through Q2 2024. The chart is rendered as SVG using D3 v7, with each brand represented by a distinct color from the Tableau10 palette. The code loads data from a CSV file via `d3.csv`, stacks the series using `d3.stack`, and uses `d3.scaleBand` and `d3.scaleLinear` to position bars. Individual segment values are labeled above each bar, with axes and a legend generated by D3’s axis and legend utilities.

Loading thumbnail…

Activity6_Task2

This example shows the distribution of IMDb movie ratings across six genres, with each genre displayed as a horizontal stacked bar chart where colored segments represent the percentage of films falling into rating brackets from "below 5.0" to "above 8.5." The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` to generate the stacked rectangles, with axes rendered via `d3.axisLeft` and `d3.axisBottom`. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment using a formatted `d3.format` function. The data comes from a CSV file loaded directly in the HTML, with SVG as the rendering framework.

Loading thumbnail…

activity 6_Q1_2

This example shows a horizontal bar chart of the top 10 countries by population from a 2010 dataset. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Axes are rendered using D3’s `format` with a custom tick label that converts values to billions. The chart loads data via `d3.csv` and renders the rectangles with tooltips.

Loading thumbnail…

activity 6_Q1_1

This example displays a horizontal bar chart ranking the ten most populous countries by their year 2000 population, with labeled axes and a green fill for data marks. Built with React and D3.v5, it imports `scaleBand` and `scaleLinear` to map countries and population values to SVG coordinates, while `AxisBottom` and `AxisLeft` render ticks and labels. The `Marks` component creates rectangles with hover tooltips, and data is loaded asynchronously from a remote CSV using D3’s `csv` function.

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart of 2020 population figures for 30 countries, with bars colored light green and a blue axis grid. The chart uses React components to render SVG elements, with D3's `scaleBand` and `scaleLinear` handling the y and x axes respectively. Data loads asynchronously from a GitHub-hosted CSV file via `d3.csv`, and tooltips display formatted population values using `d3.format`. The visualization demonstrates local ES6 module imports and D3 integration within a React framework.

Loading thumbnail…

q3 buddha

A generative Buddha silhouette rendered in SVG occupies the center of a flower-backgrounded canvas, its path drawn from hardcoded coordinate data. Overlaid on the figure, a dense scatter of translucent circles—created by triply nested `A.map()` iterations using `Math.random()` for positioning and RGB fill values—produces a chaotic, overlapping point cloud. The React app uses `ReactDOM` to render the SVG, with the Buddha path transformed via `translate` and `scale` attributes, demonstrating a blend of deterministic path data and stochastic visual noise.

Loading thumbnail…

5 buddhas

The visualization renders a chaotic field of overlapping, randomly generated polygons alongside a large, detailed Buddha path, all displayed on a black background using React and SVG. The polygons are created by nested `A.map` iterations, with their positions, sizes, colors, and rotations determined by `Math.random()` calls. The central Buddha figure is drawn using a complex SVG `<path>` with many cubic Bézier curve commands (`M` and `C`). The code uses React’s JSX syntax to define the SVG structure, with the ReactDOM library handling rendering.

Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes, generated from a large SVG path, float against a black background while surrounded by hundreds of randomly colored, partially transparent circles. The circles are produced by three nested `map` functions over a number array, with position and fill color determined by `Math.random()`. The buddha paths are manually scaled and translated within the same SVG canvas. The visualization uses React and ReactDOM to render the entire composition as declarative SVG elements.

Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes, generated from a large SVG path, float against a black background while surrounded by hundreds of randomly colored, partially transparent circles. The circles are produced by three nested `map` functions over a number array, with position and fill color determined by `Math.random()`. The buddha paths are manually scaled and translated within the same SVG canvas. The visualization uses React and ReactDOM to render the entire composition as declarative SVG elements.

Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes, generated from a large SVG path, float against a black background while surrounded by hundreds of randomly colored, partially transparent circles. The circles are produced by three nested `map` functions over a number array, with position and fill color determined by `Math.random()`. The buddha paths are manually scaled and translated within the same SVG canvas. The visualization uses React and ReactDOM to render the entire composition as declarative SVG elements.

Loading thumbnail…

5 buddhas

Five overlapping buddha silhouettes, generated from a large SVG path, float against a black background while surrounded by hundreds of randomly colored, partially transparent circles. The circles are produced by three nested `map` functions over a number array, with position and fill color determined by `Math.random()`. The buddha paths are manually scaled and translated within the same SVG canvas. The visualization uses React and ReactDOM to render the entire composition as declarative SVG elements.