Skip to main content
Log in
S

sairohithchada@gmail.com

@sairohithchada·12 public vizzes

Loading thumbnail…

Fork of Hello VizHub

This visualization shows sales figures across different product categories as a filled area chart. The SVG is rendered using D3 v7, with a steelblue area path encoding values through the vertical axis. The chart loads its data from a public GitHub gist and uses D3's `d3.json` to parse it, `d3.scalePoint` and `d3.scaleLinear` for axes, and the `d3.area` generator for the path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with manually placed text labels.

Apr 9, 2025
Loading thumbnail…

Activity 7_Question 1

This pie chart visualizes the distribution of sales across product categories, with each slice labeled by category name and colored using the D3 category color scheme. Hovering over a slice displays a tooltip showing the category’s percentage of total sales, calculated from the summed values. The chart is built with SVG and uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the arcs and colors, while legends are manually positioned to map categories. Data is loaded from a remote JSON file.

Apr 9, 2025
Loading thumbnail…

Activity 6_tutorial 3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species indicated by distinct marker shapes. Using D3.js version 7, the visualization employs scales from `scaleLinear` and `scaleOrdinal`, along with the `symbol` API to generate shape-based marks. The plot includes labeled axes from `axisLeft` and `axisBottom`, and a custom shape legend. Data is loaded asynchronously from a CSV file and parsed with `csvParse`, with point positions calculated via the `xScale` and `yScale` functions.

Apr 1, 2025
Loading thumbnail…

Activity 6_Task 4

This bubble chart visualizes the relationship between R&D spending, net profit, and staff count for 19 tech companies. Each bubble’s position encodes R&D spending on the x-axis and net profit on the y-axis, while the bubble’s area scales with staff count, and color distinguishes the organization. Built with D3 v7, the chart uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeSet3` for categorical colors. Interactive tooltips appear on hover, displaying each company’s exact metrics. The data is loaded from a CSV file and rendered as SVG.

Apr 1, 2025
Loading thumbnail…

Activity 6_tutorial 4

This bubble chart shows the relationship between average horsepower and torque across car makes, with bubble size encoding highway MPG. It is built with D3 v7, rendering SVG circles positioned by linear scales for the x- and y-axes. A color scale, using d3.interpolateTurbo, distinguishes car makes, and the chart includes a legend for highway MPG. Interactive tooltips appear on mouseover, displaying the make of each car. Data is loaded from a CSV file, and the visualization updates dynamically with hover effects.

Apr 1, 2025
Loading thumbnail…

Activity 6_Question 3

This scatter plot shows the relationship between area and elevation for a set of global cities, with each city colored distinctly and identified in a legend. The x-axis uses a logarithmic scale for area, while the y-axis uses a linear scale for elevation in meters. Built with D3.js v6, it loads CSV data from a GitHub gist and renders SVG circles using d3.csv, d3.scaleLog, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Tooltips are not implemented, but the data points are semi-transparent to reveal overlapping points.

Apr 1, 2025
Loading thumbnail…

Activity 6_tutorial 3.1

This scatter plot visualizes the Iris dataset, plotting petal length against petal width and coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The code loads CSV data from a GitHub gist, scales the x and y axes with `d3.scaleLinear`, and renders circles in an SVG using `d3.select` and `data.join`. Axis labels and ticks are appended via `d3.axisLeft` and `d3.axisBottom`, with margins and a fixed radius of 5 pixels for each point.

Apr 1, 2025
Loading thumbnail…

activity 6_task_2

This stacked bar chart shows the daily time allocation for five life stages—children, adolescents, young adults, middle-aged, and elderly—across categories such as sleep, work/study, entertainment, outdoor activities, and meditation. Each bar segment represents a category’s duration in minutes, with a tooltip revealing exact values on hover. Built with D3 v7, the visualization uses d3.stack() to aggregate the data, d3.scaleBand() for the y-axis, and d3.scaleLinear() for the x-axis, rendering SVG rectangles. Styling leverages CSS for typography and axis formatting, with a custom tooltip div for interactivity.

Apr 1, 2025
Loading thumbnail…

activity 6_tutorial 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across different genres, showing the relative percentage of each genre falling into rating brackets from "below 5.0" to "above 8.5." The chart uses D3.js (v7) with SVG rendering, employing `d3.stack()` to create the stacked segments, `d3.scaleBand()` for the categorical genres, and `d3.scaleLinear()` for the percentage axis. Interactive tooltips display exact percentages on hover. The data comes from the included `data.csv` file, and the code uses D3's selection API and axis generation functions.

Apr 1, 2025
Loading thumbnail…

Activity 6_Task 1_2

This horizontal bar chart displays 2010 population figures for 20 countries, with countries arranged along the y-axis and population values mapped to the x-axis. The bars are rendered as light green rectangles using SVG. The implementation builds on D3 v7, employing `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.csv` to load data from a GitHub-hosted CSV file. X-axis ticks are formatted with `d3.format` to display values in billions.

Apr 1, 2025
Loading thumbnail…

Activity6_task 1

This horizontal bar chart displays the population of ten countries in the year 2000, with light green bars extending along a linear scale from left to right. The chart uses D3 v7 to load CSV data from a GitHub repository, with `d3.scaleLinear` mapping population values to the x-axis and `d3.scaleBand` positioning countries on the y-axis. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while tick labels on the x-axis are reformatted to abbreviate millions as "B" (e.g., 200M to 200B). The SVG rendering includes custom axis labels for "POPULATION-2000" and "Countries."

Apr 1, 2025
Loading thumbnail…

Activity 6_tutorial1

This horizontal bar chart displays the 2020 population estimates for the top 30 countries, with countries listed along the y-axis and population values mapped to bar length on the x-axis. The visualization uses a linear scale for population and a band scale for country categories, rendering light green bars as SVG rectangles via the `d3.scaleLinear` and `d3.scaleBand` APIs. The bottom axis includes a custom tick format that converts millions to billions (e.g., "1.2B"), and both axes are labeled. Data is loaded asynchronously from a CSV file using `d3.csv`.

Apr 1, 2025