Skip to main content
Log in
A

aadesh.pranesh@gmail.com

@aadeshpranesh·24 public vizzes

Loading thumbnail…

Q2 Task 9

A combined line and area chart displays US asthma cases from 2009 to 2022. The visualization uses a black curve to trace the trend line and a light green fill to highlight the area beneath it. Built with D3 v5, the code employs `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, and `d3.area` to render the SVG paths. Data is loaded from a remote CSV file, with the x-axis showing the year and the y-axis labeled "Asthma Cases" with abbreviated numeric tick formats.

Apr 21, 2024
Loading thumbnail…

T9_Q2_Aadesh

This area chart visualizes the stock prices of Amazon and Tesla over time, with the y-axis representing price and the x-axis representing year. The chart uses two filled areas with linear gradients—steel blue for Amazon and orange for Tesla—to highlight the trends and compare the two companies' performance. The visualization is built with D3.js v7, loading data from a CSV file containing oil price and stock price data, and rendering as an SVG. Axes are scaled using `d3.scaleLinear` and `d3.extent`, while the areas are generated with `d3.area`.

Apr 21, 2024
Loading thumbnail…

Fork of Q2_AreaChart

This example shows a dual-series area chart comparing annual oil and gold prices from 2000 to 2020, using data embedded in the script. It renders two overlapping filled regions with distinct colors, strokes, and axes via d3.area, d3.scaleLinear, and d3.axisBottom/axisLeft in an SVG. A lightsteelblue tooltip appears on hover (though no mouse handlers are attached), and the chart uses margins, a combined dataset, and static paths without animation.

Apr 21, 2024
Loading thumbnail…

T9_Q1_Aadesh

This visualization presents a pie chart displaying aggregated world leader ratings, where each slice represents a leader’s total overall rating alongside their average score. The chart is rendered as an SVG using D3.js v5, with pie geometry generated via the `pie()` and `arc()` functions, and colors assigned through `scaleOrdinal`. Hovering over a slice reveals a tooltip with detailed leader statistics. The data is loaded asynchronously from a CSV file hosted on GitHub, and the chart includes a legend in the corner for quick reference.

Apr 21, 2024
Loading thumbnail…

Task 9 Tutorial 1 Aadesh

This animated scatter plot displays the Iris dataset, showing the relationship between various sepal and petal measurements. The visualization cycles through different x-axis variables while keeping petal width on the y-axis, with points colored by species. Built using D3.js version 6.7.0, it employs a reusable scatter plot module with scaleLinear, axisBottom, and axisLeft functions. The SVG rendering includes a color legend, rotating axis labels, and a timer that updates the plot every few seconds. Data is loaded asynchronously from a GitHub-hosted CSV file using the file-loader command.

Apr 21, 2024
Loading thumbnail…

T9Q1

This pie chart shows the mortality rate from mental health deaths across different countries in the United States. The visualization uses D3 v5 with a standard SVG rendering approach, employing `d3.pie()` and `d3.arc()` to generate the chart segments. Each slice is colored using `d3.scaleOrdinal()`, with country names labeled directly on the segments and a legend on the right displaying country names and their corresponding death counts. The data is loaded asynchronously from a CSV file hosted on GitHub.

Apr 19, 2024
Loading thumbnail…

Fork of Task 8 Ques 1

This visualization presents a pie chart of mental health death rates across various countries, using data from a local CSV file. The chart uses D3.js (v7) to generate the SVG, with `d3.pie()` computing arc angles and `d3.arc()` rendering the paths. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) maps countries to colors, and a legend lists each country with its corresponding color. The data is fetched via the Fetch API, then parsed using `d3.csvParseRows`, with values converted to numbers for the pie layout.

Apr 19, 2024
Loading thumbnail…

Task 8 Tut1

This animated scatter plot explores the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each flower species appears as a distinct color—skyblue, lightgreen, or orange—with a legend identifying the groups. Built with D3.js, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `setInterval` to rotate through the four measurement columns, updating the chart every few seconds with an SVG rendering.

Apr 18, 2024
Loading thumbnail…

T8 Tut1

This example demonstrates a basic D3.js integration within a VizHub project, rendering the text "Hello VizHub!" into a centered HTML div. It shows how to load D3 v5 from a CDN, import the `select` function from the D3 library, and use a local ES6 module to supply the message string. The code also defines a regular expression and a numeric constant, though these are not used for any visual output. The rendering approach is simple DOM manipulation via `select('#message').text()`, with styling applied through an external CSS file.

Apr 18, 2024
Loading thumbnail…

Aadesh Question 2 Activity 6

This stacked bar chart shows how rating levels distribute across six lifestyle categories, with each bar divided into segments representing the percentage of ratings below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, and above 8.5, summing to 100% per category. The chart uses d3.stack() to compute the stacked series, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Hover interactions trigger a custom tooltip that displays the exact percentage for each rating segment. Data comes from a CSV file with pre-aggregated proportions, and the visualization is rendered as SVG using D3 v7.

Apr 11, 2024
Loading thumbnail…

Sample try

A stacked bar chart shows the distribution of IMDb movie ratings within categories, with each bar divided into color-coded segments representing ratings from 1 to 10 as percentages that total 100%. Built with D3 v7, the visualization uses `d3.stack()` for data aggregation, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and an ordinal scale for segment colors. It reads CSV data and renders as SVG, with tooltips displaying exact percentage values on hover.

Apr 11, 2024
Loading thumbnail…

Question 2 Aadesh

This stacked bar chart shows the distribution of movie ratings across six categories, with each bar divided into five rating brackets from “below 5.0” to “above 8.5” that sum to 100%. The visualization uses D3 v7’s `d3.stack()` and `scaleBand`/`scaleLinear` to position rectangles in an SVG, with a color ordinal scale differentiating rating levels. Hovering over a segment triggers a custom tooltip, and axes are rendered via `d3.axisBottom` and `d3.axisLeft`. Data comes from a CSV file with precomputed proportions.

Apr 11, 2024
Loading thumbnail…

Question 4 Aadesh

This bubble chart compares GDP per capita, life expectancy, and population area ratio across 20 countries. Each circle’s position maps to the x- and y-axes, while its radius encodes population density, and its color distinguishes countries. Hovering reveals a tooltip with exact values. The visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, d3.scaleOrdinal with schemeCategory10 for colors, and SVG circles with mouse events for interaction.

Apr 9, 2024
Loading thumbnail…

Tutorial 4 Aadesh

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque, while its radius and color represent highway MPG and make identity, respectively. Built with D3 v7, the SVG chart includes interactive tooltips on mouseover and legends for bubble size and color categories. Data is loaded from an external CSV file, with axes, scales, and tooltip transitions defined using D3’s selection and scale APIs.

Apr 9, 2024
Loading thumbnail…

Question 3.2 Aadesh

A responsive scatter plot visualizes test cricket player records by mapping matches played on the x-axis and total runs on the y-axis. Each player appears as a distinct symbol, with shapes assigned by country through `d3.scaleOrdinal` and `d3.symbol` types. The visualization uses `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` for axis scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering labeled axes. Animated symbol positioning via `d3.transition` supports interactive exploration of player performance.

Apr 9, 2024
Loading thumbnail…

Question 3.1

This interactive scatter plot visualizes test cricket records, mapping runs scored against matches played for individual players, with each point color-coded by the player’s country. The plot uses D3 v6 (d3.scaleLinear, d3.extent, d3.axisBottom, d3.axisLeft) and renders as an SVG, sizing responsively to the viewport. Data is loaded from a remote CSV via d3.csv, and the chart also captures innings and batting average for each player, though only matches and runs are shown on the axes.

Apr 9, 2024
Loading thumbnail…

Question 3.2 Aadesh

A responsive scatter plot visualizes cricket records from a CSV dataset by plotting matches played against runs scored for each player. Circles are color-coded by country using `d3.scaleOrdinal` and `d3.schemeCategory10`, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for scales, and computes dimensions from `window.innerWidth` and `window.innerHeight` for responsive SVG rendering. The plot highlights the relationship between player experience and run accumulation across international teams.

Apr 9, 2024
Loading thumbnail…

Tutorial 3.2 Scatter Plot with Shape Aadesh

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three species, distinguished by shape. The plot uses D3.js v7 with `scaleLinear` and `scaleOrdinal` to map data to positions and symbolic shapes from `symbolsFill`. A shape legend displays each species. Data is loaded from a remote CSV file and parsed with `csvParse`, with the axes and legend created using D3's `axisLeft`, `axisBottom`, and custom shape legend components.

Apr 9, 2024
Loading thumbnail…

Activity 7 Scatter Plot Tutorial 3.1

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, virginica). Built with D3 v6 and rendered as SVG, the chart uses `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. Circles are bound via a data join, with fill colors mapped per species, while axes labels are added as SVG text elements.

Apr 9, 2024
Loading thumbnail…

Fork of Task 2

A stacked horizontal bar chart shows the proportional distribution of IMDb ratings across movie genres, with each genre as a row and color-coded segments for rating brackets from "below 5.0" to "above 8.5." Hovering over a segment reveals a tooltip with the exact percentage for that rating level within that genre. Built with d3.v7, the chart uses `d3.csv` to load data, `d3.stack` for stacking, `d3.scaleOrdinal` for colors, and `d3.scaleBand` for the categorical y-axis, with SVG rendering and interactive mouse events for the pop-ups.

Apr 9, 2024
Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Apr 7, 2024
Loading thumbnail…

Activity6-1 Q1.1

A horizontal bar chart displays the population of ten countries in the year 2000, with each bar’s length encoded by a linear scale and countries ordered along a band scale. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleBand` to position bars and axes, while SVG `<rect>` elements render the marks. Data is loaded from a remote CSV file, and tick labels are formatted using D3’s `format` API to abbreviate large numbers.

Apr 7, 2024
Loading thumbnail…

Activity 6_Task 1

This example renders a simple scatterplot with categorical y-axis labels and a quantitative x-axis, using React components to generate SVG ticks and lines. The `AxisBottom` component maps over scale ticks to draw vertical grid lines and formatted labels, while `AxisLeft` positions text labels at band centers. It imports `select` from D3 v5 to update the DOM, and the chart assumes data bound to the scales passed as props. The visualization demonstrates modular axis construction with reusable ES6 components.

Apr 7, 2024
Loading thumbnail…

Fork of 5 Buddhas

A vivid, densely layered visualization of hundreds of overlapping, rotating polygons rendered on a black canvas, with each shape generated from a nested loop over a 0–20 array and given random coordinates, colors, and diagonal transforms. The piece mixes computational chaos with centered Buddhist iconography, embedding a large, hand-drawn SVG path of a Buddha figure amid the colorful abstract forms. Built with React and ReactDOM, the visualization uses SVG `<polygon>` and `<path>` elements, with colors and positions driven by `Math.random()` calls, and is styled with a bold red message overlay.

Mar 14, 2024