bhavithamanyam@gmail.com

@BhavithaManyam·13 public vizzes

Bhavitha Area Chart

An SVG area chart displays the top ten companies with the highest layoff counts, using a smoothed curve to emphasize the scale of job cuts across firms. The chart, built with D3 v5, applies a linear scale for counts and a band scale for company names, with the area filled in green beneath the curve. Data comes from an inline array of company names and their reported layoff numbers, while axes are rendered using d3.axisLeft and d3.axisBottom with grid lines.

Apr 24, 2024

Loading thumbnail…

Bhavitha pie chart

This visualization displays the top 10 store areas by sales as a pie chart, with each slice labeled by its sales value and a color-coded legend identifying each store area. The code loads CSV data from a gist, sorts it in descending order, and uses d3.pie and d3.arc to generate the chart. A d3.scaleOrdinal maps categorical colors to slices, while SVG text and legend elements render directly in the browser without additional frameworks.

Apr 24, 2024

Loading thumbnail…

Task 8-part 4

This bubble chart displays the correlation between average horsepower, average torque, and highway MPG across car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG, and color distinguishes the manufacturer. The visualization uses D3 v7 to append SVG elements, scales, axes, and a tooltip that reveals the car make on hover. A legend explains the bubble-size scale for MPG values, and all data comes from a CSV file loaded asynchronously.

Apr 15, 2024

Loading thumbnail…

task 8-part 3

This scatter plot visualizes iris flower measurements by plotting Student1 against Student2, with the Category of each flower encoded through different marker shapes. The visualization uses D3 v7's modular functions, including `scaleLinear` for the x and y axes, `scaleOrdinal` for shape encoding, and `symbol()` to generate the shape paths. A custom legend, built with `shapeLegend`, displays the shape-to-category mapping, while the `axes` module handles axis labeling and ticks. The data is loaded asynchronously from a CSV file hosted on GitHub, parsed with `csvParse`, and rendered as an SVG.

Apr 14, 2024

Loading thumbnail…

Fork of task 8-part 2

This stacked bar chart visualizes the impact of movie genre on ratings, showing the percentage distribution across five rating levels for each genre in the dataset. The chart uses the D3 v7 library to process data with `d3.stack()` and render SVG rectangles, with hover interactions displaying exact percentages via a custom tooltip. Ratings are encoded as stacked segments on a linear x-axis, while genres are positioned on a band scale y-axis, with an ordinal color scale distinguishing rating categories.

Apr 14, 2024

Loading thumbnail…

task 8

This visualization displays the population of ten countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Population data is loaded from a remote CSV file using d3.csv, with the population field parsed and scaled by a factor of 1000. The chart is rendered as an SVG using React components, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Axis components use d3 tick formatting with a custom function that converts values like "1.5G" to "1.5B". The bars include a native SVG title element for tooltips showing the formatted population value.

Apr 14, 2024

Loading thumbnail…

Activity 6

This bar chart displays the population of 30 countries for the year 2020, sorted alphabetically along the y-axis with the population magnitude mapped to the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` via React components, rendering SVG rectangles that include tooltips showing the population value. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function and formatted with `d3.format`. The chart includes styled axes with blue tick lines and Poppins typography.

Apr 14, 2024

Loading thumbnail…

Task 8-part 4

This example demonstrates a minimal setup for building a D3.js visualization within the VizHub framework. It loads D3 v5 from UNPKG and uses the `select` function to target a specific HTML element, setting its text content to a message imported from a local ES6 module. The page renders a centered message with large font styling defined in a separate CSS file, showcasing how to combine external libraries, local modules, and custom styles in a single project.

Apr 14, 2024

Loading thumbnail…

bubblechart

This example displays a simple text message, “Hello VizHub!”, centered on the page in large type. It demonstrates fundamental VizHub workflow patterns by loading D3 from a CDN via UNPKG, importing the `select` function from D3, and importing a local ES6 module from `myMessage.js` to supply the displayed string. The code uses D3’s `select` method to set the text content of a designated `div` element, with styling applied through an external CSS file.

Apr 14, 2024

Loading thumbnail…

task 8

This example demonstrates how VizHub integrates D3.js and local ES6 modules to render a simple message. The visualization displays the text "Hello VizHub!" prominently in the center of the page, styled via CSS. The code imports the `select` function from D3 to target the message div and uses message.js to supply the text content. D3 is loaded via UNPKG, and the example highlights the use of ES6 module imports and regular expressions in a minimal setup.

Apr 14, 2024

Loading thumbnail…

Fork of 5 buddhas

A generative SVG artwork depicts a dense field of overlapping diamond shapes, each filled with randomized RGB colors and rotated on a black background. Built with React and rendered through SVG polygon elements, the piece creates a chaotic, colorful mosaic. The composition is layered over a single large Buddha figure drawn as an SVG path, which emerges subtly from the geometric noise.

Apr 2, 2024

Loading thumbnail…

Fork of 5 Buddhas

Fork of 5 Buddhas superimposes multiple layered Buddha silhouettes, rendered as black SVG paths with scattered colored circles floating across a dark background. The visualization uses React to map a nested array structure, generating hundreds of semi-transparent circles with random RGB colors, positions, and opacity values. Each circle is drawn via React’s SVG `circle` element, while the Buddha outlines are static SVG `path` data transformed and scaled. The code relies on ReactDOM for rendering and pure JavaScript math with `Math.random()` to create the stochastic distribution, producing a chaotic, generative composition over the traditional figure.

Apr 2, 2024

Loading thumbnail…

Fork of Five Buddhas

An overlapping Buddha silhouette rendered in black, composed of hundreds of semi-transparent colored circles scattered randomly across a 960×1000 SVG canvas. The circles vary in RGB color and opacity, creating a dense, pixelated texture that obscures the underlying sacred figure. Built with React and ReactDOM, the visualization maps over a 21-element array to generate each circle’s position and color using Math.random(), while the Buddha path is drawn with an SVG path element scaled and translated into place.

Apr 2, 2024