S

sindhureddykandada@gmail.com

@sindhureddykandada·18 public vizzes

Loading thumbnail…

activity 7 task 1

This pie chart visualizes the distribution of horsepower values across different car makes from a CSV dataset. The code uses D3 v7’s `pie()` and `arc()` generators to compute and draw the slices as SVG paths, with a `scaleOrdinal` color scale mapping each make to a distinct fill. A legend is appended as SVG rectangles and text labels, while axis titles for “Car Make” and “Horsepower” are added manually. The visualization reads data asynchronously via `csv()`, converts horsepower to numeric values, and renders with a light gray background.

Loading thumbnail…

activity 7 task 2

This area chart visualizes the maximum horsepower for various car makes, with the x-axis ordered by make and the y-axis scaled linearly from zero. The chart loads CSV data from a GitHub repository using `d3.csv`, then renders a filled blue area via the `d3.area()` generator onto an SVG canvas. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and labels for “Car Make” and “Horsepower” are positioned using SVG text elements. The visualization uses D3 v7 with a clean, responsive layout and subtle hover opacity effects.

Loading thumbnail…

activity 7

This animated scatter plot visualizes the Iris flower dataset, cycling through different pairings of sepal and petal measurements on the x-axis while keeping sepal length on the y-axis. The D3.js library (v6.7.0) powers the visualization, with data loaded via `d3.csv` and scales and axes built using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The chart uses `setInterval` to periodically change the x-axis variable and updates the SVG circles, labels, and legend accordingly, with colors distinguishing the three Iris species.

Loading thumbnail…

Activity 1_task 1

This example displays a horizontal bar chart of population figures for 30 countries in 2020, using D3 scales for positioning and React for rendering. It loads comma-separated data from a GitHub-hosted CSV file, parsing the `2020` column and multiplying by 1000 to represent population. SVG rectangles are generated from the `Marks` component, with axes drawn using `scaleBand` and `scaleLinear` and formatted with D3's `format` function, converting Giga to Billions for labeled ticks.

Loading thumbnail…

activity 6_question 4

This bubble chart displays daily weather observations from a climate dataset, plotting humidity on the x-axis against mean pressure on the y-axis. Each circle’s radius encodes wind speed, while its color represents mean temperature, using a viridis sequential color scale. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleSequential` for color mapping. A legend with a linear gradient and axis communicates the temperature scale, with data loaded from a CSV file.

Loading thumbnail…

Activity 6_question 3

This example visualizes the relationship between daily mean temperature and humidity, using wind speed to encode point color, in a scatter plot. Daily climate data from a CSV file is represented by circles, with a continuous color gradient that maps wind speed values. The chart includes labeled axes and a color legend for wind speed. The implementation uses D3 v7 functions like `scaleLinear`, `extent`, `scaleSequential`, `interpolateCool`, `axisBottom`, and `axisLeft`, rendering as SVG within the HTML document. A custom color legend is created with a linear gradient and axis ticks.

Loading thumbnail…

Activity6_Task2

A stacked bar chart visualizes the distribution of IMDb rating categories across six movie genres, showing the proportion of ratings below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, and above 8.5. Each genre’s bars sum to 100%, with hover tooltips revealing exact percentages. Built with D3 v7, the chart uses `d3.stack` to compute stacked series, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` and `d3.scaleLinear` for axes. Data comes from a CSV file, rendered as SVG elements.

Loading thumbnail…

activity 6_question 2

This example visualizes daily transaction counts for multiple stores as a stacked bar chart. It shows how each store contributes to the total transactions on each date between January 1 and January 5, 2013. The chart uses D3 v6 to load CSV data, group records by date and store number, and stack the values with `d3.stack()`. It renders SVG rectangles with scales for positioning and colors from `d3.schemeCategory10`, alongside axes and a legend.

Loading thumbnail…

Activity 6_task 4

This visualization shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble colored by manufacturer and sized by fuel efficiency. It uses d3.csv to load the data, then renders an SVG scatterplot with d3.axisBottom and d3.axisLeft. Bubble radius is mapped through a linear scale, while color uses d3.scaleOrdinal with d3.interpolateTurbo. Interactive tooltips appear on mouseover, and a legend encodes MPG values with reference circles and labels.

Loading thumbnail…

Activity 6_ Task 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with each point’s shape encoding the species. The visualization loads the iris dataset from a GitHub-hosted CSV file and parses it using `d3.csvParse`. It builds the plot with `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape mapping, and renders marks via `d3.symbol` with a size of 200. The chart includes labeled axes and a custom shape legend, using the `axes.js` and `shapeLegend.js` modules.

Loading thumbnail…

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, virginica) using a custom color function. Built with D3 v6 and rendered as an SVG, the chart loads CSV data from a remote GitHub URL, uses `scaleLinear` for axes, and applies `axisLeft` and `axisBottom` for tick marks. The legend is implicit through distinct fill colors, with additional attributes like sepal length and width stored but unused in the visual mapping.

Loading thumbnail…

activity 6 task 1.2

This example shows a horizontal bar chart of 2010 population data for 20 countries, sorted by country name. The visualization uses React to render SVG rectangles, with D3 v5 scales (scaleBand and scaleLinear) for positioning. Axes are custom React components, and the chart loads CSV data from a GitHub repository, formatting population values with the d3.format utility. Hovering over a bar displays its population value via an SVG title element.

Loading thumbnail…

Activity 1_question 1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout where bar length encodes population and bar position encodes country name. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering SVG rectangles via the custom `Marks` component. Axis components generate tick lines and labels, with tick text styled blue and marks filled light green. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the x-axis labels are formatted using D3's `format` function to abbreviate large numbers with 'B' for billions.

Loading thumbnail…

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

A dense scatter of small colored circles fills a black background, generated from triple nested loops over an array of numbers with random positioning and RGB fill values. Overlapping the circles, a large orange Buddha silhouette rendered as SVG path data is drawn with a heavy stroke, creating a layered, chaotic composition. The visualization uses React to render SVG elements, mixing generative randomness with a fixed vector path.

Loading thumbnail…

TASK-3 6 overlapping buddhas with flower background

A React application renders six overlapping Buddha silhouettes as SVG paths atop a floral background image. The visualization uses nested map loops to generate twenty-one colored, rotated circles with random positioning and RGB fill values, though their visual impact is secondary. The main composition layers the Buddha path data through SVG transforms, creating stacked translucent figures. Rendering relies on React 16.10 and ReactDOM, with the flower image loaded via CSS. The code appears to embed static path data rather than using dynamic or data-driven visualization techniques.

Loading thumbnail…

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

A colorful, abstract composition shows a small Buddha silhouette repeated and overlaid across the canvas, created by nested loops that draw hundreds of semi-transparent circles and polygons with randomized positions, colors, and rotations. The SVG rendering uses React to map over a numeric array, generating shapes with dynamic fill values and opacity. The central Buddha path is scaled and translated as a static reference point, while the surrounding generative elements create a dense, overlapping visual effect.

Loading thumbnail…

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

A colorful, abstract composition shows a small Buddha silhouette repeated and overlaid across the canvas, created by nested loops that draw hundreds of semi-transparent circles and polygons with randomized positions, colors, and rotations. The SVG rendering uses React to map over a numeric array, generating shapes with dynamic fill values and opacity. The central Buddha path is scaled and translated as a static reference point, while the surrounding generative elements create a dense, overlapping visual effect.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a colorful, abstract composition on a black background. Each Buddha is rendered as a series of rotated polygons whose positions and colors are generated randomly, creating a dense, kaleidoscopic effect. The visualization uses React to render SVG elements, with polygon points and fill colors computed via `Math.random()` within nested array maps. A single Buddha path is also scaled and translated, combining procedural geometry with a fixed shape.