Skip to main content
Log in
T

tsumanth619@gmail.com

@sumanth61911·16 public vizzes

Loading thumbnail…

assq1

This area chart visualizes student marks against roll numbers, using data loaded from a remote CSV. The chart is rendered as an SVG using D3 v7, with a red filled area and labeled axes for 'Year' and 'Population.' The code constructs linear scales, applies an area generator, and adds axes using `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft`.

Apr 13, 2024
Loading thumbnail…

ass2q1

This example renders a pie chart of automotive product sales data for April 2024, sourced from a CSV file via GitHub Gist. Each slice represents an item category, with its total sales value labeled directly on the chart and repeated in a legend. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the slices, while `scaleOrdinal` assigns colors and `format` styles the numeric labels. The SVG output is generated within an HTML page, styled with custom CSS for the legend and text.

Apr 13, 2024
Loading thumbnail…

activity 6 question4

This bubble chart visualizes the relationship between average camera resolution (megapixels) and average battery capacity (mAh) for various smartphone brands, with bubble size representing average screen size in inches. Each brand is color-coded using a categorical Tableau10 palette. The chart uses D3’s linear scales for the x- and y-axes, a square-root scale for bubble radius, and an ordinal scale for colors. Hovering over a bubble displays a tooltip with the brand name and the exact values for battery, camera, and screen size.

Apr 5, 2024
Loading thumbnail…

act6 question4

This bubble chart explores the correlation between a vehicle's torque, horsepower, and highway MPG. The chart uses `d3.scaleLinear` for the x and y axes and for bubble radius, with a `d3.scaleOrdinal` for color-coding by car make. Interactive tooltips appear on mouseover, implemented with D3's selection and event handling. A legend for the bubble size scale is also included. The visualization is rendered as an SVG and uses D3's `d3.csv` to load data from a local file.

Apr 5, 2024
Loading thumbnail…

activity 6 tutorial 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for different car makes. Each circle’s position is determined by its horsepower and torque values, while its size scales with highway MPG and its color indicates the car brand. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and SVG circles. Hovering over a bubble triggers a tooltip that displays the make, implemented with mouse event handlers and D3 transitions.

Apr 4, 2024
Loading thumbnail…

question 3.2

This example displays a scatter plot of iris flower measurements, encoding sepal length on the x-axis, petal length on the y-axis, and species as different symbols. It loads CSV data from a remote GitHub source via `fetch` and `csvParse`, then renders the chart using D3 v7 scales, axes, and shape legends. The visualization implements a modular architecture with separate ES6 modules for axes, scatter plot rendering, and legend, demonstrating reusable chart components.

Apr 4, 2024
Loading thumbnail…

question 3.1

This example displays the Iris dataset as a scatter plot of petal length against petal width, with each circle colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). It also encodes sepal length and sepal width as the `rx` and `ry` attributes on each circle, creating distorted ellipses. The code loads CSV data via `d3.csv`, uses `scaleLinear` for axes, and renders SVG circles and axes with `select`, `join`, `axisLeft`, and `axisBottom`.

Apr 4, 2024
Loading thumbnail…

activity 6 tutorial 3.2

This scatter plot displays iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis, with species indicated by different symbol shapes. The visualization uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and the `axisLeft`/`axisBottom` components. A custom shape legend explains the species encoding, while the data loads asynchronously from a remote CSV file and is parsed with `csvParse`. The chart dynamically resizes to fit the browser window.

Apr 4, 2024
Loading thumbnail…

activity 6 tutorial3

This chart displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each species assigned a distinct color. The visualization uses D3.v6, loading data via `d3.csv` and rendering marks as SVG circles. It employs `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Although sepal length and width are parsed, only petal dimensions are plotted, with species color encoded through a switch statement.

Apr 4, 2024
Loading thumbnail…

activity 6question 2

This stacked bar chart displays the distribution of movie ratings across five genres, segmenting each genre's total percentages into five rating ranges from "Below 5.0" to "Above 8.5". The visualization uses `d3.stack()` to aggregate the data, with `d3.scaleOrdinal` assigning distinct colors to each rating category. Horizontal bars are rendered using `d3.scaleBand` for genres and `d3.scaleLinear` for the percentage axis. Interactive tooltips, implemented with mouseover events, display the exact percentage for each rating segment when hovering, enhancing the data's readability. The chart is built with D3 v7 and rendered as SVG, using data from a CSV file.

Apr 4, 2024
Loading thumbnail…

tutorial2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar representing the percentage of films falling into five rating bands from "Below 5.0" to "Above 8.5." Hovering over a segment displays an exact percentage in a tooltip. The visualization uses D3 v7’s `d3.stack()` to aggregate the data, `d3.scaleBand()` for the categorical genre axis, and `d3.scaleLinear()` for the numeric percentage axis, rendering as SVG with interactive mouse events.

Apr 4, 2024
Loading thumbnail…

activity questi1 answer

This example shows a horizontal bar chart of population estimates for 20 countries in 2020, with each bar labeled by country name and population value formatted in billions. The chart uses React with D3 v5, where `scaleBand` positions countries along the vertical axis and `scaleLinear` maps population counts to bar widths. Data is loaded asynchronously from a CSV file via `d3.csv`, and the bars render as SVG rectangles with tooltips displaying the formatted population values. Custom `AxisBottom` and `AxisLeft` components generate the tick marks and labels.

Apr 4, 2024
Loading thumbnail…

activity 6 tutorial1

A horizontal bar chart displays 2020 population estimates for 30 countries, with green bars extending from a shared origin and blue axis lines. The visualization uses D3 scales (scaleBand and scaleLinear) to map country names and population values to SVG rectangles, with formatted tick labels converting billions from D3's SI notation. React components render the chart, loading data via d3.csv from a GitHub-hosted CSV file, and each bar includes a native SVG tooltip showing the population value on hover.

Apr 4, 2024
Loading thumbnail…

Question3 answer

This example displays two overlapping Buddha silhouettes rendered in black with white outlines, positioned against a floral background image. The visualization uses React to construct SVG path elements, with an array of numbers and cube calculations embedded in the JavaScript code. The rendering leverages ReactDOM to mount the component, while the SVG paths define the complex Buddha shapes through coordinate data, with transforms applied for scaling and translation.

Apr 4, 2024
Loading thumbnail…

activity 3

A nested set of overlapping SVG polygons forms a dense, colorful geometric field atop a large green background. The visualization uses React to render an SVG canvas, with the `App` component generating triangles via nested `map` calls on an array. Each polygon’s points, fill color, and rotation are randomly assigned using `Math.random()`, creating an abstract, chaotic composition. The code also includes a large static Buddha path, though it is not dynamically generated like the polygons.

Apr 4, 2024
Loading thumbnail…

question 3

A composition of randomly placed, semi-transparent polygons and circles, colored with varied RGB values, is overlaid on a large vector path that traces a complex, map-like shape. The SVG is rendered in React, mapping over an array of numbers to generate elements with randomized coordinates, sizes, and opacity, while a static path provides a central focal point. The visualization mixes deterministic and stochastic visual elements.

Apr 4, 2024