Skip to main content
Log in
S

saishruthik2361@gmail.com

@SaiShruthik·20 public vizzes

Loading thumbnail…

Fork of area chart_shruthik

This area chart displays the total COVID-19 cases for each country, using a blue filled area to represent case counts along a categorical country axis and a linear count axis. It loads data from a remote CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.area` to generate the SVG path. The chart also rotates x-axis labels and includes axis titles derived from the data.

Nov 5, 2024
Loading thumbnail…

Fork of area chart

This example renders an area chart of COVID-19 total cases per country using D3 v7. It loads CSV data from a GitHub gist, converts the total cases to numeric values, and maps countries to a band scale along the x-axis. The area is drawn as a single SVG path with a steelblue fill, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with country labels rotated and shown every fifth tick. The chart includes axis titles for "Country" and "Total Cases."

Nov 5, 2024
Loading thumbnail…

Viz_shruthik

This example visualizes the distribution of COVID-19 cases across countries using a pie chart built with D3 v6. It loads data from a remote CSV file and renders each country as a slice, with size proportional to total cases. Hovering over a slice displays a tooltip showing the exact case count and percentage. The code uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.select for SVG rendering, plus an interactive tooltip bound to mouseover events.

Nov 5, 2024
Loading thumbnail…

Viz1

This example uses a pie chart to display the distribution of COVID-19 cases across different countries, with each slice sized by the total number of cases. It is built with D3 v6, utilizing `d3.select`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to render the chart as an SVG. Hovering over a slice triggers a tooltip that shows the specific case count and percentage of the total, calculated with `d3.sum`. The data is loaded from a CSV file using `d3.csv`, and a legend is added with colored rectangles and country labels.

Nov 5, 2024
Loading thumbnail…

7.1 Question 1

This example shows a fruit distribution pie chart, visualizing the quantity of each fruit in a CSV dataset loaded from a GitHub gist. D3 v5 loads the data with `d3.csv`, converts it to an object mapping fruit names to numeric quantities, and uses `d3.pie` and `d3.arc` to generate the SVG paths. Each slice is filled with a categorical color from `d3.schemeSet2` via `d3.scaleOrdinal`, and labeled with the fruit name using SVG text elements positioned at each arc’s centroid.

Nov 2, 2024
Loading thumbnail…

Activity 7

This animated scatterplot cycles through the Iris dataset’s four measurements on the x-axis while keeping petal width on the y-axis. Colored circles distinguish the three species (setosa, versicolor, and virginica). The visualization is built with D3 v6, using `scaleLinear`, `axisBottom`, and `axisLeft` within a custom `scatterPlot` function. A `setInterval` triggers updates, re-rendering axes and labels every few seconds. SVG circle elements are colored via a switch statement, with legends and axis titles added dynamically, sourced from the CSV URL.

Nov 2, 2024
Loading thumbnail…

Activity6_Question4

This bubble chart shows the relationship between GDP and population for 20 global cities, with circle size encoding land area and color distinguishing cities. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleSqrt` for bubble radius, and `d3.scaleOrdinal` with `schemeCategory10` for color assignment. Interactive hover tooltips display city-specific population and GDP values, while axis labels identify the quantitative variables from the expanded_city_bubble_chart_dataset.csv file.

Oct 21, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between torque, horsepower, and highway MPG for various car makes, using average values from a CSV dataset. Each circle is positioned by horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG with a linear scale. The visualization uses D3.js v7 to render SVG elements and includes an interactive tooltip that displays the car make on mouseover. The legend communicates bubble size for MPG values, while a color scale provides a distinct hue for each manufacturer.

Oct 21, 2024
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species (Adelie, Chinstrap, and Gentoo), using color-coded circles to distinguish species. The code loads a CSV from a GitHub repository via `d3.csv`, converts the numeric columns, and renders an SVG chart with `d3.scaleLinear` for both axes, `d3.axisBottom`, `d3.axisLeft`, and a `d3.scaleOrdinal` with `d3.schemeSet1` for colors. A manual legend built with SVG rectangles and text labels appears in the top-right corner.

Oct 21, 2024
Loading thumbnail…

task2q

This scatter plot visualizes the relationship between Horsepower and MPG for various car brands, with each point colored by its brand. The visualization loads car data from a CSV file hosted on GitHub, parses it with `d3.csv`, and maps values to screen coordinates using `d3.scaleLinear` for both axes. Points are rendered as SVG circles with `d3.selectAll`, and a legend is generated using `d3.scaleOrdinal` with `d3.schemeSet1`. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, with the SVG container created using standard D3 selection and attribute methods.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3.2

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with different species distinguished by shape. The chart uses D3 v7’s `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map species to marker shapes, and `symbol` to generate the paths. The axes component leverages `axisLeft` and `axisBottom`, while a custom shape legend is built using `symbolGenerator`. Data is loaded asynchronously from a CSV via `csvParse`, with numeric fields converted, and the visualization updates through a state management and `setState` render loop.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 with scaleLinear for scales, extent for domains, and axisLeft/axisBottom for ticks. The SVG is sized to the full window, and circles are joined via selectAll and data. The plot also misapplies rx/ry attributes to circles, which have no visual effect. Data loads from a GitHub-hosted CSV via d3.csv.

Oct 21, 2024
Loading thumbnail…

Activity6_Task2_Question2

This visualization displays a stacked horizontal bar chart of product category reviews, showing the proportion of 1-to-5-star ratings within each category. The bars are segmented by rating subgroup and colored via a d3.scaleOrdinal with the d3.schemeSet2 palette, with a legend positioned to the right. The code loads CSV data from a GitHub raw URL, processes it with d3.stack for stacking, and renders SVG rectangles with d3.axisBottom and d3.axisLeft for scales. Interactive tooltips appear on mouseover, displaying the percentage share of each rating segment. The visualization uses d3.csv, d3.stack, and SVG element bindings via d3 joins.

Oct 21, 2024
Loading thumbnail…

naa istham

This interactive stacked bar chart compares product categories by the percentage of customer ratings in five ranges from below 5.0 to above 8.5, using a horizontal layout. Each bar is divided into colored segments representing these rating tiers, and hovering over a segment displays the exact percentage of that category's total. Built with D3 v7, the visualization uses `d3.scaleOrdinal` for colors, `d3.stack` to calculate the cumulatively stacked bar widths, and `d3.join` for efficient element creation. A legend maps colors to rating ranges, and the tooltip shows precise hover values.

Oct 21, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes IMDb movie ratings across six genres, showing the proportion of films in five rating brackets from below 5.0 to above 8.5. A tooltip displays the exact percentage for each rating segment on mouseover. Built with D3 v7, the visualization uses d3.stack() to compute the stacked series, d3.scaleBand for genre positioning, and d3.scaleLinear for percentage values, rendering as SVG with interactive hover effects that adjust opacity and reveal detailed data.

Oct 21, 2024
Loading thumbnail…

Activity6_Task1_Question2

This visualization displays the 2010 population of 20 countries as a horizontal bar chart, using a D3 scaleBand for the categorical country axis and a scaleLinear for the numeric population axis. The chart is rendered as SVG in React, with the population data fetched as CSV from a GitHub repository. Axis components generate tick marks and labels, while the Marks component draws green rectangles whose width encodes population, with a native SVG `<title>` tooltip showing the formatted value in billions.

Oct 21, 2024
Loading thumbnail…

Activity6_Task1_Question1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by the categorical variable Country. The visualization is rendered as an SVG using React, with D3’s `scaleBand` mapping countries to the y-axis and `scaleLinear` mapping population values to the x-axis. Data is loaded from a remote CSV file via D3’s `csv` function, and each bar includes a tooltip showing the formatted population value using D3’s `format` API.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 1

This is a horizontal bar chart that ranks the top 30 countries by their 2020 population. The chart uses a light green bar for each country, with a blue x-axis and a blue y-axis, showing the population in billions on the x-axis. The visualization is built using React and D3 v5, with the `scaleBand` and `scaleLinear` functions from `d3` to map the data on the SVG canvas. The data is loaded from a GitHub CSV file and the population values are multiplied by 1000. The marks are `rect` elements with a tooltip displaying the formatted population value.

Oct 21, 2024
Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes are layered over a photographic background of green flowers, with each figure rendered in a different solid color. The composition creates a dense, repeating pattern of sacred imagery against the natural texture. Built with React and rendered as SVG, the visualization uses hardcoded path data for each Buddha shape, transformed with translate and scale operations. The code defines the SVG canvas, imports the background image directly, and applies stroke and fill properties to achieve the overlapping effect.

Oct 18, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization shows a dense field of randomly scattered circles layered over a large, semi-transparent Buddha silhouette, creating a colorful, overlapping collage effect. It renders 420 circles in a 960 by 1000 SVG canvas, each with a random position, RGB fill color, and fixed radius and opacity. The Buddha path is drawn from a static SVG path dataset and transformed into place. Built with React and rendered via SVG, the code uses ReactDOM to mount the component and relies on JavaScript’s `Math.random()` for all generative randomness.

Oct 11, 2024