bhavanadupati3@gmail.com

@bhanudupati·17 public vizzes

Activity 7 Q2

This area chart visualizes the relationship between students and their total marks, with a gradient-filled region under the line emphasizing the distribution. The code loads a CSV dataset via `d3.csv`, parses the numeric fields, and renders the chart using SVG elements. It constructs linear scales with `d3.scaleLinear` for both axes, generates the area path with `d3.area`, and applies a custom `linearGradient` for the fill. Axis labels clarify the plot’s dimensions, and the chart is styled with the supplied CSS.

Nov 7, 2024

Loading thumbnail…

Activity-7 Q1

This pie chart visualizes tennis players’ overall ratings, with each slice representing a player and labeled with their name and rating. The chart includes a color-coded legend and an interactive tooltip that displays each player’s average score on hover. The visualization loads CSV data from a GitHub gist and uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate and style the SVG elements with mouse event handlers.

Nov 7, 2024

Loading thumbnail…

Fork of Activity 7.1

This animated scatter plot displays the Iris dataset, using D3 v6 to cycle through different feature pairings on the x-axis every few seconds. The visualization, rendered as SVG, maps sepal and petal measurements to point positions, with species color-coded (sky blue, light green, and orange). It demonstrates a reusable scatter plot module, using functions like `scaleLinear`, `extent`, and `axisLeft` from D3, while the `setInterval` timer updates the displayed columns, with axis labels and legend text reflecting the current selection.

Nov 6, 2024

Loading thumbnail…

Activity 7.1

This example demonstrates how to build a simple VizHub project by loading D3 v5 from a CDN and importing local ES6 modules. It displays the text “Hello VizHub!” centered in a large font using the `d3.select` API to set the content of an HTML div element. The code uses `import { select } from 'd3'` and a custom module `myMessage.js` to export the message string, showing basic module composition. The page is styled with a CSS file that centers the message and sets its font size. The visualization is minimal, focusing on tooling and module patterns rather than data rendering.

Nov 6, 2024

Loading thumbnail…

Task2Q1

This example uses a stacked bar chart to compare performance metrics (horsepower, torque, and highway MPG) across seven car makes from a CSV file. Built with D3 v7, it loads data via `d3.csv`, formats values with `d3.format`, and renders SVG bars using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Segments are colored via `d3.scaleOrdinal`, and interactive tooltips reveal exact values on hover using D3's event handlers.

Oct 22, 2024

Loading thumbnail…

Activity 6 T3Q1

This example visualizes the classic Iris dataset with an interactive scatter plot mapping sepal length against petal length. The code loads data from a CSV file via `d3.csvParse` and represents species using different symbols from `d3.symbol` and `d3.scaleOrdinal`. SVG elements are bound to data using D3 v6 joins, with axes generated via `d3.axisLeft` and `d3.axisBottom`. A custom shape legend displays the three species categories, while the overall layout and styling are handled through D3 selections and CSS.

Oct 22, 2024

Loading thumbnail…

Activity_6 T3

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and encoding species identity through distinct point shapes. The visualization uses D3 v7's scaleLinear, scaleOrdinal, and symbolsFill APIs to construct the axes and shape-based legend. Data is loaded from a remote CSV file via csvParse and rendered into SVG paths using the symbol generator. The example demonstrates modular code organization with local ES6 modules for axes, scatter plot, and shape legend components.

Oct 22, 2024

Loading thumbnail…

Activity_6 Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width onto the x and y axes, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization is built with D3.js v6, using `d3.csv` to load data, `d3.scaleLinear` to create scales, and `axisLeft`/`axisBottom` for axes. The SVG rendering uses circle marks, with each point’s radius fixed at 5 pixels.

Oct 22, 2024

Loading thumbnail…

Fork of Activity_6 Question2

This example visualizes the percentage of movie ratings by genre using a stacked horizontal bar chart. Each bar segment represents a genre, with colors mapping to categories like Comedy or Drama, and hover interactions reveal precise percentages. Built with D3 v7, the chart utilizes `d3.stack` to compose the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rendering. The tooltip is implemented with a custom HTML div, while styling comes from a Google Fonts import.

Oct 22, 2024

Loading thumbnail…

Activity_6 Question2

This example demonstrates a minimalist web page that displays the text "Hello VizHub!" centered and enlarged via CSS. It shows how to integrate D3.js into a project by importing the `select` function from the library and using it to set the text content of a DOM element. The code also highlights the use of local ES6 modules, with a separate `myMessage.js` file exporting the message string. The page loads D3 from a CDN and references a local stylesheet, illustrating a basic setup for modular, D3-based web development.

Oct 22, 2024

Loading thumbnail…

Activity_6 Task2

This stacked bar chart displays the percentage distribution of IMDb rating levels across six movie genres, with each bar segmented to show the proportion of ratings below 5.0 through above 8.5. Hovering over a bar segment reveals a tooltip with the exact percentage for that genre and rating category. Built with D3 v7 using SVG rendering, the visualization employs the `d3.stack()` function to generate stacked data, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Data comes from a local CSV file with pre-aggregated percentages per genre.

Oct 22, 2024

Loading thumbnail…

Activity_6 Q2

A horizontal bar chart ranks 30 countries by their 2020 population, using light green bars with blue tick marks and gray labels on a white SVG canvas. The React app loads data from a CSV URL via `d3.csv`, maps the population values, and renders the chart with `d3.scaleBand` and `d3.scaleLinear` scales. The x-axis formats tick values using `d3.format` to abbreviate large numbers, converting G to B, while tooltips show the formatted population on hover. The layout uses fixed margins and a bottom axis label "POPULATION-2020," leveraging D3 v5 within a React component structure.

Oct 22, 2024

Loading thumbnail…

Fork of Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

Oct 22, 2024

Loading thumbnail…

Activity_6 Q1

This example displays a simple “Hello VizHub!” message centered on the page using D3’s `select` method to set the text content of a `div` element. It demonstrates how to import D3 functions and local ES6 modules, with the message defined in a separate `myMessage.js` module. The visualization relies on D3 v5 loaded via UNPKG and uses a CSS stylesheet for large, centered typography. The code also includes a regular expression and a constant variable, but these do not affect the displayed output.

Oct 21, 2024

Loading thumbnail…

Activity 6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted along a linear scale. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for bars. Data is loaded via `d3.csv` from a GitHub-hosted CSV, with population values formatted using `d3.format`.

Oct 21, 2024

Loading thumbnail…

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

A colorful SVG visualization displays a Buddha silhouette as a complex path, repeated in overlapping layers with violet strokes and a white outline. Built with React and ReactDOM, the component renders the path data multiple times, scaled and translated over a photographic background image of flowers. The code uses React's JSX syntax to construct SVG elements, with hardcoded path coordinates defining the Buddha's form, creating a layered, semi-transparent effect against the dark backdrop.

Oct 18, 2024

Loading thumbnail…

5 Budhas

Five colorful triangular Buddha-like shapes overlap against a black background, each rendered as a rotated polygon with randomized coordinates and vibrant fill colors. The visualization uses React to generate a three-level nested loop that produces numerous diamonds, alongside a detailed SVG path depicting a Buddha figure. The page applies CSS for the dark backdrop and renders everything as scalable vector graphics, with the Buddha path transformed and scaled for positioning. The code runs in a React production environment with SVG elements defined directly in the component.

Oct 15, 2024