S

sudheervnarasimha1@gmail.com

@sudheer11111·16 public vizzes

Loading thumbnail…

activity 7 tutorial

This animated scatter plot visualizes the Iris flower dataset, cycling through different pairings of sepal and petal measurements on the x-axis every few seconds while petal width and sepal length remain on the y-axis. Data points are color-coded by species (setosa, versicolor, virginica) with a legend and rotating axis labels. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the plot dynamically. The SVG renders circles with custom fill colors and includes a reusable `scatterPlot` module for configuration.

Loading thumbnail…

activity7.1q2

This example shows the relationship between hours studied and exam scores using an area chart, with a light blue filled region and steel blue outline. It loads student performance data from a GitHub-hosted CSV file and parses the numeric columns. The visualization uses D3 v6 to create linear scales for both axes, an `area` generator for the filled path, and `axisBottom` and `axisLeft` for the axes. Labels are added for both dimensions, and the SVG is rendered directly into the page.

Loading thumbnail…

activity7.1q1

This visualization is a pie chart that shows the distribution of user behavior classes. The data comes from a CSV file linked in the code. The chart uses D3.js version 6.7.0, specifically the `pie`, `arc`, and `select` functions to generate pie slices and display percentage labels for each class. A legend on the right identifies the color coding. The overall title sits below the chart, with an "Activity7.1q1" title in the HTML head.

Loading thumbnail…

activity7

This example shows a pie chart of ticket priority distribution, with slices labeled High, Medium, and Low. It loads CSV data from a remote URL, uses `d3.rollup` to count tickets by priority, and renders the chart with `d3.pie` and `d3.arc`. A `d3.scaleOrdinal` color scheme distinguishes priorities, and an SVG title labels the visualization.

Loading thumbnail…

Activity6task2

This stacked bar chart shows the percentage distribution of IMDb rating levels across six movie genres, with each genre broken into five rating categories from "below 5.0" to "above 8.5." Using D3 v7 with SVG rendering, the chart employs `d3.stack()` to create the stacked segments, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the genre axis. Hovering over any segment reveals a tooltip displaying the exact percentage for that rating level within the genre, using `d3.select` and event handlers.

Loading thumbnail…

activity6task3q1

This scatter plot visualizes the relationships between height and weight in a small dataset, with points colored blue for males and pink for females. The visualization uses D3 v6 and renders as an SVG, loading data from a CSV file. It uses `scaleLinear` for both axes, `extent` to calculate domains, and `axisLeft` and `axisBottom` to draw the axes. The plot is displayed full-screen, with circles positioned according to the scaled data values.

Loading thumbnail…

Activity6_Task4q1

This bubble chart visualizes the correlation between RAM, battery capacity, and price for 21 mobile phone brands. Each circle represents a phone, positioned by its RAM (x-axis) and battery capacity (y-axis), with the circle's area scaled to the price and color-coded by brand. Built with D3 v7, the SVG visualization uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and includes interactive tooltips on hover. The data comes from the `mobilephones.csv` file, with axis labels and a legend for brand identification.

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position encodes torque (y-axis) and horsepower (x-axis), while its size reflects highway MPG and its color distinguishes the car maker. The visualization uses D3 v7 with SVG rendering, including interactive tooltips that display a car’s make on hover. It also provides a legend for bubble size and color, with data sourced from a CSV file. The chart employs `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo` for scales, colors, and axes.

Loading thumbnail…

activity6task3-2

This visualization shows the classic Iris flower dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis, with each of the three species distinguished by different symbol shapes from d3’s symbolsFill. A legend on the right identifies the species-shape mapping using d3.scaleOrdinal with shapeSymbol generator. The chart fetches the iris.csv data from GitHub, parses it with d3.csvParse, and renders the plot using d3.v7’s select, scaleLinear, axisBottom, and axisLeft, with axes fitted via the axes.js helper module.

Loading thumbnail…

activity6task3

This example visualizes the Iris dataset with a scatter plot mapping petal length and width on the axes, coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. It loads data from a remote CSV via D3 v6’s `csv` function, parses numeric fields, and renders SVG circles with `scaleLinear` scales for x and y positions. Axes are drawn using `axisLeft` and `axisBottom`, with rotated and positioned text labels for petal length and sepal length, all within a full-window SVG canvas.

Loading thumbnail…

Activity6task2-q1

This stacked bar chart visualizes the distribution of score ranges across six school subjects, revealing how grade percentages vary by subject. Each horizontal bar represents a subject, segmented into seven color-coded score intervals from “below 40” to “above 90.” Built with D3 v7 and SVG, the chart uses `d3.stack()` to compute stacked segments and `d3.scaleOrdinal` for color mapping. Hovering over a segment displays a tooltip showing the exact percentage for that score range within the subject. The data comes from a CSV file containing percentage values that sum to 1 for each subject.

Loading thumbnail…

Fork of activity6_Task1q2

This interactive bar chart displays the population of 20 countries in 2010, with each country listed on the vertical axis and its population shown as a horizontal bar length. The visualization is built using React and D3 version 5, leveraging `scaleBand`, `scaleLinear`, and the `csv` loader to fetch data from a GitHub URL. SVG rectangles represent the bars, with tooltips formatted using D3's `format` function to abbreviate large numbers (e.g., '1.2B'). Axis components are custom React elements, and the chart is rendered entirely as SVG within a React component.

Loading thumbnail…

activity6_Task1

This visualization displays a horizontal bar chart comparing the populations of ten countries for the year 2000, sourced from a CSV file loaded via d3.csv. It uses React with d3.v5, rendering SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. A custom d3.format with the '.2s' specifier converts values to billions, and each bar includes an SVG title element for tooltips. Axes are built with tick components that generate lines and text labels.

Loading thumbnail…

activity6_Task-1

This example presents a minimal web page titled “Hello HTML!” using a large, centered message styled with CSS. The code is a bare-bones HTML starter demonstrating the basic integration of CSS for visual styling and JavaScript for potential interactivity, though no dynamic behavior is implemented. It serves as a simple foundation for web development, showing a static text element rendered directly within the browser. The project is structured as a React starter, but this particular file contains only standard HTML and CSS markup without additional libraries or frameworks.

Loading thumbnail…

6 buddhas

The visualization displays six buddha-like figures formed by dense, swirling SVG paths, rendered over a repeating grid of flower images. It uses React with ReactDOM to generate and position hundreds of layered `<image>` and `<path>` elements. The paths contain large, complex coordinate strings, while the images are placed using random multiplication of array values. The scene is set on a green background with a large red message, and the SVG is rotated and scaled to create a kaleidoscopic, ornamental composition. The code relies on React’s JSX and inline SVG attributes.

Loading thumbnail…

activity-5

The visualization displays a field of randomly generated, overlapping polygons that create a chaotic, colorful mandala-like pattern. It builds this composition using React and renders it as inline SVG elements. A distinct Buddha-like figure is then drawn on top using an SVG path with a complex series of cubic Bézier curves. The code relies on React and ReactDOM for component creation and rendering, and uses JavaScript's `Math.random()` to generate positions, fill colors, and rotations for the polygons.